/* Existing Portal Clearing art, with light precisely aligned to its one gate. */
.portal-hero { min-height:670px; }
.portal-landscape { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.portal-art { position:absolute; width:100%; height:100%; transform-origin:68.167% 29.31%; will-change:transform; }
.portal-plate { width:100%; height:100%; max-width:none; }
.portal-art .portal-aperture { position:absolute; left:62.31%; top:16.76%; width:11.66%; height:25.09%; border-radius:49% 49% 47% 50%; overflow:hidden; background:radial-gradient(ellipse at 48% 55%,#23232270,#8d715b99 75%,#ead6b7CC 98%); opacity:.32; transition:opacity .8s; box-shadow:0 0 15px #ba957988; }
#portal-energy { display:block; width:100%; height:100%; }
.portal-surface-light { position:absolute; inset:0; box-shadow:inset 0 0 20px #e6cfadAA; border-radius:inherit; }
.portal-light { position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:.32; transition:opacity .7s; }
.portal-rim-bloom { fill:none; stroke:#bc9779; stroke-width:12; filter:url(#portal-bloom); }
.portal-rim-trace { fill:none; stroke:#f4eee2; stroke-width:2.5; stroke-dasharray:12 7 2 18; animation:portal-current 15s linear infinite; }
.portal-glyph-light { fill:#d39a76; filter:drop-shadow(0 0 7px #e4b99a); animation:portal-glyph-breath 5s ease-in-out infinite alternate; }
@keyframes portal-current { to { stroke-dashoffset:-300; } }
@keyframes portal-glyph-breath { to { opacity:.35; } }
.portal-hero::before { z-index:1; pointer-events:none; background:linear-gradient(90deg,#161410ed 0%,#181612d1 30%,#18161240 54%,transparent 74%),linear-gradient(0deg,#13110dee,transparent 45%); }
.portal-hero .hero-grain,.portal-hero .hero-particles { z-index:2; pointer-events:none; }
.portal-hero .hero-inner { z-index:3; pointer-events:none; }
.portal-hero .hero-copy { pointer-events:auto; width:51%; }
.portal-hero .hero-kicker { font-size:12px; letter-spacing:.14em; }
.portal-hero .hero-description { font-size:16px; }
.portal-hero .hero-bottom { z-index:3; font-size:12px; }
.portal-hit { position:absolute; z-index:4; border-radius:50%; background:transparent; padding:0; }
.portal-hit:focus-visible { outline:2px solid var(--gold-light); outline-offset:12px; }
.portal-hero:is([data-portal-state="awake"],[data-portal-state="travel"]) .portal-aperture { opacity:.95; }
.portal-hero:is([data-portal-state="awake"],[data-portal-state="travel"]) .portal-light { opacity:1; }
.portal-hero[data-portal-state="travel"] .hero-copy { visibility:hidden; }
.portal-destination-echo { position:absolute; z-index:3; transform:translate(-50%,-50%); width:150px; padding:12px 0; text-align:center; font:500 21px/1.1 var(--display); color:#fefcf8; background:radial-gradient(ellipse,#141516CC,transparent 72%); text-shadow:0 2px 4px #141516,0 0 14px #141516; opacity:0; pointer-events:none; transition:opacity .3s; }
.portal-hero[data-portal-state="awake"] .portal-destination-echo { opacity:.9; }
.portal-hero[data-portal-state="travel"] .portal-art { animation:portal-camera 1.05s cubic-bezier(.65,.02,.45,1) both; }
@keyframes portal-camera { 0%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) scale(1)} 100%{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) scale(9);filter:brightness(1.5)} }
.portal-transit { position:fixed; inset:0; z-index:200; background:transparent; overflow:hidden; pointer-events:auto; }
.portal-transit canvas { position:absolute; inset:0; width:100%; height:100%; }
.transit-veil { position:absolute; inset:0; background:radial-gradient(ellipse,#ead6b7,#232322 60%,#141516); clip-path:circle(0% at var(--portal-x,68%) var(--portal-y,35%)); animation:portal-veil 1.08s cubic-bezier(.7,0,.3,1) both; }
.portal-transit.has-webgl .transit-veil { background:#232322; animation:portal-final-veil 1.08s linear both; clip-path:none; }
@keyframes portal-veil { 50%{clip-path:circle(10% at var(--portal-x,68%) var(--portal-y,35%))} 100%{clip-path:circle(150% at var(--portal-x,68%) var(--portal-y,35%))} }
@keyframes portal-final-veil { 0%,85%{opacity:0} 100%{opacity:1} }
.portal-transit p { position:absolute; inset:45% 20px auto; text-align:center; opacity:0; color:#f4eee2; animation:portal-destination-flash 1.08s both; text-shadow:0 2px 18px #141516; }
.portal-transit p>span { display:block; text-transform:uppercase; font-size:12px; letter-spacing:.23em; color:#d9c2a6; }
.portal-transit strong { display:block; font:500 clamp(35px,5vw,65px)/1.2 var(--display); margin-top:12px; }
@keyframes portal-destination-flash { 35%{opacity:0;transform:translateY(10px)} 65%,90%{opacity:1;transform:translateY(0)} 100%{opacity:0} }
html.portal-arriving::after { content:''; position:fixed; inset:0; z-index:200; pointer-events:none; background:radial-gradient(ellipse at 50% 45%,#675445,#232322); animation:portal-arrival .65s ease-out both; }
html.portal-arriving main { animation:portal-settle .65s ease-out both; }
@keyframes portal-arrival { from{opacity:1} to{opacity:0} }
@keyframes portal-settle { from{filter:blur(3px);opacity:.65} to{filter:blur(0);opacity:1} }
.world-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); }
.world-tabs button { padding:16px 13px; }
.world-tabs button:last-child { grid-column:auto; }
.world-tabs button>span { font-size:14px; }
.world-tabs small { font-size:11px; }
.world-stage[data-region="valley"]>img { object-position:center 30%; }
@media(max-width:1100px) {.portal-hero .hero-kicker{font-size:10px}.portal-hero .hero-copy{width:53%}.world-tabs{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:760px) {
  .portal-hero { height:auto; min-height:850px; max-height:none; }
  .portal-landscape { height:440px; bottom:auto; }
  .portal-hero::before { background:linear-gradient(0deg,#13110d 45%,#13110d40 65%,transparent 85%); }
  .portal-hero .hero-inner { display:block; height:auto; padding-top:385px; padding-bottom:115px; }
  .portal-hero .hero-copy { width:100%; max-width:500px; margin:auto; }
  .portal-hero h1 { max-width:330px; margin:0 auto; }
  .portal-hero .hero-kicker { font-size:10px; margin-bottom:12px; }
  .portal-hero .hero-tagline { font-size:28px; margin:8px 0 12px; }
  .portal-hero .hero-description { font-size:14px; margin-bottom:20px; }
  .portal-hero .hero-actions .button { font-size:12px; min-height:48px; padding:12px 17px; }
  .portal-hero .hero-bottom { font-size:11px; bottom:22px; }
  .portal-hero .hero-bottom .scroll-cue { display:none; }
  .portal-hero[data-portal-state="awake"] { min-height:850px; }

}
@media(max-width:400px) {.portal-hero .hero-actions{gap:8px}.portal-hero .hero-actions .button{font-size:11px;padding-inline:12px}.world-tabs{grid-template-columns:repeat(2,minmax(0,1fr));} }
html[data-motion="off"] .portal-art { transform:none!important; }
html[data-motion="off"] .portal-transit,html[data-motion="off"].portal-arriving::after { display:none; }
@media(prefers-reduced-motion:reduce) { .portal-art{transform:none!important}.portal-transit,html.portal-arriving::after{display:none} }

.portal-destination-echo>span { display:block; font:600 11px/1.3 var(--body); letter-spacing:.08em; margin-bottom:7px; }
.portal-destination-echo>strong { display:block; font-weight:400; line-height:1.2; overflow-wrap:normal; }
.portal-hero[data-portal-state="travel"] :is(.hero-copy,.hero-bottom,.portal-hit,.portal-destination-echo) { opacity:0; pointer-events:none; transition:opacity .18s; }