/* ==========================================================================
   Everest Test Platform — depth & motion layer (loaded after styles.css)
   CSS 3D scenes, pointer tilt, scroll reveal and a calm learning palette.
   Everything that moves is switched off for prefers-reduced-motion and during tests.
   ========================================================================== */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Calm ambient background ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; animation: drift 30s ease-in-out infinite alternate; will-change: transform; }
.aurora i:nth-child(1) { width: 60vmax; height: 60vmax; top: -26vmax; right: -16vmax; background: radial-gradient(circle, rgba(118, 160, 255, .30), transparent 62%); }
.aurora i:nth-child(2) { width: 56vmax; height: 56vmax; bottom: -26vmax; left: -18vmax; background: radial-gradient(circle, rgba(45, 212, 191, .24), transparent 62%); animation-duration: 36s; }
.aurora i:nth-child(3) { width: 34vmax; height: 34vmax; top: 38%; left: 46%; background: radial-gradient(circle, rgba(253, 200, 110, .20), transparent 62%); animation-duration: 42s; }
@keyframes drift { to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.1); } }
body.in-test .aurora { display: none; }

/* ---------- Type ---------- */
h1, h2, .brand, .hero-trust strong, .stat .value, .cta-band h2 { font-family: var(--font-display); }
h1 { letter-spacing: -.03em; }

/* ---------- Page entrance (slight 3D rise) ---------- */
.page { animation: pageIn .55s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: perspective(1200px) translateY(14px) rotateX(3deg); } to { opacity: 1; transform: none; } }

/* ---------- Top bar & navigation ---------- */
.topbar { background: rgba(255, 255, 255, .78); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 24px -18px rgba(19, 33, 63, .4); }
.brand img { transition: transform .8s var(--ease); }
.brand:hover img { transform: perspective(300px) rotateY(360deg); }
.nav a.active { background: linear-gradient(135deg, var(--primary-50), #e9fbf8); box-shadow: inset 0 0 0 1px var(--primary-100); }
.sidebar { box-shadow: var(--shadow-sm); }
.sidebar a.active { background: linear-gradient(90deg, var(--primary-50), transparent); box-shadow: inset 3px 0 0 var(--primary); }

/* ---------- Buttons: soft 3D press ---------- */
.btn-primary { background: var(--grad-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -6px rgba(37, 88, 230, .65); }
.btn-primary:hover:not(:disabled) { background: var(--grad-primary); filter: brightness(1.06); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 26px -10px rgba(37, 88, 230, .6); }
.btn-warm { background: linear-gradient(135deg, #ffc451, #f5a524 55%, #ee8f12); color: #3a2200; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -6px rgba(245, 165, 36, .75); }
.btn-warm:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -10px rgba(238, 143, 18, .7); }
.btn-secondary:hover:not(:disabled), .btn-soft:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: none; }
.input:focus { box-shadow: 0 0 0 4px rgba(37, 88, 230, .13); }

/* ---------- Cards: depth, tilt and spotlight ---------- */
.card { box-shadow: var(--shadow-sm); }
.card-link, .feature, .step, .tilt { position: relative; transform-style: preserve-3d; transition: transform .55s var(--ease), box-shadow .3s, border-color .3s; }
.card-link:hover, .step:hover, .tilt:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--tone, var(--primary)) 30%, var(--border)); }
.is-tilting { transition: transform .1s linear, box-shadow .3s, border-color .3s !important; z-index: 2; }
.is-tilting::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx) var(--gy), color-mix(in srgb, var(--tone, var(--primary)) 12%, transparent), transparent 55%);
}
.card-link .icon-tile, .feature .icon-tile, .step::before { transition: transform .5s var(--ease); }
.card-link:hover .icon-tile, .feature:hover .icon-tile { transform: translateZ(34px) rotate(-6deg) scale(1.06); }
.feature::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 4px 4px; background: var(--tone, var(--primary)); opacity: .0; transition: opacity .3s; }
.feature:hover::before { opacity: 1; }

.icon-tile[class*="tone-"] {
  background: linear-gradient(150deg, #fff -20%, var(--tone-bg) 45%, color-mix(in srgb, var(--tone) 16%, var(--tone-bg)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px -8px color-mix(in srgb, var(--tone) 60%, transparent);
}
.step::before { background: var(--grad-focus); box-shadow: 0 8px 16px -8px rgba(37, 88, 230, .8); }
.step:hover::before { transform: translateZ(28px) scale(1.08); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: perspective(1000px) translateY(30px) rotateX(10deg) scale(.98); transform-origin: 50% 100%; }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d, 0ms), transform .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) !important; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(118, 160, 255, .30), transparent 60%),
    radial-gradient(700px 380px at -8% 110%, rgba(45, 212, 191, .20), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
}
.hero h1 em, .welcome-hero h1 em {
  background: linear-gradient(90deg, #2558e6, #14b8a6, #2558e6); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }
.eyebrow { background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm); }
.eyebrow b { background: var(--grad-focus); }
.hero-trust > div { padding-left: 14px; border-left: 2px solid var(--primary-100); }
.hero-trust > div:nth-child(2) { border-color: #c8f1ea; }
.hero-trust > div:nth-child(3) { border-color: #ffe2ad; }

/* ---------- 3D scenes ---------- */
.scene { position: relative; perspective: 1400px; perspective-origin: 50% 40%; --rx: 0deg; --ry: 0deg; }
.scene-rig { position: relative; transform-style: preserve-3d; transform: rotateX(calc(7deg + var(--rx))) rotateY(calc(-14deg + var(--ry))); transition: transform .8s cubic-bezier(.2, .7, .2, 1); animation: bob 9s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -10px; } }
.scene-glow { position: absolute; inset: -12% -8%; transform: translateZ(-180px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side at 40% 40%, rgba(37, 88, 230, .28), transparent), radial-gradient(closest-side at 70% 70%, rgba(20, 184, 166, .26), transparent); }
.scene-card { position: relative; transform: translateZ(0); transform-style: preserve-3d; }
.scene-card .hero-card { box-shadow: 0 30px 60px -20px rgba(19, 33, 63, .35), 0 8px 18px -8px rgba(37, 88, 230, .25); }

.orbit {
  --oy: 0deg; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 1.5px dashed rgba(37, 88, 230, .25); transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(-30px) rotateX(74deg) rotateY(var(--oy)) rotateZ(var(--a));
  animation: orbit 28s linear infinite;
}
.orbit.o2 { --oy: 16deg; width: 90%; border-color: rgba(20, 184, 166, .32); animation-duration: 19s; animation-direction: reverse; }
.orbit span { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #5b8cff 55%, #2558e6); box-shadow: 0 0 18px rgba(37, 88, 230, .7); }
.orbit.o2 span { background: radial-gradient(circle at 35% 35%, #fff, #2dd4bf 55%, #0f9488); box-shadow: 0 0 18px rgba(20, 184, 166, .7); }
@keyframes orbit { to { --a: 360deg; } }

.cube-wrap { position: absolute; left: -10%; top: -14%; transform: translateZ(150px); transform-style: preserve-3d; }
.cube { --s: 92px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; animation: cubeTurn 16s cubic-bezier(.65, 0, .35, 1) infinite; }
.cube-face {
  position: absolute; inset: 0; border-radius: 14%; display: grid; place-content: center; justify-items: center; gap: 3px;
  color: var(--tone); font-weight: 700; font-size: calc(var(--s) * .125); letter-spacing: .01em; backface-visibility: hidden;
  background: linear-gradient(150deg, #fff, var(--tone-bg) 55%, color-mix(in srgb, var(--tone) 18%, var(--tone-bg)));
  border: 1px solid color-mix(in srgb, var(--tone) 28%, white);
  box-shadow: inset 0 1px 0 #fff, inset 0 -12px 22px color-mix(in srgb, var(--tone) 14%, transparent);
}
.cube-face svg { width: calc(var(--s) * .36); height: calc(var(--s) * .36); }
.cube-face.front { transform: translateZ(calc(var(--s) / 2)); }
.cube-face.back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube-face.right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube-face.left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-face.top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
/* Turns a quarter, rests so the face can be read, turns again. */
@keyframes cubeTurn {
  0%, 18% { transform: rotateX(-22deg) rotateY(0); }
  25%, 43% { transform: rotateX(-22deg) rotateY(-90deg); }
  50%, 68% { transform: rotateX(-22deg) rotateY(-180deg); }
  75%, 93% { transform: rotateX(-22deg) rotateY(-270deg); }
  100% { transform: rotateX(-22deg) rotateY(-360deg); }
}

.float-chip { position: absolute; transform: translateZ(var(--z)); animation: chipFloat 6s ease-in-out infinite; animation-delay: var(--delay, 0s); white-space: nowrap; }
@keyframes chipFloat { 50% { translate: 0 -12px; } }
.float-chip.card-chip { display: flex; gap: 10px; align-items: center; padding: 12px 14px; font-size: .84rem; border-radius: 14px; background: rgba(255, 255, 255, .92); border: 1px solid var(--border); box-shadow: 0 22px 40px -16px rgba(19, 33, 63, .35); }
.float-chip.glyph {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #fff;
  background: var(--grad-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 30px -12px rgba(37, 88, 230, .75);
}
.float-chip.glyph.warm { background: linear-gradient(135deg, #ffc451, #f5a524 60%, #ee8f12); color: #3a2200; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 30px -12px rgba(238, 143, 18, .75); }
.float-chip.glyph.teal { background: linear-gradient(135deg, #2dd4bf, #0f9488); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 30px -12px rgba(20, 184, 166, .75); }

/* Study scene (welcome page): an open book turning its pages */
.scene-study { height: 210px; margin: -6px 0 22px; }
.scene-study .scene-rig { height: 100%; transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(-8deg + var(--ry))); }
.scene-study .scene-glow { inset: -10% 10%; background: radial-gradient(closest-side, rgba(94, 234, 212, .22), transparent), radial-gradient(closest-side at 60% 70%, rgba(118, 160, 255, .3), transparent); }
.scene-study .orbit { width: 92%; border-color: rgba(255, 255, 255, .2); transform: translate(-50%, -50%) translateZ(-20px) rotateX(76deg) rotateZ(var(--a)); }
.book3d { position: absolute; left: 50%; top: 52%; width: 250px; height: 160px; margin: -80px 0 0 -125px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-12deg); }
.book3d::before { content: ""; position: absolute; inset: -8px -11px; border-radius: 12px; transform: translateZ(-5px); background: linear-gradient(135deg, #2f6bff, #14b8a6); box-shadow: 0 40px 50px -18px rgba(0, 0, 0, .65); }
.book-half, .book-page { position: absolute; top: 0; width: 50%; height: 100%; }
.book-half { background: linear-gradient(90deg, #f7f3e8, #fffdf8 40%); }
.book-half.left { left: 0; border-radius: 9px 2px 2px 9px; transform-origin: right center; transform: rotateY(10deg); background: linear-gradient(270deg, #ece6d6, #fffdf8 40%); }
.book-half.right { left: 50%; border-radius: 2px 9px 9px 2px; transform-origin: left center; transform: rotateY(-10deg); }
.book-half i, .book-page i { position: absolute; inset: 16px 14px; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(37, 88, 230, .22) 0 2px, transparent 2px 11px); }
.book-half.left i { background: linear-gradient(rgba(20, 184, 166, .35), rgba(20, 184, 166, .35)) 0 0 / 60% 9px no-repeat, repeating-linear-gradient(180deg, rgba(37, 88, 230, .22) 0 2px, transparent 2px 11px) 0 20px / 100% 100% no-repeat; }
.book-page {
  left: 50%; border-radius: 2px 9px 9px 2px; transform-origin: left center; background: linear-gradient(90deg, #ece6d6, #fffdf8 30%);
  box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, .18);
  animation: pageTurn 8s cubic-bezier(.45, .05, .35, 1) infinite; animation-delay: calc(var(--i) * -2s);
}
@keyframes pageTurn {
  0% { transform: rotateY(-10deg) translateZ(1px); opacity: 0; }
  5% { opacity: 1; }
  12% { transform: rotateY(-10deg) translateZ(1px); }
  38% { transform: rotateY(-170deg) translateZ(1px); }
  92% { transform: rotateY(-170deg) translateZ(1px); opacity: 1; }
  100% { transform: rotateY(-170deg) translateZ(1px); opacity: 0; }
}
.book-spine { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .12); transform: translateZ(2px); }
.mini-cube { position: absolute; transform: translateZ(70px); transform-style: preserve-3d; }
.scene-study .float-chip:not(.glyph) { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; font-size: .84rem; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); }
.scene-study .float-chip:not(.glyph) svg { width: 16px; height: 16px; color: #fcd34d; }
.scene-study .float-chip.glyph { width: 46px; height: 46px; font-size: 1.05rem; border-radius: 14px; }

/* ---------- Welcome / sign-in ---------- */
.welcome-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 420px at 8% 0%, rgba(20, 184, 166, .30), transparent 60%),
    radial-gradient(800px 520px at 100% 100%, rgba(91, 82, 230, .38), transparent 60%),
    var(--grad-night);
}
.welcome-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 75%); mask-image: linear-gradient(160deg, #000, transparent 75%); }
.welcome-hero-inner { position: relative; z-index: 1; }
.welcome-hero h1 em { background-image: linear-gradient(90deg, #9cc2ff, #5eead4, #9cc2ff); }
.benefit { transition: transform .4s var(--ease), background .3s, border-color .3s; }
.benefit:hover { transform: translateX(4px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.benefit .icon-tile { background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); color: #a7f3d0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.welcome-panel { background: transparent; }
.welcome-card { position: relative; overflow: hidden; box-shadow: var(--shadow-lg); border-color: rgba(255, 255, 255, .8); }
.welcome-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #2558e6, #14b8a6, #f5a524); }

/* ---------- Dark bands ---------- */
.cta-band { background: radial-gradient(520px 280px at 85% 0%, rgba(20, 184, 166, .35), transparent 60%), var(--grad-night); perspective: 900px; box-shadow: 0 30px 60px -30px rgba(19, 33, 63, .6); }
.cta-band > div:not(.cta-shapes) { position: relative; z-index: 1; }
.cta-shapes { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.cta-cube { position: absolute; left: 52%; top: 50%; margin-top: -27px; transform: translateZ(40px); transform-style: preserve-3d; }
.cta-shapes .cta-orbit { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); transform: rotateX(68deg) rotateZ(var(--a)); animation: orbit 24s linear infinite; }
.cta-shapes .cta-orbit::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 14px #5eead4; }
.cta-shapes .r1 { width: 300px; height: 300px; right: -80px; top: -120px; }
.cta-shapes .r2 { width: 200px; height: 200px; left: -60px; bottom: -110px; animation-direction: reverse; animation-duration: 18s; }
.cta-shapes .r2::after { background: #fcd34d; box-shadow: 0 0 14px #fcd34d; }
.welcome { background: radial-gradient(500px 260px at 90% 0%, rgba(20, 184, 166, .3), transparent 60%), var(--grad-night); }
.auth-side { background: var(--grad-night); }
.footer { background: rgba(255, 255, 255, .7); backdrop-filter: blur(8px); }

/* ---------- 3D brand logo (sign-in page) ---------- */
.welcome-panel { align-content: center; gap: 4px; }
.logo3d { display: grid; justify-items: center; text-align: center; user-select: none; margin-bottom: 6px; }
.logo3d-stage { position: relative; width: 200px; height: 150px; perspective: 900px; --rx: 0deg; --ry: 0deg; }
.logo3d-rig { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .8s cubic-bezier(.2, .7, .2, 1); animation: bob 6s ease-in-out infinite; }
.logo3d-rig::after {
  content: ""; position: absolute; width: 176px; height: 176px; left: -88px; top: -88px; border-radius: 50%;
  border: 1.5px solid rgba(37, 88, 230, .22); border-top-color: rgba(20, 184, 166, .9); border-right-color: rgba(245, 165, 36, .7);
  transform: translateZ(-10px) rotateX(74deg) rotateZ(var(--a)); animation: orbit 7s linear infinite;
}
.logo3d-badge {
  --b: 112px; position: absolute; left: calc(var(--b) / -2); top: calc(var(--b) / -2); width: var(--b); height: var(--b); transform-style: preserve-3d;
  animation: logoIn 1.9s cubic-bezier(.16, 1, .3, 1) both, logoIdle 9s ease-in-out 1.9s infinite alternate;
}
@keyframes logoIn {
  0% { opacity: 0; transform: translateZ(-700px) rotateX(40deg) rotateY(-280deg) scale(.6); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: rotateX(10deg) rotateY(-22deg); }
}
@keyframes logoIdle {
  0% { transform: rotateX(10deg) rotateY(-22deg); }
  50% { transform: rotateX(3deg) rotateY(0deg); }
  100% { transform: rotateX(10deg) rotateY(22deg); }
}
.logo3d-face, .logo3d-edge { position: absolute; inset: 0; border-radius: 27%; }
.logo3d-edge { transform: translateZ(calc(var(--d) * -1.5px)); background: linear-gradient(150deg, #2c50d4, #172d8a); }
.logo3d-face {
  overflow: hidden;
  background: radial-gradient(120% 95% at 22% 8%, #6b97ff 0%, #2f63f0 38%, #2a44cf 72%, #3a2fb5 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -12px 26px rgba(10, 20, 80, .35);
}
.logo3d-shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%); transform: translateX(-70%); animation: shine3d 5.5s ease-in-out 1.9s infinite; }
@keyframes shine3d { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.logo3d-peak { position: absolute; inset: 0; transform: translateZ(calc(2px + var(--d) * 2.2px)); pointer-events: none; }
.logo3d-peak svg { width: 100%; height: 100%; display: block; overflow: visible; }
.logo3d-peak path { fill: color-mix(in srgb, #ffffff calc(var(--d) * 13%), #7f9be6); }
.logo3d-peak .snow { fill: transparent; }
.logo3d-peak svg.top path { fill: #fff; }
.logo3d-peak svg.top .snow { fill: #bfdbfe; }
.logo3d-peak svg.top { filter: drop-shadow(0 1px 1.5px rgba(10, 20, 80, .35)); }
.logo3d-halo {
  position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; filter: blur(24px);
  background: conic-gradient(from var(--a), rgba(37, 88, 230, .05), rgba(37, 88, 230, .4), rgba(20, 184, 166, .38), rgba(245, 165, 36, .3), rgba(37, 88, 230, .05));
  animation: orbit 10s linear infinite;
}
.logo3d-shadow { position: absolute; left: 50%; bottom: 0; width: 120px; height: 18px; margin-left: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 33, 63, .32), transparent); animation: shadowPulse 6s ease-in-out infinite; }
@keyframes shadowPulse { 50% { transform: scale(.8); opacity: .55; } }
.logo3d-spark {
  position: absolute; width: 11px; height: 11px; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: linear-gradient(135deg, #5b8cff, #14b8a6); animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--delay);
}
.logo3d-spark:nth-of-type(odd) { background: linear-gradient(135deg, #ffd27a, #f59e0b); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.logo3d-word { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: .14em; padding-left: .14em; perspective: 600px; }
.logo3d-word span {
  display: inline-block; transform-origin: 50% 100%;
  color: color-mix(in srgb, #4b46d8 calc(var(--i) * 15%), #2453dc);
  text-shadow: 0 1px 0 #1d47c2, 0 2px 0 #1a40ae, 0 3px 0 #17399b, 0 4px 0 #143288, 0 12px 16px rgba(19, 33, 63, .25);
  animation: letterIn .8s cubic-bezier(.2, .9, .25, 1.25) both, wave 5s ease-in-out infinite;
  animation-delay: calc(.8s + var(--i) * 75ms), calc(2.4s + var(--i) * 110ms);
}
@keyframes letterIn { from { opacity: 0; transform: translateY(26px) rotateX(-100deg); } to { opacity: 1; transform: none; } }
@keyframes wave { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -5px; } }
.logo3d-sub { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--text-2); animation: subIn 1.1s var(--ease) 1.5s both; }
.logo3d-sub span { margin-right: -.42em; }
.logo3d-sub b { width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent)); }
.logo3d-sub b:last-child { background: linear-gradient(90deg, var(--accent), transparent); }
@keyframes subIn { from { opacity: 0; letter-spacing: .9em; } }

/* ---------- Page headers (every page) ---------- */
.page-head {
  position: relative; overflow: hidden; padding: 22px 26px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-sm);
  background: radial-gradient(440px 200px at 100% 0%, rgba(118, 160, 255, .22), transparent 70%), radial-gradient(320px 160px at 0% 100%, rgba(45, 212, 191, .14), transparent 70%), rgba(255, 255, 255, .72);
}
.page-head h1::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--grad-focus); animation: barIn .8s var(--ease) .15s both; }
@keyframes barIn { from { width: 0; } }
.page-head > div:first-child { position: relative; z-index: 1; }
.page-head .actions { position: relative; z-index: 1; }
.head-deco { position: absolute; right: 44px; top: 50%; margin-top: -26px; perspective: 600px; pointer-events: none; }
.head-deco .cube { animation-duration: 14s; }
.page-head:has(.head-deco) > div:first-child { padding-right: 110px; }

/* ---------- Skill banners (Speaking / Writing / Reading / Listening) ---------- */
.skill-hero { position: relative; overflow: hidden; perspective: 800px; box-shadow: var(--shadow); }
.skill-hero::before { content: ""; position: absolute; width: 280px; height: 280px; right: -60px; top: -130px; border-radius: 50%; pointer-events: none; border: 2px dashed color-mix(in srgb, var(--tone) 30%, transparent); transform: rotateX(65deg) rotateZ(var(--a)); animation: orbit 30s linear infinite; }
.skill-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: 12%; bottom: -170px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 22%, transparent), transparent); }
.skill-hero > * { position: relative; z-index: 1; }
.skill-hero .icon-tile { animation: tileTurn 7s cubic-bezier(.65, 0, .35, 1) infinite; box-shadow: inset 0 1px 0 #fff, 0 16px 26px -12px color-mix(in srgb, var(--tone) 75%, transparent); }
@keyframes tileTurn { 0%, 70% { transform: rotateY(0); } 85%, 100% { transform: rotateY(360deg); } }
.skill-hero .stats strong { color: var(--tone); font-family: var(--font-display); }
.skill-hero .stats span { white-space: nowrap; }

/* ---------- Student dashboard banner (My Progress) ---------- */
.welcome { position: relative; overflow: hidden; perspective: 900px; box-shadow: 0 26px 50px -28px rgba(19, 33, 63, .7); }
.welcome > * { position: relative; z-index: 1; }
.welcome::before, .welcome::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; animation: orbit 26s linear infinite; }
.welcome::before { width: 320px; height: 320px; right: -90px; top: -150px; border: 2px solid rgba(255, 255, 255, .1); border-top-color: rgba(94, 234, 212, .7); transform: rotateX(66deg) rotateZ(var(--a)); }
.welcome::after { width: 200px; height: 200px; left: 28%; bottom: -150px; border: 2px solid rgba(255, 255, 255, .08); border-right-color: rgba(252, 211, 77, .6); transform: rotateX(70deg) rotateZ(var(--a)); animation-direction: reverse; animation-duration: 18s; }
.welcome .avatar.lg { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 0 10px rgba(94, 234, 212, .12); animation: halo 4s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 0 0 16px rgba(94, 234, 212, .06); } }
.welcome .kpi { border: 1px solid rgba(255, 255, 255, .1); transition: transform .35s var(--ease), background .3s; }
.welcome .kpi:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .13); }
.kpi { transition: transform .35s var(--ease); }

/* ---------- Stats, lists, tables, tabs, chips ---------- */
.stat { position: relative; transform-style: preserve-3d; transition: transform .55s var(--ease), box-shadow .3s; }
.stat:hover { box-shadow: var(--shadow-lg); }
.stat .icon-tile { transition: transform .5s var(--ease); }
.stat:hover .icon-tile { transform: translateZ(26px) rotate(-8deg) scale(1.06); }
a.list-item:hover { background: linear-gradient(90deg, var(--primary-50), transparent 75%); }
a.list-item .icon-tile, a.list-item > svg:last-child { transition: transform .4s var(--ease), color .2s; }
a.list-item:hover .icon-tile { transform: perspective(300px) rotateY(-22deg) scale(1.08); }
a.list-item:hover > svg:last-child { transform: translateX(3px); color: var(--primary); }
.table th { background: linear-gradient(180deg, #f6f9fe, #eef3fa); }
.table tbody tr:hover { background: linear-gradient(90deg, rgba(237, 243, 255, .9), rgba(255, 255, 255, 0)); }
.tab { position: relative; transition: color .2s; }
.tab.active { border-bottom-color: transparent; }
.tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad-focus); animation: tabIn .35s var(--ease); }
@keyframes tabIn { from { transform: scaleX(.2); opacity: 0; } }
.seg button { transition: color .2s, background .2s; }
.seg button.active { color: var(--primary); box-shadow: 0 4px 12px -4px rgba(19, 33, 63, .25); }
.chip { transition: transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-1px); }
.chip.active { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(37, 88, 230, .65); }
.progress > span { background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--primary)) 70%, #fff), var(--tone, var(--primary))); }
.skeleton { background: linear-gradient(90deg, #e7edf7 25%, #f6f9fd 50%, #e7edf7 75%); background-size: 200% 100%; }
.callout { border: 1px solid rgba(37, 88, 230, .1); }
.callout.warn { border-color: rgba(217, 119, 6, .15); } .callout.danger { border-color: rgba(220, 38, 38, .15); } .callout.success { border-color: rgba(15, 159, 110, .15); }

/* ---------- Empty states, modals, toasts ---------- */
.empty .empty-icon { background: linear-gradient(150deg, #fff, var(--primary-50) 60%, var(--primary-100)); color: var(--primary); box-shadow: inset 0 1px 0 #fff, 0 16px 28px -14px rgba(37, 88, 230, .6); animation: emptyFloat 4.5s ease-in-out infinite; }
@keyframes emptyFloat { 50% { transform: perspective(300px) translateY(-6px) rotateX(10deg) rotateY(-16deg); } }
.error-state .empty-icon { background: var(--danger-50); color: var(--danger); box-shadow: none; }
.modal-backdrop { background: rgba(12, 22, 54, .42); backdrop-filter: blur(6px); perspective: 1200px; }
.modal { animation: modalIn .5s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 40px 80px -30px rgba(12, 22, 54, .55); }
@keyframes modalIn { from { opacity: 0; transform: rotateX(-14deg) translateY(30px) scale(.94); } }
.modal-head { background: linear-gradient(180deg, var(--primary-50), rgba(255, 255, 255, 0)); border-radius: 20px 20px 0 0; }
.toast-root { perspective: 800px; }
.toast { background: linear-gradient(135deg, #13213f, #1d3168); box-shadow: 0 18px 40px -14px rgba(19, 33, 63, .65); animation: toastIn .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes toastIn { from { opacity: 0; transform: rotateX(-70deg) translateY(18px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-visual { margin: 40px auto 0; width: 100%; }
  .cube-wrap { left: -4%; }
}
@media (max-width: 760px) {
  .cta-cube { display: none; }
}
@media (max-width: 640px) {
  .hero-visual { margin-top: 56px; }
  .scene-home .cube { --s: 64px; }
  .cube-wrap { left: auto; right: 6%; top: -20%; }
  .scene-home .scene-rig { transform: rotateX(calc(5deg + var(--rx))) rotateY(calc(-6deg + var(--ry))); }
  .scene-home .float-chip, .orbit.o2 { display: none; }
  .scene-study { height: 170px; }
  .book3d { transform: rotateX(56deg) rotateZ(-12deg) scale(.82); }
  .scene-study .float-chip.glyph { display: none; }
  .logo3d-stage { width: 170px; height: 128px; }
  .logo3d-badge { --b: 94px; }
  .logo3d-word { font-size: 1.95rem; }
  .head-deco { display: none; }
  .page-head:has(.head-deco) > div:first-child { padding-right: 0; }
  .page-head { padding: 18px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .scene-rig, .orbit, .cube, .float-chip, .book-page, .cta-shapes .cta-orbit, .hero h1 em, .welcome-hero h1 em, .page { animation: none !important; }
  .skill-hero .icon-tile, .skill-hero::before, .welcome::before, .welcome::after, .empty .empty-icon, .modal, .toast,
  .logo3d-rig, .logo3d-rig::after, .logo3d-badge, .logo3d-shine, .logo3d-halo, .logo3d-shadow, .logo3d-spark, .logo3d-word span, .logo3d-sub, .page-head h1::after { animation: none !important; }
  .logo3d-badge { transform: rotateX(10deg) rotateY(-18deg); }
  .book-page { opacity: 0; }
  .book-page[style*="--i:0"] { opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card-link, .feature, .step, .tilt, .btn, .brand img { transition: none !important; }
}