/* Scroll-craft layer on top of design D: page tone, layered hero planes, and the
   lighting act (the page's one peak). Animated properties are transform/translate
   and opacity only; js/motion.js writes them every frame from scroll progress. */

:root{
  --ivory-cool:#F0F0EA;   /* the page before the flame is lit */
  --ivory-warm:#F7EBD6;   /* the page after: candle-warmed ivory */
  --dusk:#1C120B;         /* the dim room the candle is lit in */
  --candle:#E9B866;
}

/* Page tone. The cool ground is the body; the warm ground is a fixed layer behind
   every section whose opacity rises through the lighting act and then stays. */
body{background:var(--ivory-cool)}
.mx{background:transparent;position:relative;z-index:1;overflow:visible;overflow-x:clip}  /* clip, not hidden: hidden would break the sticky stage */
.tone-warm{position:fixed;inset:0;background:var(--ivory-warm);opacity:0;pointer-events:none;z-index:0}
.hero-arch-inner,.seal{background:var(--ivory-cool)}

/* ---------- Hero depth planes ---------- */
.hero-art .plane{will-change:translate}
.plane-disc{position:absolute;inset:0;pointer-events:none}
.hero-haze{position:absolute;left:-18%;top:-6%;width:120%;height:84%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,250,238,.95),rgba(255,246,226,.5) 45%,rgba(255,246,226,0) 100%)}
.hero-sprig{position:absolute;left:calc(50% - 300px);top:calc(4% + 40px);width:210px;height:auto;max-width:none;
  z-index:3;transform:rotate(-18deg);filter:drop-shadow(0 18px 22px rgba(16,35,63,.28));pointer-events:none}
.hero-bloom{position:absolute;right:-150px;top:-40px;width:330px;height:auto;max-width:none;z-index:4;
  transform:rotate(24deg);filter:blur(7px);opacity:.85;pointer-events:none}
.js .hero-sprig,.js .hero-bloom{opacity:0;transition:opacity 1.2s .7s ease}
.js .hero-art.in .hero-sprig{opacity:1}
.js .hero-art.in .hero-bloom{opacity:.85}
@media (min-width:901px){
  .hero-sprig{width:calc(var(--ah)*.27);left:calc(50% - var(--ah)*.41);top:calc(var(--ah)*.12)}
  .hero-bloom{width:calc(var(--ah)*.34);right:calc(var(--ah)*-.27);top:calc(var(--ah)*.4)}
}
@media (max-width:900px){
  .hero-sprig{width:150px;left:calc(50% - 215px);top:70px}
  .hero-bloom{width:200px;right:-120px;top:40%}
}
@media (max-width:600px){
  .hero-sprig{width:118px;left:calc(50% - 178px);top:64px}
  .hero-bloom{display:none}
}

/* Ticker: a slow lateral drift is the quiet beat before the peak. */
.ticker-row{will-change:transform}

/* ---------- The lighting ---------- */
.lighting{position:relative;height:440svh;color:#F5EFE4}
.lt-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.lt-dusk{position:absolute;inset:0;background:var(--dusk);opacity:0}
.lt-glow{position:absolute;left:0;top:0;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(246,205,128,.62),rgba(233,170,90,.34) 22%,rgba(201,120,52,.14) 48%,rgba(201,120,52,0) 100%);
  will-change:transform,opacity;pointer-events:none}
.lt-grain{position:absolute;inset:0;opacity:0;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>")}

/* The reprised wordmark: its ı carries the dot the flame grows from. */
.lt-word{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;align-items:baseline;
  font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(110px,min(19vw,26svh),230px);line-height:.8;
  letter-spacing:-.035em;color:#1E5AA8;white-space:nowrap}
.lt-word>span{display:inline-block;will-change:transform,opacity}
.lt-i{position:relative}
/* .lt-i is an inline-block with line-height .8, so its box starts lower than the hero's inline .dotless.
   -.072em was measured (Range on the ı vs the flame box) to give the same gap above the stem as the hero flame. */
.lt-dot{position:absolute;left:50%;top:-.072em;width:.17em;height:.34em;transform:translateX(-50%)}

/* The flame is sized at its final (largest) box and scaled DOWN to the dot, so the
   vector rasterises sharp at full size. JS sets left/top/width/height on resize. */
.lt-flame{position:absolute;left:0;top:0;width:40px;height:80px;transform-origin:50% 100%;pointer-events:none;z-index:3}
.lt-lean{width:100%;height:100%;transform-origin:50% 100%}
.lt-flame .flame-body{display:block;width:100%;height:100%;transform-origin:50% 100%}

/* The film: an arch that starts dim and colourless and is warmed by the flame.
   Veils are blended layers whose opacity is the only thing that changes. */
.lt-film{position:absolute;margin:0;z-index:2;opacity:0;will-change:transform,opacity}
.lt-film-frame{position:relative;width:100%;height:100%;border-radius:999px 999px 0 0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(233,184,102,.45),0 40px 90px rgba(0,0,0,.45);background:#120c08}
.lt-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.lt-desat,.lt-dim,.lt-warm{position:absolute;inset:0;pointer-events:none}
.lt-desat{background:#808080;mix-blend-mode:saturation;opacity:1}
.lt-dim{background:#0B1320;opacity:.62}
.lt-warm{background:radial-gradient(120% 80% at 0% 40%,rgba(255,196,110,.9),rgba(255,170,80,0) 70%);mix-blend-mode:soft-light;opacity:0}

/* Copy */
.lt-a,.lt-b{position:absolute;z-index:4;opacity:0}
.lt-a{left:50%;bottom:12%;transform:translateX(-50%);font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:clamp(36px,6svh,60px);line-height:1.1;color:#F7E9CF;white-space:nowrap;text-align:center}
.lt-b{max-width:400px}
.lt-b h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(34px,5.6svh,56px);line-height:1.04;letter-spacing:-.01em;color:#FBF1DE;text-wrap:balance}
.lt-b p{margin-top:clamp(12px,2.2svh,22px);font-size:clamp(14px,1.9svh,16px);line-height:1.7;letter-spacing:.01em;color:#E8D6B8;max-width:36ch;text-wrap:pretty}

/* Desktop layout: copy left, flame centre-left, film right. */
.lt-b{left:max(28px,calc(50% - 652px));bottom:clamp(40px,11svh,120px)}
.lt-film{left:auto;right:max(28px,calc(50% - 600px));top:50%;height:min(72svh,700px);aspect-ratio:.64;translate:0 -50%}

/* Tablet portrait and phones: stacked, flame on top, film in the middle, copy in a bottom band. */
@media (max-width:900px){
  .lighting{height:380svh}
  .lt-film{right:auto;left:50%;top:auto;bottom:24svh;height:min(42svh,520px);translate:-50% 0}
  .lt-b{left:24px;right:24px;bottom:max(22px,3svh);max-width:none;text-align:center}
  .lt-b h2{font-size:clamp(28px,3.8svh,40px)}
  .lt-b p{display:none}
    .lt-a{bottom:auto;top:62%;font-size:clamp(28px,4svh,40px)}
}
@media (max-width:900px) and (min-height:760px){
  .lt-b p{display:block;margin:10px auto 0}
  .lt-film{bottom:33svh;height:min(36svh,520px)}
}

/* ---------- Kinetic quote + ritual cadence ---------- */
.pull .kw{display:inline-block;opacity:1}
.js .pull[data-kinetic] .kw{opacity:0;translate:0 .4em;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
.js .pull[data-kinetic].on .kw{opacity:1;translate:0 0}
.js .section-ritual .step.reveal{translate:56px 0}
.js .section-ritual .step.reveal.in{translate:0 0}
.js .section-ritual .step:nth-child(2){transition-delay:.18s}
.js .section-ritual .step:nth-child(3){transition-delay:.36s}

/* ---------- Reduced motion: static, but still composed with depth ---------- */
@media (prefers-reduced-motion:reduce){
  .lighting{height:auto}
  .lt-stage{position:relative;height:100svh;min-height:620px}
  .js .pull[data-kinetic] .kw{opacity:1;translate:none;transition:none}
  .js .section-ritual .step.reveal{translate:none}
  .js .hero-sprig{opacity:1}
  .js .hero-bloom{opacity:.85}
  .hero-art .plane{will-change:auto}
}

/* The big flame keeps the flicker but drops the filter-based glow/shimmer loops:
   at this size they repaint every frame, and the stage has its own glow layer. */
@media (prefers-reduced-motion:no-preference){
  .lt-flame .flame-body{animation:flicker 3.4s ease-in-out infinite}
  .lt-flame .flame-svg{animation:none}
}
.lt-flame .flame-svg{filter:drop-shadow(0 0 18px rgba(246,205,128,.55))}

/* No scroll snapping: proximity snap would tug the reader out of the long lighting act. */
html{scroll-snap-type:none!important}

/* A blurred copy of the flame behind it: the soft, breathing halo that makes the mark read as fire. */
.lt-lean{position:relative}
.lt-aura{position:absolute;inset:0;transform:scale(1.18,1.12);transform-origin:50% 90%;filter:blur(16px);opacity:.7}
.lt-aura .flame-svg{filter:none;animation:none}
@media (prefers-reduced-motion:no-preference){
  .lt-aura{animation:aura 2.6s ease-in-out infinite}
}
@keyframes aura{0%,100%{opacity:.55}40%{opacity:.9}70%{opacity:.68}}

/* Photoreal candle flame: assets/video/flame.webm (desktop Chrome/Firefox/Edge only), 360x678 with true alpha and
   transparent margins (the halo fades out well before every edge). Measured on the frames (alpha > 50%):
   the flame body spans 15.0%..93.8% of the clip height, centred. The SVG flame path spans 2.5%..82.5%
   of its box, so: height 80/78.8 = 101.5%, top 2.5 - 15.0*1.015 = -12.7%. */
.lt-real{position:absolute;left:0;top:0;width:40px;height:80px;transform-origin:50% 100%;opacity:0;pointer-events:none;z-index:3}
.lt-real-lean{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.lt-flame-video{position:absolute;left:50%;top:-12.7%;height:101.5%;width:auto;max-width:none;aspect-ratio:360/678;
  translate:-50% 0;display:block;background:transparent}
@media (prefers-reduced-motion:reduce){.lt-real{display:none}}

/* ---------- Touch devices: calm, stable build ----------
   No fixed tone layer, no parallax layers, no pinned act. The page is warm ivory below the hero,
   cool above it (full-bleed via border-image), the act is one screen whose height is captured in px
   once by js/motion.js (--stage-h), and the ticker drifts on a pure CSS animation. */
.touch body{background:var(--ivory-warm)}
.touch .tone-warm{display:none}
/* Full-bleed via a horizontal-only border-image fill: no clip-path, so the hero flame and its halo
   can rise above the hero box over the header (a clip-path here sliced the flame off on phones). */
.touch .mx>header,.touch .hero-wrap{background:var(--ivory-cool);border-image:linear-gradient(var(--ivory-cool) 0 0) fill 0 / 0 / 0 100vmax}
.touch .hero-art .plane,.touch .lt-word>span,.touch .lt-film,.touch .lt-glow{will-change:auto}
.touch .lighting{height:auto}
.touch .lt-stage{position:relative;height:var(--stage-h,100svh)}
@media (prefers-reduced-motion:no-preference){
  .touch .ticker-row{animation:ticker-drift 26s ease-in-out infinite alternate}
}
@keyframes ticker-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-180px,0,0)}}

/* SVG flame shown large (touch, Safari, and wherever the photo flame is not used): smooth fill, soft glow. */
.svg-flame .lt-flame .flame-svg{filter:drop-shadow(0 0 14px rgba(246,205,128,.6)) drop-shadow(0 6px 24px rgba(233,150,60,.35))}

/* Touch: everything inside the act is sized from --u (1% of the height captured once by JS),
   never from svh/vh or a height media query, so a collapsing URL bar cannot move or resize anything. */
.touch .lt-word{font-size:clamp(110px,min(19vw,calc(var(--u,1svh)*26)),230px)}
.touch .lt-a{font-size:clamp(28px,calc(var(--u,1svh)*4.6),46px)}
.touch .lt-b h2{font-size:clamp(28px,calc(var(--u,1svh)*4.4),48px)}
.touch .lt-b p{font-size:15px;margin-top:14px}
.touch .lt-cta{margin-top:14px}
.touch .visit-cta{margin-top:28px}
.touch .lt-b{bottom:max(32px,calc(var(--u,1svh)*10))}
.touch .lt-film{height:min(calc(var(--u,1svh)*72),700px)}
@media (max-width:900px){
  .touch .lt-film{bottom:calc(var(--u,1svh)*26.5);height:min(calc(var(--u,1svh)*38),520px)}
  .touch .lt-stage.lt-tall .lt-film{bottom:calc(var(--u,1svh)*33);height:min(calc(var(--u,1svh)*36),520px)}
  .touch .lt-b{bottom:max(22px,calc(var(--u,1svh)*3))}
  .touch .lt-b h2{font-size:clamp(28px,calc(var(--u,1svh)*3.8),40px)}
  .touch .lt-a{font-size:clamp(28px,calc(var(--u,1svh)*4),40px)}
  .touch .lt-b p{display:none}
  .touch .lt-stage.lt-tall .lt-b p{display:block;margin:10px auto 0}
  .touch .lt-cta{margin-top:12px}
}