@font-face {
    font-family: "Cubao Free Wide";
    src: url("../fonts/Cubao Free Wide/Web Fonts/211e1124639634402d4eee5128e79f25.woff2") format("woff2"),
        url("../fonts/Cubao Free Wide/Web Fonts/211e1124639634402d4eee5128e79f25.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pangram";
    src: url("../fonts/Pangram Bold Font/Pangram-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #070713;
    --text: #f7f4ff;
    --muted: #c7bddf;
    --violet: #7b3ff2;
    --violet-dark: #2f1558;
    --violet-light: #a780ff;
    --discord: #5865f2;
    --discord-dark: #4752c4;
    --intro-one: #825bda;
    --intro-two: #352162;
    --display-font: "Cubao Free Wide", Impact, Haettenschweiler, "Arial Black", sans-serif;
    --description-font: "Pangram", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --body-font: "Cubao Free Wide", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --opening-offset: 2.25s;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--body-font);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(141, 92, 255, 0.28), transparent 34rem),
        radial-gradient(circle at 82% 72%, rgba(88, 101, 242, 0.18), transparent 28rem),
        linear-gradient(145deg, #06060f 0%, #101020 46%, #080812 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

html.chain-pending {
    overflow: hidden;
}

.chain-easter-egg {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #010102, #09090b 54%, #010102);
    animation: chainCurtain 2.95s cubic-bezier(.4,0,.2,1) both;
}

.chain-atmosphere {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 58%, rgba(255,255,255,.09), transparent 54%);
    opacity: .25;
    animation: chainAtmosphere 1.7s ease-in forwards;
}

.chain-stage {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 .75rem rgba(255,255,255,.22));
    animation: chainTension 1.55s cubic-bezier(.36,.08,.32,1) both;
}

.chain-piece {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    will-change: transform, opacity;
}

.chain-piece img {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    animation: chainMetalCharge 1.55s ease-in both;
}

.chain-piece--left {
    left: 0;
    clip-path: polygon(0 0, 53% 0, 47% 15%, 53% 27%, 48% 42%, 54% 54%, 46% 68%, 52% 81%, 48% 100%, 0 100%);
    transform-origin: 49% 58%;
    animation: chainBreakLeft 1.2s cubic-bezier(.12,.78,.16,1) 1.48s forwards;
}

.chain-piece--left img { left: 0; }

.chain-piece--right {
    left: 0;
    clip-path: polygon(53% 0, 100% 0, 100% 100%, 48% 100%, 52% 81%, 46% 68%, 54% 54%, 48% 42%, 53% 27%, 47% 15%);
    transform-origin: 51% 58%;
    animation: chainBreakRight 1.2s cubic-bezier(.12,.78,.16,1) 1.48s forwards;
}

.chain-piece--right img { left: 0; }

.lightning-strike {
    position: absolute;
    z-index: 7;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.52));
}

.lightning-core,
.lightning-branch {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.lightning-core {
    stroke-width: 3.2;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: lightningDraw .33s cubic-bezier(.08,.76,.18,1) 1.18s both,
        lightningVanish .46s ease-out 1.51s forwards;
}

.lightning-branch {
    stroke-width: 1.5;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: lightningDraw .18s ease-out 1.37s both,
        lightningVanish .35s ease-out 1.55s forwards;
}

.lightning-afterimage {
    position: absolute;
    z-index: 6;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #ffffff;
    opacity: 0;
    filter: blur(.4px);
    transform: translateX(-50%);
    animation: lightningAfterimage .62s ease-out 1.45s both;
}

.chain-flash {
    position: absolute;
    z-index: 3;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    mix-blend-mode: screen;
    animation: chainFlash .46s ease-out 1.43s both;
}

.cinema-bar {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    height: 9vh;
    background: #000000;
    animation: cinemaBars 2.85s cubic-bezier(.65,0,.2,1) both;
}

.cinema-bar--top { top: 0; transform-origin: top; }
.cinema-bar--bottom { bottom: 0; transform-origin: bottom; }

.dynamic-island {
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transform: translate(-50%, -1.5rem) scale(0.96);
    opacity: 0;
    animation: islandLoad 720ms cubic-bezier(0.16, 0.9, 0.22, 1) calc(120ms + var(--opening-offset)) forwards;
    animation-play-state: paused;
}

.dynamic-island.is-nav-ready {
    animation-play-state: running;
}

.island-track {
    display: flex;
    align-items: center;
    gap: 0;
    height: 3.7rem;
    padding: 0 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 7, 19, 0.7);
    box-shadow: 0 1.1rem 3.2rem rgba(0, 0, 0, 0.38), inset 0 0 1.6rem rgba(130, 91, 218, 0.12);
    backdrop-filter: blur(18px);
}

.island-slot {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.86);
}

.island-logo-slot {
    pointer-events: none;
    user-select: none;
}

.island-tab {
    position: relative;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.island-tab::before {
    content: attr(data-tab-label);
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    z-index: 60;
    padding: 0.38rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: #090913;
    box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.42);
    color: #f4efff;
    font-family: var(--description-font);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -0.25rem);
    transition: opacity 150ms ease, transform 150ms ease;
}

.island-tab:hover::before,
.island-tab:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

.island-tab:hover,
.island-tab:focus-visible {
    color: #ffffff;
    background: rgba(130, 91, 218, 0.2);
    transform: translateY(-1px);
}

.island-tab:focus-visible {
    outline: 0;
}

.island-tab[aria-current="page"] {
    color: #ffffff;
    background: rgba(130, 91, 218, 0.3);
    box-shadow: inset 0 0 0 1px rgba(167, 128, 255, 0.28), 0 0 1rem rgba(130, 91, 218, 0.16);
}

.island-tab[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 0.18rem;
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    background: #c5a1ff;
}

.island-logo {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 0 0.6rem rgba(130, 91, 218, 0.52));
}

.island-tab {
    opacity: 1;
    transform: none;
    animation: islandTabIn 520ms ease calc(3.14s + var(--opening-offset) + var(--island-item-delay, 0ms)) backwards;
}

.island-separator {
    width: 1px;
    height: 1.7rem;
    margin: 0 0.3rem;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 1;
    animation: separatorIn 420ms ease calc(3.14s + var(--opening-offset) + var(--island-item-delay, 0ms)) backwards;
}

.dynamic-island:not(.is-nav-ready) .island-tab,
.dynamic-island:not(.is-nav-ready) .island-separator {
    opacity: 0;
    animation: none;
}

.account-island {
    min-width: 6.2rem;
    max-width: min(15rem, 32vw);
    height: 3.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 7, 19, 0.7);
    box-shadow: 0 1.1rem 3.2rem rgba(0, 0, 0, 0.38), inset 0 0 1.6rem rgba(130, 91, 218, 0.12);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--description-font);
    font-size: 0.78rem;
    backdrop-filter: blur(18px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.account-island.is-auth-ready {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.account-island span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-avatar {
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.account-island:hover,
.account-island:focus-visible {
    color: #ffffff;
    background: rgba(30, 22, 53, 0.88);
    outline: 0;
    transform: translateY(-1px);
}

.logo-flight {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: var(--logo-flight-size, 9rem);
    height: var(--logo-flight-size, 9rem);
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
}

.site-shell {
    position: relative;
    min-height: 100vh;
}

.hero {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(7, 7, 19, 0.14), rgba(7, 7, 19, 0.9));
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 28vh;
    z-index: -1;
    background: linear-gradient(180deg, transparent, var(--bg));
}

.hero-stage {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 4.5rem 1.25rem;
    overflow: hidden;
}

.banner-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: min(980px, 92vw);
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    will-change: transform, opacity, filter;
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
    animation: heroBannerSettle 1.55s cubic-bezier(0.16, 0.9, 0.22, 1) calc(540ms + var(--opening-offset)) both;
}

.banner-wrap.is-exiting {
    pointer-events: none;
    animation: heroBannerExit 680ms cubic-bezier(0.3, 0.02, 0.22, 1) forwards;
}

.banner-wrap.is-gone {
    display: none;
}

.orion-banner {
    display: block;
    width: 100%;
    max-height: 42vh;
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1120px, 94vw);
    margin: 0 auto;
    text-align: center;
    will-change: transform, opacity, filter;
    container-type: inline-size;
}

h1,
p {
    margin: 0;
}

h1 {
    font-family: var(--display-font);
    width: 100%;
    margin: 0 auto;
    font-size: clamp(1rem, 5.45cqw, 3.75rem);
    line-height: 0.96;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(135deg, var(--intro-one), var(--intro-two));
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 0;
    animation: heroTitleSettle 1s cubic-bezier(0.18, 0.86, 0.24, 1) calc(3.05s + var(--opening-offset)) both;
}

h1 span {
    display: block;
    white-space: nowrap;
}

.hero-content p {
    font-family: var(--description-font);
    font-weight: 700;
    max-width: 38rem;
    margin: 1rem auto 0;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.6;
    animation: fadeLift 900ms cubic-bezier(0.18, 0.86, 0.24, 1) calc(3.28s + var(--opening-offset)) both;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    animation: fadeLift 900ms cubic-bezier(0.18, 0.86, 0.24, 1) calc(3.5s + var(--opening-offset)) both;
}

.btn {
    min-height: 3.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1.35rem;
    border-radius: 8px;
    border: 0;
    font-family: var(--display-font);
    font-weight: 400;
    line-height: 1;
    box-shadow: 0 0.9rem 2.1rem rgba(0, 0, 0, 0.24);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-3px);
    filter: brightness(1.07);
    box-shadow: 0 1.2rem 2.7rem rgba(0, 0, 0, 0.34);
}

.btn:focus-visible {
    outline: 0;
}

.btn-create {
    background: linear-gradient(135deg, var(--violet-dark), var(--violet) 58%, var(--violet-light));
    color: #ffffff;
}

.btn-create img {
    width: 1.45rem;
    height: 1.45rem;
    object-fit: contain;
}

.btn-discord {
    background: linear-gradient(135deg, var(--discord-dark), var(--discord));
    color: #ffffff;
}

.btn-discord i {
    font-size: 1.35rem;
}

.home-scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; z-index: 12; display: grid; justify-items: center; gap: .45rem; color: #a9a0b9; font-family: var(--description-font); font-size: .62rem; font-weight: 700; transform: translateX(-50%); animation: fadeLift 700ms ease calc(4s + var(--opening-offset)) both; }
.home-scroll-cue i { color: #a780ff; animation: scrollCue 1.5s ease-in-out infinite; }
.hero, .story-band { scroll-snap-align: start; }
.story-band { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding: 7rem clamp(1.25rem,5vw,5rem); border-top: 1px solid rgba(255,255,255,.07); background: var(--bg); opacity: 0; transform: translateY(3rem); transition: opacity 800ms ease, transform 900ms cubic-bezier(.16,.86,.22,1); }
.story-band.is-visible { opacity: 1; transform: none; }
.story-inner { width: min(76rem,100%); margin: 0 auto; }
.story-index { margin: 0 0 1rem; color: #a780ff; font-family: var(--description-font); font-size: .7rem; font-weight: 700; }
.story-band h2 { max-width: 62rem; margin: 0; color: #f2eff7; font-family: var(--display-font); font-size: clamp(1.7rem,5vw,4.3rem); font-weight: 400; line-height: 1.02; }
.story-intro .story-inner > p:last-child { max-width: 44rem; margin: 1.5rem 0 0; color: #a9a1b2; font-family: var(--description-font); font-size: clamp(1rem,2vw,1.3rem); line-height: 1.65; }
.story-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.story-heading > p { max-width: 25rem; color: #918999; font-family: var(--description-font); font-size: .85rem; line-height: 1.55; }
.position-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid rgba(255,255,255,.09); }
.position-grid article { min-height: 15rem; padding: 1.4rem; border-right: 1px solid rgba(255,255,255,.09); }
.position-grid article:last-child { border-right: 0; }
.position-grid i { color: #a780ff; font-size: 1.3rem; }
.position-grid h3 { margin: 3.5rem 0 .7rem; color: #f2eff7; font-family: var(--display-font); font-size: .85rem; font-weight: 400; }
.position-grid p { margin: 0; color: #88818f; font-family: var(--description-font); font-size: .78rem; line-height: 1.55; }
.tier-ladder { display: grid; gap: .5rem; }
.tier-row { --tier-color: #825bda; display: grid; grid-template-columns: 5rem repeat(3,minmax(0,1fr)); gap: .5rem; }
.tier-row strong, .tier-row span { min-height: 4rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); background: #12121d; color: #eae5f2; font-family: var(--display-font); font-size: .95rem; font-weight: 400; }
.tier-row strong { border-color: color-mix(in srgb,var(--tier-color) 60%,transparent); background: color-mix(in srgb,var(--tier-color) 18%,#12121d); color: var(--tier-color); }
.tier-row span { border-left: 3px solid var(--tier-color); }
.tier-row--s { --tier-color: #d5bd2e; }
.tier-row--a { --tier-color: #38b98b; }
.tier-row--b { --tier-color: #3f62c7; }
.tier-row--c { --tier-color: #825bda; }
.tier-row--f { --tier-color: #a8a2b0; }
.chapter-next { position: absolute; left: 50%; bottom: 1.25rem; display: grid; justify-items: center; gap: .4rem; color: #8f879b; font-family: var(--description-font); font-size: .6rem; font-weight: 700; transform: translateX(-50%); transition: color 180ms ease; }
.chapter-next i { color: #a780ff; animation: scrollCue 1.5s ease-in-out infinite; }
.chapter-next:hover, .chapter-next:focus-visible { color: #f3eefb; outline: 0; }
.chapter-next--top i { animation-name: scrollCueUp; }

@keyframes scrollCue { 50% { transform: translateY(.35rem); } }
@keyframes scrollCueUp { 50% { transform: translateY(-.35rem); } }

@keyframes chainTension {
    0%, 20% { transform: translate3d(0,0,0) scale(1) rotate(0); }
    28% { transform: translate3d(-2px,1px,0) scale(1.006) rotate(-.08deg); }
    36% { transform: translate3d(3px,-1px,0) scale(1.01) rotate(.1deg); }
    44% { transform: translate3d(-4px,2px,0) scale(1.014) rotate(-.14deg); }
    52% { transform: translate3d(5px,-2px,0) scale(1.018) rotate(.16deg); }
    60% { transform: translate3d(-7px,2px,0) scale(1.022) rotate(-.2deg); }
    68% { transform: translate3d(8px,-3px,0) scale(1.026) rotate(.23deg); }
    76% { transform: translate3d(-9px,3px,0) scale(1.03) rotate(-.26deg); }
    84% { transform: translate3d(10px,-3px,0) scale(1.034) rotate(.28deg); }
    91% { transform: translate3d(-7px,2px,0) scale(1.038) rotate(-.2deg); }
    100% { transform: translate3d(0,0,0) scale(1.04) rotate(0); }
}

@keyframes chainMetalCharge {
    0%, 28% { filter: grayscale(1) brightness(.86); opacity: .76; }
    72% { filter: grayscale(1) brightness(1.08); opacity: .96; }
    100% { filter: grayscale(1) brightness(1.32); opacity: 1; }
}

@keyframes chainBreakLeft {
    0% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
    8% { transform: translate3d(-1.5vw,1vh,0) rotate(-.45deg); }
    30% { opacity: 1; transform: translate3d(-9vw,5vh,0) rotate(-3deg); }
    100% { opacity: 0; transform: translate3d(-86vw,34vh,0) rotate(-13deg); }
}

@keyframes chainBreakRight {
    0% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
    8% { transform: translate3d(1.5vw,1vh,0) rotate(.45deg); }
    30% { opacity: 1; transform: translate3d(9vw,5vh,0) rotate(3deg); }
    100% { opacity: 0; transform: translate3d(86vw,34vh,0) rotate(13deg); }
}

@keyframes lightningDraw {
    0% { opacity: 0; }
    8% { opacity: 1; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes lightningVanish {
    0% { opacity: 1; }
    35% { opacity: .28; }
    48% { opacity: .9; }
    100% { opacity: 0; }
}

@keyframes lightningAfterimage {
    0% { opacity: 0; transform: translateX(-50%) scaleY(.1); }
    10% { opacity: .9; transform: translateX(-50%) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

@keyframes chainFlash {
    0% { opacity: 0; }
    8% { opacity: .68; }
    22% { opacity: .16; }
    100% { opacity: 0; }
}

@keyframes chainAtmosphere {
    0% { opacity: .12; transform: scale(.9); }
    78% { opacity: .62; }
    100% { opacity: .18; transform: scale(1.08); }
}

@keyframes cinemaBars {
    0%, 58% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}

@keyframes chainCurtain {
    0%, 70% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

.video-dock {
    position: fixed;
    z-index: 38;
    width: 23rem;
    aspect-ratio: 16 / 9;
    transition:
        width 480ms cubic-bezier(0.16, 0.86, 0.22, 1),
        left 480ms cubic-bezier(0.16, 0.86, 0.22, 1),
        right 480ms cubic-bezier(0.16, 0.86, 0.22, 1),
        top 480ms cubic-bezier(0.16, 0.86, 0.22, 1),
        bottom 480ms cubic-bezier(0.16, 0.86, 0.22, 1),
        transform 480ms cubic-bezier(0.16, 0.86, 0.22, 1),
        filter 300ms ease;
    animation: videoDockEnter 720ms cubic-bezier(0.18, 0.86, 0.24, 1) calc(4.15s + var(--opening-offset)) both;
    filter: drop-shadow(0 1rem 1.8rem rgba(0, 0, 0, 0.4));
}

.video-dock--bottom-left {
    left: -3rem;
    bottom: -2.25rem;
    transform: rotate(-7deg) scale(0.9);
    transform-origin: bottom left;
}

.video-dock--bottom-right {
    right: -3rem;
    bottom: -2.25rem;
    transform: rotate(7deg) scale(0.9);
    transform-origin: bottom right;
}

.video-dock--top-left {
    left: -3rem;
    top: -2.25rem;
    transform: rotate(7deg) scale(0.9);
    transform-origin: top left;
}

.video-dock--top-right {
    right: -3rem;
    top: -2.25rem;
    transform: rotate(-7deg) scale(0.9);
    transform-origin: top right;
}

.video-dock:hover,
.video-dock:focus-within,
.video-dock.is-active {
    z-index: 39;
    width: min(32rem, calc(100vw - 2rem));
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 1.4rem 2.8rem rgba(0, 0, 0, 0.5));
}

.video-dock--bottom-left:hover,
.video-dock--bottom-left:focus-within,
.video-dock--bottom-left.is-active {
    left: 1rem;
    bottom: 1rem;
}

.video-dock--bottom-right:hover,
.video-dock--bottom-right:focus-within,
.video-dock--bottom-right.is-active {
    right: 1rem;
    bottom: 1rem;
}

.video-dock--top-left:hover,
.video-dock--top-left:focus-within,
.video-dock--top-left.is-active {
    left: 1rem;
    top: 1rem;
}

.video-dock--top-right:hover,
.video-dock--top-right:focus-within,
.video-dock--top-right.is-active {
    right: 1rem;
    top: 1rem;
}

.video-dock:focus-visible {
    outline: 0;
}

.video-dock:focus-visible .video-frame {
    border-color: rgba(167, 128, 255, 0.82);
    box-shadow: 0 0 0 0.2rem rgba(130, 91, 218, 0.22), inset 0 0 2rem rgba(130, 91, 218, 0.12);
}

.video-dock:fullscreen {
    inset: 0;
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    transform: none;
    filter: none;
}

.video-dock:fullscreen .video-frame {
    border: 0;
    border-radius: 0;
}

.video-dock:fullscreen .featured-video {
    object-fit: contain;
}

.video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #05050c;
    box-shadow: inset 0 0 2rem rgba(130, 91, 218, 0.12);
}

.featured-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #05050c;
    cursor: pointer;
    transition: object-fit 220ms ease;
}

.video-dock:hover .featured-video,
.video-dock:focus-within .featured-video,
.video-dock.is-active .featured-video {
    object-fit: contain;
}

.video-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(7, 7, 19, 0.78);
    color: #ffffff;
    font-size: 1.15rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.82);
    transition: opacity 220ms ease, transform 280ms cubic-bezier(0.18, 0.86, 0.24, 1), background 180ms ease;
    backdrop-filter: blur(10px);
}

.video-center-play i {
    transform: translateX(0.08rem);
}

.video-dock:hover .video-center-play,
.video-dock:focus-within .video-center-play,
.video-dock.is-active .video-center-play {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.video-dock.is-playing .video-center-play {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.82);
}

.video-center-play:hover,
.video-center-play:focus-visible {
    background: rgba(130, 91, 218, 0.92);
    outline: 0;
}

.video-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 3.5rem;
    display: grid;
    grid-template-columns: 2rem minmax(4rem, 1fr) auto 2rem 2rem;
    align-items: center;
    gap: 0.65rem;
    padding: 1.2rem 0.9rem 0.7rem;
    background: linear-gradient(180deg, transparent, rgba(4, 4, 12, 0.94));
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.65rem);
    transition: opacity 220ms ease 100ms, transform 280ms cubic-bezier(0.18, 0.86, 0.24, 1) 100ms;
}

.video-dock:hover .video-controls,
.video-dock:focus-within .video-controls,
.video-dock.is-active .video-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.video-control {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease;
}

.video-control:hover,
.video-control:focus-visible {
    color: var(--violet-light);
    outline: 0;
    transform: scale(1.08);
}

.video-progress {
    --video-progress: 0%;
    width: 100%;
    height: 0.3rem;
    margin: 0;
    appearance: none;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--violet-light) var(--video-progress), rgba(255, 255, 255, 0.25) var(--video-progress));
    cursor: pointer;
}

.video-progress::-webkit-slider-thumb {
    width: 0.85rem;
    height: 0.85rem;
    appearance: none;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(130, 91, 218, 0.25);
}

.video-progress::-moz-range-thumb {
    width: 0.85rem;
    height: 0.85rem;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(130, 91, 218, 0.25);
}

.video-progress:focus-visible {
    outline: 2px solid rgba(167, 128, 255, 0.8);
    outline-offset: 4px;
}

.video-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--description-font);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@keyframes videoDockEnter {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes islandLoad {
    0% {
        opacity: 0;
        transform: translate(-50%, -1.5rem) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes separatorIn {
    0% {
        opacity: 0;
        transform: scaleY(0.2);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes islandTabIn {
    0% {
        opacity: 0;
        transform: translateY(-0.4rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroBannerSettle {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: translate(-50%, -50%) scale(0.88);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes heroBannerExit {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(14px);
        transform: translate(-50%, -50%) scale(0.72);
    }
}

@keyframes heroTitleSettle {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(28px) scale(0.96);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeLift {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .hero {
        min-height: 100vh;
    }

    .hero-stage {
        padding: 4rem 1rem;
    }

    .orion-banner {
        max-height: 34vh;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .dynamic-island {
        top: 0.75rem;
    }

    .island-track {
        height: 3.25rem;
        padding: 0 0.45rem;
    }

    .account-island {
        min-width: 5.25rem;
        max-width: 9rem;
        height: 3.25rem;
        padding: 0 0.75rem;
        font-size: 0.7rem;
    }

    .island-slot {
        width: 2.25rem;
        height: 2.25rem;
    }

    .island-logo {
        width: 1.85rem;
        height: 1.85rem;
    }

    .island-separator {
        margin: 0 0.18rem;
    }

    .video-dock {
        width: 14rem;
    }

    .video-dock--bottom-left {
        left: -2rem;
        bottom: -1.5rem;
        transform: rotate(-6deg) scale(0.92);
    }

    .video-dock--bottom-right {
        right: -2rem;
        bottom: -1.5rem;
        transform: rotate(6deg) scale(0.92);
    }

    .video-dock--top-left {
        left: -2rem;
        top: -1.5rem;
        transform: rotate(6deg) scale(0.92);
    }

    .video-dock--top-right {
        right: -2rem;
        top: -1.5rem;
        transform: rotate(-6deg) scale(0.92);
    }

    .video-dock:hover,
    .video-dock:focus-within,
    .video-dock.is-active {
        width: calc(100vw - 1.5rem);
    }

    .video-dock--bottom-left:hover,
    .video-dock--bottom-left:focus-within,
    .video-dock--bottom-left.is-active {
        left: 0.75rem;
        bottom: 0.75rem;
    }

    .video-dock--bottom-right:hover,
    .video-dock--bottom-right:focus-within,
    .video-dock--bottom-right.is-active {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .video-dock--top-left:hover,
    .video-dock--top-left:focus-within,
    .video-dock--top-left.is-active {
        left: 0.75rem;
        top: 0.75rem;
    }

    .video-dock--top-right:hover,
    .video-dock--top-right:focus-within,
    .video-dock--top-right.is-active {
        right: 0.75rem;
        top: 0.75rem;
    }

    .video-controls {
        grid-template-columns: 1.8rem minmax(3rem, 1fr) auto 1.8rem 1.8rem;
        gap: 0.4rem;
        padding-inline: 0.65rem;
    }

    .video-control {
        width: 1.8rem;
        height: 1.8rem;
    }

    .video-time {
        font-size: 0.65rem;
    }

}

@media (max-width: 760px) {
    .story-heading { align-items: flex-start; flex-direction: column; }
    .position-grid { grid-template-columns: 1fr; }
    .position-grid article { min-height: 11rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
    .position-grid h3 { margin-top: 2rem; }
    .tier-row { grid-template-columns: 2.8rem repeat(3,minmax(0,1fr)); gap: .3rem; }
    .tier-row strong, .tier-row span { min-height: 3.4rem; font-size: .78rem; }
    .dynamic-island {
        left: 0.45rem;
        right: 0.45rem;
        width: auto;
        justify-content: center;
        gap: 0.3rem;
        opacity: 1;
        transform: none;
        animation: none;
    }
    .island-track { padding: 0 0.25rem; }
    .island-slot { width: 1.65rem; height: 1.65rem; }
    .island-logo { width: 1.45rem; height: 1.45rem; }
    .island-separator { display: none; }
    .account-island { min-width: 2.5rem; width: 2.5rem; max-width: 2.5rem; padding: 0; }
    .account-island span { display: none; }
}

@media (max-width: 360px) {
    .island-logo-slot { display: none; }
    .island-slot { width: 1.5rem; height: 1.5rem; }
    .account-island { min-width: 2.35rem; width: 2.35rem; max-width: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    .site-shell,
    .dynamic-island,
    .island-logo,
    .island-tab,
    .island-separator,
    .banner-wrap,
    h1,
    .hero-content p,
    .hero-actions {
        animation: none;
        opacity: 1;
    }

    .banner-wrap {
        display: none;
    }

    .logo-flight {
        display: none;
    }

    .chain-easter-egg {
        display: none;
    }

    .video-dock {
        animation: none;
        opacity: 1;
    }

    .story-band {
        opacity: 1;
        transform: none;
    }

    .dynamic-island {
        transform: translate(-50%, 0) scale(1);
    }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
    .dynamic-island {
        transform: none;
    }
}