/* YinYang Food site: ambient paper, glass, the hero wheel's motion and scroll reveals.
   Classes on <html>, set by script: js (scripts run), motion (no reduced-motion preference),
   io (site.js reveals with IntersectionObserver), pointer (a mouse is over the page).
   Without them the page is complete and still: no-JS and reduced motion get the static design. */

/* ── Ambient parchment, tinted with vermillion, gold and jade ─────────────── */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ambient); }
.aura {
  position: fixed; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--red-rgb), .07), rgba(var(--gold-rgb), .05) 55%, transparent);
}
html.pointer .aura { opacity: 1; }

/* ── Scroll progress, along the bottom edge of the nav ────────────────────── */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0)); background: var(--top-bar);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Glass on paper ───────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid rgba(var(--red-rgb), .11);
  background: linear-gradient(180deg, rgba(255, 252, 247, .7), rgba(250, 244, 235, .45)), var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow), 0 30px 70px -48px rgba(92, 52, 20, .45);
}
.glass::before { /* a soft glow under the cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--gold-rgb), .14), transparent 50%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }

/* ── The hero wheel: taiji turning, qi flowing along the generation cycle ── */
.wuxing .halo { opacity: .5; }
html.motion .wuxing .taiji, html.motion .wuxing .qi { transform-box: view-box; transform-origin: 400px 400px; }
html.motion .wuxing .taiji { animation: spin 140s linear infinite; }
html.motion .wuxing .qi { animation: spin 56s linear infinite; }
html.motion .wuxing .node .halo { animation: breathe 10s ease-in-out infinite; animation-delay: calc(var(--i) * 2s - 10s); }
html.motion .scroll-cue i { animation: cue 2.4s var(--ease) infinite; }
.hero.paused *, .hero.paused { animation-play-state: paused !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 30%, 100% { opacity: .35; } 12% { opacity: 1; } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

/* the hero copy settles in once */
html.motion .hero-copy > * { animation: rise 1s var(--ease) both; }
html.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.motion .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.motion .hero-copy > :nth-child(4) { animation-delay: .22s; }
html.motion .hero-copy > :nth-child(n+5) { animation-delay: .3s; }
html.motion .hero-visual { animation: fade 1.6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ── Scroll reveals (site.js adds .io, then .in as things come into view) ── */
html.io .reveal { opacity: 0; translate: 0 30px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
html.io .reveal.in { opacity: 1; translate: none; }
html.io .reveal.d1 { transition-delay: .08s; }
html.io .reveal.d2 { transition-delay: .16s; }

/* the overview phones rise into place */
html.io .phones .phone { transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
html.io .phones:not(.in) .left { transform: translate(30px, 90px) rotate(-1deg); opacity: 0; }
html.io .phones:not(.in) .right { transform: translate(-30px, 90px) rotate(1deg); opacity: 0; }
html.io .phones:not(.in) .main { transform: translateY(60px); opacity: .2; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress, .aura { display: none; }
}
@media print {
  .reveal { opacity: 1 !important; translate: none !important; }
  .nav { position: static; }
  .aura, .media::before, .progress { display: none !important; }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-i-0 { --i: 0 !important; }
.sx-i-1 { --i: 1 !important; }
.sx-i-2 { --i: 2 !important; }
.sx-i-3 { --i: 3 !important; }
.sx-i-4 { --i: 4 !important; }
.sx-c-red { --c: var(--red) !important; }
.sx-c-earth { --c: var(--earth) !important; }
.sx-c-fire { --c: var(--fire) !important; }
.sx-c-water { --c: var(--water) !important; }
.sx-c-wood { --c: var(--wood) !important; }
.sx-c-gold { --c: var(--gold) !important; }