:root {
    --ach-red: #f01812;
    --ach-red-dark: #a40907;
    --ach-ink: #151515;
}

#mv.ach-ready {
    position: relative;
    min-height: clamp(620px, 92vh, 960px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 72% 36%, rgba(240, 24, 18, 0.18), transparent 34%),
        linear-gradient(135deg, #fff 0%, #fff8f6 44%, #f4f4f4 100%);
}

#mv.ach-ready::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    z-index: -2;
    background:
        linear-gradient(90deg, transparent 0 95%, rgba(240, 24, 18, 0.13) 95% 100%),
        linear-gradient(0deg, transparent 0 94%, rgba(22, 22, 22, 0.05) 94% 100%);
    background-size: 88px 88px, 88px 88px;
    opacity: 0.42;
    transform: perspective(900px) rotateX(58deg) translateY(7%);
    transform-origin: center bottom;
    animation: ach-grid-drift 9s linear infinite;
}

#mv.ach-ready::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent 18%, transparent 78%, rgba(255, 255, 255, 0.9));
    mix-blend-mode: screen;
    transform: translateX(-120%);
    animation: ach-flash 3.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

#mv.ach-ready > figure {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: translate3d(var(--ach-parallax-x, 0), var(--ach-parallax-y, 0), 0);
    transition: transform 220ms ease-out;
}

#mv.ach-ready > figure svg {
    width: min(118vw, 1360px);
    height: auto;
    max-width: none;
    filter: drop-shadow(0 22px 36px rgba(240, 24, 18, 0.16));
    transform: scale(1.08);
    animation: ach-logo-camera 4.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#mv.ach-ready > figure svg path {
    fill: url(#ach-red-gradient);
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 0.9;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ach-letter-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#mv.ach-ready > figure svg path.logo10 { animation-delay: 0.12s; }
#mv.ach-ready > figure svg path.logo9 { animation-delay: 0.18s; }
#mv.ach-ready > figure svg path.logo8 { animation-delay: 0.24s; }
#mv.ach-ready > figure svg path.logo7 { animation-delay: 0.30s; }
#mv.ach-ready > figure svg path.logo6 { animation-delay: 0.36s; }
#mv.ach-ready > figure svg path.logo5 { animation-delay: 0.42s; }
#mv.ach-ready > figure svg path.logo4 { animation-delay: 0.48s; }
#mv.ach-ready > figure svg path.logo3 { animation-delay: 0.54s; }
#mv.ach-ready > figure svg path.logo2 { animation-delay: 0.60s; }
#mv.ach-ready > figure svg path.logo1 { animation-delay: 0.66s; }

.ach-hero-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ach-orbit {
    position: absolute;
    right: max(4vw, 48px);
    top: clamp(150px, 28vh, 320px);
    width: clamp(190px, 20vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(240, 24, 18, 0.32);
    opacity: 0;
    animation: ach-orbit-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
}

.ach-orbit::before,
.ach-orbit::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(240, 24, 18, 0.22);
}

.ach-orbit::after {
    inset: 38%;
    background: var(--ach-red);
    border: 0;
    box-shadow: 0 0 38px rgba(240, 24, 18, 0.34);
    animation: ach-pulse 2.6s ease-in-out infinite;
}

.ach-slice {
    position: absolute;
    left: -8vw;
    bottom: 14%;
    width: 44vw;
    min-width: 420px;
    height: 16px;
    background: linear-gradient(90deg, transparent, rgba(240, 24, 18, 0.84), transparent);
    transform: skewX(-22deg) translateX(-45%);
    opacity: 0;
    filter: blur(0.2px);
    animation: ach-slice-run 2.7s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
}

.ach-hero-copy {
    position: absolute;
    left: clamp(28px, 5vw, 72px);
    bottom: clamp(64px, 10vh, 120px);
    z-index: 5;
    max-width: min(720px, 74vw);
    color: var(--ach-ink);
    letter-spacing: 0;
}

.ach-hero-copy__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: clamp(12px, 1.15vw, 15px);
    font-weight: 700;
    color: var(--ach-red-dark);
    opacity: 0;
    transform: translateY(18px);
    animation: ach-copy-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}

.ach-hero-copy__eyebrow::before {
    content: "";
    width: 42px;
    height: 2px;
    background: var(--ach-red);
}

.ach-hero-copy__title {
    margin: 0;
    font-size: clamp(28px, 5.6vw, 74px);
    line-height: 1.02;
    font-weight: 800;
    color: var(--ach-ink);
    opacity: 0;
    transform: translateY(20px);
    animation: ach-copy-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.18s both;
}

.ach-hero-copy__lead {
    margin: 18px 0 0;
    font-size: clamp(14px, 1.55vw, 20px);
    line-height: 1.8;
    font-weight: 700;
    color: rgba(21, 21, 21, 0.72);
    opacity: 0;
    transform: translateY(18px);
    animation: ach-copy-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.32s both;
}

#mv.ach-ready > p {
    display: none;
}

#mv.ach-ready #scroll {
    z-index: 8;
}

@keyframes ach-letter-in {
    0% {
        opacity: 0;
        transform: translate3d(-34px, 18px, 0) scale(0.92) skewX(-7deg);
        filter: blur(8px);
    }
    58% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) skewX(0);
        filter: blur(0);
    }
}

@keyframes ach-logo-camera {
    0% { transform: scale(1.42) translate3d(-5%, 1%, 0); }
    64% { transform: scale(1.08) translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(0, -1.2%, 0); }
}

@keyframes ach-copy-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ach-grid-drift {
    to { background-position: 88px 88px, 88px 88px; }
}

@keyframes ach-flash {
    0% { transform: translateX(-120%); opacity: 0; }
    22% { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

@keyframes ach-orbit-in {
    from {
        opacity: 0;
        transform: translate3d(28px, -12px, 0) scale(0.78);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes ach-pulse {
    0%, 100% { transform: scale(0.82); opacity: 0.72; }
    50% { transform: scale(1.14); opacity: 1; }
}

@keyframes ach-slice-run {
    0% {
        opacity: 0;
        transform: skewX(-22deg) translateX(-45%);
    }
    22% { opacity: 1; }
    100% {
        opacity: 0;
        transform: skewX(-22deg) translateX(172%);
    }
}

@media (max-width: 768px) {
    #mv.ach-ready {
        min-height: 86vh;
    }

    #mv.ach-ready > figure svg {
        width: 156vw;
        transform: scale(1);
    }

    .ach-orbit {
        right: -44px;
        top: 30vh;
        width: 210px;
    }

    .ach-slice {
        min-width: 300px;
        width: 76vw;
        bottom: 23%;
    }

    .ach-hero-copy {
        left: 22px;
        right: 22px;
        bottom: 74px;
        max-width: none;
    }

    .ach-hero-copy__title {
        max-width: 8.5em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mv.ach-ready::before,
    #mv.ach-ready::after,
    #mv.ach-ready > figure svg,
    #mv.ach-ready > figure svg path,
    .ach-orbit,
    .ach-orbit::after,
    .ach-slice,
    .ach-hero-copy__eyebrow,
    .ach-hero-copy__title,
    .ach-hero-copy__lead {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}
