/* Sanctuary: light as material, motion as a response to the observer. */
:root { --ink: #02070d; --paper: #e8d9ae; --gold-light: #ebd393; --line: #b8964b45; --dive: 0; }
body { background: #02070d; }
.cosmic-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 50% 12%, #0b2739, #02070d 70%); }
#cosmos { display: block; width: 100%; height: 100%; }
main, footer { position: relative; z-index: 1; }
.grain { opacity: .045; }
.site-header { background: #030910a8; border-color: #bf9c4533; box-shadow: none; backdrop-filter: blur(18px); }
.header-meta { font-size: .75rem; gap: 22px; font-variant-numeric: tabular-nums; }
.header-datetime { display: flex; gap: 14px; white-space: nowrap; }
.brand { text-shadow: 0 0 15px #dfb65465; }
.brand-mark { filter: drop-shadow(0 0 7px #f4d790); }
.lang { min-width: 40px; height: 36px; font-size: .8rem; transition: background .3s, box-shadow .3s, color .3s, border-color .3s; }
.lang.is-active { background: linear-gradient(135deg,#edd89d,#9e793a); box-shadow: 0 0 22px #d9b04b20; }
.lang:hover { border-color: #f6e2af; box-shadow: 0 0 24px #d9b04b40; }
.hero { min-height: 110svh; padding: max(200px,25svh) 4vw 100px; grid-template-columns: 1.5fr .5fr; background: transparent; box-shadow: none; }
.hero::before { opacity: .15; background-size: 12vw 12vw; }
.hero::after, .orbit { display: none; }
.hero-index { top: 104px; right: 4vw; font-size: .75rem; color: #bca779; }
.hero-copy { transform: translateY(calc(var(--dive) * -65px)); opacity: calc(1 - var(--dive) * .75); will-change: transform; }
.hero h1 { font-size: clamp(5rem,11.4vw,12rem); line-height: 1.04; letter-spacing: -.055em; margin-top: 16px; font-weight: 400; text-shadow: 0 0 8px #eac56c30,0 0 35px #eac56c25,0 0 100px #eac56c20; }
.hero h1 .outline { margin-left: 6vw; -webkit-text-stroke: 1px #e7c775; text-shadow: 0 0 30px #eac56c30; }
.latin-title { margin: 24px 0 0 6.6vw; font-size: clamp(.9rem,1.55vw,1.6rem); letter-spacing: .25em; color: #d7bf88; text-shadow: 0 0 22px #eac56c65; }
.eyebrow,.micro-label,.section-number,.note,.scroll-cue { font-size: .75rem; line-height: 1.65; }
.eyebrow { color: #baa982; }
.identity-card { width: min(26vw,355px); margin-bottom: 10vh; transform: translateY(calc(var(--dive) * -30px)); }
.avatar-frame { padding: 7px; border-color: #ceb36f; background: linear-gradient(140deg,#48391c,#d5b86b 22%,#3a2d18 50%,#af934c 80%,#322713); box-shadow: 0 0 38px #d6ad4318,0 24px 80px #0009,inset 0 0 0 2px #050b11; transition: box-shadow .5s; }
.avatar-frame:hover { box-shadow: 0 0 65px #d6ad4340,0 24px 80px #0009; }
.identity-copy { border-color: #c7a34b60; }
.identity-copy h2 { font-size: clamp(1.5rem,2.8vw,2.6rem); text-shadow: 0 0 25px #eac56c50; }
.identity-copy .micro-label { margin-bottom: 18px; }
.scroll-cue { left: 4vw; bottom: 54px; min-height: 44px; }
.scroll-line { background: #e8c97235; }
.manifesto { min-height: 110svh; padding: 130px 4vw 110px; background: transparent; box-shadow: none; border-bottom-color: #bfa35b2b; }
.manifesto::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#02070d9c,transparent 65%); pointer-events: none; }
.section-number { position: relative; z-index: 2; color: #c8ad74; }
.manifesto-grid { grid-template-columns: 1.3fr .7fr; gap: 7vw; margin-top: 15vh; align-items: center; }
.manifesto h2 { font-size: clamp(3.2rem,6.2vw,6.8rem); line-height: 1.2; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 0 9px #e9c16e25,0 0 40px #e9c16e25,0 4px 22px #000; }
.manifesto-copy { padding: 20px 24px; background: #030a1180; backdrop-filter: blur(3px); border-left: 1px solid #b59b5140; }
.manifesto-copy > p:first-child { margin-top: 0; font-size: clamp(1rem,1.5vw,1.4rem); line-height: 1.9; text-shadow: 0 0 24px #e2bd6140; }
.note { margin-top: 35px; color: #b1a386; }
.portals { position: relative; padding: 110px 4vw 140px; background: linear-gradient(#02070d40,#02070dcc); }
.section-head h2 { font-size: clamp(2rem,4vw,4rem); text-shadow: 0 0 40px #e9c16e35; }
.portal { position: relative; isolation: isolate; overflow: hidden; min-height: 135px; border-color: #a88d4c65; transition: padding .5s,background .5s,box-shadow .5s; }
.portal:last-child { border-color: #a88d4c65; }
.portal:hover,.portal:focus-visible { background: #a8832810; padding: 0 1.5vw; box-shadow: inset 0 1px #f2d78d70,0 0 50px #d6ad4310; }
.portal::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 300px 160px at var(--hover-x,50%) var(--hover-y,50%),#dfb54d26,transparent); opacity: 0; transition: opacity .5s; }
.portal:hover::before { opacity: 1; }
.portal-name { font-size: clamp(1.8rem,4vw,4.5rem); transition: text-shadow .5s,transform .5s; }
.portal:hover .portal-name { text-shadow: 0 0 10px #e7c98055,0 0 45px #e7c98055; transform: translateX(8px); }
.portal-no,.portal-state { font-size: .75rem; }
.portal-state { color: #b7a882; }
.portal-arrow { color: #b95845; transition: transform .5s,color .5s; }
.portal:hover .portal-arrow { transform: rotate(45deg); color: #f0d48b; }
.contact { padding: 100px 4vw 50px; min-height: 85svh; background: radial-gradient(ellipse at 30% 60%,#a0762610,transparent 60%),linear-gradient(90deg,#02070da6,#02070d30 72%); border-color: #a78e4f50; }
.contact-heading p { font-size: .75rem; line-height: 1.8; }
.contact-heading h2 { font-size: clamp(3.5rem,10vw,10rem); line-height: 1.2; text-shadow: 0 0 10px #e9c16e30,0 0 45px #e9c16e40,0 0 120px #e9c16e28; }
.contact-links a { position: relative; overflow: hidden; border-color: #a78e4f65; background: #07101960; font-size: .8rem; }
.contact-links a:hover { background: #c2993520; box-shadow: 0 0 35px #c7a64e20,inset 0 0 20px #c7a64e15; }
footer { font-size: .75rem; background: #02060b; }
a:focus-visible,button:focus-visible { outline: 2px solid #f2d58f; outline-offset: 5px; }
.cursor-light { position: fixed; top: 0; left: 0; width: 650px; height: 650px; margin: -325px; border-radius: 50%; z-index: 10; pointer-events: none; background: radial-gradient(circle,#ffdc8526 0%,#d3ab5711 27%,#b8974907 45%,transparent 68%); mix-blend-mode: screen; opacity: 0; will-change: transform; transition: opacity .6s; }
.cursor-core { position: fixed; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff1c9; box-shadow: 0 0 12px 3px #eacc8b90,0 0 32px 8px #eacc8b45; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pointer-active .cursor-light,.pointer-active .cursor-core { opacity: 1; }
.click-wave { position: fixed; width: 12px; height: 12px; margin: -6px; border: 1px solid #f5d88f; border-radius: 50%; box-shadow: 0 0 12px #e2b85565; pointer-events: none; z-index: 31; animation: click-wave .85s ease-out forwards; }
@keyframes click-wave { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(10); } }
.motion-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.lang-swap { animation: language-light .5s ease; }
@keyframes language-light { from { opacity: .25; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
html[lang=en] .hero h1 { font-size: clamp(3rem,6.5vw,7rem); letter-spacing: -.045em; line-height: 1.13; }
html[lang=en] .hero h1 .outline { margin-left: 2vw; }
html[lang=en] .latin-title { display: none; }
html[lang=en] .manifesto h2 { font-size: clamp(2.8rem,5vw,5.5rem); }
html[lang=ja] .manifesto h2 { font-size: clamp(2.8rem,5.4vw,5.5rem); }
@media (max-width: 1050px) { .header-meta { gap: 14px; } #visitor-coordinates { display: none; } }
@media (max-width: 800px) {
  .site-header { padding: 0 20px; }.brand { font-size: .9rem; }.lang { min-width: 38px; }
  .hero { padding: 170px 24px 100px; min-height: 110svh; grid-template-columns: 1fr; }
  .hero-index { top: 86px; right: 24px; }
  .hero h1 { font-size: clamp(4.6rem,22vw,8rem); line-height: 1.08; }
  .hero h1 .outline { margin-left: 3vw; }
  .latin-title { font-size: clamp(.75rem,2.7vw,1rem); margin-left: 4vw; letter-spacing: .16em; }
  .identity-card { width: min(53vw,260px); margin: 50px 0 24px auto; }
  .identity-copy h2 { font-size: 1.65rem; }.identity-copy p { font-size: .8rem; }
  .scroll-cue { bottom: 24px; left: 24px; }
  .manifesto { min-height: 115svh; padding: 90px 24px 65px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 12vh; }
  .manifesto h2 { font-size: clamp(2.8rem,10vw,5rem); line-height: 1.3; }
  .manifesto-copy { max-width: 85%; padding: 20px; }
  .portals,.contact { padding-left: 24px; padding-right: 24px; }
  .section-head h2 { font-size: 2rem; }.portal { min-height: 110px; }
  .contact-heading { padding: 40px 0; }.contact-heading h2 { font-size: 13vw; }
  html[lang=en] .hero h1 { font-size: clamp(2rem,9vw,4.5rem); }
  html[lang=en] .brand { font-size: .75rem; letter-spacing: 0; gap: 5px; }
  html[lang=en] .manifesto h2,html[lang=ja] .manifesto h2 { font-size: clamp(2.3rem,9vw,4rem); }
}
@media (pointer: coarse) { .cursor-light,.cursor-core { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; }
  .hero-copy,.identity-card { transform: none; opacity: 1; will-change: auto; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .cursor-light,.cursor-core,.click-wave { display: none; }
}