/* ============ DESIGN TOKENS ============
   Brand palette — exactly four colors, used everywhere for
   backgrounds, gradients, borders and accents:
     --icy    #D9F1FF  Icy Blue     (water / sky / cool base)
     --blush  #F7CADF  Baby Pink    (sunset accent)
     --coral  #FFD5B8  Pastel Orange (primary accent / CTAs)
     --sun    #FFF3B2  Butter Yellow (warm glow accent)

   --ink is the one necessary exception: a dark neutral used
   ONLY for text and iconography, since all four brand colors
   are too light on their own to give body copy readable
   contrast. It's not treated as a "color" in the palette —
   just ink on pastel paper. */
:root{
  --icy:    #D9F1FF;
  --blush:  #F7CADF;
  --coral:  #FFD5B8;
  --sun:    #FFF3B2;

  --ink:      #33291F;
  --ink-soft: rgba(51,41,31,.7);
  --ink-faint:rgba(51,41,31,.5);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  /* Brand script — Kapakana Regular, loaded as a real webfont from Google
     Fonts. Renders identically on every device. */
  --font-brand-script: 'Kapakana', cursive;
}

/* ============ RESET ============ */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--body);
  background: var(--icy);
  color: var(--ink);
  overflow-x:hidden;
}

a{ color:inherit; }

/* ============ WAVE FALLBACK BACKGROUND ============ */
.wave-fallback{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, var(--icy) 0%, var(--blush) 60%, var(--coral) 100%);
}

.wave-fallback svg{
  position:absolute;
  bottom:0; left:0;
  width:130%;
  height:60%;
  display:block;
}

.wave-a, .wave-b, .wave-c{
  transform-origin: center bottom;
}

@media (prefers-reduced-motion: no-preference){
  .wave-a{ animation: drift 14s ease-in-out infinite; }
  .wave-b{ animation: drift 19s ease-in-out infinite reverse; }
  .wave-c{ animation: drift 25s ease-in-out infinite; }
}

@keyframes drift{
  0%, 100%{ transform: translateX(0) scaleY(1); }
  50%{ transform: translateX(-2.5%) scaleY(1.04); }
}

/* ============ WORDMARK + NAV ============ */
.wordmark{
  font-family: var(--font-brand-script);
  font-weight:400;
  font-style:normal;
  font-size:1.75rem;
  letter-spacing:normal;
  color: var(--ink);
  text-decoration:none;
  white-space:nowrap;
}

/* ============ SCROLL REVEAL ============ */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}
[data-reveal].in-view{
  opacity:1;
  transform:translateY(0);
}

/* ============ FOOTER ============ */
footer{
  text-align:center;
  padding: 40px 24px 60px;
  font-size:.72rem;
  letter-spacing:.08em;
  color: var(--ink-faint);
  background: var(--icy);
}

/* ============ INTRO / KINETIC LOGO ============ */

.intro{
  position:relative;
  height:100vh;
  min-height:600px;
  width:100%;
  overflow:hidden;
  background: linear-gradient(180deg, var(--icy) 0%, var(--blush) 55%, var(--coral) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Soft warm glow behind the wordmark — the one radial accent on this page */
.intro::before{
  content:'';
  position:absolute;
  top:38%; left:50%;
  width:520px; height:520px;
  background: radial-gradient(circle, var(--sun) 0%, transparent 70%);
  transform:translate(-50%,-50%);
  opacity:.55;
  pointer-events:none;
}

.intro .wordmark{
  position:absolute;
  top:32px; left:32px;
  z-index:4;
}

.intro-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 32px 24px;
  max-width:1000px;
}

.intro-eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--ink-soft);
  margin-bottom:30px;
  opacity:0;
}

.intro-content.in-view .intro-eyebrow{
  animation: rise .9s .15s ease forwards;
}

/* ---- Kinetic wordmark reveal — each letter fades/rises in like a tile ---- */
.brand-logo-wrap{
  transform-origin:center;
}

.brand-logo{
  display:block;
  text-align:center;
  white-space:nowrap;
  font-family: var(--font-brand-script);
  font-weight:400;
  font-style:normal;
  font-size: clamp(2.6rem, 9.5vw, 7.6rem);
  letter-spacing:normal;
  color:var(--ink);
  line-height:1;
  transform-origin:center;
  opacity:0;
  transform:translateY(30px);
}

.intro-content.in-view .brand-logo{
  animation: logoRise .95s .35s cubic-bezier(.16,.84,.44,1) forwards;
}

@keyframes logoRise{
  to{ opacity:1; transform:translateY(0); }
}

.logo-underline{
  width:0;
  height:3px;
  border-radius:2px;
  background: var(--coral);
  margin:28px auto 0;
}

.intro-content.in-view .logo-underline{
  animation: underlineDraw .7s 1.05s ease forwards;
}

@keyframes underlineDraw{
  to{ width:96px; }
}

.intro-message{
  margin-top:28px;
  max-width:520px;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ink-soft);
  line-height:1.55;
  opacity:0;
}

.intro-content.in-view .intro-message{
  animation: rise 1s 1.25s ease forwards;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .intro-eyebrow, .brand-logo, .logo-underline, .intro-message,
  .intro-content.in-view .intro-eyebrow,
  .intro-content.in-view .brand-logo,
  .intro-content.in-view .logo-underline,
  .intro-content.in-view .intro-message{
    animation:none;
    opacity:1;
    transform:none;
    width:auto;
  }
  .logo-underline, .intro-content.in-view .logo-underline{ width:96px; }
}

.scroll-cue{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  color: var(--ink-soft);
  font-family:var(--body);
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.9;
}

.scroll-cue svg{ width:14px; height:20px; }

@media (prefers-reduced-motion: no-preference){
  .scroll-cue svg{ animation: bob 2s ease-in-out infinite; }
}

@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

@media (max-width:480px){
  .intro .wordmark{ top:22px; left:22px; }
}

/* ============ SIGNUP ============ */

.signup{
  background: linear-gradient(180deg, var(--coral) 0%, var(--sun) 32%, var(--icy) 78%);
  padding: 140px 24px 100px;
  display:flex;
  justify-content:center;
}

.signup-inner{
  width:100%;
  max-width:480px;
  text-align:center;
}

.signup-eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--ink);
  font-weight:600;
  margin-bottom:18px;
}

.signup-title{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--ink);
  line-height:1.15;
  margin-bottom:16px;
}

.signup-sub{
  font-size:.98rem;
  color: var(--ink-soft);
  line-height:1.6;
  max-width:380px;
  margin:0 auto 46px;
}

form{
  display:flex;
  flex-direction:column;
  gap:30px;
  text-align:left;
}

.cf-turnstile{
  align-self:center;
}

.field{ position:relative; }

.field input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom: 1.5px solid rgba(51,41,31,.25);
  padding: 12px 2px 10px;
  font-family:var(--body);
  font-size:1rem;
  color: var(--ink);
  outline:none;
  transition: border-color .3s ease;
}

.field input:focus{ border-bottom-color: var(--ink); }

.field label{
  position:absolute;
  left:2px; top:12px;
  font-size:1rem;
  color: var(--ink-faint);
  letter-spacing:.01em;
  pointer-events:none;
  transition: transform .25s ease, font-size .25s ease, color .25s ease;
  transform-origin:left top;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform: translateY(-20px);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--ink);
}

.field-line{
  position:absolute;
  left:0; bottom:0;
  height:1.5px;
  width:0;
  background: var(--coral);
  transition: width .35s ease;
}

.field input:focus ~ .field-line{ width:100%; }

.submit-btn{
  margin-top:14px;
  align-self:center;
  position:relative;
  padding: 15px 44px;
  background: var(--coral);
  color: var(--ink);
  border:none;
  border-radius: 999px;
  font-family:var(--body);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .35s ease;
}

.submit-btn:hover{
  background: var(--blush);
  box-shadow: 0 10px 24px rgba(51,41,31,.18);
  transform:translateY(-1px);
}

.submit-btn:active{ transform:translateY(0); }

.submit-btn:focus-visible,
.field input:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.privacy-note{
  margin-top:20px;
  font-size:.74rem;
  color: var(--ink-faint);
  letter-spacing:.02em;
}

.success-msg{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 8px 0 4px;
}

.success-msg.show{ display:flex; }

.success-msg .check{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--coral);
  display:flex; align-items:center; justify-content:center;
}

.success-msg p{
  font-family:var(--display);
  font-style:italic;
  font-size:1.2rem;
  color: var(--ink);
}

form.submitted{ display:none; }

@media (max-width: 480px){
  .signup{ padding:90px 20px 80px; }
}