/* ==========================================================================
   RESET — Validation Experience
   Design tokens pulled from 04_brand_standards + 02_design_principle.
   Fonts are free stand-ins for the licensed Adobe Fonts kit — see README.
   ========================================================================== */

:root {
  /* --- Brand palette (from brand standards board) --- */
  --teal:        #6FB8BC;   /* primary */
  --mint:        #83C8CD;   /* secondary / light accent */
  --teal-deep:   #3E8388;   /* derived — hero scrim + hover states */
  --ink:         #231F20;   /* near-black, body text */
  --stone:       #C9C9C9;   /* dividers, disabled */
  --fog:         #F2F9F9;   /* whisper-tint background, keeps white space from feeling sterile */
  --white:       #FFFFFF;

  /* --- Type ---
     Brand preference (approved): Gotham Rounded > Gotham > Helvetica Rounded > Helvetica.
     Neither Gotham face is a free web font — this stack resolves to real Helvetica on
     Apple devices and Arial elsewhere, i.e. items 3–4 on that list. Swap in the licensed
     Gotham Rounded webfont when available (see README). The script treatment on
     "begin" / "Thank You" now comes from the real logo assets, not a font. */
  --font-display: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Mulish', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Rhythm --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --radius: 18px;
  --ease: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 var(--space-sm); }
p { line-height: 1.6; margin: 0 0 var(--space-sm); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

/* ==========================================================================
   Screen mechanics — one primary action, no scrolling required
   ========================================================================== */
#app { position: relative; width: 100%; }

.screen {
  display: none;
  min-height: 100dvh;
  width: 100%;
  position: relative;
}
.screen--active {
  display: flex;
  flex-direction: column;
  animation: screen-in 480ms var(--ease);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .screen--active { animation: none; }
}

/* ==========================================================================
   1. Opening screen  /  2. RESET Moment
   Both use the same portrait-frame layout: full-bleed on phones (where the
   frame's 9:16 shape already matches the viewport), centered as a portrait
   panel on wider screens per the approved brief ("desktop should reuse the
   portrait experience"), with the seafoam texture as ambient backdrop.
   ========================================================================== */
.hero-media {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--teal-deep);
}
.hero-backdrop {
  position: absolute; inset: 0;
  background-image: url('assets/img/seafoam-texture.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(50px) brightness(.55) saturate(1.1);
  transform: scale(1.15); /* keeps the blur from revealing its own edges */
}
.hero-frame {
  position: relative;
  height: 100dvh;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--teal-deep);
}
@media (min-width: 720px) {
  .hero-frame {
    max-height: 92dvh;
    margin-top: 4dvh;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
  }
}
.frame-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.frame-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,31,32,.10) 0%, rgba(35,31,32,.08) 45%, rgba(35,31,32,.55) 100%);
}
.hero-frame.is-settling { transition: opacity 1800ms ease; opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .hero-frame.is-settling { transition: none; }
}

.hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  color: var(--white);
  text-align: center;
  padding: var(--space-lg) var(--space-md) 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.mark--md { width: 36px; height: auto; margin-bottom: var(--space-sm); }
.mark--why { width: 75px; margin-bottom: var(--space-md); }

.hero-lockup {
  width: min(76%, 308px);
  height: auto;
  margin-bottom: var(--space-lg);
}

.hint {
  font-size: 1.05rem;
  font-weight: 700;
  max-width: 30ch;
  opacity: 1;
  margin-bottom: 0.3rem;
}

.btn-begin {
  position: relative;
  border: none;
  background: transparent;
  width: min(62%, 258px);
  padding: var(--space-md) 0;
  cursor: pointer;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-begin__img {
  width: 100%;
  height: auto;
  animation: begin-breathe 3.2s ease-in-out infinite;
}
@keyframes begin-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-begin__img { animation: none; }
}
.btn-begin:active .btn-begin__img { transform: scale(0.97); animation-play-state: paused; }

.moment-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.25);
  z-index: 1;
}
.moment-progress__bar {
  height: 100%; width: 0%;
  background: var(--white);
  transition: width 200ms linear;
}
.moment-skip {
  position: absolute; top: 20px; right: 20px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.15);
  color: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.8rem;
  cursor: pointer;
}

/* ==========================================================================
   3. Survey
   ========================================================================== */
#screen-survey { background: var(--fog); justify-content: center; }
.survey-shell {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  justify-content: center;
}

.progress { display: flex; gap: 8px; justify-content: center; margin-bottom: var(--space-lg); }
.progress__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--stone);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.progress__dot[data-state="active"] { background: var(--teal-deep); transform: scale(1.3); }
.progress__dot[data-state="done"]   { background: var(--teal); }

.question { display: none; }
.question--active { display: block; animation: screen-in 360ms var(--ease); }
.question h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); margin-bottom: var(--space-xs); text-wrap: pretty; }
.question__hint { font-size: 0.85rem; color: var(--ink); opacity: .65; margin-bottom: var(--space-md); }

.options { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-md); }
.option {
  text-align: left;
  border: 1.5px solid var(--stone);
  background: var(--white);
  color: var(--ink);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.98rem;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.option:hover { border-color: var(--mint); }
.option[data-selected="true"] {
  border-color: var(--teal-deep);
  background: var(--teal);
  color: var(--white);
}
.option-other {
  width: 100%;
  margin-top: 10px;
  border: 1.5px solid var(--stone);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
}
.option-other:focus { border-color: var(--teal-deep); }

.survey-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-lg);
}

.btn-primary {
  border: none;
  background: var(--teal-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease), opacity 160ms var(--ease);
}
.btn-primary:hover { background: var(--teal); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-text {
  border: none; background: none;
  color: var(--ink);
  opacity: .6;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px;
}
.btn-text:hover { opacity: .9; }

/* ==========================================================================
   4 / 5 / 6 — Thank you, Success, Why RESET Exists (shared panel layout)
   ========================================================================== */
.panel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel--center { text-align: center; align-items: center; }
.panel h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.panel p { text-wrap: pretty; } /* avoids a lone word stranded on the last line, degrades gracefully where unsupported */
.script-flourish { display: block; width: min(70%, 260px); height: auto; margin-bottom: var(--space-md); }
#screen-thankyou .script-flourish { align-self: center; width: min(80%, 300px); margin-bottom: 0.6rem; }

.success-heading {
  color: var(--teal);
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  letter-spacing: .04em;
}
/* Skip path: paragraph reads first, "Thank You." follows as a smaller close, then the link */
#screen-success .panel.is-skip { display: flex; flex-direction: column; }
#screen-success .panel.is-skip #success-heading { order: 2; font-size: 1.15rem; margin-top: var(--space-sm); }
#screen-success .panel.is-skip #success-line-1 { order: 1; }
#screen-success .panel.is-skip .link-teal { order: 3; }

.link-teal {
  border: none;
  background: none;
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 12px 8px; /* keeps a comfortable tap target despite the plain-text look */
  margin-top: 6px;
}
.link-teal:hover { color: var(--teal-deep); }

.panel form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-md);
}
.panel input {
  border: 1.5px solid var(--stone);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.98rem;
}
.panel input:focus { border-color: var(--teal-deep); }
.panel .btn-primary { margin-top: 6px; }
.panel .btn-text { align-self: center; }
.fine-print { font-size: 0.8rem; opacity: .65; margin-top: 10px; }

.panel--why { max-width: 620px; }
.panel--why p { margin-bottom: var(--space-md); }
.vision-line strong { font-weight: 700; }
.stay-connected {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--stone);
}
.stay-connected--done p { opacity: .7; font-size: 0.95rem; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 720px) {
  .hero-content { padding-bottom: 3rem; }
  .survey-shell, .panel { padding-left: 0; padding-right: 0; }
}