.realm-veil{--dir:-1;--enter:118%;--leave:-118%;--slab-in:.38s;--slab-out:.46s;--stagger:70ms;--ease-travel:cubic-bezier(.77, 0, .175, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);z-index:200;pointer-events:auto;position:fixed;inset:0;overflow:hidden}.realm-veil[data-to=roleplay]{--enter:-118%;--leave:118%}.realm-slab{width:calc(100vw + 50vh);transform:translateX(var(--enter)) skewX(-12deg);will-change:transform;position:absolute;top:0;bottom:0;left:-25vh}.realm-veil[data-to=warfare] .realm-slab[data-i="0"]{background:#d4ff3a}.realm-veil[data-to=warfare] .realm-slab[data-i="1"]{background:#181821}.realm-veil[data-to=warfare] .realm-slab[data-i="2"]{background:#060609}.realm-veil[data-to=roleplay] .realm-slab[data-i="0"]{background:#38bdf8}.realm-veil[data-to=roleplay] .realm-slab[data-i="1"]{background:#131929}.realm-veil[data-to=roleplay] .realm-slab[data-i="2"]{background:#080b12}.realm-slab[data-i="2"]:after{content:"";background:radial-gradient(60% 50% at 50% 50%, var(--realm-glow,#d4ff3a12), transparent 70%);position:absolute;inset:0;transform:skew(12deg)}.realm-veil[data-to=roleplay]{--realm-glow:#38bdf81a}.realm-veil[data-phase=cover] .realm-slab,.realm-veil[data-phase=hold] .realm-slab{animation:realm-slab-in var(--slab-in) var(--ease-travel) both;animation-delay:calc(var(--i) * var(--stagger))}.realm-veil[data-phase=reveal] .realm-slab{animation:realm-slab-out var(--slab-out) var(--ease-travel) both;animation-delay:calc((2 - var(--i)) * var(--stagger) + .12s);transform:translate(0)skew(-12deg)}@keyframes realm-slab-in{0%{transform:translateX(var(--enter)) skewX(-12deg)}to{transform:translate(0)skew(-12deg)}}@keyframes realm-slab-out{0%{transform:translate(0)skew(-12deg)}to{transform:translateX(var(--leave)) skewX(-12deg)}}.realm-mark{pointer-events:none;color:#f0eee6;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;display:flex;position:absolute;inset:0}.realm-kicker{font-family:var(--font-wf), system-ui, sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#f0eee68c;opacity:0;align-items:center;gap:.75rem;font-size:.75rem;font-weight:700;font-stretch:78%;display:inline-flex}.realm-kicker i{background:currentColor;width:.4rem;height:.4rem;transform:rotate(45deg)}.realm-word{padding:.08em .1em .12em;line-height:.86;display:flex;overflow:hidden}.realm-word>span{display:inline-block;transform:translateY(110%)}.realm-veil[data-to=warfare] .realm-word{font-family:var(--font-wf), system-ui, sans-serif;letter-spacing:-.01em;text-transform:uppercase;font-size:clamp(4rem,13vw,11rem);font-style:italic;font-weight:900;font-stretch:62%}.realm-veil[data-to=roleplay] .realm-word{font-family:var(--font-rajdhani), system-ui, sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e8ecf4;font-size:clamp(3.25rem,10vw,8.5rem);font-weight:700}.realm-rule{opacity:0;background:#f0eee61f;width:min(18rem,50vw);height:2px;position:relative;overflow:hidden}.realm-rule:after{content:"";background:var(--realm-accent,#d4ff3a);width:40%;position:absolute;inset:0;transform:translate(-100%)}.realm-veil[data-to=roleplay]{--realm-accent:#38bdf8}.realm-veil[data-phase=cover] .realm-word>span,.realm-veil[data-phase=hold] .realm-word>span{animation:realm-rise .56s var(--ease-out) both;animation-delay:calc(.24s + var(--c) * 34ms)}.realm-veil[data-phase=cover] .realm-kicker,.realm-veil[data-phase=hold] .realm-kicker,.realm-veil[data-phase=cover] .realm-rule,.realm-veil[data-phase=hold] .realm-rule{animation:realm-fade .36s var(--ease-out) .42s both}.realm-veil[data-phase=hold] .realm-rule:after{animation:realm-run .9s var(--ease-travel) infinite}.realm-veil[data-phase=reveal] .realm-word>span{animation:.24s cubic-bezier(.7,0,.84,0) both realm-leave;animation-delay:calc(var(--c) * 14ms);transform:translateY(0)}.realm-veil[data-phase=reveal] .realm-kicker,.realm-veil[data-phase=reveal] .realm-rule{opacity:1;animation:.16s both realm-fade-out}@keyframes realm-rise{0%{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes realm-leave{0%{transform:translateY(0)}to{transform:translateY(-110%)}}@keyframes realm-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes realm-fade-out{to{opacity:0}}@keyframes realm-run{0%{transform:translate(-100%)}to{transform:translate(260%)}}.realm-floor{background-image:linear-gradient(var(--realm-grid,#d4ff3a17) 1px, transparent 1px), linear-gradient(90deg, var(--realm-grid,#d4ff3a17) 1px, transparent 1px);opacity:0;transform-origin:50% 0;background-position:top;background-size:76px 76px;height:80%;position:absolute;top:64%;left:-40%;right:-40%;transform:perspective(520px)rotateX(64deg);-webkit-mask-image:radial-gradient(50% 60% at 50% 0,#000,#0000 80%);mask-image:radial-gradient(50% 60% at 50% 0,#000,#0000 80%)}.realm-veil[data-to=roleplay]{--realm-grid:#38bdf81a}.realm-veil[data-phase=cover] .realm-floor,.realm-veil[data-phase=hold] .realm-floor{animation:realm-fade .6s var(--ease-out) .26s both}.realm-veil[data-phase=reveal] .realm-floor{opacity:1;animation:.22s both realm-fade-out}.realm-plate{align-items:center;display:inline-flex;position:relative}.realm-plate-fill,.realm-plate-echo{display:none}.realm-veil[data-to=warfare] .realm-plate{padding:0 .28em 0 .2em;font-size:clamp(4rem,13vw,11rem)}.realm-veil[data-to=warfare] .realm-plate .realm-word{font-size:1em}.realm-veil[data-to=warfare] .realm-plate-fill{transform-origin:0;background:#d4ff3a;display:block;position:absolute;inset:-.02em 0 -.06em;transform:skew(-12deg)scaleX(0)}.realm-veil[data-to=warfare] .realm-plate-echo{opacity:.45;background:#d4ff3a;width:.1em;display:block;position:absolute;top:-.02em;bottom:-.06em;left:calc(100% + .12em);transform:skew(-12deg)scaleY(0)}.realm-veil[data-to=warfare] .realm-word{color:#0a0c03;position:relative}.realm-veil[data-to=warfare][data-phase=cover] .realm-plate-fill,.realm-veil[data-to=warfare][data-phase=hold] .realm-plate-fill{animation:realm-plate-in .52s var(--ease-travel) .14s both}.realm-veil[data-to=warfare][data-phase=cover] .realm-plate-echo,.realm-veil[data-to=warfare][data-phase=hold] .realm-plate-echo{animation:realm-echo-in .36s var(--ease-out) .56s both}.realm-veil[data-to=warfare][data-phase=reveal] .realm-plate-fill{transform-origin:100%;animation:realm-plate-out .3s var(--ease-travel) 80ms both;transform:skew(-12deg)}.realm-veil[data-to=warfare][data-phase=reveal] .realm-plate-echo{animation:.16s both realm-fade-out}@keyframes realm-plate-in{0%{transform:skew(-12deg)scaleX(0)}to{transform:skew(-12deg)scaleX(1)}}@keyframes realm-plate-out{0%{transform:skew(-12deg)scaleX(1)}to{transform:skew(-12deg)scaleX(0)}}@keyframes realm-echo-in{0%{transform:skew(-12deg)scaleY(0)}to{transform:skew(-12deg)scaleY(1)}}@media (prefers-reduced-motion:reduce){.realm-veil[data-phase] .realm-slab{width:100vw;animation:none;left:0;transform:none}.realm-veil[data-phase] .realm-slab[data-i="0"],.realm-veil[data-phase] .realm-slab[data-i="1"]{display:none}.realm-veil[data-phase=cover],.realm-veil[data-phase=hold]{animation:.2s both realm-fade}.realm-veil[data-phase=reveal]{animation:.24s 80ms both realm-fade-out}.realm-veil[data-phase] .realm-word>span{animation:none;transform:none}.realm-veil[data-phase] .realm-kicker,.realm-veil[data-phase] .realm-rule{opacity:1;animation:none}.realm-veil[data-phase] .realm-rule:after{animation:none}.realm-veil[data-phase] .realm-plate-fill,.realm-veil[data-phase] .realm-plate-echo{animation:none;transform:skew(-12deg)}.realm-veil[data-phase] .realm-floor{opacity:1;animation:none}}.realm-switch{flex:none;align-items:stretch;display:inline-flex}.realm-switch-option{white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;gap:.5rem;text-decoration:none;display:inline-flex;position:relative}.realm-switch-option:focus-visible{outline:2px solid var(--realm-focus,#38bdf8);outline-offset:2px}.realm-switch-glyph{flex:none;width:.45rem;height:.45rem;transform:rotate(45deg)}.realm-switch[data-look=roleplay]{border:1px solid var(--border);background:var(--background-secondary);border-radius:8px;gap:2px;padding:2px}.realm-switch[data-look=roleplay] .realm-switch-option{height:2rem;color:var(--foreground-muted);border-radius:6px;padding:0 .85rem;font-size:.8125rem;font-weight:600;transition:color .14s,background-color .14s}.realm-switch[data-look=roleplay] .realm-switch-option[data-realm=roleplay] .realm-switch-glyph{background:var(--brand);border-radius:999px;transform:none}.realm-switch[data-look=roleplay] .realm-switch-option[data-active]{color:var(--foreground);background:color-mix(in srgb, var(--brand) 12%, transparent)}.realm-switch[data-look=roleplay] .realm-switch-option[data-realm=warfare]{font-family:var(--font-wf), system-ui, sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#f0eee6;background:#0b0b10;font-size:.875rem;font-style:italic;font-weight:900;font-stretch:62%;overflow:hidden}.realm-switch[data-look=roleplay] .realm-switch-option[data-realm=warfare] .realm-switch-glyph{background:#d4ff3a;box-shadow:0 0 8px #d4ff3ab3}.realm-switch[data-look=roleplay] .realm-switch-option[data-realm=warfare]:after{content:"";transform-origin:0;background:#d4ff3a;height:2px;transition:transform .26s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}@media (hover:hover) and (pointer:fine){.realm-switch[data-look=roleplay] .realm-switch-option:not([data-active]):hover{color:var(--foreground)}.realm-switch[data-look=roleplay] .realm-switch-option[data-realm=warfare]:hover:after{transform:scaleX(1)}}.realm-switch[data-look=warfare]{--h:2.25rem;--lean:calc(var(--h) * .2126);--realm-focus:#d4ff3a;height:var(--h)}.realm-switch[data-look=warfare] .realm-switch-option{height:100%;padding:0 calc(var(--lean) + .8rem);font-family:var(--font-wf), system-ui, sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f0eee699;clip-path:polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%);background:#f0eee60f;font-size:.75rem;font-weight:800;font-stretch:78%;transition:color .14s,background-color .14s}.realm-switch[data-look=warfare] .realm-switch-option+.realm-switch-option{margin-left:calc(3px - var(--lean))}.realm-switch[data-look=warfare] .realm-switch-option[data-realm=roleplay] .realm-switch-glyph{background:#38bdf8;border-radius:999px;transform:none}.realm-switch[data-look=warfare] .realm-switch-option[data-realm=warfare] .realm-switch-glyph{background:currentColor}.realm-switch[data-look=warfare] .realm-switch-option[data-active]{color:#0a0c03;background:#d4ff3a}.realm-switch[data-look=warfare] .realm-switch-option:focus-visible{outline:none;box-shadow:inset 0 0 0 2px}@media (hover:hover) and (pointer:fine){.realm-switch[data-look=warfare] .realm-switch-option:not([data-active]):hover{color:#f0eee6;background:#f0eee61f}}
