/* Sol Food · immersion layer (SF-ENHANCE), loaded after site.css.
   Hero sunrise + parallax, the elevated scalar section, the 3D/AR jar, the Tribe band,
   shared reveals. Motion is transform/opacity only and switches off under reduced motion.
   The Field Guide has its own sheet (field-guide.css). */


:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

/* ---------- shared reveals ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-sfx-reveal]{opacity:0;translate:0 28px;transition:opacity .9s var(--ease-out) var(--d,0ms),translate .9s var(--ease-out) var(--d,0ms)}
  .js [data-sfx-reveal].is-in{opacity:1;translate:0 0}
}

/* ---------- micro-interactions on the existing buttons ---------- */
.btn{transition:transform .25s var(--ease-out),box-shadow .3s var(--ease-out),background-color .25s,color .25s}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}

/* nav: one more link, so tighten between 960 and 1240 */
@media (min-width:960px) and (max-width:1239px){.nav ul{gap:1.15rem}.nav a{font-size:.66rem;letter-spacing:.14em}}

/* ---------- HERO: sunrise light + parallax ---------- */
.sfx-hero-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-grid{z-index:1}
/* Two compositor-only layers: a warm glow that rises (transform + opacity) and a ray wheel that
   turns (transform). Rasterised once, so the hero never repaints while they move. */
.sfx-sunrise{position:absolute;inset:0;--sx:50%;--sy:76%}
@media (min-width:960px){.sfx-sunrise{--sx:74%;--sy:52%}}
.sfx-sunrise::before,.sfx-sunrise::after{content:"";position:absolute;left:var(--sx);top:var(--sy);translate:-50% -50%;border-radius:50%;pointer-events:none}
.sfx-sunrise::before{width:min(150vw,62rem);aspect-ratio:1.5;background:radial-gradient(closest-side,rgba(255,204,118,.36),rgba(233,170,60,.13) 55%,rgba(233,170,60,0))}
.sfx-sunrise::after{width:min(190vw,80rem);aspect-ratio:1;
  background:repeating-conic-gradient(rgba(255,214,140,.10) 0deg 1.6deg,rgba(255,214,140,0) 1.6deg 11deg);
  -webkit-mask:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.45) 40%,transparent 72%);
          mask:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.45) 40%,transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .js .sfx-sunrise::before{animation:sfx-rise 2.6s var(--ease-expo) .2s both}
  .js .sfx-sunrise::after{animation:sfx-fade 2.4s ease .6s both,sfx-rays 180s linear infinite}
  .js .hero .fol{transform:translate3d(calc(var(--hx,0) * 16px),calc(var(--hy,0) * 12px),0)}
  .js .hero .hero-jar{transform:translate3d(calc(var(--hx,0) * -10px),calc(var(--hy,0) * -8px),0) rotate(calc(var(--hx,0) * -1.2deg))}
  .js .hero .hero-glow{transform:translate3d(calc(var(--hx,0) * -4px),calc(var(--hy,0) * -4px),0)}
}
@keyframes sfx-rise{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
@keyframes sfx-fade{from{opacity:0}to{opacity:1}}
@keyframes sfx-rays{to{rotate:360deg}}

.sfx-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease-out)}
.sfx-film.is-playing{opacity:.6}
.sfx-hero-stage:has(.sfx-film.is-playing) .sfx-sunrise{opacity:.4}

/* ---------- SCALAR: the field, the altar, the ritual block ---------- */
.sfx-scalar{text-align:left;isolation:isolate}
.sfx-scalar::before{z-index:2}
.sfx-field{position:absolute;inset:0;overflow:hidden;z-index:0}
.sfx-field .scalar-rings{transition:opacity 1.2s var(--ease-out)}
@media (min-width:960px){.sfx-field .scalar-rings{left:28%}}
.sfx-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s var(--ease-out)}
.sfx-scalar.is-gl .sfx-gl{opacity:1}
.sfx-scalar.is-gl .scalar-rings{opacity:0}

.sfx-scalar-grid{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,3rem);align-items:center}
@media (min-width:960px){.sfx-scalar-grid{grid-template-columns:.95fr 1.05fr;gap:4.5rem}}

.sfx-altar{position:relative;margin:0 auto;width:min(80vw,32rem);aspect-ratio:1;display:grid;place-items:center}
.sfx-altar::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(242,190,96,.36),rgba(217,165,33,0) 66%);filter:blur(8px)}
.sfx-altar-flower{position:absolute;inset:-14%;width:128%;max-width:none;height:128%;color:var(--gold);opacity:.42;transition:opacity 1.2s var(--ease-out)}
.sfx-ring{position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(226,178,58,.6);box-shadow:0 0 18px rgba(242,190,96,.18),inset 0 0 18px rgba(242,190,96,.12);opacity:.35;scale:calc(1 + var(--k) * .28);transition:opacity 1.2s}
.sfx-scalar.is-gl .sfx-altar-flower,.sfx-scalar.is-gl .sfx-ring{opacity:0}
.sfx-altar-jar{position:relative;width:62%;transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0) rotate(calc(var(--px,0) * -1.6deg))}
.sfx-altar-jar img{width:100%;filter:drop-shadow(0 34px 34px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(242,190,96,.14))}
@media (prefers-reduced-motion:no-preference){
  .js .sfx-ring{animation:sfx-ring 7.2s linear infinite;animation-delay:calc(var(--k) * -2.4s)}
  .js .sfx-altar-jar{animation:sfx-float 7s ease-in-out infinite}
}
@keyframes sfx-ring{0%{scale:.72;opacity:0}14%{opacity:.75}100%{scale:1.95;opacity:0}}
@keyframes sfx-float{50%{translate:0 -9px}}

.sfx-tilt{position:absolute;left:50%;bottom:-.6rem;translate:-50% 0;min-height:2.75rem;padding:.5rem 1rem;border:1px solid var(--gold-thin);border-radius:2px;background:rgba(23,11,4,.7);color:var(--gold-lt);font:600 .72rem/1 var(--f-caps);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

.sfx-ritual{position:relative;padding:clamp(1.6rem,4.5vw,3rem);background:rgba(23,11,4,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sfx-ritual h2{font-size:clamp(2.6rem,7.6vw,4.7rem);line-height:.98;margin-bottom:1.3rem}
.sfx-ritual .scalar-lede{margin:0;max-width:none;font-size:clamp(1.25rem,2.2vw,1.55rem)}
.sfx-ritual .drule{margin:1.6rem 0 1.4rem;width:min(13rem,70%)}

/* ---------- 3D / AR jar ---------- */
.sfx-ar{position:relative;overflow:hidden;padding:var(--sec) 0;color:var(--text);
  background:var(--lattice) center top/var(--tile) auto repeat,radial-gradient(90% 70% at 70% 50%,var(--bg0) 0%,var(--bg1) 55%,var(--bg2) 100%);background-color:var(--bg1)}
.sfx-ar::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;pointer-events:none;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/100% 3px no-repeat,linear-gradient(var(--gold-thin),var(--gold-thin)) 0 6px/100% 1px no-repeat}
.sfx-ar-grid{display:grid;gap:2.5rem;align-items:center}
.sfx-ar-copy h2{margin-bottom:1.3rem}
.sfx-ar-copy p{max-width:32rem}
.sfx-ar-stage{position:relative;aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(60% 55% at 50% 48%,rgba(242,190,96,.22),rgba(23,11,4,0) 70%),var(--bg2)}
.sfx-ar-poster{width:72%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6));transition:opacity .6s var(--ease-out)}
.sfx-ar-load{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;background:rgba(23,11,4,.8)}
.sfx-ar-status{position:absolute;left:1rem;right:1rem;bottom:1rem;text-align:center;margin:0}
.sfx-ar-status:empty{display:none}
.sfx-mv{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);--poster-color:transparent;background:transparent}
.sfx-ar-stage.is-3d .sfx-ar-poster{opacity:0}
.sfx-mv:focus-visible{outline:2px solid var(--gold-lt);outline-offset:-8px}
.sfx-ar-btn{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0}
@media (min-width:960px){.sfx-ar-grid{grid-template-columns:1fr 1.15fr;gap:5rem}}

/* ---------- TRIBE band ---------- */
.sfx-tribe{position:relative;overflow:hidden;isolation:isolate;padding:clamp(5rem,13vw,9.5rem) 0;text-align:center;color:var(--text);
  background:radial-gradient(60% 90% at 50% 50%,#4a2a12 0%,var(--bg1) 55%,var(--bg2) 100%)}
.sfx-tribe::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;pointer-events:none;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/100% 3px no-repeat,linear-gradient(var(--gold-thin),var(--gold-thin)) 0 6px/100% 1px no-repeat}
.sfx-tribe-seed{position:absolute;left:50%;top:50%;width:min(130vw,62rem);height:auto;aspect-ratio:1;translate:-50% -50%;color:var(--gold);opacity:.13;z-index:-1}
.sfx-tribe-line{font-size:clamp(2.4rem,7.4vw,5.4rem);line-height:1.02;max-width:16ch;margin:0 auto}
.sfx-tribe-sub{font-family:var(--f-caps);font-weight:600;font-size:clamp(.95rem,2.4vw,1.25rem);letter-spacing:.32em;padding-left:.32em;text-transform:uppercase;color:var(--gold-lt);margin:0}
.sfx-tribe .drule{margin:1.6rem auto}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sfx-tribe-seed{animation:sfx-turn linear both;animation-timeline:view()}
    .sfx-tribe-line{background:linear-gradient(100deg,var(--cream) 38%,#ffe2a0 50%,var(--cream) 62%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
      animation:sfx-sheen linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
    .sfx-tribe-line em{-webkit-text-fill-color:var(--gold)}
  }
}
@keyframes sfx-turn{from{rotate:-24deg;scale:.9}to{rotate:24deg;scale:1.06}}
@keyframes sfx-sheen{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- the shop CTA steps aside inside the Field Guide ---------- */
.sfx-guide-on .sticky-cta{transform:translateY(120%)!important;pointer-events:none!important;visibility:hidden}
.sfx-guide-on .sticky-cta .btn{pointer-events:none!important}
.sfx-ar-load[hidden],.sfx-tilt[hidden]{display:none}

/* ---------- one-for-one promise (inside the Tribe band) ---------- */
.sfx-give{margin:clamp(2.6rem,6vw,3.6rem) auto 0;max-width:40rem;padding:1.8rem 1.4rem 1.7rem;border:2px solid var(--gold);background:rgba(23,11,4,.62);box-shadow:inset 0 0 0 4px rgba(23,11,4,.9),inset 0 0 0 5px var(--gold-thin)}
.sfx-give-mark{display:block;width:3.6rem;height:auto;margin:0 auto .6rem;color:var(--gold)}
.sfx-give-label{font-family:var(--f-caps);font-size:.76rem;font-weight:700;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.sfx-give-promise{font-size:clamp(1.6rem,4.4vw,2.3rem);font-style:italic;line-height:1.25;color:var(--text);margin:0 0 1.4rem}
@media (prefers-reduced-motion:no-preference){
  .js .sfx-give-mark circle{transition:transform 1.2s var(--ease-out)}
  .js .sfx-give-mark circle:first-child{transform:translateX(4px)}
  .js .sfx-give-mark circle:last-child{transform:translateX(-4px)}
  .js .sfx-tribe-inner.is-in .sfx-give-mark circle,.js .sfx-tribe-inner:not([data-sfx-reveal]) .sfx-give-mark circle{transform:none}
}

/* FDA disclaimer: plain, unhighlighted fine print (owner rule 2026-11-05) */
.disclaimer{border:0;box-shadow:none;background:none;padding:0;text-align:left}
.disclaimer p{font-size:.85rem;color:var(--text-soft);font-weight:400}