/*
Theme Name: Pacific Tide Media
Theme URI: https://pacifictidemedia.com
Author: Pacific Tide Media
Author URI: https://pacifictidemedia.com
Description: Ocean / starfield brand theme for Pacific Tide Media. Includes an animated homepage and a Contact Form 7 powered contact page. Converted from the original HTML design.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pacific-tide-media
*/

/* ====================================================================
   BASE
   ==================================================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #0a1a2e;
}
body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
::placeholder { color: rgba(255,255,255,.4); }

/* ====================================================================
   ANIMATIONS  (ported verbatim from the original design)
   ==================================================================== */
@keyframes ptm-twinkle { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes ptm-bounce  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes ptm-fade    { from { transform: translateY(16px); } to { transform: translateY(0); } }
@keyframes ptm-swim {
  0%   { transform: translate(-14vw,0); }
  25%  { transform: translate(18vw,9px); }
  50%  { transform: translate(50vw,-7px); }
  75%  { transform: translate(82vw,9px); }
  100% { transform: translate(114vw,0); }
}
/* Brief, infrequent flash — invisible for the vast majority of each cycle so
   the hero reads as a calm starfield with only the occasional shooting star. */
@keyframes ptm-shoot {
  0%    { opacity: 0; transform: translate(0,0) rotate(24deg) scaleX(.3); }
  1%    { opacity: 1; }
  2.5%  { opacity: 1; transform: translate(180px,80px) rotate(24deg) scaleX(1); }
  4%    { opacity: 0; transform: translate(230px,102px) rotate(24deg) scaleX(1); }
  100%  { opacity: 0; transform: translate(230px,102px) rotate(24deg) scaleX(1); }
}

/* ====================================================================
   NAV  (hover state — inline styles handle the rest)
   ==================================================================== */
.ptm-nav a { transition: color .2s; }
.ptm-brand:focus, .ptm-nav a:focus { outline: none; }
.ptm-getintouch { transition: gap .2s; }
.ptm-getintouch:hover { gap: 16px; }
.ptm-email-link:hover { border-color: #36B9A6; }
.ptm-social a:hover { color: #fff !important; }

/* ====================================================================
   CONTACT FORM 7  — style CF7's default markup to match the design.
   Works with the recommended form template (see README / theme notes),
   but also degrades gracefully for any CF7 form placed inside .ptm-form-wrap.
   ==================================================================== */
.ptm-form-wrap { margin-top: 38px; text-align: left; }

.ptm-form-wrap .wpcf7-form p { margin: 0 0 18px; }

.ptm-form-wrap input[type="text"],
.ptm-form-wrap input[type="email"],
.ptm-form-wrap input[type="tel"],
.ptm-form-wrap input[type="url"],
.ptm-form-wrap textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 4px;
  outline: none;
  transition: border-color .2s;
}
.ptm-form-wrap textarea { resize: none; }

.ptm-form-wrap input[type="text"]:focus,
.ptm-form-wrap input[type="email"]:focus,
.ptm-form-wrap input[type="tel"]:focus,
.ptm-form-wrap input[type="url"]:focus,
.ptm-form-wrap textarea:focus {
  border-bottom: 1px solid #36B9A6;
}

.ptm-form-wrap input[type="submit"],
.ptm-form-wrap .wpcf7-submit {
  margin-top: 8px;
  background: #36B9A6;
  color: #06231c;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 14px 30px;
  border-radius: 999px;
  transition: transform .15s;
}
.ptm-form-wrap input[type="submit"]:hover,
.ptm-form-wrap .wpcf7-submit:hover { transform: translateY(-2px); }

/* CF7 ajax spinner */
.ptm-form-wrap .wpcf7-spinner { background-color: #36B9A6; }

/* CF7 response / validation messages */
.ptm-form-wrap .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(54,185,166,.5) !important;
  border-radius: 10px;
  color: #36B9A6;
  font-size: 15px;
  letter-spacing: .3px;
}
.ptm-form-wrap .wpcf7-not-valid-tip {
  color: #ff8a80;
  font-size: 13px;
  margin-top: 6px;
}
.ptm-form-wrap form.invalid .wpcf7-response-output,
.ptm-form-wrap form.unaccepted .wpcf7-response-output,
.ptm-form-wrap form.failed .wpcf7-response-output {
  color: #ff8a80;
  border-color: rgba(255,138,128,.5) !important;
}

/* ====================================================================
   BIG ROGUE WAVE  — Easter-egg-ish swell that rises every ~30s
   ==================================================================== */
.ptm-bigwave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  pointer-events: none;
  z-index: 4;
  transform: translateY(102%);
  will-change: transform;
  animation: ptm-bigwave 31s ease-in-out 12s infinite;
}
@keyframes ptm-bigwave {
  0%, 8%   { transform: translateY(102%); }   /* hidden below the surface */
  16%      { transform: translateY(34%); }    /* surge up */
  22%      { transform: translateY(46%); }    /* crest wobble */
  30%      { transform: translateY(102%); }   /* recede */
  100%     { transform: translateY(102%); }   /* calm for the rest of the cycle */
}

/* ====================================================================
   EASTER EGG: click the moon  → a brief wish of shooting stars
   ==================================================================== */
#ptm-moon.ptm-moon-pulse {
  transform: scale(1.06);
  box-shadow: 0 0 130px 60px rgba(245,233,194,.7);
}
.ptm-egg-shoot {
  position: absolute;
  width: 90px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  box-shadow: 0 0 6px rgba(255,255,255,.7);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  animation: ptm-egg-shoot 1.4s ease-in forwards;
}
@keyframes ptm-egg-shoot {
  0%   { opacity: 0; transform: translate(0,0) rotate(24deg) scaleX(.3); }
  10%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(220px,98px) rotate(24deg) scaleX(1); }
  100% { opacity: 0; transform: translate(280px,124px) rotate(24deg) scaleX(1); }
}

/* ====================================================================
   EASTER EGG: Konami code (↑↑↓↓←→←→ B A) → a whale surfaces & dives
   ==================================================================== */
.ptm-whale {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(180px, 30vw, 340px);
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, 120%);
  animation: ptm-whale 8s ease-in-out forwards;
}
@keyframes ptm-whale {
  0%   { transform: translate(-50%, 120%) rotate(-5deg); opacity: 0; }
  14%  { opacity: 1; }
  26%  { transform: translate(-50%, 26%) rotate(-2deg); }
  60%  { transform: translate(-50%, 20%) rotate(3deg); }
  82%  { transform: translate(-50%, 30%) rotate(-2deg); opacity: 1; }
  100% { transform: translate(-50%, 120%) rotate(-6deg); opacity: 0; }
}
.ptm-whale .ptm-spout {
  transform-origin: bottom center;
  animation: ptm-spout 8s ease-in-out forwards;
  opacity: 0;
}
@keyframes ptm-spout {
  0%, 24%  { opacity: 0; transform: scaleY(0); }
  34%      { opacity: .9; transform: scaleY(1); }
  54%      { opacity: .5; transform: scaleY(1.15); }
  64%, 100%{ opacity: 0; transform: scaleY(0); }
}

/* ====================================================================
   EASTER EGG: triple-tap the wordmark → a sunrise breaks, then sets
   ==================================================================== */
.ptm-dawn-overlay {
  position: absolute;
  inset: 0;
  z-index: 3; /* over the night sky, under the wordmark (z-index:6) */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(180deg,
    #1a2342 0%, #44375f 26%, #b15c57 52%, #e98a55 70%, #f6b56a 84%, #ffe2ab 100%);
  animation: ptm-dawn 7s ease-in-out forwards;
}
@keyframes ptm-dawn {
  0%        { opacity: 0; }
  20%       { opacity: 1; }
  74%       { opacity: 1; }
  100%      { opacity: 0; }
}
.ptm-dawn-overlay .ptm-sun {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: clamp(120px, 18vw, 210px);
  height: clamp(120px, 18vw, 210px);
  border-radius: 50%;
  transform: translate(-50%, 120%);
  background: radial-gradient(circle at 50% 45%, #fff7e0 0%, #ffe9a8 42%, #ffb867 72%, rgba(255,184,103,0) 100%);
  box-shadow: 0 0 120px 50px rgba(255,200,120,.55);
  animation: ptm-sunrise 7s ease-in-out forwards;
}
@keyframes ptm-sunrise {
  0%   { transform: translate(-50%, 120%); }
  26%  { transform: translate(-50%, 0); }
  68%  { transform: translate(-50%, -6%); }
  100% { transform: translate(-50%, 120%); }
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 600px) {
  .ptm-header-inner { padding: 16px 20px !important; }
  .ptm-brand { font-size: 11px !important; letter-spacing: 2px !important; }
  .ptm-nav { gap: 20px !important; }
  .ptm-nav a { font-size: 11px !important; letter-spacing: 2px !important; }

  /* Hero wordmark: wrap instead of running under the nav / off-screen. */
  #ptm-sky { padding-top: 30vh !important; }
  .ptm-wordmark h1 {
    white-space: normal !important;
    font-size: clamp(30px, 11vw, 46px) !important;
    letter-spacing: 6px !important;
    line-height: 1.18 !important;
  }
  .ptm-wordmark p { font-size: 11px !important; letter-spacing: 4px !important; }
}