/* AION-亞洲服 shared atmosphere: original recreation of a cinematic game landing page */
body{position:relative;isolation:isolate;overflow-x:hidden;background:#040913!important}
body:before{content:"";position:fixed;inset:-18%;z-index:-2;pointer-events:none;background:radial-gradient(circle at 72% 22%,rgba(56,148,230,.18),transparent 31%),radial-gradient(circle at 18% 78%,rgba(182,51,84,.11),transparent 29%),linear-gradient(115deg,#030711,#061526 48%,#08050b);animation:aionAtmosphere 18s ease-in-out infinite alternate}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 15%,rgba(150,205,255,.045),transparent 34%);mix-blend-mode:screen;animation:none}
.global-bg-video{position:fixed;inset:0;width:100%;height:100%;z-index:-3;object-fit:cover;object-position:62% 42%;opacity:.12;mix-blend-mode:screen;filter:saturate(1.45) contrast(1.12)}
.aion-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:#02050c;animation:aionIntroOut .8s cubic-bezier(.7,0,.2,1) 9.25s forwards;pointer-events:auto}
.aion-intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.29;filter:saturate(1.35) contrast(1.08);transform:scale(1.06);animation:aionIntroVideo 10s ease-out forwards}
.aion-intro:before{content:"";position:absolute;width:min(72vw,720px);height:min(72vw,720px);border:1px solid rgba(182,224,255,.28);border-radius:50%;box-shadow:0 0 0 22px rgba(119,190,240,.04),0 0 0 54px rgba(119,190,240,.025),inset 0 0 65px rgba(105,191,255,.16);animation:aionOrbit 10s cubic-bezier(.2,.8,.2,1) forwards}
.aion-intro:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 18%,rgba(3,9,18,.2) 42%,rgba(1,3,8,.98) 100%),linear-gradient(90deg,rgba(30,128,228,.11),transparent 37%,rgba(221,65,91,.11));animation:aionIntroGlow 10s ease-out forwards}
.aion-intro-content{position:relative;z-index:2;text-align:center;transform:translateY(12px);animation:aionLogoIn 1.2s cubic-bezier(.2,.75,.2,1) .12s forwards;opacity:0}.aion-intro-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 0 28%,rgba(2,6,14,.28) 58%,rgba(1,3,8,.94) 100%),linear-gradient(108deg,rgba(24,110,214,.17),transparent 40%,rgba(208,44,67,.15))}.aion-intro-kicker{margin:0 0 17px;color:#abcff0;font:700 10px/1 "Segoe UI",sans-serif;letter-spacing:.42em;text-indent:.42em}.aion-enter{display:inline-flex;align-items:center;gap:14px;margin-top:30px;min-width:168px;justify-content:center;padding:13px 21px;border:1px solid rgba(227,195,123,.9);background:linear-gradient(135deg,rgba(227,195,123,.9),rgba(153,107,54,.9));color:#07101b;font:800 12px/1 "Segoe UI","Microsoft JhengHei UI",sans-serif;letter-spacing:.18em;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 28px rgba(222,174,89,.2);transition:transform .25s,box-shadow .25s}.aion-enter:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 38px rgba(222,174,89,.46)}.aion-enter span{font-size:16px}
.aion-intro-mark{width:112px;height:112px;margin:0 auto 20px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(125,205,255,.8));animation:aionMarkPulse 2.6s ease-in-out .8s infinite alternate}
.aion-intro-title{position:relative;margin:0;color:#f3fbff;font:900 clamp(58px,11vw,148px)/.82 "Arial Black",Impact,Georgia,sans-serif;letter-spacing:.07em;text-indent:.07em;font-style:italic;transform:skewX(-8deg);text-shadow:-4px 0 0 rgba(84,187,255,.7),4px 0 0 rgba(235,63,87,.58),0 0 24px rgba(126,209,255,.68),0 14px 38px rgba(0,0,0,.72);filter:drop-shadow(0 0 8px rgba(218,241,255,.4))}.aion-intro-title:before,.aion-intro-title:after{content:"";position:absolute;left:12%;right:-12%;height:4px;transform:skewX(-28deg) rotate(-8deg);opacity:.72;pointer-events:none}.aion-intro-title:before{top:18%;background:linear-gradient(90deg,transparent,rgba(115,210,255,.9),rgba(255,255,255,.75),transparent);box-shadow:0 19px 0 rgba(219,67,91,.55)}.aion-intro-title:after{bottom:4%;background:linear-gradient(90deg,transparent,rgba(227,195,123,.85),transparent);height:2px}
.aion-intro-sub{margin:20px 0 0;color:#e0bf72;font:700 12px/1 "Segoe UI","Microsoft JhengHei UI",sans-serif;letter-spacing:.5em;text-indent:.5em}.aion-intro-line{width:180px;height:1px;margin:25px auto 0;background:linear-gradient(90deg,transparent,#dcb86b,transparent);transform:scaleX(0);animation:aionLineIn .8s ease-out .88s forwards}.aion-intro-caption{margin:17px 0 0;color:#9db5c8;font-size:10px;letter-spacing:.28em;text-indent:.28em}
@keyframes aionAtmosphere{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(2%,-2%,0) scale(1.08)}}@keyframes aionLightSweep{0%{transform:translateX(-12%)}100%{transform:translateX(12%)}}@keyframes aionIntroOut{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@keyframes aionIntroVideo{0%{transform:scale(1.16);opacity:0}20%{opacity:.29}100%{transform:scale(1);opacity:.32}}@keyframes aionOrbit{0%{transform:scale(.65) rotate(-22deg);opacity:0}25%{opacity:1}100%{transform:scale(1.08) rotate(18deg);opacity:.8}}@keyframes aionIntroGlow{0%{opacity:0}30%{opacity:1}100%{opacity:.76}}@keyframes aionLogoIn{0%{opacity:0;transform:translateY(34px) scale(.93);filter:blur(8px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes aionLineIn{to{transform:scaleX(1)}}@keyframes aionMarkPulse{from{transform:scale(.96);filter:drop-shadow(0 0 14px rgba(125,205,255,.5))}to{transform:scale(1.05);filter:drop-shadow(0 0 30px rgba(125,205,255,.95))}}
@media(prefers-reduced-motion:reduce){body:before,body:after,.aion-intro,.aion-intro video,.aion-intro:before,.aion-intro:after,.aion-intro-content,.aion-intro-mark,.aion-intro-line{animation:none}.aion-intro{opacity:0;visibility:hidden}.global-bg-video{display:none}}
@media(max-width:640px){.global-bg-video{opacity:.08}.aion-intro-mark{width:82px;height:82px}.aion-intro-sub{font-size:10px;letter-spacing:.34em;text-indent:.34em}.aion-intro-caption{font-size:9px;letter-spacing:.17em;text-indent:.17em}}

/* Licensed reference-inspired battlefield reveal: structure recreated for AION-亞洲服 */
.classic-stage{position:relative;min-height:min(820px,100svh);display:grid;place-items:center;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line);background:#0a111a url("/assets/reference-page3/page3.jpg") center/cover no-repeat}.classic-stage:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,17,34,.82),rgba(5,13,25,.12) 50%,rgba(29,8,13,.82)),linear-gradient(0deg,rgba(3,7,13,.88),transparent 42%,rgba(3,7,13,.18));animation:classicBreath 12s ease-in-out infinite alternate}.classic-stage:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,transparent 18%,rgba(3,7,13,.28) 74%,rgba(3,7,13,.74));pointer-events:none}.classic-video{position:absolute;inset:0;width:100%;height:100%;z-index:-4;object-fit:cover;object-position:center;opacity:.5;mix-blend-mode:screen;filter:saturate(1.18) contrast(1.08)}.classic-film{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(4,14,31,.72),transparent 43%,rgba(35,8,18,.68)),linear-gradient(0deg,rgba(2,6,12,.74),transparent 46%,rgba(2,6,12,.22));pointer-events:none}.classic-title{position:relative;z-index:5;width:min(360px,40vw);text-align:center;transform:scale(.65);opacity:0;filter:blur(6px);transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .75s ease,filter .9s ease}.classic-stage.in-view .classic-title{transform:scale(1);opacity:1;filter:blur(0)}.classic-title .eyebrow{margin-bottom:16px}.classic-title h2{position:relative;margin:0;color:#f6fbff;font:900 italic clamp(52px,8vw,112px)/.82 "Arial Black",Impact,"Segoe UI",sans-serif;letter-spacing:.035em;text-indent:.035em;transform:skewX(-9deg) scaleX(1.04);text-shadow:-4px 0 0 rgba(75,183,255,.76),4px 0 0 rgba(234,58,85,.65),0 0 22px rgba(177,224,255,.72),0 13px 28px rgba(0,0,0,.78);filter:drop-shadow(0 0 7px rgba(255,255,255,.32))}.classic-title h2:before,.classic-title h2:after{content:"";position:absolute;left:6%;right:-9%;height:3px;transform:skewX(-27deg) rotate(-7deg);opacity:.8;pointer-events:none}.classic-title h2:before{top:15%;background:linear-gradient(90deg,transparent,rgba(108,207,255,.95),rgba(255,255,255,.78),transparent);box-shadow:0 23px 0 rgba(225,65,91,.58)}.classic-title h2:after{bottom:3%;height:2px;background:linear-gradient(90deg,transparent,rgba(227,195,123,.92),transparent)}.classic-title p{margin:19px 0 0;color:#e0bd72;font-size:12px;letter-spacing:.35em;text-indent:.35em}.classic-subtitle{display:block;margin-top:18px;color:#c3d9e8;font-size:11px;letter-spacing:.22em}.classic-line{height:1px;margin:22px auto 0;width:185px;background:linear-gradient(90deg,transparent,#e3c37b,transparent)}.classic-fig{position:absolute;z-index:3;bottom:-3%;width:min(42vw,700px);max-height:95%;object-fit:contain;opacity:0;filter:drop-shadow(0 18px 40px rgba(0,0,0,.48));transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .85s ease}.classic-fig.left{left:-5%;transform:translateX(-220px) scale(.92)}.classic-fig.right{right:-5%;transform:translateX(220px) scale(.92)}.classic-stage.in-view .classic-fig{opacity:1;transform:translateX(0) scale(1)}.classic-stage.in-view .classic-fig.left{transition-delay:.15s}.classic-stage.in-view .classic-fig.right{transition-delay:.23s}.classic-badge{position:absolute;left:50%;bottom:38px;z-index:6;transform:translateX(-50%);color:#c9dced;font-size:10px;letter-spacing:.3em;text-indent:.3em;white-space:nowrap;opacity:0;transition:opacity .8s ease 1s}.classic-stage.in-view .classic-badge{opacity:1}@keyframes classicBreath{0%{transform:scale(1);filter:saturate(.85) brightness(.8)}100%{transform:scale(1.08);filter:saturate(1.2) brightness(1)}}@keyframes classicSweep{0%{transform:translateX(-14%)}100%{transform:translateX(14%)}}@media(max-width:760px){.classic-stage{min-height:720px;background-position:center}.classic-fig{width:75vw;max-height:55%;bottom:0}.classic-fig.left{left:-22%;transform:translateX(-130px) scale(.9)}.classic-fig.right{right:-22%;transform:translateX(130px) scale(.9)}.classic-title{width:78vw;margin-top:-165px}.classic-badge{bottom:23px;font-size:8px;letter-spacing:.18em}}
.class-image.c1,.class-image.c2{background-image:linear-gradient(180deg,rgba(5,13,24,.03),rgba(5,13,24,.86)),url('/assets/reference-page3/page3-fig1.png');background-size:cover,auto 150%;background-position:center,30% 28%}.class-image.c3,.class-image.c4{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/assassin-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 19%;background-color:#21152d}.class-image.c5,.class-image.c6{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/spiritmaster-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 20%;background-color:#173c42}.class-image.c7{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/chanter-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 19%;background-color:#3c2a18}.class-image.c8{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/cleric-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 19%;background-color:#23304a}
/* One licensed class artwork per classic AION I profession */
.class-image.c1{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/guardian-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 20%;background-color:#172842}.class-image.c2{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/gladiator-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 20%;background-color:#332118}.class-image.c3{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/ranger-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 16%;background-color:#21362c}.class-image.c4{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/spiritmaster-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 20%;background-color:#173c42}.class-image.c5{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/sorcerer-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 16%;background-color:#22204a}.class-image.c6{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/ranger-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 16%;background-color:#21362c}.class-image.c7{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/chanter-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 19%;background-color:#3c2a18}.class-image.c8{background-image:linear-gradient(180deg,rgba(5,13,24,.02),rgba(5,13,24,.88)),url('/assets/classes/cleric-bg_class.png');background-size:cover,auto 150%;background-position:center,50% 19%;background-color:#23304a}

.class-image{position:relative;background-color:#101e30}.class-icon{position:absolute;right:9px;bottom:4px;width:68px;height:57px;object-fit:contain;opacity:.82;filter:drop-shadow(0 0 8px rgba(190,226,255,.48));transition:transform .35s,opacity .35s}.class-card:hover .class-icon{transform:scale(1.12) rotate(-5deg);opacity:1}.pvp-story{max-width:650px;margin:0 0 28px;padding:17px 20px;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(9,23,39,.76),transparent);color:#c9d9e7}.pvp-story p{margin:7px 0 0;font-size:14px;line-height:1.85}.story-label{color:var(--gold);font-size:10px;font-weight:750;letter-spacing:.22em}.pvp:after{display:none}
/* typography pass: slightly larger readable campaign copy */
body{font-size:1.04em}.nav a{font-size:17px;font-weight:650;letter-spacing:.075em}.section-head>p,.announce-main p,.announce-main li,.class-card p,.pvp-copy,.pvp-story p,.faction span,.principle p{font-size:16px}.class-card h3{font-size:26px}.class-type,.faction small,.story-label{font-size:10px}


@media(max-width:640px){.nav a{font-size:14px}}


/* readability scale for desktop navigation and metadata */
.band-item small{font-size:12px}.band-item strong{font-size:19px}.eyebrow{font-size:12px}.scroll-cue{font-size:11px}.footer{font-size:13px}.footer-brand strong{font-size:16px}.announce-top{font-size:12px}.class-type{font-size:11px}


/* combat title treatment for the homepage hero */
.hero h1{position:relative;font-family:Arial Black,Impact,Segoe UI,sans-serif;font-style:italic;font-weight:900;letter-spacing:.01em;transform:skewX(-7deg);text-shadow:-5px 0 0 rgba(76,184,255,.72),5px 0 0 rgba(235,60,84,.58),0 0 30px rgba(147,216,255,.58),0 15px 38px rgba(0,0,0,.8)}
.hero h1 .hero-title-main{display:block;position:relative}
.hero h1 .hero-title-main:before,.hero h1 .hero-title-main:after{content:"";position:absolute;left:5%;right:-7%;height:4px;transform:skewX(-29deg) rotate(-7deg);opacity:.78;pointer-events:none}
.hero h1 .hero-title-main:before{top:18%;background:linear-gradient(90deg,transparent,rgba(112,210,255,.9),rgba(255,255,255,.74),transparent);box-shadow:0 25px 0 rgba(228,64,88,.55)}
.hero h1 .hero-title-main:after{bottom:1%;height:2px;background:linear-gradient(90deg,transparent,rgba(227,195,123,.92),transparent)}
.hero h1 span{transform:skewX(7deg);text-shadow:0 0 18px rgba(227,195,123,.38)}
/* keep the Classic 1.9 video above the poster/background layers */
.classic-stage .classic-video{z-index:0;display:block;visibility:visible;opacity:.58}
.classic-stage:before{z-index:1}
.classic-stage .classic-film{z-index:2}
.classic-stage:after{z-index:2}
/* final combat typography match: Classic AION uses the homepage title treatment */
.classic-title h2{position:relative;color:#f3fbff;font-family:Arial Black,Impact,Segoe UI,sans-serif;font-style:italic;font-weight:900;letter-spacing:.01em;text-indent:.01em;transform:skewX(-8deg) scaleX(1.04);-webkit-text-stroke:1px rgba(235,249,255,.54);text-shadow:-5px 0 0 rgba(76,184,255,.78),5px 0 0 rgba(235,60,84,.68),0 0 28px rgba(147,216,255,.7),0 15px 36px rgba(0,0,0,.84);filter:drop-shadow(0 0 8px rgba(255,255,255,.4))}
.classic-title h2:before,.classic-title h2:after{content:"";position:absolute;left:2%;right:-10%;height:4px;transform:skewX(-29deg) rotate(-7deg);opacity:.82;pointer-events:none}
.classic-title h2:before{top:15%;background:linear-gradient(90deg,transparent,rgba(112,210,255,.96),rgba(255,255,255,.78),transparent);box-shadow:0 24px 0 rgba(228,64,88,.6)}
.classic-title h2:after{bottom:2%;height:2px;background:linear-gradient(90deg,transparent,rgba(227,195,123,.95),transparent)}
/* homepage background brightness +20% */
.hero-bg{opacity:.76;filter:saturate(1.02) contrast(1.05) brightness(1.2)}
.hero:before{filter:brightness(1.2) saturate(1.05)}