/* ============================================================
   CREATOR WITHIN — homepage (cinematic scroll journey)
   Midnight navy #0B1426 · warm gold #C9A84C
   ============================================================ */

:root{
  --navy:      #0B1426;
  --navy-deep: #060d1a;
  --gold:      #C9A84C;
  --gold-soft: rgba(201,168,76,.55);
  --gold-faint:rgba(201,168,76,.16);
  --turquoise: #4FD8CE;
  --emerald:   #2E8B6A;
  --pearl:     #F4EFE4;
  --ink:       #F4EFE4;
  --ink-soft:  rgba(244,239,228,.68);
  --ink-faint: rgba(244,239,228,.38);
  --hairline:  rgba(244,239,228,.14);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --gutter: clamp(20px, 4.2vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:auto; }

body{
  background:var(--navy-deep);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-booting{ overflow:hidden; height:100vh; }

::selection{ background:var(--gold); color:var(--navy); }

a{ color:inherit; }

/* ============================================================
   LOADER
   ============================================================ */
.boot{
  position:fixed; inset:0; z-index:200;
  background:var(--navy-deep);
  display:grid; place-items:center;
  transition:opacity 1.1s ease .2s, visibility 1.1s ease .2s;
}
.boot.is-done{ opacity:0; visibility:hidden; }

.boot__inner{ width:min(420px,74vw); text-align:center; }

.boot__mark{
  font-family:var(--serif);
  font-size:clamp(22px,3vw,30px);
  font-weight:500;
  letter-spacing:.34em; text-indent:.34em;
  color:var(--pearl);
  margin-bottom:10px;
}
.boot__seed{
  width:6px; height:6px; margin:0 auto 30px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 18px var(--gold), 0 0 44px rgba(201,168,76,.5);
  animation:seedpulse 2.2s ease-in-out infinite;
}
@keyframes seedpulse{
  0%,100%{ transform:scale(1);   opacity:.75; }
  50%    { transform:scale(1.5); opacity:1; }
}
.boot__bar{
  height:1px; width:100%;
  background:rgba(244,239,228,.12);
  position:relative; overflow:hidden;
}
.boot__bar span{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--gold);
  box-shadow:0 0 12px var(--gold);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.boot__meta{
  margin-top:14px;
  display:flex; justify-content:space-between;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint);
}
.boot__meta b{ color:var(--gold-soft); font-weight:400; }

/* ============================================================
   CANVAS + GRADE
   ============================================================ */
#journey{
  position:fixed; inset:0; z-index:0;
  width:100vw; height:100vh;
  display:block;
  background:var(--navy-deep);
}

.grade{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(11,20,38,.4) 0%, rgba(6,13,26,.75) 100%);
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 38%, rgba(4,9,18,.38) 78%, rgba(4,9,18,.75) 100%),
    linear-gradient(180deg, rgba(4,9,18,.5) 0%, transparent 18%, transparent 78%, rgba(4,9,18,.62) 100%);
}

/* ============================================================
   FIXED CHROME
   ============================================================ */
.chrome{
  position:fixed; z-index:20;
  top:clamp(18px,3vh,32px); left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  pointer-events:none;
}
.chrome{ gap:16px; }
.chrome__mark{
  font-family:var(--serif);
  font-size:15px; font-weight:600;
  letter-spacing:.42em; text-indent:.42em;
  color:var(--pearl);
  text-decoration:none;
  pointer-events:auto;
  white-space:nowrap;
  min-width:0;
}
.chrome__cta{
  pointer-events:auto;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--pearl);
  text-decoration:none;
  padding:11px 20px;
  border:1px solid var(--gold-soft);
  background:rgba(201,168,76,.06);
  backdrop-filter:blur(6px);
  white-space:nowrap;          /* never wrap into the wordmark */
  flex:0 0 auto;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}

@media (max-width: 820px){
  .chrome__mark{ font-size:12.5px; letter-spacing:.24em; text-indent:.24em; }
  .chrome__cta{ font-size:9px; letter-spacing:.18em; padding:10px 14px; }
}
@media (max-width: 430px){
  .chrome__mark{ font-size:11px; letter-spacing:.12em; text-indent:.12em; }
  .chrome__cta{ font-size:8.5px; letter-spacing:.12em; padding:9px 11px; }
}
.chrome__cta:hover, .chrome__cta:focus-visible{
  background:rgba(201,168,76,.16);
  border-color:var(--gold);
  box-shadow:0 0 26px rgba(201,168,76,.22);
}

/* focus visibility everywhere */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ============================================================
   STAGE INDICATOR — Dream → Field → Seed → Water → Greenhouse
   → Harvest → Return, as symbols
   ============================================================ */
.stages{
  position:fixed; z-index:20;
  right:var(--gutter); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:22px;
  pointer-events:none;
}
.stage{
  display:flex; align-items:center; gap:12px;
  justify-content:flex-end;
}
.stage__label{
  font-size:8.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0;
  transform:translateX(6px);
  transition:opacity .5s ease, transform .5s ease, color .5s ease;
}
.stage__glyph{
  width:26px; height:26px; flex:0 0 26px;
  display:grid; place-items:center;
}
.stage__glyph svg{
  width:100%; height:100%;
  stroke:rgba(244,239,228,.32);
  fill:none;
  stroke-width:1.4;
  transition:stroke .5s ease, filter .5s ease, opacity .5s ease;
}
.stage.is-active .stage__glyph svg{
  stroke:var(--gold);
  filter:drop-shadow(0 0 7px rgba(201,168,76,.65));
}
.stage.is-active .stage__label{
  opacity:1; transform:translateX(0);
  color:var(--gold-soft);
}

/* ============================================================
   SCROLL CUE
   ============================================================ */
.scrollcue{
  position:fixed; z-index:20;
  left:50%; bottom:clamp(22px,4vh,42px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:8.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-faint);
  pointer-events:none;
  transition:opacity .6s ease;
}
.scrollcue i{
  width:1px; height:36px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{ opacity:.2; transform:scaleY(.5); transform-origin:top; }
  50%    { opacity:1;  transform:scaleY(1);  transform-origin:top; }
}
.scrollcue.is-hidden{ opacity:0; }

/* ============================================================
   PINNED PHRASES
   ============================================================ */
.phrases{ position:relative; z-index:10; pointer-events:none; }

.phrase{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 var(--gutter);
  opacity:0; visibility:hidden;
  will-change:opacity, transform;
}

.phrase__text{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px, 4.6vw, 66px);
  line-height:1.18;
  letter-spacing:.01em;
  color:var(--pearl);
  max-width:22ch;
  text-shadow:0 2px 40px rgba(4,9,18,.85), 0 0 90px rgba(4,9,18,.6);
}
.phrase__text em{
  font-style:italic;
  color:var(--gold);
}

.phrase--hero .phrase__eyebrow{
  font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:clamp(18px,3vh,30px);
}

/* final CTA phrase */
.phrase--cta .phrase__text{ margin-bottom:clamp(26px,4vh,44px); }

.cta-main{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:16px;
  padding:18px 34px;
  background:var(--gold);
  color:var(--navy);
  text-decoration:none;
  font-size:11px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  border:1px solid var(--gold);
  transition:box-shadow .45s ease, transform .45s ease;
}
.cta-main:hover, .cta-main:focus-visible{
  box-shadow:0 0 44px rgba(201,168,76,.45);
  transform:translateY(-2px);
}
.cta-main i{
  width:24px; height:1px; background:var(--navy);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.cta-main:hover i{ width:40px; }

/* ============================================================
   SCROLL DRIVER + NOSCRIPT/REDUCED-MOTION
   ============================================================ */
.driver{ position:relative; width:100%; height:1px; pointer-events:none; }

/* Reduced-motion / no-JS story: static cinematic stills + text */
.static-story{ display:none; }

body.static-mode{ overflow:auto; height:auto; }
body.static-mode .boot,
body.static-mode #journey,
body.static-mode .grade,
body.static-mode .vignette,
body.static-mode .stages,
body.static-mode .scrollcue,
body.static-mode .phrases,
body.static-mode .driver{ display:none; }

body.static-mode .static-story{ display:block; }

.static-story{ position:relative; z-index:5; }
.sscene{
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:12vh var(--gutter);
  --bg:var(--img-lg, none);
  background-image:var(--bg);
  background-size:cover; background-position:center;
  position:relative;
}
@media (max-width: 860px){
  .sscene{ --bg:var(--img-sm, var(--img-lg, none)); }
}
.sscene::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,13,26,.55), rgba(6,13,26,.72));
}
.sscene > *{ position:relative; z-index:1; }
.sscene .phrase__text{ position:static; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .stages{
    right:auto; left:50%; top:auto; bottom:calc(var(--gutter) * .8);
    transform:translateX(-50%);
    flex-direction:row; gap:16px;
  }
  .stage{ flex-direction:column; gap:6px; }
  .stage__label{ display:none; }
  .stage__glyph{ width:20px; height:20px; flex-basis:20px; }
  .scrollcue{ bottom:calc(var(--gutter) * .8 + 44px); }
  .phrase__text{ font-size:clamp(26px,7.4vw,40px); }
}