/*
 * Homepage visual-storytelling draft layer.
 *
 * This file currently owns the homepage hero experiment only. Later homepage
 * sections remain on their existing composition until their own narrative pass.
 */

.td-home-hero {
    --td-hero-blue: #5ea9f5;
    --td-hero-blue-bright: #8dccff;
    --td-hero-blue-ice: #d8efff;
    --td-hero-line: rgba(171, 203, 226, 0.13);
    --td-hero-line-strong: rgba(178, 215, 240, 0.24);

    position: relative;
    isolation: isolate;
    min-height: clamp(42rem, 88svh, 56rem);
    padding-block: clamp(4.5rem, 7vw, 6rem) 0;
    overflow: hidden;
    border-block-end: 0;
    background:
        linear-gradient(180deg, rgba(8, 11, 14, 0.06), rgba(8, 11, 14, 0.9) 92%),
        var(--td-vs-night-ledger);
}

.td-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 14, 0.9) 0%, rgba(8, 11, 14, 0.5) 42%, rgba(8, 11, 14, 0.08) 72%, rgba(8, 11, 14, 0.42) 100%),
        radial-gradient(circle at 76% 42%, rgba(45, 126, 214, 0.12), transparent 34%);
    pointer-events: none;
    z-index: 0;
}

.td-home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 10rem;
    background: linear-gradient(180deg, transparent, var(--td-vs-night-ledger));
    pointer-events: none;
    z-index: 1;
}

.td-home-hero__atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.td-home-hero__atmosphere::before,
.td-home-hero__atmosphere::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    transform: translateZ(0);
}

.td-home-hero__atmosphere::before {
    width: min(62rem, 76vw);
    height: min(62rem, 76vw);
    inset: -4% -13% auto auto;
    background: radial-gradient(circle, rgba(61, 145, 232, 0.18) 0%, rgba(32, 104, 180, 0.08) 38%, transparent 70%);
    opacity: 0.9;
    animation: td-hero-ambient-drift 24s ease-in-out infinite alternate;
}

.td-home-hero__atmosphere::after {
    width: min(42rem, 54vw);
    height: min(42rem, 54vw);
    inset: auto 28% -20% auto;
    background: radial-gradient(circle, rgba(72, 163, 236, 0.075) 0%, transparent 72%);
    opacity: 0.75;
    animation: td-hero-ambient-drift 30s ease-in-out -8s infinite alternate-reverse;
}

.td-home-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(30rem, 1.12fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
    min-height: clamp(30rem, 61svh, 39rem);
}

.td-home-hero__copy {
    max-width: 43rem;
}

.td-home-hero .td-vs-kicker {
    margin-block-end: 1rem;
    color: rgba(202, 212, 223, 0.66);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
}

.td-home-hero__copy h1 {
    display: grid;
    gap: 0.08em;
    max-width: 11.5ch;
    margin: 0;
    color: #f5f7f8;
    font-size: clamp(4.1rem, 6.65vw, 6.55rem);
    font-weight: 540;
    letter-spacing: -0.064em;
    line-height: 0.9;
    text-wrap: balance;
}

.td-home-hero__headline-muted {
    max-width: 12ch;
    color: rgba(223, 229, 235, 0.57);
    font-size: 0.76em;
    line-height: 0.97;
    letter-spacing: -0.055em;
}

.td-home-hero__lede {
    max-width: 37rem;
    margin: clamp(1.4rem, 2.2vw, 1.9rem) 0 0;
    color: rgba(207, 217, 226, 0.76);
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    line-height: 1.62;
}

.td-home-hero .td-home-actions {
    margin-block-start: clamp(1.2rem, 1.9vw, 1.6rem);
}

.td-home-hero .td-vs-button {
    min-height: 2.9rem;
    border-radius: 999px;
}

.td-home-boundary {
    max-width: none;
    margin: 0.95rem 0 0;
    padding: 0;
    border: 0;
    color: rgba(161, 174, 187, 0.56);
    font-family: var(--td-vs-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.035em;
    line-height: 1.5;
    text-transform: uppercase;
}

.td-home-hero__stage {
    position: relative;
    min-width: 0;
    align-self: stretch;
    display: grid;
    place-items: center;
}

.td-hero-market {
    position: relative;
    width: min(100%, 49rem);
    max-width: 100%;
    margin: 0;
}

.td-hero-market__canvas {
    position: relative;
    aspect-ratio: 920 / 700;
    isolation: isolate;
    overflow: hidden;
    border-radius: 2.5rem;
}

.td-hero-market__canvas::before {
    content: "";
    position: absolute;
    inset: 9% 1% 4% 7%;
    border-radius: 50%;
    background: radial-gradient(circle at 62% 42%, rgba(72, 164, 239, 0.17), rgba(30, 89, 150, 0.045) 48%, transparent 73%);
    filter: blur(38px);
    z-index: -2;
}

.td-hero-market__canvas::after {
    content: "";
    position: absolute;
    inset: 12% 4% 7% 14%;
    background: linear-gradient(104deg, transparent 6%, rgba(7, 11, 15, 0.04) 42%, rgba(7, 11, 15, 0.34) 100%);
    pointer-events: none;
    z-index: 3;
}

.td-hero-market__light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.td-hero-market__light--primary {
    width: 62%;
    aspect-ratio: 1;
    inset: 12% 1% auto auto;
    border: 1px solid rgba(117, 190, 239, 0.1);
    box-shadow:
        0 0 90px rgba(46, 136, 220, 0.1),
        inset 0 0 80px rgba(74, 159, 226, 0.03);
    transform: rotate(-9deg);
}

.td-hero-market__light--secondary {
    width: 42%;
    aspect-ratio: 1;
    inset: auto 10% 2% auto;
    border: 1px solid rgba(143, 205, 242, 0.055);
    opacity: 0.65;
}

/* Extra depth is intentionally atmospheric rather than another interface card. */
.td-hero-market__depth {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border: 1px solid rgba(147, 201, 237, 0.075);
    background:
        linear-gradient(115deg, rgba(38, 94, 146, 0.03), rgba(112, 190, 241, 0.055) 52%, transparent 78%),
        linear-gradient(180deg, rgba(220, 241, 255, 0.018), transparent 65%);
    box-shadow: inset 0 1px 0 rgba(228, 244, 255, 0.025);
    transform-origin: center;
}

.td-hero-market__depth--back {
    width: 63%;
    height: 54%;
    inset: 16% 11% auto auto;
    opacity: 0.52;
    transform: perspective(900px) rotateY(-18deg) rotateZ(5deg) translate3d(5%, -2%, 0);
    filter: blur(0.4px);
}

.td-hero-market__depth--mid {
    width: 58%;
    height: 49%;
    inset: 22% 17% auto auto;
    opacity: 0.76;
    transform: perspective(900px) rotateY(-12deg) rotateZ(-3deg) translate3d(-2%, 2%, 0);
}

.td-hero-market__depth--front {
    width: 50%;
    height: 39%;
    inset: 31% 20% auto auto;
    opacity: 0.42;
    transform: perspective(900px) rotateY(-8deg) rotateZ(2deg) translate3d(3%, 5%, 0);
    background: linear-gradient(105deg, rgba(95, 172, 227, 0.02), rgba(162, 215, 247, 0.05), transparent 78%);
}

.td-hero-market__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.td-hero-market__field {
    opacity: 0.84;
}

.td-hero-market__plane {
    fill: none;
    stroke: var(--td-hero-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
}

.td-hero-market__plane--far {
    opacity: 0;
    animation: td-hero-plane-far 1.2s cubic-bezier(0.2, 0.75, 0.2, 1) 100ms forwards;
}

.td-hero-market__plane--mid {
    stroke: rgba(175, 216, 242, 0.16);
    opacity: 0;
    animation: td-hero-plane-mid 1.35s cubic-bezier(0.2, 0.75, 0.2, 1) 260ms forwards;
}

.td-hero-market__value-ribbon {
    stroke: none;
}

.td-hero-market__profile-glow,
.td-hero-market__profile {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.td-hero-market__profile-glow {
    stroke: url(#td-hero-profile-soft);
    stroke-width: 14;
    opacity: 0.58;
}

.td-hero-market__profile {
    stroke: url(#td-hero-profile);
    stroke-width: 8;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: right center;
    animation: td-hero-profile-enter 1.6s cubic-bezier(0.2, 0.75, 0.2, 1) 420ms forwards;
}

.td-hero-market__structure path {
    fill: none;
    stroke: rgba(181, 214, 235, 0.14);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.td-hero-market__structure .td-hero-market__structure-focus {
    stroke: rgba(182, 223, 247, 0.27);
    stroke-dasharray: 4 10;
}

.td-hero-market__trace-shadow,
.td-hero-market__trace {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.td-hero-market__trace-shadow {
    stroke: rgba(83, 165, 235, 0.2);
    stroke-width: 13;
    filter: blur(7px);
}

.td-hero-market__trace {
    stroke: rgba(215, 239, 255, 0.9);
    stroke-width: 1.8;
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
    animation: td-hero-trace 2.35s cubic-bezier(0.2, 0.75, 0.2, 1) 620ms forwards;
}

.td-hero-market__nodes circle {
    fill: #bde3fb;
    opacity: 0.72;
}

.td-hero-market__nodes .td-hero-market__node-focus {
    fill: #e7f6ff;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 1;
    animation: td-hero-node-breathe 4.2s ease-in-out 2.4s infinite;
}

.td-hero-market__labels {
    fill: rgba(198, 217, 231, 0.49);
    font-family: var(--td-vs-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.45px;
}

.td-hero-market__decision {
    position: absolute;
    z-index: 4;
    inset: auto 5% 6% auto;
    width: min(16.5rem, 39%);
    padding: 0.8rem 0 0;
    border-block-start: 1px solid rgba(171, 209, 233, 0.22);
    background: linear-gradient(90deg, transparent, rgba(7, 12, 17, 0.12) 45%, rgba(7, 12, 17, 0.46));
    color: rgba(227, 236, 242, 0.9);
    font-family: var(--td-vs-font-mono);
    opacity: 0;
    transform: translateY(10px);
    animation: td-hero-decision-in 700ms cubic-bezier(0.2, 0.75, 0.2, 1) 2.5s forwards;
}

.td-hero-market__decision-row {
    display: grid;
    grid-template-columns: minmax(5rem, auto) 1fr;
    gap: 0.75rem;
    align-items: baseline;
    padding-block: 0.32rem;
}

.td-hero-market__decision-row span {
    color: rgba(178, 198, 213, 0.6);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.td-hero-market__decision-row strong {
    justify-self: end;
    color: rgba(226, 236, 243, 0.84);
    font-family: var(--td-vs-font-sans);
    font-size: 0.76rem;
    font-weight: 560;
    letter-spacing: -0.015em;
    text-align: end;
}

.td-hero-market__decision-row--permission {
    border-block-start: 1px solid rgba(174, 205, 225, 0.085);
}

.td-hero-market__decision-row--permission strong {
    color: rgba(243, 247, 249, 0.96);
}

.td-hero-market__decision p {
    margin: 0.6rem 0 0;
    color: #f5f7f8;
    font-family: var(--td-vs-font-sans);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 560;
    letter-spacing: -0.035em;
    text-align: end;
}

.td-hero-market__caption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: -0.25rem;
    padding-inline: 7%;
    color: rgba(175, 191, 203, 0.46);
    font-family: var(--td-vs-font-mono);
    font-size: 0.59rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.td-home-hero__footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-block-start: clamp(1.35rem, 2.3vw, 2.35rem);
    border-block-start: 1px solid rgba(184, 198, 214, 0.11);
}

.td-home-hero__footer span {
    position: relative;
    padding: 1rem 0;
    color: rgba(180, 191, 203, 0.47);
    font-family: var(--td-vs-font-mono);
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.td-home-hero__footer span:not(:last-child)::after {
    content: "";
    position: absolute;
    inset: 50% 1rem auto auto;
    width: clamp(1.5rem, 4vw, 3.75rem);
    height: 1px;
    background: linear-gradient(90deg, rgba(163, 176, 191, 0.06), rgba(163, 176, 191, 0.24));
}

.td-home-hero__footer span:last-child {
    color: rgba(221, 232, 239, 0.74);
}

@keyframes td-hero-ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-3%, 2%, 0) scale(1.055); }
}

@keyframes td-hero-plane-far {
    from { opacity: 0; transform: translate3d(22px, 8px, 0) scale(0.965); }
    to { opacity: 0.62; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes td-hero-plane-mid {
    from { opacity: 0; transform: translate3d(14px, 14px, 0) scale(0.975); }
    to { opacity: 0.84; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes td-hero-profile-enter {
    from { opacity: 0; transform: translateX(24px) scaleX(0.78); }
    to { opacity: 0.86; transform: translateX(0) scaleX(1); }
}

@keyframes td-hero-trace {
    to { stroke-dashoffset: 0; }
}

@keyframes td-hero-node-breathe {
    0%, 100% { transform: scale(1); opacity: 0.78; }
    50% { transform: scale(1.35); opacity: 1; }
}

@keyframes td-hero-decision-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 68rem) {
    .td-home-hero {
        min-height: auto;
        padding-block-start: clamp(4.2rem, 7vw, 5rem);
    }

    .td-home-hero__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 1.1fr);
        gap: clamp(1.5rem, 2.6vw, 2.75rem);
        min-height: clamp(29rem, 61svh, 35rem);
    }

    .td-home-hero__copy h1 {
        font-size: clamp(3.8rem, 6.1vw, 5.3rem);
    }

    .td-hero-market {
        width: min(100%, 42rem);
    }

    .td-hero-market__labels {
        font-size: 10.5px;
        fill: rgba(203, 221, 233, 0.54);
    }

    .td-hero-market__decision {
        right: 4%;
        width: min(15rem, 41%);
    }
}

@media (max-width: 56rem) {
    .td-home-hero {
        padding-block-start: clamp(3.8rem, 8vw, 4.6rem);
    }

    .td-home-hero::before {
        background:
            linear-gradient(180deg, rgba(8, 11, 14, 0.82) 0%, rgba(8, 11, 14, 0.18) 34%, rgba(8, 11, 14, 0.72) 100%),
            radial-gradient(circle at 62% 45%, rgba(49, 132, 218, 0.11), transparent 38%);
    }

    .td-home-hero__grid {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }

    .td-home-hero__copy {
        display: contents;
    }

    .td-home-hero .td-vs-kicker {
        order: 1;
    }

    .td-home-hero__copy h1 {
        order: 2;
        max-width: 11.5ch;
        font-size: clamp(3.65rem, 8.7vw, 4.85rem);
    }

    .td-home-hero__headline-muted {
        max-width: 13ch;
    }

    .td-home-hero__stage {
        order: 3;
        margin-block-start: clamp(0.9rem, 2vw, 1.5rem);
    }

    .td-hero-market {
        width: min(100%, 39rem);
        margin-inline: auto;
    }

    .td-home-hero__lede {
        order: 4;
        margin-block-start: 1rem;
    }

    .td-home-hero .td-home-actions {
        order: 5;
    }

    .td-home-boundary {
        order: 6;
    }

    .td-hero-market__decision {
        right: 4%;
        bottom: 5%;
        width: min(15rem, 43%);
    }
}

@media (max-width: 48rem) {
    .td-home-hero {
        padding-block-start: clamp(3.6rem, 10vw, 4.35rem);
    }

    .td-home-hero__copy h1 {
        max-width: 10.5ch;
        font-size: clamp(3.15rem, 13vw, 4.35rem);
        line-height: 0.91;
    }

    .td-home-hero__headline-muted {
        font-size: 0.8em;
    }

    .td-home-hero__lede {
        max-width: 32rem;
        font-size: 0.98rem;
    }

    .td-home-hero .td-home-actions {
        align-items: stretch;
    }

    .td-home-hero .td-vs-button {
        justify-content: center;
    }

    .td-hero-market {
        width: min(100%, 34rem);
    }

    .td-hero-market__canvas {
        overflow: visible;
        padding-block-end: 5.6rem;
        aspect-ratio: auto;
    }

    .td-hero-market__svg {
        width: 100%;
        aspect-ratio: 920 / 700;
    }

    .td-hero-market__light,
    .td-hero-market__depth {
        transform: scale(0.94);
        transform-origin: center;
    }

    .td-hero-market__labels {
        font-size: 11px;
        fill: rgba(207, 224, 235, 0.58);
    }

    .td-hero-market__caption {
        display: none;
    }

    /* Mobile state becomes an intentional lower beat, not a cropped edge overlay. */
    .td-hero-market__decision {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        padding: 0.75rem 0 0;
        background: linear-gradient(90deg, transparent, rgba(8, 12, 16, 0.22) 55%, transparent);
    }

    .td-hero-market__decision-row {
        grid-template-columns: minmax(6.75rem, auto) 1fr;
        gap: 1rem;
    }

    .td-hero-market__decision-row span {
        font-size: 0.55rem;
    }

    .td-hero-market__decision-row strong {
        font-size: 0.72rem;
    }

    .td-hero-market__decision p {
        font-size: 1.15rem;
    }

    .td-home-hero__footer {
        margin-block-start: 1.65rem;
    }

    .td-home-hero__footer span {
        padding-block: 0.85rem;
        font-size: 0.54rem;
        letter-spacing: 0.03em;
    }

    .td-home-hero__footer span:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 30rem) {
    .td-home-hero__copy h1 {
        font-size: clamp(2.95rem, 14vw, 3.9rem);
    }

    .td-home-hero .td-home-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .td-hero-market {
        width: 100%;
        margin-inline: 0;
    }

    .td-hero-market__canvas {
        padding-block-end: 5.3rem;
    }

    .td-hero-market__labels text:nth-child(3),
    .td-hero-market__labels text:nth-child(4),
    .td-hero-market__labels text:nth-child(5) {
        display: none;
    }

    .td-hero-market__labels {
        font-size: 12px;
        fill: rgba(212, 227, 237, 0.62);
    }

    .td-hero-market__decision-row {
        grid-template-columns: minmax(6.2rem, auto) 1fr;
        gap: 0.65rem;
    }

    .td-hero-market__decision-row span {
        display: block;
        font-size: 0.52rem;
    }

    .td-hero-market__decision-row strong {
        display: block;
        font-size: 0.68rem;
        text-align: end;
    }

    .td-hero-market__decision p {
        margin-block-start: 0.32rem;
        font-size: 1.05rem;
    }

    .td-home-hero__footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        text-align: center;
    }

    .td-home-hero__footer span {
        padding: 0.72rem 0.35rem;
        border-block-end: 1px solid rgba(184, 198, 214, 0.075);
    }

    .td-home-hero__footer span:nth-child(odd):not(:last-child) {
        border-inline-end: 1px solid rgba(184, 198, 214, 0.075);
    }

    .td-home-hero__footer span:last-child {
        grid-column: 1 / -1;
        padding-block: 0.82rem;
        border-block-end: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .td-home-hero__atmosphere::before,
    .td-home-hero__atmosphere::after,
    .td-hero-market__plane--far,
    .td-hero-market__plane--mid,
    .td-hero-market__profile,
    .td-hero-market__trace,
    .td-hero-market__nodes .td-hero-market__node-focus,
    .td-hero-market__decision {
        animation: none;
    }

    .td-hero-market__plane--far {
        opacity: 0.62;
    }

    .td-hero-market__plane--mid {
        opacity: 0.84;
    }

    .td-hero-market__profile {
        opacity: 0.86;
        transform: none;
    }

    .td-hero-market__trace {
        stroke-dashoffset: 0;
    }

    .td-hero-market__decision {
        opacity: 1;
        transform: none;
    }
}