/* =========================================================================
   enhance.css — shared motion & polish layer (progressive enhancement).
   Only active once enhance.js adds .enh to <html>, so content is never
   hidden when JS is off. All motion disabled under prefers-reduced-motion.
   ========================================================================= */

/* ---------- moving aurora background ---------- */
.enh body::before{
  content:""; position:fixed; inset:-20% -20% -20% -20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(155,225,93,.16), transparent 70%),
    radial-gradient(40% 36% at 82% 18%, rgba(160,107,255,.16), transparent 70%),
    radial-gradient(46% 40% at 50% 92%, rgba(34,211,176,.14), transparent 72%);
  filter:blur(8px); animation:enh-aurora 24s ease-in-out infinite alternate;
}
@keyframes enh-aurora{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2%,-2%,0) scale(1.08); }
  100%{ transform:translate3d(-2%,2%,0) scale(1.04); }
}
/* faint drifting grid for depth */
.enh body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px; animation:enh-grid 40s linear infinite;
}
@keyframes enh-grid{ to{ background-position:44px 44px, 44px 44px; } }

/* ---------- scroll progress bar ---------- */
#enh-prog{
  position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0; z-index:100001;
  background:linear-gradient(90deg,#9BE15D,#22D3B0,#5B8DEF,#A06BFF);
  box-shadow:0 0 12px rgba(34,211,176,.6); transition:width .1s linear;
}

/* ---------- scroll-reveal ---------- */
.enh .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.enh .reveal.in{ opacity:1; transform:none; }
/* never keep presenter slides hidden */
html.pr-on .pr-stage .reveal{ opacity:1 !important; transform:none !important; }

/* ---------- hover life on cards / buttons ---------- */
.enh .fcard, .enh .card, .enh .lesson, .enh .unit-card, .enh .box,
.enh .note{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.enh .fcard:hover, .enh .card:hover, .enh .unit-card:hover{
  transform:translateY(-4px); box-shadow:0 22px 46px -20px rgba(0,0,0,.6);
}
.enh .cn a{ transition:transform .15s ease, background .15s, color .15s; }
.enh .cn a:hover{ transform:translateY(-2px); }
.enh button:not(.pr-btn):not(.lang-btn):not(.pr-launch),
.enh .cta, .enh .file{ transition:transform .15s ease, filter .15s ease, box-shadow .15s; }
.enh .cta:hover, .enh a.file:hover{ transform:translateY(-2px); }
.enh .pr-launch{ animation:enh-pulse 2.6s ease-in-out infinite; }
@keyframes enh-pulse{
  0%,100%{ box-shadow:0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 0 rgba(34,211,176,.45); }
  50%{ box-shadow:0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 12px rgba(34,211,176,0); }
}

/* ---------- gentle floating icons ---------- */
.enh .dot, .enh .fico, .enh .lc, .enh .em{ display:inline-block; animation:enh-bob 4.5s ease-in-out infinite; }
.enh .fico{ animation-duration:5.5s; }
.enh .lc{ animation-duration:6s; }
@keyframes enh-bob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-5px) rotate(-2deg); } }

/* ---------- animated gradient text ---------- */
.enh .grad{
  background-size:220% 220% !important; animation:enh-shine 7s ease infinite;
}
@keyframes enh-shine{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* ---------- presenter slide entrance ---------- */
html.pr-on .pr-stage > *{ animation:enh-slidein .38s cubic-bezier(.2,.7,.2,1); }
@keyframes enh-slidein{ from{ opacity:0; transform:translateY(26px) scale(.99); } to{ opacity:1; transform:none; } }

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .enh body::before, .enh body::after, .enh .pr-launch, .enh .dot, .enh .fico,
  .enh .lc, .enh .em, .enh .grad, html.pr-on .pr-stage > *{ animation:none !important; }
  .enh .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}