/* =====================================================================
   AlwaysAME UI v3 — shared motion, depth & polish layer  (2026-09-24)
   Loaded on every public page after the page's own CSS. Purely additive:
   remove the <link>/<script> tags for /assets/ui.css + /assets/ui.js to
   switch it off. Honors prefers-reduced-motion and touch devices.
   ===================================================================== */
:root{
  --ui-gold:#D4AF37; --ui-gold-l:#F5D060; --ui-blue:#60A5FA; --ui-blue-d:#2563EB;
  --ui-bg:#04080F; --ui-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- smooth page-to-page transitions (Chrome/Edge/Safari 18+) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:uiVtOut .22s ease both; }
::view-transition-new(root){ animation:uiVtIn .34s var(--ui-ease) both; }
@keyframes uiVtOut{ to{ opacity:0; } }
@keyframes uiVtIn{ from{ opacity:0; transform:translateY(8px); } }

/* ---------- reading / scroll progress ---------- */
.ui-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:10001; pointer-events:none; opacity:0; transition:opacity .3s; }
.ui-progress i{ display:block; height:100%; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--ui-blue-d),var(--ui-blue) 30%,var(--ui-gold) 70%,var(--ui-gold-l));
  box-shadow:0 0 10px rgba(245,208,96,.6); border-radius:0 3px 3px 0; }

/* ---------- back-to-top with progress ring ---------- */
.ui-top{ position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:9990;
  width:50px; height:50px; padding:0; border-radius:50% !important; display:grid; place-items:center; cursor:pointer;
  color:var(--ui-gold-l); background:rgba(8,16,30,.72) !important; border:1px solid rgba(212,175,55,.28) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .35s ease, transform .45s var(--ui-ease), box-shadow .3s ease !important; overflow:visible !important; }
.ui-top::before{ display:none !important; }
.ui-top.show{ opacity:1; transform:none; pointer-events:auto; }
.ui-top:hover{ box-shadow:0 0 0 1px rgba(245,208,96,.35), 0 0 26px rgba(212,175,55,.45); filter:none !important; }
.ui-top svg.ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); }
.ui-top .ring circle{ fill:none; stroke-width:2.5; }
.ui-top .ring .trk{ stroke:rgba(255,255,255,.06); }
.ui-top .ring .bar{ stroke:var(--ui-gold); stroke-linecap:round; stroke-dasharray:138.23; stroke-dashoffset:calc(138.23 * (1 - var(--p,0))); transition:stroke-dashoffset .12s linear; }
.ui-top .jet{ width:20px; height:20px; fill:currentColor; transition:transform .45s var(--ui-ease); }
.ui-top:hover .jet{ transform:translateY(-3px); }
body.ui-has-top .toast-wrap{ bottom:88px; }

/* ---------- cursor light (desktop only) ---------- */
.ui-cursor{ position:fixed; left:-280px; top:-280px; width:560px; height:560px; border-radius:50%; pointer-events:none; z-index:3;
  background:radial-gradient(circle, rgba(212,175,55,.09) 0%, rgba(96,165,250,.05) 38%, transparent 68%);
  transform:translate3d(-999px,-999px,0); mix-blend-mode:screen; will-change:transform; }
html.ui3-exam .ui-cursor, html.ui3-exam .ui-top, html.ui3-exam .ui-progress{ display:none !important; }

/* ---------- pointer-tracking glow border on cards ---------- */
.ui-glow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:6; padding:1px;
  background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(245,208,96,.95), rgba(96,165,250,.45) 42%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; }
.ui-glow-host:hover > .ui-glow{ opacity:1; }

/* ---------- magnetic buttons (uses the independent translate property) ---------- */
.ui-magnet{ translate:var(--mx,0px) var(--my,0px); transition:translate .45s var(--ui-ease), transform .2s ease, box-shadow .25s ease, filter .25s ease !important; }

/* ---------- 3D depth pop for icons inside tilting cards ---------- */
html.a3d .a3d-card .mod-prev-icon, html.a3d .a3d-card .feat-icon{ transition:transform .55s var(--ui-ease); }
html.ui3-fine.a3d .a3d-card:hover .mod-prev-icon{ transform:translateZ(46px) translateY(-6px) scale(1.14); }
html.ui3-fine.a3d .a3d-card:hover .feat-icon{ transform:translateZ(36px) translateY(-4px) rotate(-6deg) scale(1.06); }
#pg-landing .mod-prev{ outline:none; }
#pg-landing .mod-prev:focus-visible{ box-shadow:0 0 0 2px var(--ui-gold-l) !important; }
#pg-landing .mod-prev h4::after{ content:" →"; opacity:0; display:inline-block; transform:translateX(-6px); transition:opacity .3s, transform .35s var(--ui-ease); color:var(--ui-gold-l); }
#pg-landing .mod-prev:hover h4::after{ opacity:1; transform:none; }

/* chapter-card watermark number */
.ui-num{ position:absolute; right:16px; top:12px; font-size:56px; font-weight:900; line-height:1; letter-spacing:-2px;
  color:transparent; -webkit-text-stroke:1px rgba(245,208,96,.22); pointer-events:none; z-index:0;
  transition:transform .55s var(--ui-ease), -webkit-text-stroke-color .4s; font-variant-numeric:tabular-nums; }
.ch-card{ position:relative; }
.ch-card .ch-num{ padding-right:62px; }
.ch-card > *:not(.ui-num):not(.ui-glow):not(.a3d-glare){ position:relative; z-index:1; }
.ch-card:hover .ui-num{ -webkit-text-stroke-color:rgba(245,208,96,.55); transform:translateZ(30px) translateY(-4px); }

/* =====================================================================
   LANDING HERO
   ===================================================================== */
/* soft volumetric clouds instead of the emoji glyph */
#pg-landing .hero-cloud{ font-size:0 !important; width:230px; height:74px; opacity:.2; filter:blur(9px); border-radius:50%;
  background:radial-gradient(closest-side, rgba(232,240,255,.95), rgba(232,240,255,0)); }
#pg-landing .hero-cloud::before, #pg-landing .hero-cloud::after{ content:""; position:absolute; border-radius:50%;
  background:radial-gradient(closest-side, rgba(232,240,255,.95), rgba(232,240,255,0)); }
#pg-landing .hero-cloud::before{ width:120px; height:96px; left:38px; top:-40px; }
#pg-landing .hero-cloud::after{ width:96px; height:76px; left:112px; top:-26px; }
#pg-landing #cloud2{ zoom:1.3; opacity:.16; }
#pg-landing #cloud3{ zoom:.75; opacity:.14; }

/* extruded, shimmering wordmark */
html.ui3 #pg-landing .hero-title{ background-size:230% 100% !important;
  animation:fadeDown .8s .15s ease both, uiShine 10s 1.4s ease-in-out infinite;
  filter:drop-shadow(0 1px 0 rgba(170,128,32,.95)) drop-shadow(0 2px 0 rgba(136,102,24,.85)) drop-shadow(0 3px 0 rgba(100,76,18,.75)) drop-shadow(0 16px 26px rgba(0,0,0,.55)); }
@keyframes uiShine{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* layered parallax depth on desktop */
html.ui3-fine #pg-landing .hero{ perspective:1100px; }
html.ui3-fine #pg-landing .hero-content{ transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .7s var(--ui-ease); }
html.ui3-fine #pg-landing .hero-badge{ translate:0 0 40px; }
html.ui3-fine #pg-landing .hero-title{ translate:0 0 80px; }
html.ui3-fine #pg-landing .hero-sub{ translate:0 0 30px; }
html.ui3-fine #pg-landing .hero-cta{ translate:0 0 60px; }

/* receding 3D flight-deck grid */
.ui-horizon{ position:absolute; left:0; right:0; bottom:0; height:42%; z-index:3; pointer-events:none; overflow:hidden;
  perspective:600px; perspective-origin:50% 0%;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 45%, transparent 100%);
          mask-image:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
.ui-horizon::before{ content:""; position:absolute; left:-100%; right:-100%; top:0; height:400%;
  transform-origin:50% 0; transform:rotateX(80deg);
  background-image:linear-gradient(rgba(245,208,96,.55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(96,165,250,.42) 1.5px, transparent 1.5px);
  background-size:48px 48px; background-position:50% 0; animation:uiGrid 1.8s linear infinite; }
@keyframes uiGrid{ to{ background-position:50% 48px; } }
.ui-hero-land .ui-horizon{ opacity:.55; }

/* restored landing navbar — polish */
.lnav{ transition:background .35s ease, box-shadow .35s ease; }
.lnav.ui-scrolled{ background:rgba(4,8,15,.9) !important; box-shadow:0 12px 32px -14px rgba(0,0,0,.75), inset 0 -1px 0 rgba(212,175,55,.22); }
.lnav-logo span{ letter-spacing:.2px; }
.lnav-links a{ position:relative; }
.lnav-links a::after{ content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--ui-gold),var(--ui-gold-l)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ui-ease); }
.lnav-links a:hover::after, .lnav-links a[aria-current="page"]::after{ transform:scaleX(1); }

/* stats + CTA atmosphere */
#pg-landing .stat-big{ font-variant-numeric:tabular-nums; filter:drop-shadow(0 0 18px rgba(212,175,55,.28)); }
#pg-landing .cta-section{ position:relative; overflow:hidden; isolation:isolate; }
#pg-landing .cta-section::before{ content:""; position:absolute; left:50%; top:50%; width:140vmax; height:140vmax; margin:-70vmax 0 0 -70vmax; z-index:-1;
  background:conic-gradient(from 0deg, rgba(37,99,235,.20), rgba(212,175,55,.18), rgba(20,184,166,.14), rgba(139,92,246,.16), rgba(37,99,235,.20));
  filter:blur(70px); opacity:.7; animation:uiSpin2 22s linear infinite; }
@keyframes uiSpin2{ to{ transform:rotate(1turn); } }

/* =====================================================================
   INNER-PAGE HEROES (courses, modules, chapters, listings)
   ===================================================================== */
.ui-hero-host{ position:relative; overflow:hidden; isolation:isolate; }
.ui-hero-host > .ui-horizon{ z-index:-1; height:58%; opacity:.4; }
.ui-hero-host > .ui-horizon::before{ animation-duration:2.6s; }

/* CSS-only 3D gyroscope / atom */
.ui-gyro{ position:absolute; z-index:-1; right:7%; top:50%; width:170px; height:170px; margin-top:-85px; pointer-events:none;
  transform-style:preserve-3d; perspective:700px; opacity:.85; }
.ui-gyro i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(245,208,96,.6);
  box-shadow:0 0 16px rgba(245,208,96,.18), inset 0 0 16px rgba(245,208,96,.12); transform-style:preserve-3d; }
.ui-gyro i:nth-child(1){ animation:uiRing1 9s linear infinite; }
.ui-gyro i:nth-child(2){ border-color:rgba(96,165,250,.55); box-shadow:0 0 16px rgba(96,165,250,.2), inset 0 0 16px rgba(96,165,250,.12); animation:uiRing2 12s linear infinite; }
.ui-gyro i:nth-child(3){ inset:18px; border-color:rgba(255,255,255,.35); animation:uiRing3 7s linear infinite; }
.ui-gyro i::after{ content:""; position:absolute; top:-5px; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px 3px rgba(245,208,96,.8); }
.ui-gyro i:nth-child(2)::after{ box-shadow:0 0 12px 3px rgba(96,165,250,.85); }
.ui-gyro b{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--ui-gold-l) 38%, #9a7414 100%); box-shadow:0 0 30px 6px rgba(245,208,96,.45);
  animation:uiCore 3s ease-in-out infinite; }
@keyframes uiRing1{ from{ transform:rotateX(68deg) rotateZ(0); } to{ transform:rotateX(68deg) rotateZ(360deg); } }
@keyframes uiRing2{ from{ transform:rotateY(68deg) rotateX(12deg) rotateZ(0); } to{ transform:rotateY(68deg) rotateX(12deg) rotateZ(-360deg); } }
@keyframes uiRing3{ from{ transform:rotateX(-58deg) rotateY(40deg) rotateZ(0); } to{ transform:rotateX(-58deg) rotateY(40deg) rotateZ(360deg); } }
@keyframes uiCore{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
@media (max-width:760px){ .ui-gyro{ right:-30px; top:34%; width:130px; height:130px; margin-top:-65px; opacity:.35; } }

/* active link + sticky header polish on inner pages */
header.site, body > nav{ transition:box-shadow .35s ease, background .35s ease; }
header.site.ui-scrolled, body > nav.ui-scrolled{ box-shadow:0 12px 30px -14px rgba(0,0,0,.8), inset 0 -1px 0 rgba(212,175,55,.25); }
.nav-links a[aria-current="page"]{ color:var(--ui-gold-l) !important; border-color:rgba(245,208,96,.55) !important; }

/* =====================================================================
   CONTENT PAGES
   ===================================================================== */
.article-body h2{ position:relative; padding-left:16px; }
.article-body h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--ui-gold-l), var(--ui-gold) 55%, rgba(37,99,235,.7)); }
.callout{ box-shadow:0 14px 34px -18px rgba(212,175,55,.45); }
.ui-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0; border-radius:12px; border:1px solid rgba(212,175,55,.15); }
.ui-table-wrap > table{ margin:0 !important; min-width:560px; }
figure:not(:has(img, picture, video, iframe, svg, canvas)){ margin:26px 0; padding:16px 20px; border-left:3px solid var(--ui-gold);
  border-radius:0 12px 12px 0; background:rgba(212,175,55,.06); }
figure:not(:has(img, picture, video, iframe, svg, canvas)) figcaption{ margin:0 !important; color:#cbd5e1; font-style:italic; }

/* FAQ / answer disclosure: indicator + smooth open */
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
details.glass > summary, .mcq details > summary, details.faq-item > summary{ position:relative; padding-right:34px; }
details.glass > summary::after, .mcq details > summary::after, details.faq-item > summary::after{ content:""; position:absolute; right:6px; top:50%;
  width:9px; height:9px; border-right:2px solid var(--ui-gold); border-bottom:2px solid var(--ui-gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ui-ease); }
details[open].glass > summary::after, .mcq details[open] > summary::after, details[open].faq-item > summary::after{ transform:translateY(-25%) rotate(-135deg); }
details{ interpolate-size:allow-keywords; }
details::details-content{ block-size:0; overflow-y:clip; transition:block-size .4s var(--ui-ease), content-visibility .4s allow-discrete; }
details[open]::details-content{ block-size:auto; }

/* chapter media */
.media-card{ transition:box-shadow .5s ease, border-color .5s ease; }
.media-card.ui-playing{ border-color:rgba(245,208,96,.55) !important; box-shadow:0 0 0 1px rgba(245,208,96,.25), 0 18px 50px -18px rgba(212,175,55,.45); }
.ui-soon{ display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:14px; border:1px dashed rgba(212,175,55,.38);
  background:linear-gradient(135deg, rgba(212,175,55,.08), rgba(37,99,235,.08)), rgba(8,15,28,.92); }
.ui-soon .ic{ flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center; font-size:26px; border-radius:14px;
  background:rgba(212,175,55,.12); box-shadow:inset 0 0 0 1px rgba(212,175,55,.25); animation:uiPulse 2.6s ease-in-out infinite; }
.ui-soon strong{ display:block; color:var(--ui-gold-l); font-size:15.5px; margin-bottom:2px; }
.ui-soon span{ display:block; color:#94a3b8; font-size:13.5px; line-height:1.55; }
.media-card.ui-soon-card{ padding:0 !important; border-style:none !important; background:transparent !important; box-shadow:none !important; }
@keyframes uiPulse{ 0%,100%{ box-shadow:inset 0 0 0 1px rgba(212,175,55,.25), 0 0 0 0 rgba(212,175,55,.25); } 50%{ box-shadow:inset 0 0 0 1px rgba(212,175,55,.4), 0 0 0 8px rgba(212,175,55,0); } }

/* =====================================================================
   SAFETY
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ui-horizon::before, .ui-gyro i, .ui-gyro b, .ui-soon .ic, #pg-landing .cta-section::before{ animation:none !important; }
  html.ui3 #pg-landing .hero-title{ animation:none !important; }
  .ui-magnet{ translate:none !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}
@media (hover:none), (pointer:coarse){ .ui-cursor, .ui-glow{ display:none !important; } }
@media print{ .ui-progress, .ui-top, .ui-cursor, .ui-horizon, .ui-gyro, .ui-glow{ display:none !important; } }