@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Noto+Sans+TC:wght@500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root{--ink:#03162F;--night:#020b18;--violet:#45206F;--gold:#D9B51F;--silver:#5F6673;--text:#f1f3f7;--muted:#c7cbd2;--line:rgba(95,102,115,.34);--glass:rgba(3,22,47,.68)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--text);background:var(--ink);font-family:Inter,'Noto Sans TC',sans-serif;font-size:17px;font-weight:500;line-height:1.75;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none} button{font:inherit} img{max-width:100%}
.skip{position:fixed;left:1rem;top:-5rem;z-index:1000;background:#fff;color:#000;padding:.7rem 1rem}.skip:focus{top:1rem}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.nav{position:fixed;z-index:100;top:0;left:0;width:100%;padding:18px 4vw;display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:1px solid transparent;transition:padding .8s cubic-bezier(.22,1,.36,1),background-color .8s ease,border-color .8s ease,backdrop-filter .8s ease}
.nav.scrolled{padding-top:12px;padding-bottom:12px;background:rgba(3,22,47,.58);backdrop-filter:blur(18px) saturate(115%);border-bottom-color:rgba(95,102,115,.18)}
.nav.solid{background:rgba(3,22,47,.97);backdrop-filter:blur(12px);border-bottom-color:rgba(95,102,115,.26)}
.brand{display:flex;align-items:center;gap:13px;letter-spacing:.17em;font-size:14px;font-weight:500}
.brand img{display:block;width:42px;height:44px;object-fit:contain;object-position:center}
.nav-links{display:flex;gap:2rem;align-items:center}.nav-links a{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#d8dbe1;transition:.3s}.nav-links a:hover,.nav-links a[aria-current=page]{color:#fff}
.lang{border:1px solid var(--line);border-radius:99px;padding:.55rem .8rem!important}
.menu{display:none;color:#fff;background:none;border:0;padding:.5rem;font-size:1.2rem}
.page{position:relative;z-index:2}
.hero{min-height:100svh;position:relative;display:grid;place-items:center;text-align:center;isolation:isolate;overflow:hidden;padding:8rem 1.5rem 5rem;background-image:linear-gradient(180deg,rgba(3,22,47,.54),rgba(3,22,47,.72) 72%,#03162F 98%),url('../images/cinematic/hero-universe.webp');background-size:auto,cover;background-repeat:no-repeat;background-position:center,center;animation:heroDrift 26s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;width:min(60vw,720px);aspect-ratio:1;border:1px solid rgba(217,181,31,.055);border-radius:50%;box-shadow:inset 0 0 100px rgba(3,22,47,.48);z-index:-1}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 24%,rgba(2,11,24,.1) 58%,rgba(2,11,24,.42) 100%)}
.hero-core{position:relative;isolation:isolate;max-width:940px;display:flex;flex-direction:column;align-items:center}.hero-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate}.hero-logo-wrap::before{content:"";position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:47% 53% 49% 51%;background:radial-gradient(circle,rgba(242,246,255,.08) 0%,rgba(126,151,214,.05) 32%,rgba(67,74,156,.025) 50%,rgba(5,10,36,0) 72%);filter:blur(18px);opacity:.55;pointer-events:none;z-index:-1}.hero-logo-wrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,250,224,.72) 0%,rgba(245,205,78,.4) 8%,rgba(225,233,255,.24) 20%,rgba(126,151,214,.12) 36%,rgba(67,74,156,0) 58%);-webkit-mask:url('../brand/logo-master.png') center/contain no-repeat;mask:url('../brand/logo-master.png') center/contain no-repeat;mix-blend-mode:screen;opacity:.38}.hero-logo{position:relative;z-index:1;display:block;width:min(29vw,270px);height:auto;object-fit:contain;object-position:center;margin:0 auto 1rem}
.eyebrow{font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:1.8rem 0 1rem}
h1,h2,h3,p{margin-top:0}.display{font-family:'Playfair Display','Noto Sans TC',serif;font-size:clamp(3rem,8vw,7rem);line-height:.95;font-weight:500;letter-spacing:-.04em;margin:0;color:#f4f1ec;text-wrap:balance}
.display em{font-weight:500;color:var(--gold)}
.hero .display{font-size:clamp(2.7rem,7vw,6.6rem)}
.hero-sub{max-width:560px;margin:1.75rem auto 0;color:#d3d7de;line-height:1.85;font-size:17px;font-weight:500;letter-spacing:.02em}
.cta{display:inline-flex;align-items:center;gap:1rem;margin-top:2.4rem;padding:.85rem 1.5rem;border:1px solid rgba(217,181,31,.42);border-radius:99px;background:rgba(3,22,47,.68);backdrop-filter:blur(14px);letter-spacing:.13em;font-size:14px;font-weight:600;line-height:1.5;text-transform:uppercase;box-shadow:0 8px 28px rgba(2,11,24,.12);transition:transform .7s cubic-bezier(.22,1,.36,1),border-color .7s ease,background-color .7s ease,box-shadow .7s ease,filter .7s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05);border-color:rgba(217,181,31,.62);box-shadow:0 12px 32px rgba(2,11,24,.2)}.cta span{color:var(--gold)}
.scroll-cue{position:absolute;bottom:2rem;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.2em;color:#c2c7cf}.scroll-cue::after{content:"";display:block;width:1px;height:36px;margin:.7rem auto 0;background:linear-gradient(var(--gold),transparent)}
.intro-running .hero-logo-wrap{opacity:.65;transform:translate(-14px,32px) scale(.72) rotate(-10deg);filter:blur(2px)}.intro-running .hero-core>.eyebrow,.intro-running .hero-core>.display,.intro-running .hero-core>.hero-sub,.intro-running .hero-core>.cta,.intro-running .hero>.scroll-cue{opacity:0;transform:translateY(12px)}.intro-running.intro-active .hero-logo-wrap{animation:anmiraLogoMotion 1.28s linear both,anmiraLogoClarity .3s ease-out both}.intro-running.intro-active .hero-core>.eyebrow,.intro-running.intro-active .hero-core>.display,.intro-running.intro-active .hero-core>.hero-sub,.intro-running.intro-active .hero-core>.cta,.intro-running.intro-active .hero>.scroll-cue{animation:anmiraHeroContentIntro .5s cubic-bezier(.16,1,.3,1) both}.intro-running.intro-active .hero-core>.eyebrow{animation-delay:1.15s}.intro-running.intro-active .hero-core>.display{animation-delay:1.24s}.intro-running.intro-active .hero-core>.hero-sub{animation-delay:1.33s}.intro-running.intro-active .hero-core>.cta{animation-delay:1.42s}.intro-running.intro-active .hero>.scroll-cue{animation-delay:1.51s}
.section{padding:clamp(7rem,13vw,12rem) 6vw;position:relative}.page>.section:nth-of-type(even){background:linear-gradient(180deg,rgba(95,102,115,.018),rgba(69,32,111,.025),rgba(95,102,115,.012))}.page>.section:nth-of-type(odd):not(.contact){background:linear-gradient(180deg,rgba(2,11,24,.06),rgba(2,11,24,.13),rgba(2,11,24,.05))}.section-inner{max-width:1320px;margin:auto}
.section-head{max-width:760px;margin-bottom:4.75rem}.section-head .display{font-size:clamp(2.6rem,6vw,5.5rem)}.lede{font-size:clamp(17px,1.7vw,1.35rem);font-weight:500;line-height:1.85;color:#d3d7de}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw;align-items:center}.story-copy{font-family:'Playfair Display','Noto Sans TC',serif;font-size:clamp(1.5rem,3vw,2.7rem);font-weight:500;line-height:1.55;color:#f1f3f7}.story-copy strong{color:var(--gold);font-weight:500}.story-aside{border-left:1px solid var(--gold);padding-left:2rem;color:var(--muted);font-size:17px;font-weight:500;line-height:2}
.universe{min-height:900px;display:grid;place-items:center}.system{position:relative;width:min(84vw,930px);aspect-ratio:1}.orbit{position:absolute;border:1px solid rgba(95,102,115,.3);border-radius:50%;inset:8%}.orbit:nth-child(2){inset:23%}.core{position:absolute;inset:39%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1d55b,#8b7014 28%,#03162F 70%);box-shadow:0 0 70px rgba(217,181,31,.3);display:grid;place-items:center;text-align:center;font-size:14px;font-weight:600;line-height:1.45;letter-spacing:.14em}
.planet{position:absolute;width:clamp(100px,13vw,170px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(95,102,115,.4);background:radial-gradient(circle at 32% 28%,rgba(95,102,115,.4),rgba(69,32,111,.24) 32%,rgba(3,22,47,.96) 70%);box-shadow:inset -18px -18px 36px rgba(0,0,0,.4),0 18px 42px rgba(0,0,0,.26);backdrop-filter:blur(8px);transition:border-color .8s ease,box-shadow .8s ease,filter .8s ease;animation:float 22s ease-in-out infinite}
.planet:hover{filter:brightness(1.03);border-color:rgba(217,181,31,.5);box-shadow:inset -18px -18px 36px rgba(0,0,0,.36),0 20px 46px rgba(0,0,0,.3)}.planet b{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:500}.planet small{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:.1em;color:var(--gold);margin-top:.35rem}.p1{left:0;top:18%;animation-duration:24s}.p2{right:0;top:23%;animation-delay:-7s;animation-duration:28s}.p3{left:13%;bottom:2%;animation-delay:-13s;animation-duration:21s}.p4{right:12%;bottom:0;animation-delay:-18s;animation-duration:26s}
.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.character{position:relative;min-height:610px;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:#03162F;transition:transform .8s cubic-bezier(.22,1,.36,1),border-color .8s ease,box-shadow .8s ease,filter .8s ease}.character img{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);object-fit:cover;filter:contrast(1.035) saturate(.98);transition:filter .9s ease;animation:imageFloat 24s ease-in-out infinite}.character:nth-child(2) img{animation-duration:29s;animation-delay:-9s}.character:nth-child(3) img{animation-duration:21s;animation-delay:-14s}.character::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(2,11,24,.28) 100%);box-shadow:inset 0 0 0 1px rgba(241,243,247,.035),inset 0 0 48px rgba(95,102,115,.055)}.character::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(3,22,47,.96) 93%)}.character-info{position:absolute;z-index:2;bottom:0;padding:2rem;width:100%;transform:translateY(18px);transition:transform .8s cubic-bezier(.22,1,.36,1)}.character h3{font-family:'Playfair Display',serif;font-size:2rem;font-weight:500;margin-bottom:.4rem}.character p{color:#e0e3e8;font-size:16px;font-weight:500;line-height:1.65;letter-spacing:.04em;opacity:0;transition:opacity .8s ease}.character:hover{transform:translateY(-2px);filter:brightness(1.02);border-color:rgba(217,181,31,.46);box-shadow:0 16px 42px rgba(2,11,24,.2)}.character:hover img{filter:contrast(1.035) saturate(.98) brightness(1.02)}.character:hover .character-info{transform:none}.character:hover p{opacity:1}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.moment{padding:2rem 2rem 0 0;position:relative}.moment::before{content:"";position:absolute;width:8px;height:8px;top:-5px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)}.moment .year{font-family:'Playfair Display',serif;color:var(--gold);font-size:1.7rem}.moment h3{font-weight:500;margin-top:2rem}.moment p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.75}
.contact{text-align:center;min-height:75vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(69,32,111,.12),transparent 48%)}.contact .display{max-width:900px}.mail{font-family:'Playfair Display',serif;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:500;display:inline-block;margin-top:2rem;color:var(--gold);border-bottom:1px solid rgba(217,181,31,.42);padding-bottom:.4rem}
.page-hero{min-height:70svh;display:grid;align-items:end;padding:10rem 6vw 6rem;background:linear-gradient(180deg,rgba(3,22,47,.64),var(--ink)),url('../images/cinematic/hero-universe.webp') center/cover}.page-hero>div{max-width:1000px}.page-hero .display{font-size:clamp(3rem,8vw,7rem)}.page-content{max-width:1200px;margin:auto;padding:8rem 6vw 11rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.glass{border:1px solid var(--line);background:linear-gradient(145deg,rgba(95,102,115,.12),rgba(3,22,47,.14));border-radius:24px;padding:2rem;min-height:240px;transition:transform .8s cubic-bezier(.22,1,.36,1),border-color .8s ease,box-shadow .8s ease,filter .8s ease}.glass:hover{transform:translateY(-2px);filter:brightness(1.02);border-color:rgba(217,181,31,.42);box-shadow:0 14px 36px rgba(2,11,24,.17)}.glass .index{font-family:'Playfair Display',serif;color:var(--gold);font-size:1.4rem}.glass h3{font-weight:500;font-size:1.2rem;margin-top:3rem}.glass p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.78}
.footer{position:relative;z-index:3;border-top:1px solid var(--line);padding:2rem 6vw;display:flex;justify-content:space-between;color:#c2c7cf;font-size:14px;font-weight:500;line-height:1.5;letter-spacing:.06em}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:none}.characters .reveal:nth-child(2),.grid .reveal:nth-child(2){transition-delay:.08s}.characters .reveal:nth-child(3),.grid .reveal:nth-child(3){transition-delay:.16s}.grid .reveal:nth-child(4){transition-delay:.24s}.grid .reveal:nth-child(5){transition-delay:.32s}.grid .reveal:nth-child(6){transition-delay:.4s}
@keyframes anmiraLogoMotion{0%{transform:translate(-14px,32px) scale(.72) rotate(-10deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}70.3125%{transform:translate(2px,-4px) scale(1.045) rotate(1.5deg);animation-timing-function:cubic-bezier(.22,.75,.25,1)}100%{transform:translate(0,0) scale(1) rotate(0)}}@keyframes anmiraLogoClarity{from{opacity:.65;filter:blur(2px)}to{opacity:1;filter:blur(0)}}@keyframes anmiraHeroContentIntro{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes heroDrift{0%{background-position:center,calc(50% - 2px) calc(50% - 2px)}100%{background-position:center,calc(50% + 2px) calc(50% + 2px)}}@keyframes imageFloat{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:900px){.nav-links{position:fixed;inset:0 0 auto;background:rgba(3,7,20,.96);padding:6rem 2rem 2rem;flex-direction:column;transform:translateY(-110%);transition:.4s}.nav-links.open{transform:none}.menu{display:block;z-index:2}.story{grid-template-columns:1fr}.system{width:90vw}.characters,.grid{grid-template-columns:1fr 1fr}.character{min-height:520px}.timeline{grid-template-columns:1fr 1fr;gap:4rem 0}}
@media(max-width:600px){body{font-size:16px}.brand span{display:none}.brand img{width:40px;height:42px}.hero-logo{width:min(52vw,210px)}.hero::before{width:90vw}.hero-sub,.story-aside{font-size:16px}.section{padding-left:1.25rem;padding-right:1.25rem}.universe{min-height:680px}.system{width:120vw}.planet{width:100px}.characters,.grid,.timeline{grid-template-columns:1fr}.character{min-height:560px}.page-hero{padding-left:1.25rem;padding-right:1.25rem}.page-content{padding:5rem 1.25rem}.footer{flex-direction:column;gap:.5rem}.nav{padding-left:1.25rem;padding-right:1.25rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.intro-running .hero-logo-wrap,.intro-running .hero-core>.eyebrow,.intro-running .hero-core>.display,.intro-running .hero-core>.hero-sub,.intro-running .hero-core>.cta,.intro-running .hero>.scroll-cue{opacity:1!important;transform:none!important;filter:none!important}}