/*
  3D Legends — Scrollytelling Styles
  WordPress / Divi edition
  Enqueue via child theme functions.php (see functions-snippet.php)
  Load order: after Divi stylesheet so specificity wins.

  Changes from the standalone version:
  - html/body rules stripped back so Divi header/footer keep their own styles
  - Links scoped to #ll5-scroll so Divi nav links are unaffected
  - Divi overflow:hidden ancestor fix added (CSS :has() + JS fallback in script.js)
  - -webkit- vendor prefixes added for offset-path (older Safari)
  - Nav and site-footer rules removed (those elements are no longer in the markup)
  - ll5-faq rules kept — can be reused inside the Divi footer via a Code module
*/

/* ─── Design tokens ──────────────────────────────────────────── */
:root {
  --void:#030201;
  --night:#080503;
  --bone:#f3e6cc;
  --muted:#b9aa8c;
  --muted2:#8e7c5f;
  --ember:#ff6a2b;
  --ember2:#ffb46f;
  --gold:#ffd500;
  --green:#05ce78;
  --line:rgba(243,230,204,.16);
}

/* ─── Minimal global resets (safe alongside Divi) ────────────── */
* { box-sizing:border-box; }

/*
  scroll-behavior kept; background/color/font-family removed from html+body
  so the Divi header and footer inherit their own theme settings unchanged.
*/
html { scroll-behavior:smooth; }

body {
  margin:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Scope the link colour reset to our section only */
#ll5-scroll a { color:inherit; }

/* ─── Fix: Divi overflow:hidden ancestors break position:sticky ─
   #page-container is Divi's outermost wrapper and sets overflow via
   !important in its own stylesheet, so we need !important to win.
   The :has() rules cover the inner Divi containers.
   The JS in script.js provides a runtime fallback for both.         */
#page-container {
  overflow: visible !important;
}
.et_pb_section:has(#ll5-scroll),
.et_pb_fullwidth_section:has(#ll5-scroll),
.et_pb_row:has(#ll5-scroll),
.et_pb_column:has(#ll5-scroll),
.et_pb_fullwidth_code:has(#ll5-scroll),
.et_pb_code_inner:has(#ll5-scroll) {
  overflow:visible !important;
}

/* ─── Section shell ──────────────────────────────────────────── */
#ll5-scroll {
  --p:0;
  --mx:0;
  --my:0;
  --logo-intro-o:1;
  --logo-intro-y:0vh;
  --logo-intro-s:1;
  --nav-o:0;
  --title-o:0;
  --title-y:22px;
  --title-s:.96;
  --hero-o:0;
  --hero-s:.80;
  --hero-x:0vw;
  --hero-y:7vh;
  --hero-rx:0deg;
  --hero-ry:0deg;
  --hero-rz:0deg;
  --reveal:-18%;
  --beam-o:0;
  --beam-x:30%;
  --beam-w:18vw;
  --side-o:0;
  --side-s:.86;
  --side-x:0vw;
  --side-y:8vh;
  --side-rx:2deg;
  --side-rz:0deg;
  --map-o:0;
  --map-s:.78;
  --map-x:0vw;
  --map-y:8vh;
  --map-rx:54deg;
  --route-dash:1080;
  --route-node-o:0;
  --route-glow-o:0;
  --runner-distance:0%;
  --card1-o:0; --card2-o:0; --card3-o:0; --card4-o:0;
  --final-o:0;
  --final-y:24px;
  --hint-o:1;
  --light-x:50%; --light-y:38%; --grid-y:43vh; --grid-x:0px;
  --sky-x:0px; --sky-y:0px; --moon-x:0px; --moon-y:0px;
  --logo-par-x:0px; --logo-par-y:0px; --hero-par-x:0px; --hero-par-y:0px;
  --side-par-x:0px; --side-par-y:0px; --map-par-x:0px; --map-par-y:0px;
  --drift-end:0px;
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:#030201;
}

/* ─── Scroll stage & sticky viewport ────────────────────────── */
.ll5-stage { position:relative; height:1900svh; min-height:14000px; }
.ll5-sticky {
  position:sticky;
  top:0;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  perspective:1500px;
  background-image:
    radial-gradient(circle at var(--light-x) var(--light-y), rgba(255,106,43,.25), transparent 38rem),
    url('https://3dlegends.it/wp-content/uploads/2026/06/dungeon_chasm.jpg'),
    linear-gradient(180deg,#020101 0%,#100906 48%,#030201 100%);
  background-size: 100% 100%, 100% auto, 100% 100%;
  background-repeat: no-repeat, repeat-y, no-repeat;
  background-position: center center, center calc(var(--p) * -150vw), center center;
  transform-style:preserve-3d;
  contain:layout paint style;
}

/*
  If the Divi header is set to "Fixed" position, add padding-top here equal
  to the header height (e.g. top: 80px) so the sticky scene clears the header.
  With a Transparent Header (recommended) leave top:0 as-is.
*/

.ll5-sticky::before {
  content:""; position:absolute; inset:-15%; z-index:0; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(rgba(255,180,111,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,180,111,.10) 1px,transparent 1px);
  background-size:clamp(44px,7vw,92px) clamp(44px,7vw,92px);
  transform:perspective(1100px) rotateX(67deg) translateY(var(--grid-y)) translateX(var(--grid-x)) scale(1.7);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top,black,transparent 74%);
}
.ll5-sticky::after {
  content:""; position:absolute; inset:0; z-index:80; pointer-events:none;
  box-shadow:inset 0 0 13vw 5vw rgba(0,0,0,.88);
  background:
    linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 62%,rgba(0,0,0,.65)),
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.50) 88%);
}

/* ─── Sky / atmosphere ───────────────────────────────────────── */
.ll5-sky { position:absolute; inset:-10%; z-index:1; pointer-events:none; overflow:hidden; }
.ll5-sky::before {
  content:""; position:absolute; inset:0; opacity:.38;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,180,111,.09), transparent 25rem),
    radial-gradient(circle at 78% 20%, rgba(91,42,19,.34), transparent 30rem),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.045), transparent 38rem);
  transform:translate3d(var(--sky-x), var(--sky-y), -220px);
}
.ll5-moon {
  position:absolute; right:7vw; top:9vh; width:clamp(120px,15vw,240px); aspect-ratio:1; border-radius:50%; opacity:.13;
  background:radial-gradient(circle at 36% 33%,rgba(255,239,199,.96),rgba(255,181,101,.34) 47%,transparent 72%);
  filter:blur(.2px) drop-shadow(0 0 45px rgba(255,170,90,.36));
  transform:translate3d(var(--moon-x), var(--moon-y), -260px);
}
.ll5-ambient-light {
  position:absolute; left:50%; top:50%; width:100vw; height:100vh;
  transform:translate3d(calc(-50% + var(--sky-x)),calc(-50% + var(--sky-y)),-200px);
  background:radial-gradient(ellipse at center,rgba(255,106,43,0.18) 0%,rgba(255,180,111,0.06) 45%,transparent 75%);
  opacity:var(--ambient-o, 0); filter:blur(60px); pointer-events:none; mix-blend-mode:screen; will-change:opacity;
}

/* ─── Fire effects ───────────────────────────────────────────── */
.ll5-fire-aura {
  position:absolute; z-index:45; left:50%; top:48%; width:min(900px, 120vw); height:min(900px, 120vh); pointer-events:none;
  transform:translate3d(-50%, -50%, 100px); mix-blend-mode:screen; opacity:calc(var(--title-o) + var(--logo-intro-o));
  background:radial-gradient(circle,rgba(255,106,43,.25),rgba(200,60,15,.10) 45%,transparent 70%); filter:blur(45px);
  animation:ll5-fire-pulse 3.5s ease-in-out infinite alternate; will-change:transform, opacity;
}
@keyframes ll5-fire-pulse {
  0%   { transform:translate3d(-50%, -50%, 100px) scale(0.9); }
  100% { transform:translate3d(-50%, -50%, 100px) scale(1.15); }
}
.ll5-transition-fire {
  position:absolute; z-index:25; left:50%; top:50%; width:100vw; height:100vh; pointer-events:none;
  transform:translate3d(-50%, -50%, 50px) scale(var(--flare-s, 1)); mix-blend-mode:screen; opacity:var(--flare-o, 0);
  background:radial-gradient(ellipse at center,rgba(255,106,43,.45) 0%,rgba(200,60,15,.2) 40%,transparent 70%); filter:blur(45px);
  will-change:opacity,transform;
}

/* ─── Decorative runes ───────────────────────────────────────── */
.ll5-runes { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.09; }
.ll5-rune  { position:absolute; color:rgba(255,180,111,.62); font-family:"Cinzel",serif; font-size:clamp(1.1rem,2vw,2.2rem); text-shadow:0 0 22px rgba(255,106,43,.48); }
.ll5-r1 { left:8%;  top:24%;    transform:rotate(-8deg);  }
.ll5-r2 { right:10%; top:31%;   transform:rotate(14deg);  }
.ll5-r3 { left:19%;  bottom:25%;transform:rotate(9deg);   }
.ll5-r4 { right:20%; bottom:22%;transform:rotate(-12deg); }

/* ─── Embers ─────────────────────────────────────────────────── */
.ll5-embers { position:absolute; inset:0; z-index:74; pointer-events:none; overflow:hidden; }
.ll5-ember {
  position:absolute; bottom:-20px; left:var(--x); width:var(--s); height:var(--s); border-radius:50%; opacity:0;
  background:radial-gradient(circle,#fff4ce 0%,var(--ember2) 35%,var(--ember) 66%,transparent 72%);
  box-shadow:0 0 18px rgba(255,106,43,.72);
  animation:ll5-ember-rise var(--d) linear infinite; animation-delay:var(--delay);
}
@keyframes ll5-ember-rise {
  0%   { opacity:0; transform:translate3d(0,0,0) scale(.25); }
  12%  { opacity:.74; }
  72%  { opacity:.43; transform:translate3d(var(--drift),-70vh,0) scale(1); }
  100% { opacity:0;   transform:translate3d(var(--drift-end),-112vh,0) scale(.15); }
}

/* ─── Intro logo ─────────────────────────────────────────────── */
.ll5-intro-logo {
  position:absolute; z-index:46; left:50%; top:41%; width:min(760px,86vw); pointer-events:none; opacity:var(--logo-intro-o);
  transform:translate3d(calc(-50% + var(--logo-par-x)), calc(-50% + var(--logo-intro-y) + var(--logo-par-y)), 120px) scale(var(--logo-intro-s));
  filter:drop-shadow(0 24px 45px rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(255,211,0,.26)) drop-shadow(0 0 70px rgba(255,106,43,.16));
  will-change:transform,opacity;
}
.ll5-intro-logo::before {
  content:""; position:absolute; inset:-35% -18%; z-index:-1; opacity:.68;
  background:radial-gradient(ellipse at center,rgba(255,196,65,.22),rgba(255,106,43,.06) 45%,transparent 72%);
  filter:blur(10px);
}
.ll5-intro-logo img { width:100%; display:block; }

/* ─── Hero title ─────────────────────────────────────────────── */
.ll5-title {
  position:absolute; z-index:48; left:50%; top:57%; width:min(980px,calc(100vw - 2rem)); text-align:center; pointer-events:none;
  transform:translate3d(-50%, calc(-50% + var(--title-y)), 140px) scale(var(--title-s)); opacity:var(--title-o); will-change:opacity,transform;
}
.ll5-kicker {
  display:block; font-family:"Cinzel",Georgia,serif; color:var(--ember2); font-weight:800; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  text-shadow:0 0 26px rgba(255,106,43,.32);
}
.ll5-title h1 {
  margin:.68rem 0 0; font-family:"Cinzel Decorative","Cinzel",Georgia,serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem,8.2vw,7.1rem); line-height:.90; letter-spacing:.02em;
  text-shadow:0 12px 50px rgba(0,0,0,.94),0 0 36px rgba(255,106,43,.18);
}
.ll5-title h1 span { color:var(--ember); }
.ll5-title p { margin:1.12rem auto 0; max-width:58ch; color:var(--muted); font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.58; font-style:italic; }

/* ─── Scenes ─────────────────────────────────────────────────── */
.ll5-scenes { position:absolute; inset:0; z-index:30; transform-style:preserve-3d; pointer-events:none; }

.ll5-hero {
  position:absolute; left:50%; top:53%; width:100vw; height:100vh; aspect-ratio:auto; opacity:var(--hero-o);
  transform-origin:52% 60%; transform-style:preserve-3d;
  transform:translate3d(calc(-50% + var(--hero-x) + var(--hero-par-x)), calc(-50% + var(--hero-y) + var(--hero-par-y)), var(--hero-z, 0px)) rotateX(var(--hero-rx)) rotateY(var(--hero-ry)) rotateZ(var(--hero-rz)) scale(var(--hero-s));
  filter:drop-shadow(calc(var(--mx) * -30px) calc(var(--my) * -30px) 40px rgba(0,0,0,0.9)); will-change:opacity,transform;
}
.ll5-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.ll5-hero-grey  { filter:grayscale(1) contrast(1.12) brightness(.78); opacity:.88; }
.ll5-hero-color {
  filter:saturate(1.08) contrast(1.04) brightness(.93);
  -webkit-mask-image:linear-gradient(103deg,#000 0%,#000 calc(var(--reveal) - 9%),rgba(0,0,0,.80) calc(var(--reveal) - 4%),rgba(0,0,0,.14) calc(var(--reveal) + 3%),transparent calc(var(--reveal) + 9%),transparent 100%);
  mask-image:linear-gradient(103deg,#000 0%,#000 calc(var(--reveal) - 9%),rgba(0,0,0,.80) calc(var(--reveal) - 4%),rgba(0,0,0,.14) calc(var(--reveal) + 3%),transparent calc(var(--reveal) + 9%),transparent 100%);
}
.ll5-hero-edge {
  position:absolute; inset:-1%; opacity:var(--beam-o); mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(103deg,transparent calc(var(--reveal) - 8%),rgba(255,180,116,0) calc(var(--reveal) - 3%),rgba(255,219,150,.70) var(--reveal),rgba(255,106,43,.16) calc(var(--reveal) + 4%),transparent calc(var(--reveal) + 10%));
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 84%,transparent 100%);
}
.ll5-light-beam {
  position:absolute; z-index:52; top:-18vh; left:var(--beam-x); width:var(--beam-w); height:132vh; opacity:var(--beam-o); pointer-events:none; mix-blend-mode:screen;
  transform:translateX(-50%) rotate(13deg); transform-origin:top center;
  background:linear-gradient(90deg,transparent,rgba(255,235,176,.10),rgba(255,219,149,.26),rgba(255,235,176,.10),transparent);
  filter:blur(1px);
}
.ll5-light-beam::before { content:""; position:absolute; inset:0 42%; background:rgba(255,239,194,.34); filter:blur(8px); }

.ll5-side-scene {
  position:absolute; z-index:34; left:30vw; top:52%; width:min(44vw, 840px); aspect-ratio:1024/387; opacity:var(--side-o);
  transform:translate3d(calc(-50% + var(--side-x) + var(--side-par-x)), calc(-50% + var(--side-y) + var(--side-par-y)), var(--side-z, 28px)) rotateX(var(--side-rx)) rotateY(var(--side-ry, 0deg)) rotateZ(var(--side-rz)) scale(var(--side-s));
  filter:drop-shadow(0 32px 70px rgba(0,0,0,.86)); will-change:opacity,transform;
}
.ll5-side-scene img { width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; filter:saturate(1.03) contrast(1.04) brightness(.90); mix-blend-mode:screen; }

.ll5-map-scene {
  position:absolute; z-index:42; left:70vw; top:50%; width:min(44vw, 840px); aspect-ratio:1024/400; opacity:var(--map-o);
  transform:translate3d(calc(-50% + var(--map-x) + var(--map-par-x)), calc(-50% + var(--map-y) + var(--map-par-y)), var(--map-z, 34px)) rotateX(var(--map-rx)) rotateY(var(--map-ry, 0deg)) scale(var(--map-s));
  transform-origin:center center; transform-style:preserve-3d;
  filter:drop-shadow(0 34px 76px rgba(0,0,0,.86)) drop-shadow(0 0 46px rgba(255,106,43,.12)); will-change:opacity,transform;
}
.ll5-map-img { width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; filter:saturate(1.05) contrast(1.04) brightness(.90); mix-blend-mode:screen; }
.ll5-map-glow { position:absolute; inset:0; opacity:var(--route-glow-o); mix-blend-mode:screen; background:radial-gradient(circle at 22% 57%,rgba(255,106,43,.16),transparent 11rem),radial-gradient(circle at 66% 42%,rgba(255,180,116,.14),transparent 12rem); pointer-events:none; }

/* ─── Dungeon route SVG ──────────────────────────────────────── */
.ll5-route       { position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:translateZ(18px); pointer-events:none; }
.ll5-route-back  { fill:none; stroke:rgba(255,106,43,.15); stroke-width:12; stroke-linecap:round; stroke-linejoin:round; }
.ll5-route-main  { fill:none; stroke:var(--ember2); stroke-width:6.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1500; stroke-dashoffset:var(--route-dash); filter:drop-shadow(0 0 16px rgba(255,106,43,1)) drop-shadow(0 0 24px rgba(255,106,43,.42)); }
.ll5-route-spark { fill:none; stroke:rgba(255,239,190,.58); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:2 18; opacity:var(--route-glow-o); filter:drop-shadow(0 0 9px rgba(255,180,111,.9)); }
.ll5-route-node  { fill:var(--ember2); opacity:var(--route-node-o); filter:drop-shadow(0 0 16px rgba(255,106,43,.9)); transform-box:fill-box; transform-origin:center; animation:ll5-node-pulse 1.9s ease-in-out infinite; }
@keyframes ll5-node-pulse { 0%,100% { transform:scale(.84); } 50% { transform:scale(1.12); } }

/* Runner: webkit prefix added for Safari < 16 */
.ll5-runner {
  position:absolute; left:0; top:0; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; opacity:var(--route-node-o); pointer-events:none;
  background:radial-gradient(circle,#fff8d8 0%,var(--ember2) 38%,var(--ember) 68%,transparent 72%);
  filter:drop-shadow(0 0 12px rgba(255,106,43,.95)) drop-shadow(0 0 28px rgba(255,106,43,.5));
  -webkit-offset-path:path("M 75 220 C 150 220 230 255 300 250 C 400 240 480 255 520 230 C 540 210 545 150 550 135 C 560 110 650 115 700 115 C 750 115 780 150 810 210 C 830 250 920 240 980 220");
  -webkit-offset-distance:var(--runner-distance);
  -webkit-offset-rotate:0deg;
  offset-path:path("M 75 220 C 150 220 230 255 300 250 C 400 240 480 255 520 230 C 540 210 545 150 550 135 C 560 110 650 115 700 115 C 750 115 780 150 810 210 C 830 250 920 240 980 220");
  offset-distance:var(--runner-distance);
  offset-rotate:0deg;
}

/* ─── Content overlay (z-index 90+) ─────────────────────────── */
.ll5-content { position:absolute; inset:0; z-index:90; pointer-events:none; transform-style:preserve-3d; }

.ll5-cinematic-text {
  position:absolute; pointer-events:none;
  opacity:var(--o);
  z-index:91;
  transform-style:preserve-3d;
  transform: translate3d(var(--tx-offset, 0px), var(--y), 40px) rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 6deg)) scale(var(--s, 1));
  will-change:opacity,transform;
  transition: transform 0.08s ease-out;
}
.ll5-cinematic-text::before {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:160%; height:260%; background:radial-gradient(circle, rgba(2,1,1,0.92) 0%, rgba(2,1,1,0.80) 45%, transparent 78%);
  z-index:-1; pointer-events:none;
}
.ll5-cinematic-text .ll5-kicker { margin-bottom:.8rem; display:block; font-size:clamp(0.65rem, 1.2vw, 0.85rem); letter-spacing:0.4em; color:var(--ember2); }
.ll5-cinematic-text h2 {
  margin:0; font-family:"Cinzel Decorative","Cinzel",Georgia,serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem,4.5vw,3.6rem); line-height:1.05; letter-spacing:.02em;
  text-shadow:0 6px 25px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.9), 0 0 60px rgba(255,106,43,0.1);
  color:var(--bone);
}
.ll5-cinematic-text p {
  margin:1.2rem auto 0; font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.6; color:var(--muted); opacity:.95; font-style:italic; max-width:42ch;
  text-shadow:0 4px 18px rgba(0,0,0,0.95), 0 0 25px rgba(0,0,0,0.9);
}
.ll5-num {
  font-family:"Spectral", Georgia, serif;
  font-variant-numeric:lnum;
  display:inline-block;
}

.ll5-text-1 {
  --o:var(--card1-o); --y:var(--text1-y); --s:var(--text1-s);
  left:12vw; top:35%; transform-origin:left center; width:min(480px, 32vw);
  text-align:left; align-items:flex-start;
}
.ll5-text-1 h2,.ll5-text-3 h2 { text-align:left; }
.ll5-text-1 p,.ll5-text-3 p   { text-align:left; margin:1.2rem 0 0; }
.ll5-text-2 {
  --o:var(--card2-o); --y:var(--text2-y); --s:var(--text2-s);
  right:12vw; left:auto; top:35%; transform-origin:right center; width:min(480px, 32vw);
  text-align:right; align-items:flex-end;
}
.ll5-text-2 h2 { text-align:right; }
.ll5-text-2 p  { text-align:right; margin:1.2rem 0 0; }
.ll5-text-3 {
  --o:var(--card3-o); --y:var(--text3-y); --s:var(--text3-s);
  left:12vw; top:35%; transform-origin:left center; width:min(480px, 32vw);
  text-align:left; align-items:flex-start;
}
.ll5-text-4 {
  --o:var(--card4-o); --y:var(--text4-y); --s:var(--text4-s); --tx-offset:-50%;
  left:50%; top:35%;
  width:min(720px, 90vw); text-align:center; align-items:center;
  transform-origin:center center;
}
.ll5-text-4 h2 { text-align:center; font-size:clamp(2.2rem,5vw,4.2rem); }
.ll5-text-4 p  { text-align:center; max-width:52ch; }

/* 3D character assembly */
.ll5-assemble-char {
  display:inline-block;
  transform:translate3d(
    calc(var(--tx) * var(--assemble-p)),
    calc(var(--ty) * var(--assemble-p)),
    calc(var(--tz) * var(--assemble-p))
  ) rotateX(calc(var(--rx) * var(--assemble-p))) rotateY(calc(var(--ry) * var(--assemble-p))) rotateZ(calc(var(--rz) * var(--assemble-p)));
  opacity:calc(1 - var(--assemble-p));
  transition:transform 0.05s ease-out, opacity 0.05s ease-out;
}
.ll5-assemble-desc {
  opacity:var(--desc-o, 0);
  transform:translateY(var(--desc-y, 20px));
  transition:opacity 0.3s ease, transform 0.3s ease;
}

/* ─── Final CTA block ────────────────────────────────────────── */
.ll5-final {
  position:absolute; z-index:92; left:50%; top:50%; width:min(860px,calc(100vw - 2rem)); text-align:center; pointer-events:none;
  opacity:var(--final-o); transform:translate3d(-50%,calc(-50% + var(--final-y)),0); will-change:opacity,transform;
}
.ll5-final h2 { margin:0; font-family:"Cinzel Decorative","Cinzel",Georgia,serif; font-weight:900; text-transform:uppercase; line-height:.96; letter-spacing:.035em; font-size:clamp(2.1rem,6.3vw,4.9rem); text-shadow:0 16px 56px rgba(0,0,0,.96),0 0 34px rgba(255,106,43,.18); }
.ll5-final h2 span { color:var(--ember); }
.ll5-final p { margin:1.15rem auto 1.4rem; max-width:55ch; color:var(--muted); font-size:1.04rem; line-height:1.58; }
.ll5-actions { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; justify-content:center; pointer-events:auto; }

/* ─── Buttons ────────────────────────────────────────────────── */
.ll5-main-cta,
.ll5-secondary-cta {
  min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.35rem; border-radius:999px;
  text-decoration:none; font-family:"Cinzel",Georgia,serif; text-transform:uppercase; font-weight:900; font-size:.72rem; letter-spacing:.16em; transition:.24s ease;
}
.ll5-main-cta      { color:#160804; background:linear-gradient(180deg,#ffbd79,#ff6a2b 74%,#b83d18); border:1px solid rgba(255,210,142,.86); box-shadow:0 20px 60px rgba(0,0,0,.44),0 0 42px rgba(255,106,43,.30); }
.ll5-secondary-cta { color:var(--bone); border:1px solid rgba(255,180,111,.42); background:rgba(255,255,255,.045); }
.ll5-main-cta:hover,
.ll5-secondary-cta:hover { transform:translateY(-3px); }
.ll5-note { margin-top:.88rem; display:block; color:var(--muted2); font-size:.83rem; }

/* ─── UI chrome ──────────────────────────────────────────────── */
.ll5-fog {
  position:absolute; z-index:76; left:-10%; right:-10%; bottom:-1px; height:42vh; pointer-events:none; opacity:.52;
  background:linear-gradient(to top,rgba(3,2,1,.98),rgba(3,2,1,.60),transparent),
             radial-gradient(ellipse at 30% 70%,rgba(255,106,43,.08),transparent 40%),
             radial-gradient(ellipse at 70% 66%,rgba(255,180,111,.06),transparent 44%);
}
.ll5-progress { position:absolute; z-index:102; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); width:136px; height:2px; border-radius:99px; background:rgba(243,230,204,.13); overflow:hidden; }
.ll5-progress span { display:block; width:100%; height:100%; transform-origin:left center; transform:scaleX(var(--p)); background:linear-gradient(90deg,var(--ember),var(--ember2)); box-shadow:0 0 16px rgba(255,106,43,.85); }
.ll5-scroll-hint { position:absolute; z-index:102; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); font-family:"Cinzel",Georgia,serif; font-weight:800; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(243,230,204,.58); opacity:var(--hint-o); }
.ll5-grain { position:absolute; inset:0; z-index:104; pointer-events:none; opacity:.042; mix-blend-mode:screen; background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:3px 3px; }

/* ─── Tier cards ─────────────────────────────────────────────── */
.ll5-tiers {
  position:absolute; z-index:95; left:0; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; align-items:center;
  pointer-events:none; padding:0 2rem;
}
.ll5-tier-card {
  width:clamp(260px, 18vw, 300px); padding:1.8rem 1.5rem; border-radius:20px; border:1px solid rgba(255,180,111,.24);
  background:linear-gradient(180deg,rgba(22,14,9,.86),rgba(5,3,2,.74));
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 80px rgba(0,0,0,.68),0 0 40px rgba(255,106,43,.06);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); pointer-events:auto;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  will-change:opacity,transform; position:relative;
}
.ll5-tier-card:hover { border-color:var(--ember); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 40px 90px rgba(0,0,0,.78),0 0 50px rgba(255,106,43,.15); }
.ll5-tier-card:nth-child(1) { opacity:var(--t1-o, 0); transform:translate3d(var(--t1-x, -40px), var(--t1-y, 40px), 0); }
.ll5-tier-card:nth-child(2) { opacity:var(--t2-o, 0); transform:translate3d(0, var(--t2-y, 40px), 0) scale(1.05); border-color:var(--ember); }
.ll5-tier-card:nth-child(3) { opacity:var(--t3-o, 0); transform:translate3d(var(--t3-x, 40px), var(--t3-y, 40px), 0); }
.ll5-tier-card:hover:nth-child(1) { transform:translate3d(var(--t1-x, 0), calc(var(--t1-y, 0px) - 6px), 0); }
.ll5-tier-card:hover:nth-child(2) { transform:translate3d(0, calc(var(--t2-y, 0px) - 6px), 0) scale(1.05); }
.ll5-tier-card:hover:nth-child(3) { transform:translate3d(var(--t3-x, 0), calc(var(--t3-y, 0px) - 6px), 0); }
.ll5-tier-card h3    { margin:0; font-family:"Cinzel",serif; color:var(--ember2); font-size:1.35rem; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 0 20px rgba(255,106,43,.3); }
.ll5-tier-card h4    { margin:.4rem 0 1rem; font-family:"Cinzel",serif; color:var(--bone); font-size:.9rem; opacity:.8; }
.ll5-tier-card .price{ display:block; font-size:1.5rem; font-weight:bold; color:var(--green); margin-bottom:1rem; text-shadow:0 0 16px rgba(5,206,120,.4); }
.ll5-tier-card ul    { list-style:none; padding:0; margin:0 0 1.5rem; color:var(--muted); font-size:.82rem; line-height:1.5; }
.ll5-tier-card ul li { padding-left:1.5rem; position:relative; margin-bottom:.5rem; }
.ll5-tier-card ul li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:bold; }
.ll5-tier-card .ll5-main-cta { width:100%; min-height:44px; font-size:.65rem; }

/* ─── FAQ (reusable in Divi footer via Code module) ──────────── */
.ll5-faq { display:flex; flex-direction:column; gap:1rem; }
.ll5-faq details { background:linear-gradient(90deg,rgba(255,180,111,.05),transparent); border-left:2px solid rgba(255,180,111,.4); padding:1rem 1.5rem; border-radius:0 12px 12px 0; transition:.3s ease; }
.ll5-faq details:hover { border-color:var(--ember); background:linear-gradient(90deg,rgba(255,180,111,.1),transparent); }
.ll5-faq summary { font-family:"Cinzel",serif; font-weight:700; font-size:1.1rem; color:var(--bone); cursor:pointer; list-style:none; outline:none; }
.ll5-faq summary::-webkit-details-marker { display:none; }
.ll5-faq p { margin:1rem 0 0; color:var(--muted); font-size:1rem; line-height:1.6; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ll5-stage { height:1800svh; min-height:12000px; }
  .ll5-sticky { min-height:100svh; }
  .ll5-intro-logo { top:38%; width:88vw; }
  .ll5-title { top:56%; }
  .ll5-title h1 { font-size:clamp(2.15rem,14vw,4.7rem); }
  .ll5-title p  { font-size:.94rem; max-width:33ch; }
  .ll5-kicker   { font-size:.58rem; letter-spacing:.22em; }
  .ll5-light-beam { width:25vw; }
  .ll5-side-scene { left:50% !important; width:100vw !important; }
  .ll5-map-scene  { left:50% !important; width:100vw !important; }
  .ll5-route-main { stroke-width:8; }
  .ll5-cinematic-text {
    left:50% !important;
    right:auto !important;
    top:50% !important;
    transform:translate3d(-50%, calc(-50% + var(--y)), 0px) scale(var(--s, 1)) !important;
    width:90vw !important;
    text-align:center !important;
    align-items:center !important;
  }
  .ll5-cinematic-text h2 { font-size:clamp(1.8rem, 7vw, 2.6rem) !important; text-align:center !important; }
  .ll5-cinematic-text p  { font-size:0.95rem !important; padding:0 0.5rem; text-align:center !important; margin:1rem auto 0 !important; }
  .ll5-text-4 { top:40% !important; }
  .ll5-final  { width:calc(100vw - 1.2rem); top:48%; }
  .ll5-final p { font-size:.94rem; max-width:32ch; }
  .ll5-actions { flex-direction:column; gap:.65rem; }
  .ll5-main-cta,.ll5-secondary-cta { width:100%; max-width:360px; min-height:49px; font-size:.64rem; letter-spacing:.12em; }
  .ll5-progress { width:100px; bottom:calc(.75rem + env(safe-area-inset-bottom)); }
  .ll5-scroll-hint { display:none; }
  .ll5-grain { opacity:.030; }

  .ll5-tiers {
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    scroll-snap-type:x mandatory !important;
    padding:0 1.5rem 2rem !important;
    gap:1rem !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    max-height:none !important;
    pointer-events:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .ll5-tier-card {
    width:80vw !important;
    flex-shrink:0 !important;
    scroll-snap-align:center !important;
    margin:0 !important;
    transform:none !important;
    opacity:1 !important;
  }
  .ll5-tier-card h3 { font-size:1.3rem; }
  .ll5-tier-card ul { margin-bottom:1.5rem; font-size:.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ll5-stage  { height:auto; min-height:100svh; }
  .ll5-sticky { position:relative; min-height:100svh; }
  .ll5-intro-logo,.ll5-title,.ll5-hero,.ll5-side-scene,.ll5-map-scene,.ll5-final {
    position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:1rem auto; opacity:1; transform:none;
  }
  .ll5-hero { width:min(880px,100vw); }
  .ll5-hero-color { -webkit-mask-image:none; mask-image:none; }
  .ll5-light-beam,.ll5-hero-edge { display:none; }
}