/* ============================================================
   MOMENTUS — flo-hero · scroll-takeover hero  (v2)
   ONE camellia: the line trace draws on load (preloader), then on scroll it
   GROWS and dissolves into the painted bloom AT THE SAME SIZE (one flower, not
   two), reaches full-bleed at viewport centre, then SPLITS — the two halves gate
   open (left/right on desktop, top/bottom on mobile), wiping the red to the white
   ABOUT behind. On desktop the ABOUT then hands off HORIZONTALLY into the Process.
   Self-contained over style.css. Base red = brand red (#ee382b) + quiet warm depth.
   ============================================================ */

:root{ --flo-red:#ee382b; --flo-ink:#14120e; --flo-paper:#f8f6f1;
       --flo-ee:cubic-bezier(.2,.9,.25,1);          /* locked --ease-entrance */
       --flo-serif:cubic-bezier(.85,0,.2,1); }       /* locked serif-wipe bezier */

.flo-redfield{
  background:
    radial-gradient(78% 58% at 50% 30%, rgba(255,178,140,.18), rgba(238,56,43,0) 60%),
    radial-gradient(135% 95% at 50% 124%, rgba(150,18,0,.17), rgba(238,56,43,0) 56%),
    var(--flo-red);
}

.flo-hero{
  position:relative; width:100%; height:100vh; overflow:hidden; isolation:isolate;
  color:var(--flo-ink); font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:
    radial-gradient(78% 58% at 50% 30%, rgba(255,178,140,.18), rgba(238,56,43,0) 60%),
    radial-gradient(135% 95% at 50% 124%, rgba(150,18,0,.17), rgba(238,56,43,0) 56%),
    var(--flo-red);
}

/* ── layer 1 — the white ABOUT, uncovered as the gates part ───────────────── */
.flo-reveal{ position:absolute; inset:0; z-index:1; background:var(--flo-paper);
  display:flex; align-items:center; justify-content:center; padding:0 clamp(24px,7vw,120px); }
.flo-about{ width:100%; max-width:1080px; text-align:left; }
.flo-about-idx{ display:block; margin-bottom:clamp(22px,3vw,40px);
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(20,18,14,.45); }
.flo-about-statement{ font-family:'Hanken Grotesk',sans-serif; font-weight:400;
  font-size:clamp(26px,3.1vw,50px); line-height:1.3; letter-spacing:-.018em; color:var(--flo-ink); }
.flo-about-statement i{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:1.08em; }
.flo-about-cue{ display:block; margin-top:clamp(28px,4vw,56px);
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(20,18,14,.4); }
/* masked-line riser (the locked ABOUT grammar — driven by GSAP in flo-hero.js) */
.flo-about-statement .about-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.flo-about-statement .about-line-in{ display:block; will-change:transform; }

/* ── layer 2 — the gates: two panels, each carrying one half of the bloom ──── */
.flo-gates{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.gate{ position:absolute; overflow:hidden; will-change:transform;
  background:
    radial-gradient(78% 58% at 50% 30%, rgba(255,178,140,.18), rgba(238,56,43,0) 60%),
    radial-gradient(135% 95% at 50% 124%, rgba(150,18,0,.17), rgba(238,56,43,0) 56%),
    var(--flo-red); }
.gate-art{ position:absolute; background-repeat:no-repeat;
  background-image:url('assets/camellia-bloom.png');
  filter:drop-shadow(0 32px 60px rgba(70,8,0,.34)); transform-origin:center center; will-change:transform,opacity; }

/* DESKTOP — left / right halves (horizontal split) */
.gate-a{ top:0; left:0;  width:50vw; height:100%; }
.gate-b{ top:0; right:0; width:50vw; height:100%; }
.gate-a .gate-art{ top:0; left:0;  width:100vw; height:100%; background-position:center; background-size:auto 92%; }
.gate-b .gate-art{ top:0; right:0; width:100vw; height:100%; background-position:center; background-size:auto 92%; }

/* ── layer 3 — light dot matrix over the red (kept calm + low opacity) ─────── */
.flo-dots{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.34;
  background-image:radial-gradient(rgba(16,12,8,.18) 1px, transparent 1.6px); background-size:38px 38px; }
.flo-dots .spark{ position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(16,12,8,.34); opacity:.05; animation:flo-tw linear infinite; will-change:opacity; }
@keyframes flo-tw{ 0%,100%{opacity:.03} 50%{opacity:.16} }

/* ── layer 4 — the flower (own layer so it survives the poster-text fade) ──── */
.flo-mark{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); z-index:4;
  width:min(37vh,400px); height:min(37vh,400px); cursor:pointer; }
.flo-mark .bloom-line, .flo-mark .bloom-art{ position:absolute; inset:0; width:100%; height:100%;
  transform-origin:50% 50%; backface-visibility:hidden; will-change:transform,opacity; }
.flo-mark .bloom-line{ opacity:1; transition:opacity .6s ease; }
/* a painted echo for the rest-state hover (independent of the scroll morph) */
.flo-mark .bloom-art{ opacity:0; transform:scale(.78);
  background:center / contain no-repeat url('assets/camellia-bloom.png');
  transition:opacity .9s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.34,1.04,.36,1);
  filter:drop-shadow(0 26px 48px rgba(70,8,0,.32)); }
.flo-mark:hover .bloom-line, .flo-mark.is-bloom .bloom-line{ opacity:.12; }
.flo-mark:hover .bloom-art, .flo-mark.is-bloom .bloom-art{ opacity:1; transform:scale(1.18); }
/* the trace draws on load — stroke-dashoffset animated per-path (delays set in JS) */
.bloom-line [data-draw]{ stroke-dasharray:1400; stroke-dashoffset:1400; }
.flo-hero.flo-draw .bloom-line [data-draw]{ animation:flo-draw 1.5s cubic-bezier(.66,0,.28,1) forwards; }
@keyframes flo-draw{ to{ stroke-dashoffset:0 } }

/* ── layer 5 — the poster text (fades + lifts away on scroll) ──────────────── */
.flo-poster{ position:absolute; inset:0; z-index:5; will-change:transform,opacity; }

.flo-rail{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
  padding:26px clamp(20px,4vw,54px); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(16,12,8,.72); }
.flo-rail nav{ display:flex; gap:clamp(16px,2.4vw,30px); }
.flo-rail a{ color:inherit; text-decoration:none; transition:opacity .3s; }
.flo-rail a:hover{ opacity:.55; }

.flo-rule{ position:absolute; top:clamp(60px,9vh,86px); left:0; right:0; display:flex; justify-content:center; gap:18px;
  font-family:'JetBrains Mono',monospace; color:rgba(16,12,8,.5); font-size:14px; }
.flo-rule i{ font-style:normal; display:inline-block; }
.flo-rule i:nth-child(1){ transform:rotate(-8deg); }
.flo-rule i:nth-child(2){ transform:rotate(6deg); }
.flo-rule i:nth-child(3){ transform:rotate(-3deg); }

.flo-col{ position:absolute; top:42%; transform:translateY(-50%); width:clamp(120px,12vw,168px);
  font-size:13px; line-height:1.6; color:rgba(16,12,8,.58); text-align:justify; hyphens:auto; }
.flo-col.l{ left:clamp(20px,5vw,64px); }
.flo-col.r{ right:clamp(20px,5vw,64px); }

/* tagline + CTA — the lower-mid pair (pushed up, sitting under the flower) */
.flo-tag{ position:absolute; left:0; right:0; top:59%; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 clamp(20px,5vw,54px); gap:14px; }
.flo-lede{ font-family:'Instrument Serif',Georgia,serif; font-size:clamp(18px,2.6vh,27px); line-height:1.1; color:rgba(16,12,8,.86); }
.flo-lede i{ font-style:italic; }
.flo-cta{ display:inline-flex; align-items:center; gap:.55em; font-family:'Hanken Grotesk',sans-serif;
  font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#100c08; text-decoration:none;
  border:1.4px solid rgba(16,12,8,.5); border-radius:999px; padding:.85em 1.7em;
  transition:background .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1), border-color .5s, transform .45s cubic-bezier(.34,1.04,.36,1); }
.flo-cta .arr{ display:inline-block; transition:transform .45s cubic-bezier(.34,1.04,.36,1); }
.flo-cta:hover{ background:var(--flo-ink); color:var(--flo-paper); border-color:var(--flo-ink); transform:translateY(-2px); }
.flo-cta:hover .arr{ transform:translateX(5px); }

/* the wordmark — BIG, bottom-centre (the hero header) */
.flo-wm{ position:absolute; left:0; right:0; bottom:clamp(18px,3.6vh,46px); z-index:5;
  display:flex; justify-content:center; padding:0 clamp(18px,4vw,54px); pointer-events:none; }
.flo-wm .hero-wordmark-svg{ display:block; width:min(96vw,1180px); height:auto; max-height:25vh; overflow:visible; }

.flo-credits{ position:absolute; left:0; right:0; bottom:24px; display:flex; justify-content:space-between;
  padding:0 clamp(20px,5vw,54px); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(16,12,8,.5); pointer-events:none; }

.flo-grain{ position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.1; mix-blend-mode:multiply; will-change:opacity;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px; }

/* ── layer 7 — the relocated PROCESS (desktop horizontal hand-off) ─────────── */
.flo-stage-process{ position:absolute; inset:0; z-index:7; background:var(--flo-paper); will-change:transform; }
.flo-stage-process .process{ position:absolute; inset:0; height:100%; overflow:hidden; }
.flo-stage-process .process-pin{ height:100%; }

/* ══ PRELOADER ENTRANCE — poster text held hidden until .flo-ready (added once
      the trace has drawn). Each element enters with the LOCKED grammar. ══════ */
@media (prefers-reduced-motion: no-preference){
  /* serif wordmark — clip wipe L→R (the hero serif grammar) */
  html.js .flo-wm .hero-wordmark-svg{ clip-path:inset(-10% 101% -18% -4%);
    transition:clip-path 1300ms var(--flo-serif); will-change:clip-path; }
  html.js .flo-hero.flo-ready .flo-wm .hero-wordmark-svg{ clip-path:inset(-10% -4% -18% -4%); }

  /* serif lede — clip wipe, delayed under the wordmark */
  html.js .flo-lede{ clip-path:inset(-22% 101% -22% -5%);
    transition:clip-path 1100ms var(--flo-serif); transition-delay:.5s; will-change:clip-path; }
  html.js .flo-hero.flo-ready .flo-lede{ clip-path:inset(-22% -5% -22% -5%); }

  /* rise grammar (opacity + translateY) for the meta + cta, gently staggered */
  html.js .flo-rail, html.js .flo-rule, html.js .flo-col, html.js .flo-cta, html.js .flo-credits{
    opacity:0; transform:translateY(24px);
    transition:opacity 820ms var(--flo-ee), transform 820ms var(--flo-ee); will-change:opacity,transform; }
  html.js .flo-hero.flo-ready .flo-rail{ opacity:1; transform:none; transition-delay:.12s; }
  html.js .flo-hero.flo-ready .flo-rule{ opacity:1; transform:none; transition-delay:.22s; }
  html.js .flo-hero.flo-ready .flo-col.l{ opacity:1; transform:none; transition-delay:.46s; }
  html.js .flo-hero.flo-ready .flo-col.r{ opacity:1; transform:none; transition-delay:.54s; }
  html.js .flo-hero.flo-ready .flo-cta{ opacity:1; transform:none; transition-delay:.72s; }
  html.js .flo-hero.flo-ready .flo-credits{ opacity:1; transform:none; transition-delay:.36s; }
}

/* ══ MENU CAPSULE — only after the homepage has been scrolled (the hero already
      carries nav links, so the bottom capsule is redundant at the top) ═══════ */
html.flo-home .sitenav{ opacity:0; pointer-events:none; transition:opacity .5s var(--flo-ee); }
html.flo-home.flo-scrolled .sitenav{ opacity:1; pointer-events:auto; }

/* ══ FALLBACK — no GSAP / reduced-motion: poster + stacked About ════════════ */
.flo-hero.flo-fallback{ height:auto; }
.flo-hero.flo-fallback .flo-gates, .flo-hero.flo-fallback .flo-grain, .flo-hero.flo-fallback .flo-stage-process{ display:none; }
.flo-hero.flo-fallback .flo-poster, .flo-hero.flo-fallback .flo-mark{ position:relative; }
.flo-hero.flo-fallback .flo-poster{ height:100vh; }
.flo-hero.flo-fallback .flo-reveal{ position:relative; min-height:100vh; }
.flo-hero.flo-fallback .flo-about-statement .about-line-in{ transform:none !important; }

@media (prefers-reduced-motion: reduce){
  html.js .flo-wm .hero-wordmark-svg{ clip-path:none; }
  html.js .flo-lede{ clip-path:none; }
  html.js .flo-rail, html.js .flo-rule, html.js .flo-col, html.js .flo-cta, html.js .flo-credits{ opacity:1; transform:none; }
}

/* ══ MOBILE — vertical (top/bottom) split + width-fit flower ════════════════ */
@media (max-width:900px){
  .flo-col{ display:none; }
  .flo-rail nav{ display:none; }
  .flo-mark{ top:42%; width:min(74vw,360px); height:min(74vw,360px); }
  .flo-tag{ top:62%; }
  .flo-wm .hero-wordmark-svg{ width:92vw; max-height:18vh; }
  .flo-about{ text-align:left; }

  /* gates become TOP / BOTTOM halves; the flower fits the viewport WIDTH */
  .gate-a{ top:0;    left:0; width:100vw; height:50vh; }
  .gate-b{ top:50vh; left:0; width:100vw; height:50vh; }
  .gate-a .gate-art{ top:0; left:0; width:100vw; height:100vh; background-position:center; background-size:88vw auto; }
  .gate-b .gate-art{ bottom:0; left:0; width:100vw; height:100vh; background-position:center; background-size:88vw auto; }
}
@media (max-width:600px){
  .flo-rail{ padding:20px 22px; }
  .flo-rule{ top:54px; }
  .flo-mark{ top:40%; width:min(82vw,340px); height:min(82vw,340px); }
  .flo-tag{ top:60%; }
  .flo-lede{ font-size:18px; }
  .flo-wm{ bottom:clamp(16px,3.4vh,30px); }
  .flo-wm .hero-wordmark-svg{ width:94vw; max-height:15vh; }
  .gate-a .gate-art, .gate-b .gate-art{ background-size:92vw auto; }
  .flo-about-statement{ font-size:clamp(23px,6.2vw,34px); }
  .flo-credits{ display:none; }
}