.reveal {
    opacity: 0;
    clip-path: inset(0 0 18% 0);
    transform: translateY(24px);
    transition: opacity 0.72s ease, transform 0.72s ease, clip-path 0.72s ease;
}

.reveal.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

.hero-inner > .reveal:nth-child(1) { transition-delay: 0s; }
.hero-inner > .reveal:nth-child(2) { transition-delay: 0.06s; }
.hero-inner > .reveal:nth-child(3) { transition-delay: 0.16s; }
.hero-inner > .reveal:nth-child(4) { transition-delay: 0.26s; }
.hero-inner > .reveal:nth-child(5) { transition-delay: 0.36s; }

.boot-sequence {
    animation: bootExit 1.06s cubic-bezier(0.16, 1, 0.3, 1) 0.98s both;
}

.boot-sequence::before {
    animation: bootRayLeft 1.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-sequence::after {
    animation: bootRayRight 1.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-ray-left-red {
    animation: bootRayExtraLeft 1.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-ray-right-white {
    animation: bootRayExtraRight 1.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-shards span {
    animation: bootShard 1.36s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i) * 0.045s);
}

.boot-ornament {
    animation: bootOrnamentIn 1.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-ornament-b { animation-delay: 0.04s; }
.boot-ornament-c { animation-delay: 0.08s; }
.boot-ornament-d { animation-delay: 0.12s; }

.boot-mark {
    animation: bootMarkLock 1.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-rail {
    animation: bootRail 0.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.boot-base {
    animation: bootBase 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}

.boot-blade {
    animation: bootBlade 0.98s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.boot-step {
    animation: bootStep 0.98s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}

.boot-cut {
    animation: bootCut 1.26s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.boot-cut-b {
    animation-delay: 0.08s;
}

.hero-inner {
    opacity: 0;
}

.hero.hero-ready .hero-inner {
    animation: heroContentStart 1.18s cubic-bezier(0.18, 0.82, 0.18, 1) both;
}

.hero.hero-ready .hero-visual {
    animation: heroVisualBaseIn 1.12s cubic-bezier(0.18, 0.82, 0.18, 1) both;
}

.hero.hero-ready .eyebrow {
    animation: heroKickerIn 0.72s cubic-bezier(0.18, 0.82, 0.18, 1) 0.04s both;
}

.hero.hero-ready .hero-subtitle {
    animation: heroTextIn 0.9s cubic-bezier(0.18, 0.82, 0.18, 1) 0.5s both;
}

.hero.hero-ready .hero-actions {
    animation: heroTextIn 0.86s cubic-bezier(0.18, 0.82, 0.18, 1) 0.68s both;
}

.hero.hero-ready .hero-rail {
    animation: heroRailIn 0.92s cubic-bezier(0.18, 0.82, 0.18, 1) 0.84s both;
}

.hero.hero-ready .hero-title {
    animation: heroTitleIn 1.06s cubic-bezier(0.18, 0.82, 0.18, 1) 0.1s both;
}

.hero.hero-ready .hero-rail.is-visible span {
    animation: railSliceIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--rail-index, 0) * 0.08s);
}

.product-card,
.case-card,
.pain-card,
.delivery-list article,
.faq-list details {
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.product-card:hover,
.case-card:hover,
.pain-card:hover,
.faq-list details:hover {
    transform: translateY(-12px) skewX(-1.2deg);
    border-color: var(--line-strong);
    box-shadow: 0 36px 110px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(248, 251, 252, 0.05);
}

.interactive-grid > * {
    transition: opacity 0.24s ease, transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.interactive-grid.is-interacting > *:not(.is-active) {
    opacity: 0.38;
    transform: scale(0.972) translateY(8px);
}

.interactive-grid .is-active {
    opacity: 1;
    border-color: var(--line-strong);
    background-image:
        linear-gradient(180deg, rgba(248, 251, 252, 0.085), rgba(248, 251, 252, 0.024)),
        linear-gradient(90deg, transparent 0 18px, rgba(248, 251, 252, 0.07) 18px 20px, transparent 20px 42px),
        linear-gradient(0deg, transparent 0 18px, rgba(248, 251, 252, 0.055) 18px 20px, transparent 20px 42px);
    background-size: auto, 84px 84px, 84px 84px;
    transform: translateY(-14px) skewX(-1.2deg);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.46), 0 0 42px rgba(179, 58, 58, 0.12);
}

.case-card:hover {
    box-shadow: none;
    border-color: rgba(248, 251, 252, 0.3);
}

.case-card:hover img {
    transform: scale(1.08) translateX(8px);
}

.case-card img {
    clip-path: inset(0 0 0 0 round var(--radius-sm));
    transition: transform 0.7s ease;
}

.case-card.reveal:not(.is-visible) img {
    clip-path: inset(18% 22% 18% 0 round var(--radius-sm));
}

.case-card.reveal.is-visible img {
    transition: transform 0.7s ease, clip-path 0.72s ease;
}

.logo-engine:not(.is-running) .logo-field {
    animation-play-state: paused;
}

.interactive-grid.is-in-view > * {
    animation: cardSettle 0.86s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--card-index, 0) * 0.075s);
}

.logo-field {
    animation: logoPatternDrift 22s steps(10) infinite;
}

.hero.hero-ready .logo-engine {
    animation: logoEngineEnter 1.08s cubic-bezier(0.18, 0.82, 0.18, 1) 0.08s both;
}

@keyframes logoEngineEnter {
    from {
        opacity: 0;
        transform: translateX(2%) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bootExit {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, -2.4%, 0) scale(1.03);
    }
}

@keyframes bootRayLeft {
    0% {
        opacity: 0;
        transform: translateX(-22vw) rotate(28deg);
    }
    24%, 64% {
        opacity: 0.86;
        transform: translateX(0) rotate(28deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-34vw) rotate(28deg);
    }
}

@keyframes bootRayRight {
    0% {
        opacity: 0;
        transform: translateX(22vw) rotate(-13deg);
    }
    24%, 64% {
        opacity: 0.58;
        transform: translateX(0) rotate(-13deg);
    }
    100% {
        opacity: 0;
        transform: translateX(36vw) rotate(-13deg);
    }
}

@keyframes bootRayExtraLeft {
    0% {
        opacity: 0;
        transform: translateX(-18vw) rotate(-18deg);
    }
    24%, 64% {
        opacity: 0.42;
        transform: translateX(0) rotate(-18deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-32vw) rotate(-18deg);
    }
}

@keyframes bootRayExtraRight {
    0% {
        opacity: 0;
        transform: translateX(18vw) rotate(24deg);
    }
    24%, 64% {
        opacity: 0.68;
        transform: translateX(0) rotate(24deg);
    }
    100% {
        opacity: 0;
        transform: translateX(32vw) rotate(24deg);
    }
}

@keyframes bootOrnamentIn {
    0% {
        opacity: 0;
        filter: blur(8px);
    }
    46% {
        opacity: 0.34;
        filter: blur(0);
    }
    100% {
        filter: blur(0);
    }
}

@keyframes bootMarkLock {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.62) rotate(-16deg);
        filter: blur(10px) drop-shadow(0 0 0 rgba(248, 251, 252, 0));
    }
    62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12) rotate(0deg);
        filter: blur(0) drop-shadow(0 0 34px rgba(248, 251, 252, 0.2));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.96) rotate(0deg);
        filter: blur(0) drop-shadow(0 0 28px rgba(248, 251, 252, 0.16));
    }
}

@keyframes bootRail {
    from {
        transform: translate3d(-220px, -80px, 0) rotate(-8deg);
    }
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes bootBase {
    from {
        transform: translate3d(180px, 170px, 0) rotate(8deg);
    }
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes bootBlade {
    from {
        transform: translate3d(260px, -160px, 0) rotate(28deg);
    }
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes bootStep {
    from {
        transform: translate3d(240px, 90px, 0) rotate(-24deg);
    }
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes bootShard {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
    }
    44% {
        opacity: 0.92;
        transform:
            translate(calc(-50% + (var(--i) - 2.5) * 84px), calc(-50% + (2.5 - var(--i)) * 38px))
            rotate(calc(var(--i) * 23deg))
            scale(1);
    }
    100% {
        opacity: 0.12;
        transform:
            translate(calc(-50% + (var(--i) - 2.5) * 160px), calc(-50% + (var(--i) - 2.5) * 74px))
            rotate(calc(var(--i) * 46deg))
            scale(0.74);
    }
}

@keyframes bootCut {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-9deg);
    }
    42% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(-9deg);
    }
}

@keyframes heroContentStart {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroVisualBaseIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes heroKickerIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroRailIn {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(28px) scaleX(0.94);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateY(42px) scale(0.94);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes railSliceIn {
    from {
        opacity: 0;
        transform: translateY(16px) scaleX(0.86);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
}

@keyframes logoPatternDrift {
    from {
        background-position: 0 0, 0 0, center;
    }
    to {
        background-position: 168px 126px, -84px 84px, center;
    }
}

@keyframes cardSettle {
    from {
        opacity: 0;
        clip-path: inset(0 36% 0 0);
        transform: translateY(36px) skewX(-4deg) scale(0.96);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0) skewX(0deg) scale(1);
    }
}

.nav-link,
.nav-cta,
.btn {
    position: relative;
    overflow: hidden;
}

.nav-link::after,
.nav-cta::after,
.btn::after {
    content: "";
    position: absolute;
    inset: auto 12px 7px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.24s ease;
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-cta:hover::after,
.btn:hover::after {
    transform: scaleX(1);
}

.faq-list details[open] {
    border-color: var(--line-strong);
    background: rgba(248, 251, 252, 0.08);
}

.scroll-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(248, 251, 252, 0.16);
    border-radius: 12px;
    background: var(--dark);
    color: var(--white);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .boot-sequence {
        display: none;
    }

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