/* Continuous artwork and optional scroll reveals. Load after homepage styles. */

/* Reveal uses individual translate, leaving component transforms and hover styles intact. */
.td-page.motion-ready .reveal-on-scroll {
    opacity: 0;
    translate: 0 24px;
    transition:
        opacity 620ms ease var(--reveal-delay, 0ms),
        translate 720ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}

.td-page.motion-ready .reveal-on-scroll.is-revealed,
.td-page.motion-ready .reveal-on-scroll:focus-within {
    opacity: 1;
    translate: 0 0;
}

.td-page.motion-ready .reveal-on-scroll:focus-within {
    transition-delay: 0ms;
    transition-duration: 0ms;
}

.hero-art {
    --pointer-x: 0px;
    --pointer-y: 0px;
}

/* Pointer depth lives in translate. Float keyframes keep each object's original tilt. */
.hero-art > .question-bubble {
    translate: calc(var(--pointer-x) * 0.8) calc(var(--pointer-y) * 0.8);
    animation: td-question-float 7.2s ease-in-out infinite;
}

.hero-art > .answer-sheet {
    translate: calc(var(--pointer-x) * -0.65) calc(var(--pointer-y) * -0.55);
    animation: td-answer-float 8.6s ease-in-out -2.4s infinite;
}

.hero-art > .solved-badge {
    translate: calc(var(--pointer-x) * 1.25) calc(var(--pointer-y) * -0.9);
    animation: td-check-float 6.3s ease-in-out -1.2s infinite;
}

.hero-art > .art-flourish {
    translate: calc(var(--pointer-x) * -1.05) calc(var(--pointer-y) * 0.75);
    animation: td-flourish-rock 7.8s ease-in-out -3.1s infinite;
}

.hero-art > .art-spark {
    translate: calc(var(--pointer-x) * 1.4) calc(var(--pointer-y) * -1.1);
    animation:
        td-orbit-turn 26s linear infinite,
        td-spark-float 8.2s ease-in-out -1.6s infinite;
}

.hero-art .answer-sheet__top > .icon {
    animation: td-orbit-turn 20s linear infinite reverse;
}

.hero-art > .art-dot--one {
    translate: calc(var(--pointer-x) * -1.3) calc(var(--pointer-y) * 1.15);
    animation: td-dot-drift 9s ease-in-out -4s infinite;
}

.hero-art > .art-dot--two {
    translate: calc(var(--pointer-x) * 0.6) calc(var(--pointer-y) * -1.2);
    animation: td-dot-drift 11s ease-in-out -2s infinite reverse;
}

/* A small marker and partial arc make the slow circular movement visible. */
.hero-art > .art-orbit {
    translate: calc(var(--pointer-x) * -0.2) calc(var(--pointer-y) * -0.2);
    animation: td-orbit-turn 42s linear infinite;
}

.hero-art > .art-orbit--inner {
    translate: calc(var(--pointer-x) * 0.3) calc(var(--pointer-y) * 0.3);
    animation-duration: 31s;
    animation-direction: reverse;
}

.hero-art > .art-orbit::before {
    content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9eb7f4;
    box-shadow: 0 0 0 5px var(--td-mist);
}

.hero-art > .art-orbit::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-top-color: #9eb7f4;
    border-radius: 50%;
    rotate: 24deg;
}

.hero-art > .art-orbit--inner::before {
    width: 7px;
    height: 7px;
    top: -4px;
    background: #83bca9;
}

.hero-art > .art-orbit--inner::after {
    border-top-color: #adcfc7;
    rotate: -46deg;
}

/* The support illustration echoes the hero, with smaller pointer movement. */
.support-art {
    --pointer-x: 0px;
    --pointer-y: 0px;
    pointer-events: none;
}

.support-art > .support-bubble--back {
    translate: calc(var(--pointer-x) * 0.8) calc(var(--pointer-y) * 0.8);
    animation: td-support-back-float 8.2s ease-in-out -1.4s infinite;
}

.support-art > .support-bubble--front {
    translate: calc(var(--pointer-x) * -0.65) calc(var(--pointer-y) * -0.55);
    animation: td-support-front-float 9.4s ease-in-out -3.2s infinite;
}

.support-art > .support-art-ring {
    translate: calc(var(--pointer-x) * -0.2) calc(var(--pointer-y) * -0.2);
    animation: td-orbit-turn 38s linear infinite;
}

.support-art-ring::before {
    content: "";
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b8ceff;
    box-shadow: 0 0 0 4px var(--td-blue);
}

.support-art-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-top-color: #ffffff66;
    border-radius: 50%;
    rotate: 24deg;
}

.support-art > .support-spark {
    translate: calc(var(--pointer-x) * 1.2) calc(var(--pointer-y) * -0.9);
    animation:
        td-orbit-turn 26s linear -3s infinite,
        td-spark-float 8.2s ease-in-out -1.6s infinite;
}

.support-bubble--back span {
    animation: td-support-typing 2.4s ease-in-out infinite;
}

.support-bubble--back span:nth-child(2) { animation-delay: 160ms; }
.support-bubble--back span:nth-child(3) { animation-delay: 320ms; }

@keyframes td-support-back-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-13deg); }
    38% { transform: translate3d(4px, -9px, 0) rotate(-10deg); }
    72% { transform: translate3d(-3px, -3px, 0) rotate(-15deg); }
}

@keyframes td-support-front-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(12deg); }
    42% { transform: translate3d(-5px, 8px, 0) rotate(9deg); }
    76% { transform: translate3d(3px, -4px, 0) rotate(14deg); }
}

@keyframes td-support-typing {
    0%, 45%, 100% { transform: translateY(0); opacity: 0.7; }
    22% { transform: translateY(-4px); opacity: 1; }
}

@keyframes td-question-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-12deg);
    }
    32% {
        transform: translate3d(5px, -12px, 0) rotate(-9deg);
    }
    68% {
        transform: translate3d(-4px, -5px, 0) rotate(-14deg);
    }
}

@keyframes td-answer-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(7deg);
    }
    38% {
        transform: translate3d(-7px, 10px, 0) rotate(4deg);
    }
    72% {
        transform: translate3d(4px, -4px, 0) rotate(9deg);
    }
}

@keyframes td-check-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(9deg);
    }
    45% {
        transform: translate3d(6px, -14px, 0) rotate(16deg);
    }
    76% {
        transform: translate3d(-3px, -5px, 0) rotate(5deg);
    }
}

@keyframes td-flourish-rock {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(6deg);
    }
    50% {
        transform: translate3d(-7px, 8px, 0) rotate(-7deg);
    }
}

@keyframes td-spark-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(12deg);
    }
    50% {
        transform: translate3d(9px, -11px, 0) rotate(12deg);
    }
}

@keyframes td-dot-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    36% {
        transform: translate3d(7px, -11px, 0);
    }
    70% {
        transform: translate3d(-6px, 5px, 0);
    }
}

@keyframes td-orbit-turn {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-art > *,
    .support-bubble--back span {
        animation: none;
        translate: none;
    }

    .td-page.motion-ready .reveal-on-scroll {
        opacity: 1;
        translate: none;
        transition: none;
    }

}

@media print {
    .td-page.motion-ready .reveal-on-scroll {
        opacity: 1;
        translate: none;
    }

}