/* Homepage only: layered character artwork, a live canvas and tactical typography. */
.portal-home {
    container-type: inline-size;
    container-name: portal-home cs-home-layout;
}

.portal-hero.portal-hero--home {
    --hero-pointer-x: 0px;
    --hero-pointer-y: 0px;
    --hero-amber: #f5a53b;
    --hero-character-growth: 30px;
    container-type: inline-size;
    container-name: cs-home-hero;
    min-height: 490px;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    border-color: transparent;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 83% 61%, #d17c242b 0, transparent 49%) padding-box,
        linear-gradient(112deg, #22262d 0%, #191d23 46%, #30271f 100%) padding-box,
        linear-gradient(125deg, #9b744555, #ffffff12 38%, #f5a53b55 76%, #f5a53b1c) border-box;
    box-shadow: inset 0 1px 0 #ffffff08, 0 20px 55px #0000002e;
}

.portal-hero.portal-hero--home::before {
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    background:
        linear-gradient(90deg, transparent calc(100% - 1px), #eeb47709 0) 0 0 / 48px 48px,
        linear-gradient(0deg, transparent calc(100% - 1px), #eeb47709 0) 0 0 / 48px 48px;
    mask-image: linear-gradient(90deg, transparent 16%, #000 73%);
}

.portal-hero.portal-hero--home::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 5%, #f5a53b35 32%, #ffc575aa 72%, transparent);
}

.portal-hero--home > [data-hero-canvas] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.portal-hero--home .portal-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 12px 48px 42px;
    z-index: 4;
    min-width: 0;
}

.portal-hero--home .portal-hero-copy > .portal-kicker {
    margin-bottom: 25px;
    padding: 9px 12px;
    border: 1px solid #dca45d30;
    border-radius: 6px;
    background: linear-gradient(110deg, #f5a53b12, #f5a53b04);
    box-shadow: inset 0 1px 0 #ffffff04;
    color: #e2bd88;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .16em;
}

.portal-hero--home .portal-hero-copy h1 {
    margin: 0;
    font-size: clamp(50px, 5.25cqi, 76px);
    line-height: 1.01;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.portal-hero--home .portal-hero-copy h1 em {
    position: relative;
    color: #ffc064;
    background: linear-gradient(115deg, #ffe0a3 0%, #ffb547 55%, #f19529 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 8px 34px #f5a53b16;
}

.portal-hero--home .portal-hero-copy > p {
    max-width: 400px;
    margin: 22px 0 0;
    padding: 0;
    color: #aab0ba;
    font-size: 13px;
    line-height: 1.85;
}

.portal-hero--home .portal-hero-actions {
    margin-top: 29px;
    gap: 21px;
}

.portal-hero--home .portal-hero-actions .portal-button {
    min-height: 47px;
    border: 1px solid #ffd28c99;
    border-radius: 8px;
    color: #20170b;
    background: linear-gradient(135deg, #ffc66b, #f5a53b 62%, #ed9227);
    box-shadow: inset 0 1px 0 #fff2cd55, 0 8px 26px #f5a53b20;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.portal-hero--home .portal-hero-actions .portal-text-link {
    min-height: 43px;
    padding: 0 2px;
    border-bottom: 1px solid #d5ad742e;
    color: #d4d8df;
    font-size: 11px;
    transition: color .2s ease, border-color .2s ease;
}

.portal-hero--home .portal-hero-actions .portal-button:hover {
    transform: translateY(-2px);
    border-color: #ffe3b4;
    box-shadow: inset 0 1px 0 #fff2cd77, 0 10px 30px #f5a53b35;
}

.portal-hero--home .portal-hero-actions .portal-text-link:hover {
    color: #ffd08a;
    border-color: #f5a53b99;
}

.portal-hero--home .portal-hero-actions a:focus-visible {
    outline: 2px solid #ffd08a;
    outline-offset: 5px;
}

.portal-hero--home .portal-hero-art {
    position: relative;
    inset: auto;
    z-index: 2;
    min-height: 490px;
    opacity: 1;
    align-self: stretch;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 31%, #f5a53b06 31%, #f5a53b06 56%, transparent 56%),
        radial-gradient(ellipse at 54% 72%, #f5a53b32 0%, #a15f2914 40%, transparent 70%);
}

.portal-hero--home .portal-hero-art::before {
    content: "";
    position: absolute;
    width: 82%;
    aspect-ratio: 1;
    left: 10%;
    top: 29%;
    border: 1px solid #eeb4772b;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ffb55212, transparent 63%);
    box-shadow: 0 0 0 24px #eeb47704, 0 0 0 25px #eeb4770c, 0 0 0 64px #eeb47703;
}

.portal-hero--home .portal-hero-art::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 4;
    height: 87px;
    background: linear-gradient(0deg, #1c1e22e6, transparent);
}

.portal-hero--home .cs-hero-readout {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translate3d(calc(var(--hero-pointer-x) * -.22), calc(var(--hero-pointer-y) * -.22), 0);
}

.portal-hero--home .portal-art-word {
    position: absolute;
    top: 35px;
    left: 23px;
    right: 134px;
    margin: 0;
    font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
    font-size: clamp(49px, 6.15cqi, 74px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.065em;
    opacity: 1;
    color: var(--hero-amber);
    transform: skew(-7deg);
}

.portal-hero--home .portal-art-word > .cs-hero-word {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    font-size: 1em;
    line-height: .96;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    transform-origin: left center;
    animation: cs-hero-word-enter .85s cubic-bezier(.16, 1, .3, 1) both, cs-hero-word-breathe 7s ease-in-out 1.1s infinite;
}

.portal-hero--home .portal-art-word > .cs-hero-word--ready {
    color: #ffc264;
    text-shadow: 0 2px 0 #9f622626, 0 0 35px #f5a53b1c;
}

.portal-hero--home .portal-art-word > .cs-hero-word--play {
    margin-top: 5px;
    color: #1f2228;
    font-size: .83em;
    letter-spacing: -.058em;
    -webkit-text-stroke: 1px #f4b965bb;
    animation-delay: .13s, 1.3s;
}

.portal-hero--home .cs-hero-word::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: #ffe0a5;
    -webkit-text-stroke: 0;
    opacity: 0;
    pointer-events: none;
    animation: cs-hero-word-signal 9s ease-in-out 2s infinite;
}

.portal-hero--home .cs-hero-word--play::after {
    color: transparent;
    -webkit-text-stroke: 1px #ffe0a5;
    animation-delay: 2.2s;
}

.portal-hero--home .cs-hero-characters {
    position: absolute;
    bottom: -24px;
    left: 50%;
    z-index: 3;
    display: block;
    width: calc(100% + var(--hero-character-growth));
    max-width: none;
    height: calc(335px + var(--hero-character-growth));
    object-fit: contain;
    object-position: center bottom;
    transform: translate3d(calc(-50% + var(--hero-pointer-x)), var(--hero-pointer-y), 0);
    filter: drop-shadow(0 18px 28px #00000085) drop-shadow(0 0 18px #f5a53b0a);
    animation: cs-hero-character-enter 1.15s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.portal-hero--home .portal-art-coordinate {
    top: 27px;
    right: 23px;
    z-index: 5;
    color: #c9a46e;
    font: 9px/1.1 "Consolas", "Courier New", monospace;
    letter-spacing: .2em;
}

.portal-hero--home .portal-art-footer {
    display: block;
    bottom: 20px;
    left: 25px;
    right: 20px;
    z-index: 5;
    color: #c2b29c;
    font: 9px/1.4 "Consolas", "Courier New", monospace;
    letter-spacing: .15em;
}

.portal-hero--home .cs-hero-reticle {
    position: absolute;
    top: 59px;
    right: 23px;
    width: 109px;
    aspect-ratio: 1;
    z-index: 2;
    color: #f5a53b;
    opacity: .8;
    transform: translate3d(calc(var(--hero-pointer-x) * -.35), calc(var(--hero-pointer-y) * -.35), 0);
}

.portal-hero--home .cs-hero-reticle-ring {
    position: absolute;
    inset: 0;
    border: 1px solid #f5a53b42;
    border-radius: 50%;
}

.portal-hero--home .cs-hero-reticle-ring--outer {
    border-width: 2px;
    border-color: #f5a53b80 transparent #f5a53b80 transparent;
    animation: cs-hero-reticle-orbit 18s linear infinite;
}

.portal-hero--home .cs-hero-reticle-ring--outer::before,
.portal-hero--home .cs-hero-reticle-ring--outer::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 9px;
    left: calc(50% - 1.5px);
    top: -5px;
    border-radius: 1px;
    background: #f5a53b;
}

.portal-hero--home .cs-hero-reticle-ring--outer::after {
    top: auto;
    bottom: -5px;
}

.portal-hero--home .cs-hero-reticle-ring--inner {
    inset: 15px;
    border-style: dashed;
    border-color: #f5a53b45;
    animation: cs-hero-reticle-orbit 26s linear infinite reverse;
}

.portal-hero--home .cs-hero-reticle-axis {
    position: absolute;
    top: calc(50% - .5px);
    left: -9px;
    width: calc(100% + 18px);
    height: 1px;
    background: linear-gradient(90deg, #f5a53b70 0 33%, transparent 33% 67%, #f5a53b70 67% 100%);
    animation: cs-hero-reticle-focus 6s ease-in-out infinite;
}

.portal-hero--home .cs-hero-reticle-axis--y {
    top: -9px;
    left: calc(50% - .5px);
    width: 1px;
    height: calc(100% + 18px);
    background: linear-gradient(0deg, #f5a53b70 0 33%, transparent 33% 67%, #f5a53b70 67% 100%);
}

.portal-hero--home .cs-hero-reticle-dot {
    position: absolute;
    inset: 45%;
    border: 1px solid #ffd48d;
    border-radius: 50%;
    background: #f5a53b18;
    box-shadow: 0 0 16px #f5a53b24;
    animation: cs-hero-reticle-pulse 5s ease-in-out infinite;
}

@keyframes cs-hero-word-enter {
    from { opacity: .7; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cs-hero-word-breathe {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -2px, 0); }
}

@keyframes cs-hero-word-signal {
    0%, 76%, 89%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
    80% { opacity: .26; transform: translate3d(1px, 0, 0); }
    84% { opacity: .12; transform: translate3d(-1px, 0, 0); }
}

@keyframes cs-hero-character-enter {
    from { opacity: .85; translate: 0 17px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes cs-hero-reticle-orbit {
    to { transform: rotate(360deg); }
}

@keyframes cs-hero-reticle-focus {
    0%, 100% { transform: scale(.91); opacity: .66; }
    50% { transform: scale(1); opacity: 1; }
}

@keyframes cs-hero-reticle-pulse {
    0%, 100% { transform: scale(.84); opacity: .62; }
    50% { transform: scale(1.14); opacity: 1; }
}

@container cs-home-layout (max-width: 1050px) and (min-width: 761px) {
    .portal-hero.portal-hero--home {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 470px;
    }
    .portal-hero--home .portal-hero-copy { padding: 38px 8px 38px 30px; }
    .portal-hero--home .portal-hero-copy h1 { font-size: 56px; }
    .portal-hero--home .portal-hero-copy > p { max-width: 340px; font-size: 12px; }
    .portal-hero--home .portal-hero-actions { gap: 17px; }
    .portal-hero--home .portal-hero-actions .portal-text-link { font-size: 10px; }
    .portal-hero--home .portal-hero-art { min-height: 470px; }
    .portal-hero--home .portal-art-word { font-size: 56px; left: 16px; top: 48px; right: 100px; }
    .portal-hero--home .cs-hero-reticle { width: 84px; top: 64px; right: 15px; }
    .portal-hero--home .cs-hero-characters { height: calc(314px + var(--hero-character-growth)); bottom: -17px; }
    .portal-hero--home .portal-art-coordinate { right: 17px; }
    .portal-hero--home .portal-art-footer { left: 17px; font-size: 8px; }
}

@container cs-home-layout (max-width: 760px) {
    .portal-hero.portal-hero--home {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-hero--home .portal-hero-copy {
        padding: 34px 30px 27px;
        max-width: none;
        background: linear-gradient(180deg, #20232900, #20232975);
    }
    .portal-hero--home .portal-hero-copy > .portal-kicker { margin-bottom: 20px; }
    .portal-hero--home .portal-hero-copy h1 { font-size: clamp(48px, 8.5cqi, 66px); }
    .portal-hero--home .portal-hero-copy > p { max-width: 520px; margin-top: 20px; font-size: 13px; }
    .portal-hero--home .portal-hero-actions { margin-top: 24px; }
    .portal-hero--home .portal-hero-art {
        position: relative;
        inset: auto;
        z-index: 2;
        min-height: 375px;
        opacity: 1;
    }
    .portal-hero--home .portal-art-word {
        left: 30px;
        right: 130px;
        top: 21px;
        font-size: clamp(47px, 9.1cqi, 63px);
        opacity: 1;
    }
    .portal-hero--home .cs-hero-reticle { top: 26px; right: 32px; width: 90px; }
    .portal-hero--home .cs-hero-characters { bottom: -23px; height: calc(263px + var(--hero-character-growth)); }
    .portal-hero--home .portal-art-coordinate { top: 8px; right: 31px; font-size: 8px; }
    .portal-hero--home .portal-art-footer { display: block; bottom: 15px; left: 30px; font-size: 8px; }
    .portal-hero--home .portal-hero-art::after { height: 58px; }
}

@container cs-home-layout (max-width: 430px) {
    .portal-hero--home .portal-hero-copy { padding: 29px 23px 26px; }
    .portal-hero--home .portal-hero-copy > .portal-kicker { font-size: 8px; letter-spacing: .13em; margin-bottom: 21px; }
    .portal-hero--home .portal-hero-copy h1 { font-size: clamp(44px, 13cqi, 54px); }
    .portal-hero--home .portal-hero-copy > p { font-size: 12px; line-height: 1.8; }
    .portal-hero--home .portal-hero-actions { gap: 18px; flex-wrap: wrap; }
    .portal-hero--home .portal-hero-actions .portal-button { min-height: 43px; padding-inline: 14px; font-size: 11px; }
    .portal-hero--home .portal-hero-actions .portal-text-link { font-size: 10px; gap: 6px; }
    .portal-hero--home .portal-hero-art { min-height: 345px; }
    .portal-hero--home .portal-art-word { top: 22px; left: 23px; right: 93px; font-size: clamp(44px, 12.4cqi, 51px); }
    .portal-hero--home .cs-hero-reticle { top: 37px; right: 18px; width: 67px; }
    .portal-hero--home .cs-hero-characters { bottom: -19px; height: calc(229px + var(--hero-character-growth)); }
    .portal-hero--home .portal-art-coordinate { top: 12px; right: 19px; font-size: 7px; }
    .portal-hero--home .portal-art-footer { left: 23px; bottom: 14px; font-size: 7px; letter-spacing: .12em; }
}

.portal-hero--home[data-hero-running="false"] *,
.portal-hero--home[data-hero-running="false"] *::before,
.portal-hero--home[data-hero-running="false"] *::after {
    animation-play-state: paused !important;
}

/* Preserve an intentional composition without motion, including pointer parallax. */
@media (prefers-reduced-motion: reduce) {
    .portal-hero--home *, .portal-hero--home *::before, .portal-hero--home *::after {
        animation: none !important;
        transition: none !important;
    }
    .portal-hero--home .cs-hero-readout, .portal-hero--home .cs-hero-reticle { transform: none; }
    .portal-hero--home .cs-hero-characters { transform: translate3d(-50%, 0, 0); }
}

@media (forced-colors: active) {
    .portal-hero--home .portal-hero-copy h1 em {
        background: none;
        color: CanvasText;
        -webkit-text-fill-color: currentColor;
    }
}