/* site.css — Tampee CONTENT pages. Lightweight, fast, and THEMED PER TERPENE: each
   page sets --terp to its terpene's canonical colour, so a pinene page reads pine-green,
   a limonene page amber-citrus, a linalool page indigo — one brand, many identities.
   Brand-action elements (the CTA, list badges) keep the teal rendered-glass --brand-fill. */
:root{
  --bg:#0a1311; --panel:#12211d; --line:rgba(255,255,255,.10);
  --text:#e9f5f0; --muted:#9fc2b8; --accent:#16f5a7; --teal:#0e9070; --lime:#7be36a;
  --terp:#16f5a7; /* overridden per page */
  --brand-fill:radial-gradient(120% 150% at 30% 16%, color-mix(in srgb,var(--accent) 54%,#fff) 0%, var(--accent) 42%, color-mix(in srgb,var(--accent) 30%,#000) 100%);
  --brand-fill-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -5px 10px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(120% 80% at 50% -10%, #103029 0%, var(--bg) 55%, #060d0b 100%);
  color:var(--text); font:16px/1.65 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
.wrap{position:relative; max-width:780px; margin:0 auto; padding:18px 20px 80px}

/* per-terpene aura glow behind the top of the page */
.aura{position:fixed; top:-120px; left:50%; transform:translateX(-50%); width:1000px; height:460px;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--terp) 40%,transparent), transparent 72%);
  pointer-events:none; z-index:-1; opacity:.55; filter:saturate(1.2)}

/* brand header — copied from the webapp (styles.v8.css #brand-name) so the logo
   size, the lockup, and the "Tampee" colour-blend read identically: 52px Orbit,
   32px lime->teal wordmark with the same top-sheen + drop-shadow glow, tagline beneath. */
.site-head{display:flex; align-items:center; gap:12px; padding:14px 0 8px}
.brand{display:inline-flex; align-items:center; gap:14px}
.brand:hover{text-decoration:none}
.orbit-logo{display:block; flex-shrink:0; width:52px; height:52px}
.brand-text{display:flex; flex-direction:column; min-width:0}
.wordmark{
  width:fit-content; max-width:100%;
  font-size:32px; font-weight:800; line-height:1.1; letter-spacing:.2px;
  /* rendered wordmark: a top sheen over the lime->teal hue + drop-shadows for depth/glow */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 40%, rgba(0,0,0,.16) 100%),
    linear-gradient(92deg, #b6f24a, #2fe6a8 50%, #25dcdc);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(37,220,220,.38))}
.site-head .tag{font-size:14.5px; color:var(--muted)}
nav.crumbs{font-size:12.5px; color:var(--muted); margin:16px 0 4px}
nav.crumbs a{color:var(--muted)} nav.crumbs b{color:var(--text)}

h1{font-size:31px; line-height:1.16; font-weight:850; margin:.28em 0 .12em; letter-spacing:-.01em}
h1::after{content:""; display:block; width:54px; height:4px; border-radius:3px; margin-top:14px;
  background:var(--terp); box-shadow:0 0 16px color-mix(in srgb,var(--terp) 70%,transparent)}
.dek{font-size:17px; color:var(--muted); margin:14px 0 24px}
h2{font-size:20px; font-weight:800; margin:36px 0 12px; padding-left:12px;
  border-left:4px solid var(--terp)}
p{margin:0 0 14px}

/* lede / science block — accented by the terpene colour */
.lede{position:relative; background:color-mix(in srgb,var(--panel) 72%,transparent);
  border:1px solid var(--line); border-left:3px solid var(--terp);
  border-radius:14px; padding:16px 18px; margin:0 0 26px}
.lede .terp-tag{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px;
  color:var(--text); margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em}
.terp-dot{width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffffffcc, transparent 58%), var(--c,#16f5a7);
  box-shadow:0 1px 5px rgba(0,0,0,.55), 0 0 10px color-mix(in srgb,var(--c,#16f5a7) 60%,transparent)}

/* strain list — each row is a clickable card into the webapp, led by the strain's own orb */
ol.strains{list-style:none; margin:0; padding:0; display:grid; gap:9px}
ol.strains li{margin:0}
.s-card{display:flex; align-items:center; gap:13px; padding:10px 13px; border-radius:13px;
  background:color-mix(in srgb,var(--panel) 60%,transparent); border:1px solid var(--line);
  color:var(--text); text-decoration:none; transition:transform .14s, border-color .14s, box-shadow .14s}
.s-card:hover{text-decoration:none; transform:translateY(-2px); border-color:color-mix(in srgb,var(--terp) 60%,var(--line));
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8)}
.s-orb{flex-shrink:0; width:46px; height:46px; border-radius:50%; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.5), 0 0 0 2px color-mix(in srgb,var(--terp) 45%,transparent)}
.orb{display:block; width:100%; height:100%}
.s-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.s-name{font-weight:800; font-size:15.5px; line-height:1.25}
.s-meta{font-size:12.5px; color:var(--muted)} .s-type{font-weight:700}
.s-why{font-size:12.5px; color:var(--muted)}
.s-go{flex-shrink:0; font-size:20px; color:var(--terp); opacity:.55; transition:opacity .14s, transform .14s}
.s-card:hover .s-go{opacity:1; transform:translateX(3px)}

/* related links + CTA */
.related{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px}
.related a{display:inline-block; background:color-mix(in srgb,var(--panel) 65%,transparent);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:13px; color:var(--text)}
.related a:hover{text-decoration:none; border-color:color-mix(in srgb,var(--terp) 55%,var(--line))}
.cta{display:block; text-align:center; margin:32px 0 10px; padding:16px 18px; border-radius:14px;
  background:var(--brand-fill); box-shadow:var(--brand-fill-shadow); color:#06140f; font-weight:800; font-size:16px}
.cta:hover{text-decoration:none; filter:brightness(1.05)}
.near{font-size:13.5px; color:var(--muted); text-align:center; margin:0 0 8px}

/* faq */
.faq details{border:1px solid var(--line); border-radius:12px; padding:2px 15px; margin:0 0 9px;
  background:color-mix(in srgb,var(--panel) 55%,transparent)}
.faq summary{cursor:pointer; font-weight:700; padding:12px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--terp); font-weight:800; margin-right:9px}
.faq details[open] summary::before{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line); margin-bottom:8px}
.faq p{font-size:14.5px; color:var(--muted)}

footer{margin-top:44px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
footer a{color:var(--muted)}
.disclaimer{font-size:12px; color:#7e9c93; margin-top:10px}

@media (max-width:520px){ h1{font-size:26px}
  .orbit-logo{width:46px; height:46px} .wordmark{font-size:27px} .site-head .tag{font-size:13px} }

/* ============ animated, layout-varied HERO ============ */
.hero{margin:16px 0 8px}
.terp-kicker{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin-bottom:8px}
.hero h1{margin:.1em 0 .15em}
.emo{display:inline-block; vertical-align:middle; margin-left:4px}
.emo .emotif{width:74px}
.h-ring{text-align:center}
.h-ring .mol-centre{width:min(240px,64%); margin:2px auto 4px}
.h-ring h1::after{margin-left:auto; margin-right:auto}
.h-ring .terp-kicker{justify-content:center}
.h-chain .mol-banner{width:100%; max-width:540px; margin:0 auto 12px; padding:8px 14px;
  border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 52%,transparent)}
.h-chain .mol-banner .molecule{height:118px}
.h-macro{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.h-macro .hero-txt{flex:1; min-width:240px}
.h-macro .mol-side{width:min(230px,40%)}
.h-macro h1::after{margin-left:0}
.emo-lg{margin-top:12px} .emo-lg .emotif{width:132px}
@media (max-width:560px){ .h-macro{flex-direction:column-reverse; text-align:center}
  .h-macro .mol-side{width:min(210px,62%)} .h-macro .terp-kicker{justify-content:center} .h-macro h1::after{margin:14px auto 0} }

/* ============ terpene MOLECULE (unique per page) ============ */
.molecule{display:block; width:100%; height:auto; overflow:visible}
.mol-float{transform-box:fill-box; transform-origin:center; animation:molFloat 7s ease-in-out infinite}
@keyframes molFloat{0%,100%{transform:translateY(0) rotate(-2.5deg)} 50%{transform:translateY(-4px) rotate(2.5deg)}}
.mbond{stroke:var(--m); stroke-width:2.4; stroke-linecap:round; fill:none;
  stroke-dasharray:130; stroke-dashoffset:130; animation:molDraw .9s ease forwards}
@keyframes molDraw{to{stroke-dashoffset:0}}
.matom{fill:#0c1714; stroke:var(--m); stroke-width:1.7; opacity:0;
  animation:molAtom .5s ease forwards, atomGlow 3.2s ease-in-out infinite}
@keyframes molAtom{to{opacity:1}}
@keyframes atomGlow{0%,100%{filter:drop-shadow(0 0 1px var(--m))} 50%{filter:drop-shadow(0 0 5px var(--m))}}
.mlabel{fill:var(--m); font:800 9px -apple-system,sans-serif}

/* ============ effect MOTIFS (unique per effect) ============ */
.emotif{width:88px; height:auto; vertical-align:middle; overflow:visible}
.e-dot{fill:var(--e); animation:eGlow 2s ease-in-out infinite}
@keyframes eGlow{0%,100%{filter:drop-shadow(0 0 1px var(--e))} 50%{filter:drop-shadow(0 0 7px var(--e))}}
.e-wave{fill:none; stroke:var(--e); stroke-width:3; stroke-linecap:round; opacity:.85; animation:eWave 3s linear infinite}
.e-wave2{opacity:.4; animation-duration:4.4s}
@keyframes eWave{to{transform:translateX(-30px)}}
.e-bolt{fill:none; stroke:var(--e); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:150; animation:eBolt 1.5s ease-in-out infinite}
@keyframes eBolt{0%{stroke-dashoffset:150; opacity:.6} 45%{stroke-dashoffset:0; opacity:1} 65%{opacity:.35} 80%{opacity:1} 100%{stroke-dashoffset:0}}
.e-focus line{stroke:var(--e); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:50; animation:eFocus 2.6s ease-in-out infinite}
@keyframes eFocus{0%,100%{stroke-dashoffset:50; opacity:.3} 55%{stroke-dashoffset:0; opacity:1}}
.e-ray{stroke:var(--e); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:26; animation:eRay 2.2s ease-out infinite}
@keyframes eRay{0%{stroke-dashoffset:26; opacity:0} 40%{opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
.e-rise{fill:none; stroke:var(--e); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; animation:eRise 2s ease-in-out infinite}
@keyframes eRise{0%{opacity:0; transform:translateY(8px)} 40%{opacity:1} 100%{opacity:0; transform:translateY(-10px)}}
.e-pulse{fill:none; stroke:var(--e); stroke-width:2.4; transform-box:fill-box; transform-origin:center; animation:ePulse 2.6s ease-out infinite}
.e-pulse2{animation-delay:1.3s}
@keyframes ePulse{0%{transform:scale(.4); opacity:.9} 100%{transform:scale(1.5); opacity:0}}
.e-sink{fill:none; stroke:var(--e); stroke-width:2.6; transform-box:fill-box; transform-origin:center; animation:eSink 3.6s ease-in-out infinite}
@keyframes eSink{0%,100%{transform:translateY(0) scale(1); opacity:.9} 50%{transform:translateY(5px) scale(.9); opacity:.5}}
.e-z{fill:var(--e); font:800 13px -apple-system,sans-serif; animation:eZ 3s ease-in-out infinite}
.e-z2{font-size:9px; animation-delay:.6s}
@keyframes eZ{0%{opacity:0; transform:translateY(5px)} 40%{opacity:1} 100%{opacity:0; transform:translateY(-9px)}}

/* ============ living page: floating orbs + drifting aura ============ */
.s-orb{animation:orbFloat 5s ease-in-out infinite}
ol.strains li:nth-child(2n) .s-orb{animation-duration:6.5s; animation-delay:-1.5s}
ol.strains li:nth-child(3n) .s-orb{animation-duration:5.8s; animation-delay:-.8s}
@keyframes orbFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.aura{animation:auraDrift 14s ease-in-out infinite}
@keyframes auraDrift{0%,100%{transform:translateX(-50%) scale(1); opacity:.5} 50%{transform:translateX(-46%) scale(1.08); opacity:.66}}

@media (prefers-reduced-motion:reduce){ *{animation:none!important}
  .mbond{stroke-dashoffset:0!important} .matom{opacity:1!important} }

/* ============ drifting BACKGROUND: real strain orbs + colour blobs ============ */
.bg-field{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.wrap{position:relative; z-index:1}
.bg-blob{position:absolute; width:48vmax; height:48vmax; border-radius:50%; filter:blur(64px); opacity:.20}
.bb1{background:radial-gradient(closest-side,var(--terp),transparent 70%); left:-12%; top:-16%; animation:bgB1 24s ease-in-out infinite}
.bb2{background:radial-gradient(closest-side,var(--mood),transparent 70%); right:-16%; top:22%; animation:bgB2 30s ease-in-out infinite}
.bb3{background:radial-gradient(closest-side,var(--terp),transparent 70%); left:22%; bottom:-24%; animation:bgB3 27s ease-in-out infinite}
@keyframes bgB1{0%,100%{transform:translate(0,0)}50%{transform:translate(8vw,6vh)}}
@keyframes bgB2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7vw,5vh)}}
@keyframes bgB3{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-6vh)}}
.bg-orb{position:absolute; width:200px; height:200px; opacity:.18; filter:saturate(1.15) blur(.5px);
  transform:translate(-50%,-50%); animation:orbDrift 26s ease-in-out infinite}
.bg-orb .orb{width:100%;height:100%}
.bg-orb.bo1{animation-duration:31s;animation-delay:-6s} .bg-orb.bo2{animation-duration:28s;animation-delay:-13s; width:150px;height:150px}
.bg-orb.bo3{animation-duration:34s;animation-delay:-4s; width:240px;height:240px} .bg-orb.bo4{animation-duration:29s;animation-delay:-9s; width:170px;height:170px}
@keyframes orbDrift{0%,100%{transform:translate(-50%,-50%) scale(1)}33%{transform:translate(-46%,-54%) scale(1.1)}66%{transform:translate(-54%,-47%) scale(.94)}}

/* ============ hero designs (one per page) ============ */
.hero{position:relative; margin:14px 0 8px}
/* centred molecule */
.h-ctr{text-align:center}
.h-ctr .mol-centre{width:min(240px,62%); margin:2px auto 2px}
.h-ctr .terp-kicker{justify-content:center} .h-ctr h1::after{margin-left:auto;margin-right:auto}
/* split: text + molecule */
.h-split{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.h-split .hero-txt{flex:1; min-width:240px} .h-split .mol-side{width:min(230px,40%)}
@media(max-width:560px){ .h-split{flex-direction:column-reverse; text-align:center} .h-split .mol-side{width:min(200px,60%)} .h-split .terp-kicker{justify-content:center} .h-split h1::after{margin:14px auto 0} }
/* banner */
.h-banner .mol-banner{width:100%; max-width:540px; margin:0 auto 12px; padding:8px 14px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 52%,transparent)}
.h-banner .mol-banner .molecule{height:118px}
/* orb cloud */
.h-cloud{text-align:center}
.h-cloud .orb-cloud{position:relative; height:210px; max-width:470px; margin:0 auto 4px}
.cloud-orb{position:absolute; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden;
  box-shadow:0 5px 18px rgba(0,0,0,.5), 0 0 0 2px color-mix(in srgb,var(--terp) 45%,transparent); animation:orbFloat 5s ease-in-out infinite}
.cloud-orb .orb{width:100%;height:100%}
.cc1{animation-duration:6.5s;animation-delay:-1s}.cc2{animation-duration:5.6s;animation-delay:-2s}.cc3{animation-duration:7s;animation-delay:-.6s}.cc4{animation-duration:6s;animation-delay:-3s}.cc5{animation-duration:6.8s;animation-delay:-1.5s}.cc6{animation-duration:5.4s;animation-delay:-2.4s}
.h-cloud .terp-kicker{justify-content:center} .h-cloud h1::after{margin-left:auto;margin-right:auto}
/* big stat */
.h-stat .stat-wrap{display:flex; align-items:center; gap:20px; margin-bottom:8px; flex-wrap:wrap}
.stat-big{display:flex; align-items:center; gap:12px}
.stat-n{font-size:86px; font-weight:900; line-height:.85; letter-spacing:-3px;
  background:linear-gradient(120deg,var(--terp),color-mix(in srgb,var(--mood) 72%,#fff)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-l{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); line-height:1.1}

/* ============ list layouts (grid + podium, in addition to ranked) ============ */
.s-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px}
.s-tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:14px 10px;
  border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--panel) 58%,transparent);
  color:var(--text); text-decoration:none; transition:transform .14s, border-color .14s}
.s-tile:hover{text-decoration:none; transform:translateY(-3px); border-color:color-mix(in srgb,var(--terp) 60%,var(--line))}
.s-tile .s-orb{width:58px; height:58px; margin-bottom:4px}
.t-name{font-weight:800; font-size:14.5px; line-height:1.2} .t-meta{font-size:12px; color:var(--muted)} .t-why{font-size:11.5px; color:var(--muted)}
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.pod{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:16px 12px;
  border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--panel) 60%,transparent);
  color:var(--text); text-decoration:none; transition:transform .14s, border-color .14s}
.pod:hover{text-decoration:none; transform:translateY(-3px); border-color:color-mix(in srgb,var(--terp) 65%,var(--line))}
.pod1{border-color:color-mix(in srgb,var(--terp) 55%,var(--line))}
.pod-rank{font-size:12px; font-weight:900; color:var(--terp)}
.pod .s-orb{width:80px; height:80px}
.pod-name{font-weight:850; font-size:15px} .pod-meta,.pod-why{font-size:12px; color:var(--muted)}
@media(max-width:560px){ .podium{grid-template-columns:1fr} }

/* ============ "by the numbers" computed data ============ */
.bynum{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin:14px 0 8px}
.bn-stat{text-align:center; padding:14px 10px; border:1px solid var(--line); border-radius:14px;
  background:color-mix(in srgb,var(--panel) 55%,transparent); min-width:0}
.bn-num{display:block; font-size:25px; font-weight:900; line-height:1; overflow-wrap:anywhere; hyphens:auto}
/* text values (terpene/flavor) — smaller than the big % numbers so long words like
   "Caryophyllene" fit the card instead of overrunning into the next one */
.bn-num.bn-text{font-size:16px; font-weight:800; line-height:1.15}
.bn-lbl{display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:6px}

/* ============ storytelling rows (animated SMIL motifs) ============ */
.story{display:grid; gap:14px; margin:8px 0}
.story-row{display:flex; align-items:center; gap:18px; padding:14px 16px; border:1px solid var(--line);
  border-radius:16px; background:color-mix(in srgb,var(--panel) 50%,transparent)}
.story-row.rev{flex-direction:row-reverse}
.story-art{flex-shrink:0; width:118px; height:118px}
.story-svg{width:100%; height:100%; display:block}
.story-txt h3{font-size:16px; font-weight:800; margin:0 0 5px} .story-txt p{font-size:14px; color:var(--muted); margin:0}
@media(max-width:560px){ .story-row,.story-row.rev{flex-direction:column; text-align:center} .story-art{width:106px;height:106px} }

/* footer byline + methodology list */
.byline{font-size:13px; color:var(--muted)} .byline a{color:var(--accent)}
footer ul{margin:.3em 0; padding-left:1.1em} footer li{margin:.25em 0}

/* ============ FULL-BLEED per-page animated background (effect motif + molecule) ============ */
.bg-motif{position:fixed; z-index:-2; pointer-events:none; line-height:0}
.bg-motif .emotif{height:auto; filter:drop-shadow(0 0 40px var(--terp))}
.bg-motif-a{top:-8vmax; left:-12vmax; opacity:.16; animation:bgDriftA 26s ease-in-out infinite}
.bg-motif-a .emotif{width:86vmax}
.bg-motif-b{bottom:-12vmax; right:-14vmax; opacity:.10; animation:bgDriftB 34s ease-in-out infinite}
.bg-motif-b .emotif{width:66vmax; transform:scaleX(-1)}
@keyframes bgDriftA{0%,100%{transform:translate(0,0) rotate(-6deg)} 50%{transform:translate(3vmax,2vmax) rotate(2deg)}}
@keyframes bgDriftB{0%,100%{transform:translate(0,0) rotate(5deg)} 50%{transform:translate(-3vmax,-2vmax) rotate(-3deg)}}
.bg-mol{position:fixed; z-index:-2; right:-6vmax; top:24%; width:48vmax; opacity:.07; pointer-events:none; animation:bgMol 40s linear infinite}
.bg-mol .molecule{width:100%; height:auto}
@keyframes bgMol{to{transform:rotate(360deg)}}
/* effect-family palette accents on the background blobs so families read differently */
.bg-e-sleepy .bb1,.bg-e-sleepy .bb2,.bg-e-relaxed .bb1{opacity:.16}
.bg-e-euphoric .bb1,.bg-e-happy .bb1,.bg-e-uplifted .bb1{opacity:.26}
.bg-e-focused .bb2,.bg-e-energetic .bb2{opacity:.24}
@media (prefers-reduced-motion:reduce){.bg-motif-a,.bg-motif-b,.bg-mol{animation:none!important}}

/* ============ STORY SCENE — unique animated hero per page (molecule + effect + particles) ============ */
.hero.h-story{margin:6px 0 20px}
.story-stage{position:relative; height:220px; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(130% 120% at 50% 0%, color-mix(in srgb,var(--terp) 16%, transparent), transparent 72%),
             linear-gradient(180deg, color-mix(in srgb,var(--mood,#0b1411) 10%, transparent), transparent)}
.pfield{position:absolute; inset:0; width:100%; height:100%; opacity:.55}
.pf-dot{opacity:.5; transform-box:fill-box; transform-origin:center; animation:pfDrift 7s ease-in-out infinite}
@keyframes pfDrift{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.st-mol{position:absolute; width:46%; max-width:300px; filter:drop-shadow(0 0 22px color-mix(in srgb,var(--terp) 60%, transparent))}
.st-mol .molecule{width:100%; height:auto}
.st-motif{position:absolute; width:30%; max-width:180px}
.st-motif .emotif{width:100%}
/* seeded composition variants so the scene sits differently page to page */
.sv-0 .st-mol{left:50%; top:50%; transform:translate(-50%,-50%)} .sv-0 .st-motif{right:7%; bottom:9%}
.sv-1 .st-mol{left:4%; top:50%; transform:translateY(-50%)}      .sv-1 .st-motif{right:9%; top:13%}
.sv-2 .st-mol{right:4%; top:50%; transform:translateY(-50%)}     .sv-2 .st-motif{left:9%; bottom:11%}
.hero.h-story .hero-txt{margin-top:16px}

/* ============ rich animated VIDEO background (same asset as the app), per-terpene tinted ============ */
.bg-animation{position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%, #12161b, #07090c 70%)}
.bg-video{position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto;
  transform:translate(-50%,-50%); object-fit:cover;
  filter:hue-rotate(var(--bgrot,-115deg)) saturate(1.25) brightness(.82)}
.bg-overlay{position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(7,10,14,.58) 0%, rgba(7,10,14,.70) 100%),
             radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--terp) 26%, transparent), transparent 68%)}
@media (prefers-reduced-motion:reduce){ .bg-video{display:none} }