/* Full-scene portals. A single native link owns each complete surface. */
.gateway{position:relative;isolation:isolate;padding:20px 0 0;background:radial-gradient(ellipse at 50% 25%,#35395155,transparent 70%),var(--brand-blue)}
.gateway-heading{position:relative;z-index:2;width:100%;padding:12px 20px 28px;text-align:center}
.gateway-heading .eyebrow{color:var(--brand-gold);font-size:.875rem;letter-spacing:.2em}
.gateway-heading h1{margin:10px 0 8px;font-size:clamp(3.7rem,8vw,7.5rem);line-height:1.08;letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;color:var(--brand-white)}
.gateway-heading h1[data-tilt]{perspective:900px;transform:none;transform-style:flat;will-change:auto}
.brumes-title{display:inline-block;pointer-events:none;transform:rotateX(calc(12deg + var(--rx,0deg))) rotateY(calc(-4deg + var(--ry,0deg)));transform-origin:50% 55%;text-shadow:0 -1px 0 #fff,1px 1px 0 #dce0ee,2px 2px 0 #b9bdcf,3px 3px 0 #989eb7,4px 4px 0 #767e9b,5px 5px 0 #616987,6px 6px 0 #505872,7px 7px 0 #414962,8px 8px 0 #303951,9px 9px 0 #a78343,10px 10px 0 #5c492c,13px 17px 16px #0009,0 0 38px #c2ccff20;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.is-tracking>.brumes-title{transition:none;will-change:transform}
.gateway-motto{margin:0;color:var(--brand-white);font:1.25rem/1.5 var(--serif)}
.gateway-heading>p{width:100%;max-width:none;margin-inline:auto;text-align:center}
.gateway-motto em{color:var(--brand-gold)}
.gateway-realms{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:28px;width:min(1360px,calc(100% - 80px));margin:6px auto 42px}
/* The native link never moves. Only its clipped decorative surface tilts. */
.realm{position:relative;display:grid;min-width:0;min-height:clamp(590px,68vh,730px);padding:0;border:1px solid #d0a14466;border-radius:14px;background:var(--brand-blue);color:var(--brand-white);cursor:pointer;overflow:hidden;perspective:1800px;box-shadow:0 4px 0 #796039,0 30px 55px -20px #000b;-webkit-tap-highlight-color:#d0a14433;touch-action:manipulation}
.realm[data-tilt]{transform:none;transform-style:flat;transition:box-shadow .4s,border-color .25s;will-change:auto}
.realm-surface{position:relative;display:grid;grid-template-rows:minmax(230px,1fr) auto;min-height:inherit;width:100%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:flat;transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.realm-surface,.realm-surface *{pointer-events:none;user-select:none;-webkit-user-drag:none}
.realm.is-tracking>.realm-surface{transition:none;will-change:transform}
.realm:hover,.realm:focus-visible{border-color:#eacc92;box-shadow:0 32px 60px -15px #000c,0 0 30px #d0a14418;z-index:3}
.realm:focus-visible{outline:3px solid var(--brand-gold);outline-offset:7px}
.realm:active{box-shadow:0 12px 30px -10px #000b}
.realm-visual{position:absolute;inset:0;overflow:hidden;border-radius:13px;background:var(--brand-blue-raised);pointer-events:none}
.realm-scene{position:absolute;inset:0}
.realm-scene>img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% 50%;transform:scale(1.04) translate(var(--image-x,0px),var(--image-y,0px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.realm-ffxiv .realm-scene>img{object-position:50% 40%}
.realm:hover .realm-scene>img,.realm:focus-visible .realm-scene>img{transform:scale(1.08) translate(var(--image-x,0px),var(--image-y,0px))}
.is-tracking .realm-scene>img{transition:none}
.realm-shade{position:absolute;inset:0;background:linear-gradient(180deg,#14142725 0%,#14142705 24%,#14142799 53%,#141427ed 73%,#141427fa 100%),linear-gradient(90deg,#14142720,transparent 50%)}
.realm-reflection{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff7cf25,transparent 62%);opacity:0;transition:opacity .35s}
.realm:hover .realm-reflection{opacity:1}
.realm-coordinate{position:absolute;left:25px;top:25px;padding:8px 12px;border:1px solid #ffffff40;border-radius:4px;background:#141427ba;color:var(--brand-white);font-size:.75rem;letter-spacing:.12em}
.realm-content{position:relative;grid-row:2;min-width:0;width:100%;max-width:none;margin:0;padding:30px 34px 32px;text-align:left;pointer-events:none}
.realm-game{display:block;margin-bottom:12px;color:#f0cd89;font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.realm-content h2{margin:0;color:var(--brand-white);font-size:clamp(2.5rem,3.7vw,3.8rem);line-height:1.12;letter-spacing:-.03em;overflow-wrap:anywhere;text-shadow:0 3px 25px #0009}
.realm-content p{max-width:none;margin:13px 0 23px;color:#eef0f8;font-size:1rem;line-height:1.6}
.realm-enter{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:62px;padding:14px 19px;border:1px solid #e3bc6e;border-radius:6px;background:linear-gradient(110deg,#e5bd6c,var(--brand-gold));color:var(--brand-blue);box-shadow:0 3px 0 #8c6522;transition:background .25s,box-shadow .25s}
.realm-enter-copy{display:block;min-width:0;font:700 italic clamp(1.4rem,2.1vw,1.8rem)/1.25 var(--serif);letter-spacing:-.015em;overflow-wrap:anywhere}
.realm-enter-verb,.realm-enter-copy strong{font:inherit;color:inherit;white-space:normal}
.realm-enter-arrow{display:flex;flex:0 0 24px;color:inherit;transition:transform .25s}
.realm-enter-arrow .icon{width:24px;height:24px}
.realm:hover .realm-enter,.realm:focus-visible .realm-enter{background:#f1d492;box-shadow:0 3px 0 #9f7429,0 0 30px #d0a14420}
.realm:hover .realm-enter-arrow,.realm:focus-visible .realm-enter-arrow{transform:translateX(5px)}
.realm-note{display:block;margin-top:18px;color:#c9ccda;font-size:.8125rem;line-height:1.6}
.gateway-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1360px,calc(100% - 80px));min-height:62px;margin:auto;padding:10px 0;border-top:1px solid #ffffff20;color:var(--muted);font-size:.8125rem}
.gateway-bottom a{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;color:var(--brand-gold)}
.gateway-bottom .icon{width:20px;height:20px;transform:rotate(90deg)}
.gateway>.atmosphere{z-index:0}
.gateway-orbits{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;perspective:900px}
.gateway-orbits>span{position:absolute;width:900px;height:900px;left:calc(50% - 450px);top:-240px;border:1px solid #d0a14421;border-radius:50%;transform:rotateX(69deg) rotateZ(-20deg)}
.gateway-orbits>span+span{width:1100px;height:1100px;left:calc(50% - 550px);top:-340px;border-color:#f7f8fc16;transform:rotateX(69deg) rotateZ(30deg)}
@media(max-width:920px){
 .gateway-realms{grid-template-columns:minmax(0,1fr);width:min(680px,calc(100% - 48px));gap:28px;margin-bottom:30px}
 .realm{min-height:590px}
 .realm-content h2{font-size:clamp(2.5rem,6vw,3.6rem)}
 .realm-enter-copy{font-size:clamp(1.4rem,3.5vw,1.8rem)}
 .gateway-bottom{width:calc(100% - 48px)}
 .gateway-bottom span:last-child{display:none}
}
@media(max-width:600px){
 .gateway{padding-top:8px}
 .gateway-heading{padding:20px 20px 25px}
 .gateway-heading h1{font-size:clamp(2.8rem,12vw,4.5rem);letter-spacing:.07em;text-indent:.07em}
 .gateway-heading .eyebrow{letter-spacing:.08em}
 .gateway-motto{font-size:1.1rem}
 .gateway-realms{width:calc(100% - 36px);gap:25px}
 .realm{min-height:540px}
 .realm-surface{grid-template-rows:minmax(195px,1fr) auto}
 .realm-coordinate{top:18px;left:20px;font-size:.75rem}
 .realm-content{padding:24px 22px}
 .realm-content h2{font-size:clamp(2.3rem,8vw,3rem)}
 .realm-game{font-size:.8125rem}
 .realm-enter{padding:14px;gap:12px}
 .realm-note{font-size:.75rem}
 .gateway-bottom{width:calc(100% - 40px);gap:12px}
}
@media(prefers-reduced-motion:no-preference){
 .motion-on .gateway-orbits>span{animation:orbit-drift 16s ease-in-out infinite alternate}
 .motion-on .gateway-orbits>span+span{animation-direction:alternate-reverse;animation-duration:22s}
}
.motion-off .realm-surface{transform:none;transition:none}
.motion-off .brumes-title{transition:none}
.motion-off .realm .realm-scene>img{transform:scale(1.04);transition:none}
.motion-off .realm-enter-arrow{transform:none!important}
@media(prefers-reduced-motion:reduce){
 .realm-surface{transform:none!important;transition:none}
 .brumes-title{transition:none}
 .realm-scene>img,.realm:hover .realm-scene>img,.realm:focus-visible .realm-scene>img{transform:scale(1.04)}
 .realm-scene>img,.realm-enter,.realm-enter-arrow,.realm-reflection{transition:none}
 .realm:hover .realm-enter-arrow,.realm:focus-visible .realm-enter-arrow{transform:none}
}