/*
Theme Name: Tank Perspective — Coming Soon
Theme URI: https://thetankperspective.com/
Description: Temporary coming-soon landing page for The Tank Perspective. Collects email signups directly (no external newsletter provider needed) and redirects all traffic to a single landing page. Switch back to your main child theme when you're ready to launch.
Version: 1.0.0
Author: The Tank Perspective
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tp-coming-soon
Tags: coming-soon, landing-page, one-page, custom-colors
*/

/* ============================================================
   Design tokens — matched to main theme (video-measured palette)
   ============================================================ */
:root{
  --ink:#121110;
  --sub-yellow:#F5CE45;         /* warm golden yellow — video subtitle vibe, not neon */
  --ocean-top:#70FDF2;          /* your turquoise at top (surface) */
  --ocean-bottom:#1E6FA8;       /* deep marine blue at bottom (depth) */
  --ocean-glow:rgba(255,255,255,.22); /* light glow like sunlight through water */ /* soft light glow */

  --room-100:#FFF7E6;
  --room-200:#FBD47F;
  --room-300:#C98A45;

  --water-500:#1E4446;
  --water-400:#2B8F89;
  --water-300:#48C7BA;
  --water-100:#7DFAD9;

  --fish-orange:#E6A359;
  --fish-gold:#F3C25A;

  --text:#2A2118;
  --text-2:#5C4A3A;
  --text-3:#8A7563;

  --fd:'Comic Neue',ui-rounded,system-ui,sans-serif;
  --fs:'Comic Neue',system-ui,sans-serif;
  --ft:'Comic Neue',system-ui,sans-serif;
}

/* ============================================================
   Reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--fs);
  color:var(--ink);
  background:var(--ocean-bottom);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}

/* ============================================================
   Layout — full-viewport centered
   ============================================================ */
.cs-main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 20px 100px;
  position:relative;
  background:
    radial-gradient(circle at 22% 12%, var(--ocean-glow), transparent 55%),
    linear-gradient(180deg, var(--ocean-top) 0%, var(--ocean-bottom) 100%);
  overflow:hidden;
}

.cs-inner{
  max-width:640px;
  width:100%;
  text-align:center;
  position:relative;
  z-index:3;
}

/* ============================================================
   Logo — rounded, ink-bordered, hard-shadow (matches main site)
   ============================================================ */
.cs-logo{
  width:clamp(96px,14vw,124px);
  height:clamp(96px,14vw,124px);
  margin:0 auto 36px;
  border:3px solid var(--ink);
  border-radius:50%;
  box-shadow:5px 5px 0 var(--ink);
  overflow:hidden;
  background:#fff;
}
.cs-logo img,
.cs-logo picture{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cs-logo picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.35);  /* zoom in so fish fills circle */
  transform-origin:center 55%; /* slightly below center for the fish body */
}

/* ============================================================
   Headline + highlight
   ============================================================ */
.cs-brand{
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(15px,1.8vw,17px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 14px;
}

.cs-headline{
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(38px,5.8vw,64px);
  line-height:1.05;
  margin:0 0 26px;
  color:#FFFFFF;
  -webkit-text-stroke:0.07em var(--ink);
  paint-order:stroke fill;
  letter-spacing:-.005em;
  text-shadow:0.03em 0.05em 0 rgba(0,0,0,.35);
}

.cs-hi{
  display:inline-block;
  color:var(--sub-yellow);
  -webkit-text-stroke:0.07em var(--ink);
  paint-order:stroke fill;
  padding:0 0.06em;
  white-space:nowrap;
}

.cs-lead{
  font-size:clamp(16px,1.7vw,18.5px);
  line-height:1.6;
  color:#1A2E2D;
  max-width:520px;
  margin:0 auto 30px;
}

.cs-signal{
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(17px,2vw,21px);
  line-height:1.35;
  color:var(--ink);
  margin:0 auto 22px;
  max-width:480px;
}

/* ============================================================
   Form
   ============================================================ */
.cs-form{
  margin:0 auto 22px;
  max-width:520px;
}
.cs-form-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cs-form input[type="email"]{
  flex:1 1 220px;
  min-width:200px;
  padding:14px 18px;
  font-family:var(--fs);
  font-size:16px;
  border:3px solid var(--ink);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  outline:none;
  transition:transform .08s ease,box-shadow .15s ease;
}
.cs-form input[type="email"]:focus{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}
.cs-form input[type="email"]::placeholder{
  color:var(--text-3);
}

/* Honeypot — hidden from users, but bots often fill it */
.cs-honey{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.cs-form-note{
  font-size:13px;
  color:var(--ink);
  opacity:.65;
  margin:14px 0 0;
  text-align:center;
}

/* ============================================================
   Buttons
   ============================================================ */
.cs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  font-family:var(--fd);
  font-weight:700;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;
  transition:transform .08s ease,box-shadow .15s ease;
  white-space:nowrap;
}
.cs-btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}
.cs-btn:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.cs-btn-primary{
  background:var(--sub-yellow);
  color:var(--ink);
}
.cs-btn-yt{
  background:#FF0000;
  color:#FFFFFF;
  font-weight:900;
  -webkit-text-stroke:0.03em #FFFFFF;
  paint-order:stroke fill;
  letter-spacing:.08em;
}

/* Secondary link row */
.cs-secondary{
  margin:28px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.cs-or{
  font-family:var(--fd);
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.55;
}


/* YouTube play icon inside the button */
.cs-btn-yt{padding-left:16px;gap:10px}
.cs-yt-icon{
  width:26px;
  height:19px;
  flex:none;
  display:block;
}

/* Cursor arrow — decorative, points at the YouTube button */
.cs-yt-wrap{
  position:relative;
  display:inline-block;
}
.cs-cursor{
  position:absolute;
  right:-18px;
  bottom:-16px;
  width:34px;
  height:42px;
  pointer-events:none;
  z-index:5;
  transform:rotate(-8deg);
  filter:drop-shadow(1px 2px 0 rgba(0,0,0,.25));
}

/* ============================================================
   Flash messages
   ============================================================ */
.cs-flash{
  padding:14px 20px;
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  margin:0 auto 24px;
  max-width:520px;
  font-family:var(--fd);
  font-weight:700;
  font-size:15px;
  line-height:1.35;
  color:var(--ink);
}
.cs-flash-success{background:#B8E9A8}
.cs-flash-duplicate{background:var(--room-200)}
.cs-flash-invalid,
.cs-flash-error{background:#F5B0A0}

/* ============================================================
   Decorative fish (bottom right, small screens hide)
   ============================================================ */
.cs-deco{
  position:absolute;
  bottom:5%;
  right:6%;
  width:clamp(90px,11vw,140px);
  transform:rotate(-8deg);
  opacity:.7;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.cs-deco img,
.cs-deco picture{width:100%;height:auto;display:block}
@media (max-width:720px){
  .cs-deco{
    bottom:2%;
    right:4%;
    width:80px;
    opacity:.6;
  }
}

/* ============================================================
   Footer credit (very small, unobtrusive)
   ============================================================ */
.cs-footer-credit{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--fs);
  font-size:12px;
  color:var(--ink);
  opacity:.6;
  z-index:2;
  text-align:center;
  padding:0 20px;
}
.cs-footer-credit a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1.5px solid rgba(0,0,0,.3);
}
.cs-footer-credit a:hover{
  border-bottom-color:var(--ink);
}

/* ============================================================
   Reduce motion for users who prefer it
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
}