/* HackBatista skin: the layout language of the official AION 2 site (aion2.plaync.com) on top of site.css.
   Dark navy only, silver-blue serif titles, glass pill buttons, framed cards, sky-blue "news" panel. */

@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/marcellus-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/marcellus-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/open-sans-latin-400.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/open-sans-latin-600.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/open-sans-latin-700.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700.woff2) format('woff2');}

:root,:root[data-theme="dark"]{
  --bg:#070d1a; --bg-2:#0a1428; --surface:#0e1b34; --surface-2:#132545; --surface-3:#1a3058;
  --border:#1d3460; --border-2:#2a4a82;
  --text:#e9f0fc; --text-dim:#a9b8d4; --text-faint:#7385a6;
  --gold:#8cc4ff; --gold-2:#d4e8ff;
  --accent:#8cc4ff; --accent-soft:rgba(140,196,255,.13); --on-accent:#06101f;
  --pvp:#b59bff; --lvl:#ffc46b; --rift:#b59bff;
  --radius:6px; --radius-sm:4px;
  --shadow:0 0 0 1px rgba(140,196,255,.04) inset,0 14px 34px -20px rgba(0,0,0,.9);
  --topbar-h:104px;
  --font:'Open Sans','Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Marcellus','Noto Serif',Georgia,serif;
  --font-mono:'Inter',ui-monospace,system-ui,sans-serif;
  --a-line:linear-gradient(90deg,transparent,rgba(170,210,255,.55),transparent);
  color-scheme:dark;
}
body{background:var(--bg);}
::selection{background:#2f6fd0;color:#fff;}

/* ---------- header: two rows like the official site ---------- */
.aion-top{height:auto;background:#060b16;border-bottom:1px solid rgba(140,196,255,.14);}
.gnb{height:44px;border-bottom:1px solid rgba(255,255,255,.06);}
.gnb-in{max-width:1400px;height:100%;margin:0 auto;padding-inline:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.aion-brand{gap:8px;}
.aion-mark{width:40px;height:27px;filter:drop-shadow(0 0 6px rgba(120,180,255,.5));}
.aion-word{display:flex;flex-direction:column;line-height:1;}
.aion-word b{font:400 1.12rem var(--font-display);letter-spacing:.06em;background:linear-gradient(#ffffff,#9cc3ef);-webkit-background-clip:text;background-clip:text;color:transparent;}
.aion-word small{font:600 .56rem var(--font);letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);margin-top:3px;}
.gnb-links{display:flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#4c5d7d;}
.gnb-links a{color:#8193b3;text-decoration:none;}
.gnb-links a:hover{color:#fff;}

.aion-top .topbar-in{max-width:1400px;height:60px;gap:6px;padding-right:0;}
.aion-top .class-menu{margin-left:0;}
.aion-top .class-menu-btn{height:60px;border:0;border-radius:0;padding:0 12px;font:400 .95rem var(--font);color:#fff;background:none;}
.aion-top .class-menu-btn:hover,.aion-top .class-menu[open] .class-menu-btn,.aion-top .class-menu-btn.is-here{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold);}
.aion-top .class-menu-btn .chev{color:#5f7398;}
.lnb{display:flex;align-items:center;min-width:0;overflow:hidden;}
.lnb a{height:60px;display:flex;align-items:center;padding:0 12px;color:#dfe7f6;text-decoration:none;font-size:.95rem;white-space:nowrap;}
.lnb a:hover,.lnb a[aria-current]{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold);}
.aion-top .topbar-tools{gap:6px;}
.aion-top .rift-timer,.aion-top .wr-chip{height:32px;border-radius:3px;font-size:.78rem;}
.aion-top .icon-btn{border-radius:3px;width:34px;height:34px;}
.cta-box{position:relative;align-self:stretch;display:grid;place-items:center;min-width:170px;margin-left:10px;padding:0 22px;text-decoration:none;
  font:400 1.25rem var(--font-display);letter-spacing:.04em;color:#e9f4ff;text-shadow:0 0 12px rgba(120,190,255,.8);
  background:linear-gradient(180deg,#1d4e93 0%,#0f2c5c 55%,#0a1f44 100%);border-left:1px solid rgba(140,196,255,.35);
  box-shadow:inset 0 1px 0 rgba(200,230,255,.35),inset 0 -14px 26px -14px rgba(120,190,255,.6);}
.cta-box::before{content:"";position:absolute;top:0;left:50%;width:14px;height:7px;transform:translateX(-50%);background:#8cc4ff;clip-path:polygon(0 0,100% 0,50% 100%);opacity:.7;}
.cta-box:hover{background:linear-gradient(180deg,#2763b6 0%,#143a77 55%,#0d2752 100%);}

.class-menu-panel,.nav-menu-panel{border-radius:4px;background:#0b1730;border-color:#27477d;top:100%;}
.nav-menu .nav-menu-panel{left:0;right:auto;}
.nm-item{grid-template-columns:minmax(0,1fr);}
.nm-group{font-family:var(--font-display);letter-spacing:.08em;}
.cm-item:hover{background:#132545;}

@media (max-width:1180px){ .lnb{display:none;} }
@media (max-width:760px){
  :root,:root[data-theme="dark"]{--topbar-h:96px;}
  .gnb{height:40px;}
  .gnb-links{gap:6px;font-size:.66rem;}
  .aion-top .topbar-in{height:56px;padding-right:16px;}
  .aion-top .class-menu-btn{height:56px;padding:0 8px;font-size:.88rem;}
  .cta-box{display:none;}
  .aion-top .wr-chip{display:none;}
  .class-menu-panel{position:fixed;left:8px;right:8px;top:96px;grid-template-columns:repeat(2,1fr);}
  .nav-menu .nav-menu-panel{position:fixed;left:8px;right:8px;top:96px;grid-template-columns:1fr;}
}
@media (max-width:420px){ .aion-word small{display:none;} .gnb-links span{display:none;} }

/* ---------- shared ornaments ---------- */
.a-title{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 34px;text-align:center;
  font:400 clamp(1.6rem,3.4vw,2.3rem)/1.15 var(--font-display);color:#f2f7ff;text-shadow:0 0 18px rgba(120,180,255,.45);}
.a-title::before,.a-title::after{content:"";flex:none;width:22px;height:22px;opacity:.9;
  background:radial-gradient(circle,#fff 0 2px,transparent 3px),conic-gradient(from 45deg,transparent 0 10%,#cfe6ff 12%,transparent 14% 35%,#cfe6ff 37%,transparent 39% 60%,#cfe6ff 62%,transparent 64% 85%,#cfe6ff 87%,transparent 89%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);}
.a-title-line{flex-wrap:nowrap;}
.a-title-line span{position:relative;padding:0 6px;}
.a-orn{display:block;width:min(420px,80%);height:12px;margin:14px auto 0;background:
  radial-gradient(circle at 50% 50%,#e6f2ff 0 2px,transparent 3px),var(--a-line) center/100% 1px no-repeat;}

.a-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:170px;height:46px;padding:0 30px;
  font:400 1.05rem var(--font-display);letter-spacing:.03em;color:#eaf4ff;text-decoration:none;border-radius:999px;
  border:1px solid rgba(190,225,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 22px -4px rgba(90,160,255,.55);}
.a-pill::before,.a-pill::after{content:"";position:absolute;top:50%;width:10px;height:10px;transform:translateY(-50%) rotate(45deg);border:1px solid rgba(190,225,255,.7);background:#0b1a36;}
.a-pill::before{left:-6px;} .a-pill::after{right:-6px;}
.a-pill-blue{background:linear-gradient(180deg,#5f9fe0 0%,#2d66b6 50%,#1d4a8e 100%);}
.a-pill-violet{background:linear-gradient(180deg,#9c7be4 0%,#6b44bf 50%,#4a2c94 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px -4px rgba(150,110,255,.55);}
.a-pill:hover{filter:brightness(1.15);}

/* ---------- home hero ---------- */
.a-hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,110px) 0 64px;text-align:center;}
.a-hero-art{position:absolute;inset:0;z-index:0;}
.a-hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.55;}
.a-hero-art::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 55% at 50% 38%,rgba(7,13,26,0) 0%,rgba(7,13,26,.55) 70%,#070d1a 100%),
  linear-gradient(180deg,rgba(7,13,26,.4) 0%,rgba(0,15,36,0) 40%,rgba(7,19,40,.92) 88%,#070d1a 100%);}
.a-hero-in{position:relative;z-index:1;}
.a-hero-kicker{margin:0 0 6px;font:600 .74rem var(--font);letter-spacing:.6em;text-transform:uppercase;color:#9fb8dc;}
.a-hero-title{max-width:20ch;margin:0 auto;font:400 clamp(2.1rem,5.6vw,4rem)/1.08 var(--font-display);
  background:linear-gradient(180deg,#ffffff 15%,#cfdcf0 55%,#8ea9cf 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.65));}
.a-hero-lead{max-width:60ch;margin:16px auto 0;color:#c4d2ea;font-size:1rem;}
.a-hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:30px;}
.a-cards{list-style:none;margin:56px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:920px;}
.a-card{position:relative;display:block;aspect-ratio:1/1.02;overflow:hidden;text-decoration:none;color:#fff;
  border:1px solid rgba(140,196,255,.35);background:#0b1a36;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.9);}
.a-card::before{content:"";position:absolute;top:0;left:50%;z-index:2;width:46px;height:12px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#cfe6ff,transparent) center/100% 1px no-repeat,radial-gradient(circle,#e6f2ff 0 2px,transparent 3px) center/12px 12px no-repeat;}
.a-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s;opacity:.85;}
.a-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,48,.15) 30%,rgba(22,60,120,.85) 100%);}
.a-card:hover img{transform:scale(1.05);opacity:1;}
.a-card-tag{position:absolute;top:10px;left:10px;z-index:2;padding:2px 7px;font-size:.66rem;color:#c6d6ef;background:rgba(10,20,40,.7);border:1px solid rgba(140,196,255,.25);}
.a-card-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 12px 18px;border-top:1px solid rgba(140,196,255,.3);font-size:.98rem;}

/* ---------- news panel (official: blue sky with a soft light) ---------- */
.a-news{position:relative;padding:76px 0 70px;overflow:hidden;
  background:radial-gradient(70% 90% at 70% 10%,rgba(150,190,255,.45),transparent 60%),
             radial-gradient(60% 60% at 15% 90%,rgba(80,60,200,.35),transparent 70%),
             linear-gradient(180deg,#1e3f86 0%,#2c5cb6 45%,#2a4fa0 75%,#1a2f66 100%);}
.a-news::before{content:"";position:absolute;top:-30%;right:-10%;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 120px 20px rgba(160,200,255,.18) inset;pointer-events:none;}
.a-news .wrap{position:relative;max-width:1000px;}
.a-news-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.a-feature{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 20px 40px -20px rgba(0,10,40,.9);}
.a-feature img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.a-feature:hover img{transform:scale(1.04);}
.a-feature-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;color:#fff;font-size:.88rem;background:linear-gradient(transparent,rgba(5,15,40,.9));}
.a-news-list{list-style:none;margin:14px 0 0;padding:0;}
.a-news-list li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid rgba(255,255,255,.14);font-size:.86rem;color:#e7efff;line-height:1.45;}
.a-news-list li::before{content:"";position:absolute;left:4px;top:13px;width:14px;height:14px;border:1px solid rgba(220,235,255,.8);transform:rotate(45deg);background:radial-gradient(circle,#fff 0 2px,transparent 3px);}
.a-news-list a{color:#fff;text-decoration:none;} .a-news-list a:hover{text-decoration:underline;}
.a-events{padding:0;border:0;background:none;box-shadow:none;}
.a-events .ev{background:rgba(8,22,56,.55);border-color:rgba(200,225,255,.22);border-radius:4px;}
.a-events .ev::before{background:#cfe6ff;}
.a-events .ev.is-next{background:rgba(8,22,56,.75);border-color:rgba(220,236,255,.5);}
.a-events .ev.is-next .ev-timer span{background:rgba(255,255,255,.06);border-color:rgba(200,225,255,.25);border-radius:3px;}
.a-events .ev-name,.a-events .ev-name a{color:#fff;}
.a-events .ev-acc,.a-events .ev-when{color:#b9cbea;}
.a-events-more{margin:12px 0 0;font-size:.85rem;} .a-events-more a{color:#fff;}
.a-shortcut{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-top:40px;padding:22px 30px;position:relative;
  background:linear-gradient(180deg,rgba(150,195,255,.32),rgba(80,130,220,.22));border:1px solid rgba(220,236,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.a-shortcut a{color:#fff;text-decoration:none;font-size:.95rem;padding:2px 14px;}
.a-shortcut a + a::before{content:"✦";margin-right:18px;margin-left:-6px;color:#e6f2ff;font-size:.8rem;}
.a-shortcut a:hover{text-shadow:0 0 10px #bfe0ff;}

/* ---------- classes block (official "game story" panel) ---------- */
.a-story{position:relative;padding:70px 0 80px;overflow:hidden;border-top:1px solid rgba(140,196,255,.18);}
.a-story-bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(180deg,#070d1a 0%,rgba(7,13,26,.55) 30%,rgba(7,13,26,.8) 75%,#070d1a 100%),
  url(../art/hero-progression.webp) center/cover no-repeat;}
.a-story .wrap{position:relative;z-index:1;}
.a-story .a-title{margin-bottom:10px;}
.a-story .a-title-line::before,.a-story .a-title-line::after{width:auto;flex:1;height:1px;max-width:360px;clip-path:none;
  background:repeating-linear-gradient(90deg,rgba(190,220,255,.55) 0 2px,transparent 2px 9px);opacity:.8;}
.a-story-lead{max-width:62ch;margin:0 auto 34px;text-align:center;color:#c3d1e8;}
.a-story .class-card-link{border-radius:4px;border-color:rgba(140,196,255,.28);background:rgba(10,22,46,.82);}
.a-story .class-card h3{font-family:var(--font-display);}

/* ---------- general pieces in the official look ---------- */
.btn{border-radius:999px;font-family:var(--font);}
.btn-primary{background:linear-gradient(180deg,#5f9fe0,#2d66b6 55%,#1d4a8e);color:#fff;border:1px solid rgba(190,225,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
.btn-primary:hover{background:linear-gradient(180deg,#72aef0,#3673c8 55%,#2457a3);}
.section-title,.page-hero h1,.class-hero h1,.sec-head h2{font-family:var(--font-display);}
.page-hero{background:radial-gradient(900px 340px at 50% -30%,rgba(90,150,255,.28),transparent 65%),linear-gradient(180deg,#0b1a38,#070d1a);border-bottom-color:rgba(140,196,255,.18);}
.class-hero h1,.page-hero h1{background:linear-gradient(180deg,#fff 20%,#a9c3e6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.callout,.feature,.credit-note{border-radius:4px;}
.feature{background:linear-gradient(180deg,#0f1f3d,#0b162d);border-color:#22406f;}
.feature h3{font:400 1.15rem var(--font-display);color:#eaf3ff;}
.features{padding-top:64px;padding-bottom:70px;}
.guidebar{background:rgba(7,13,26,.9);}

/* ---------- footer (official: centred, icons, link row, small legal) ---------- */
.aion-foot{background:#050a15;border-top:1px solid rgba(140,196,255,.12);}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:42px 54px;text-align:center;font-size:.8rem;color:#7486a8;}
.foot-social{display:flex;gap:10px;}
.foot-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#1a2438;color:#c9d6ee;}
.foot-social a:hover{background:#2a3a5c;color:#fff;}
.foot-social svg{width:19px;height:19px;}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:6px 0 0;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07);width:min(720px,100%);}
.foot-links a{color:#b5c2db;text-decoration:none;} .foot-links a:hover{color:#fff;}
.foot-credit,.foot-legal{max-width:70ch;margin:0;}
.foot-credit a{color:#cfe2ff;}
.foot-copy{margin:0;font-size:.72rem;color:#55647f;}

@media (max-width:760px){
  .a-cards{grid-template-columns:1fr;max-width:420px;}
  .a-card{aspect-ratio:16/9;}
  .a-news-grid{grid-template-columns:1fr;}
  .a-shortcut{padding:16px 10px;}
  .a-shortcut a{padding:4px 10px;}
  .a-shortcut a + a::before{margin-right:12px;}
  .a-hero-btns{gap:18px;}
}

/* ---------- HackNews YouTube videos ---------- */
.a-videos{padding:70px 0 40px;background:linear-gradient(180deg,#0a1630,#070d1a);}
.hv-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.hv-long{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));}
.hv-shorts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.hv{display:flex;flex-direction:column;gap:8px;height:100%;color:var(--text);text-decoration:none;}
.hv-thumb{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(140,196,255,.28);background:#0b1a36;}
.hv-shorts .hv-thumb{aspect-ratio:9/14;}
.hv-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.hv:hover .hv-thumb img{transform:scale(1.05);}
.hv-play{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(10,25,55,.7);border:1px solid rgba(200,230,255,.7);}
.hv-play::after{content:"";position:absolute;left:18px;top:14px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;}
.hv-title{font-size:.86rem;line-height:1.35;}
.hv:hover .hv-title{color:var(--gold-2);}
.hv-sub{margin:34px 0 14px;font:400 1.3rem var(--font-display);color:#eaf3ff;}
.hv-more{margin:30px 0 0;text-align:center;}
.hv-class{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:10px;border-radius:4px;border:1px solid rgba(140,196,255,.3);background:linear-gradient(90deg,rgba(45,102,182,.25),rgba(14,27,52,.6));color:var(--text);text-decoration:none;}
.hv-class .hv-thumb{flex:none;width:120px;aspect-ratio:16/9;}
.hv-class .hv-play{width:30px;height:30px;}
.hv-class .hv-play::after{left:11px;top:8px;border-left-width:10px;border-top-width:6px;border-bottom-width:6px;}
.hv-class small{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
.hv-class b{font-weight:600;}
.hv-class:hover{border-color:var(--gold);}

/* ---------- ambient background motion (the official site uses looping videos; this is the CSS stand-in) ---------- */
@keyframes a-drift{0%{transform:scale(1.04) translate3d(0,0,0);}50%{transform:scale(1.12) translate3d(-1.5%,-1%,0);}100%{transform:scale(1.04) translate3d(0,0,0);}}
@keyframes a-drift2{0%{transform:scale(1.06) translate3d(1%,0,0);}50%{transform:scale(1.14) translate3d(-1%,1%,0);}100%{transform:scale(1.06) translate3d(1%,0,0);}}
@keyframes a-pulse{0%,100%{opacity:.35;}50%{opacity:.75;}}
@keyframes a-sweep{0%{transform:translateX(-60%) skewX(-18deg);opacity:0;}15%{opacity:1;}60%,100%{transform:translateX(160%) skewX(-18deg);opacity:0;}}
@keyframes a-ring{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes a-twinkle{0%,100%{opacity:.4;transform:scale(.85);}50%{opacity:1;transform:scale(1.1);}}
.a-hero-art img{animation:a-drift 38s ease-in-out infinite;transform-origin:50% 30%;will-change:transform;}
.a-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 35% at 50% 32%,rgba(120,180,255,.28),transparent 70%);animation:a-pulse 7s ease-in-out infinite;}
.a-hero::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(190,225,255,.08),transparent);animation:a-sweep 11s ease-in-out infinite;}
.a-story-bg{animation:a-drift2 46s ease-in-out infinite;transform-origin:50% 50%;}
.a-story{isolation:isolate;}
.a-news::before{animation:a-ring 120s linear infinite;}
.a-news::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(30% 40% at 72% 18%,rgba(255,255,255,.18),transparent 70%);animation:a-pulse 9s ease-in-out infinite;}
.a-title::before,.a-title::after{animation:a-twinkle 3.2s ease-in-out infinite;}
.a-title::after{animation-delay:1.6s;}
.a-story .a-title-line::before,.a-story .a-title-line::after{animation:none;}
.class-hero-art{animation:a-drift 40s ease-in-out infinite;}
/* guide page headers: keep the art (z-index -2 pseudo) above the themed background */
.page-hero.has-art{position:relative;isolation:isolate;overflow:hidden;}
.page-hero.has-art::before{animation:a-drift2 30s ease-in-out infinite;}
/* Stronger, faster drift so the motion reads like the official video loops (runs even with "reduce motion"). */
@keyframes a-drift{0%{transform:scale(1.05) translate3d(1.5%,0,0);}50%{transform:scale(1.18) translate3d(-2.5%,-2%,0);}100%{transform:scale(1.05) translate3d(1.5%,0,0);}}
@keyframes a-drift2{0%{transform:scale(1.08) translate3d(2%,0,0);}50%{transform:scale(1.2) translate3d(-2%,1.5%,0);}100%{transform:scale(1.08) translate3d(2%,0,0);}}
.a-hero-art img{animation-duration:22s;}
.a-story-bg{animation-duration:26s;}
.a-hero::before{animation-duration:5s;}
.a-hero::after{width:45%;background:linear-gradient(90deg,transparent,rgba(190,225,255,.14),transparent);animation-duration:8s;}
/* drifting mist bands over the hero art */
@keyframes a-mist{from{background-position:0 0,0 0;}to{background-position:1200px 0,-900px 0;}}
.a-hero-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(35% 18% at 30% 70%,rgba(140,190,255,.22),transparent 70%) 0 0/1200px 100% repeat-x,
             radial-gradient(30% 14% at 70% 55%,rgba(170,140,255,.18),transparent 70%) 0 0/900px 100% repeat-x;
  animation:a-mist 40s linear infinite;}