/* =========================================================================
   animation.css — 神光 · 香煙 · 浮現 · Reveal
   60FPS transform/opacity-only animations
   ========================================================================= */

/* ---------- Scroll reveal (driven by IntersectionObserver in app.js) ----------
   Progressive enhancement: hiding only applies when JS is active (html.js).
   Without JS, everything is visible — no blank page if a CDN/script fails. */
.reveal{transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);will-change:transform,opacity}
.js .reveal{opacity:0;transform:translateY(38px)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
.reveal-mask{transition:clip-path 1.2s var(--ease-out)}
.js .reveal-mask{clip-path:inset(0 100% 0 0)}
.js .reveal-mask.in{clip-path:inset(0 0 0 0)}

/* lock scroll while the intro curtain plays */
body.intro-lock{overflow:hidden;height:100svh}

/* ---------- Intro curtain (神尊浮現 sequence) ---------- */
.curtain{
  position:fixed;inset:0;z-index:1000;background:#050403;
  display:none;place-items:center;overflow:hidden;
  transition:opacity 1.4s var(--ease),visibility 1.4s;
}
.js .curtain{display:grid}   /* intro plays only when JS is active */
.curtain.done{opacity:0;visibility:hidden;pointer-events:none}
.curtain-seal{
  position:relative;font-family:var(--serif);font-weight:900;color:var(--gold-3);
  font-size:clamp(3rem,12vw,7rem);letter-spacing:.3em;
  opacity:0;filter:blur(24px);transform:scale(.86);
  text-shadow:0 0 60px rgba(201,162,75,.6);
}
.curtain-sub{
  position:absolute;bottom:16%;left:0;right:0;text-align:center;
  font-family:var(--latin);letter-spacing:.5em;font-size:.8rem;color:var(--gold);
  opacity:0;text-transform:uppercase;
}
.curtain-smoke{position:absolute;inset:0;opacity:.6;mix-blend-mode:screen}

/* ---------- 神光 (god-light) flowing rays ---------- */
.godlight{position:absolute;inset:-20%;pointer-events:none;z-index:1}
.godlight .rays{
  position:absolute;inset:0;
  background:conic-gradient(from 0deg at 42% 30%,
     transparent 0deg,rgba(246,230,189,.16) 6deg,transparent 14deg,
     transparent 40deg,rgba(246,230,189,.10) 47deg,transparent 55deg,
     transparent 90deg,rgba(246,230,189,.14) 98deg,transparent 108deg,
     transparent 150deg,rgba(246,230,189,.08) 158deg,transparent 168deg,
     transparent 360deg);
  mix-blend-mode:screen;animation:rayspin 46s linear infinite;transform-origin:42% 30%;
}
.godlight .halo{
  position:absolute;left:42%;top:26%;width:52vmax;height:52vmax;translate:-50% -50%;
  background:radial-gradient(circle,rgba(246,230,189,.30),rgba(201,162,75,.12) 32%,transparent 62%);
  mix-blend-mode:screen;animation:halobreath 7s var(--ease) infinite;
}
@keyframes rayspin{to{transform:rotate(360deg)}}
@keyframes halobreath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* ---------- Gold sparkle drift (✨) ---------- */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.sparkle{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-3),transparent 70%);
  box-shadow:0 0 8px 2px rgba(246,230,189,.7);opacity:0;
  animation:twinkle var(--dur,6s) var(--ease) var(--dly,0s) infinite}
@keyframes twinkle{
  0%{opacity:0;transform:translateY(10px) scale(.4)}
  30%{opacity:1}
  60%{opacity:.7}
  100%{opacity:0;transform:translateY(-40px) scale(1)}
}

/* ---------- Scroll cue ---------- */
.scroll-cue{
  position:absolute;left:50%;bottom:30px;translate:-50% 0;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-soft);font-family:var(--latin);letter-spacing:.4em;font-size:.7rem;text-transform:uppercase;
}
.scroll-cue .track{width:1px;height:52px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue .track::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--gold-2);animation:cueDrop 2.2s var(--ease) infinite}
@keyframes cueDrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

/* ---------- 金光 shimmer sweep on gold text ---------- */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,246,220,.6) 50%,transparent 60%);
  transform:translateX(-120%);animation:sweep 5.5s var(--ease) 1.5s infinite}
@keyframes sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

/* ---------- Floating cloud motif ---------- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float{animation:floatY 8s var(--ease) infinite}