/* Motion tokens */
:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-soft: cubic-bezier(0.33, 1, 0.44, 1);
    --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
    --dur-fast: 0.4s;
    --dur-med: 0.65s;
    --dur-slow: 0.9s;
}

/* Scroll / load reveals */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--dur-med) var(--ease-out),
        transform var(--dur-med) var(--ease-out);
    will-change: opacity, transform;
}

.reveal--fade {
    transform: none;
}

.reveal--scale {
    transform: scale(0.96) translateY(12px);
}

.reveal--right {
    transform: translateX(28px);
}

.reveal--left {
    transform: translateX(-28px);
}

.reveal.is-inview {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Smoother load / scroll reveals on touch devices */
body.is-touch .reveal {
    transform: translate3d(0, 12px, 0);
    transition-duration: 0.52s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
}

body.is-touch .reveal--scale {
    transform: scale(0.98) translate3d(0, 10px, 0);
}

body.is-touch .reveal--right,
body.is-touch .reveal--left {
    transform: translate3d(0, 12px, 0);
}

body.is-touch .reveal--right.reveal--scale,
body.is-touch .reveal--left.reveal--scale {
    transform: scale(0.98) translate3d(0, 10px, 0);
}

body.is-touch .reveal.is-inview {
    transform: none;
}

body.is-touch .reveal-group > .reveal:nth-child(2) {
    transition-delay: 55ms;
}

body.is-touch .reveal-group > .reveal:nth-child(3) {
    transition-delay: 110ms;
}

body.is-touch .reveal-group > .reveal:nth-child(4) {
    transition-delay: 165ms;
}

body.is-touch .reveal-group > .reveal:nth-child(5) {
    transition-delay: 220ms;
}

body.is-touch .reveal-group > .reveal:nth-child(6) {
    transition-delay: 275ms;
}

body.is-touch.is-loaded .hero-media .hero-video {
    transition-duration: 1s;
}

body.is-touch .reveal--hero-line {
    filter: none;
    transform: translate3d(0, 18px, 0) scale(0.99);
}

.reveal-group > .reveal:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-group > .reveal:nth-child(2) {
    transition-delay: 90ms;
}

.reveal-group > .reveal:nth-child(3) {
    transition-delay: 180ms;
}

.reveal-group > .reveal:nth-child(4) {
    transition-delay: 270ms;
}

.reveal-group > .reveal:nth-child(5) {
    transition-delay: 360ms;
}

.reveal-group > .reveal:nth-child(6) {
    transition-delay: 450ms;
}

/* --- Initial load sequence --- */
.header {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
    transition:
        opacity 0.55s var(--ease-out),
        transform 0.6s var(--ease-out),
        padding var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

body.is-intro .header {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hero-media {
    opacity: 0;
    transition: opacity 1.1s var(--ease-out) 0.08s;
}

body.is-loaded .hero-media {
    opacity: 1;
}

.hero::after {
    opacity: 0;
    transition: opacity 1.25s var(--ease-out) 0.05s;
}

body.is-loaded .hero::after {
    opacity: 1;
}

.hero-media .hero-video {
    transform: scale(1.08);
    transition: transform 1.8s var(--ease-out) 0.12s;
}

body.is-loaded .hero-media .hero-video {
    transform: scale(1);
}

/* Hero content entrance */
.reveal--hero-line {
    display: block;
    transform: translate3d(0, 32px, 0) scale(0.98);
    filter: blur(10px);
    transition:
        opacity 0.85s var(--ease-out),
        transform 0.9s var(--ease-spring),
        filter 0.75s var(--ease-out);
}

body.is-loaded .hero .reveal.is-inview {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

body.is-loaded .hero-card.reveal.is-inview {
    transition: none;
    animation: heroCardIn 1s var(--ease-out) both;
}

body.is-loaded .hero-actions:not(.is-inview) .btn {
    opacity: 0;
}

@keyframes heroCardIn {
    from {
        opacity: 0;
        transform: scale(0.9) translate3d(0, 36px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.is-loaded .hero-card.is-inview .hero-badge {
    animation: heroBadgePop 0.55s var(--ease-spring) 0.45s both;
}

@keyframes heroBadgePop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.is-loaded .hero-actions.reveal.is-inview .btn {
    animation: heroBtnIn 0.65s var(--ease-out) both;
}

body.is-loaded .hero-actions.reveal.is-inview .btn:nth-child(1) {
    animation-delay: 0.08s;
}

body.is-loaded .hero-actions.reveal.is-inview .btn:nth-child(2) {
    animation-delay: 0.16s;
}

@keyframes heroBtnIn {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Info strip cascade after hero */
.info-strip .reveal {
    transition-duration: 0.55s;
    transition-timing-function: var(--ease-out);
}

body.is-hero-ready .info-strip .reveal.is-inview {
    opacity: 1;
    transform: none;
}

.header.is-scrolled {
    padding-block: 0.72rem;
    background: rgba(14, 17, 24, 0.96);
    box-shadow:
        0 1px 0 rgba(255, 253, 247, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Buttons & interactive polish */
.btn {
    transition:
        background var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.nav .order-link {
    transition:
        background var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.nav .order-link:hover {
    box-shadow: 0 8px 24px rgba(199, 49, 66, 0.4);
}

/* Cards */
.menu-board-card,
.contact-info-card,
.about-card,
.testimonial-card,
.showcase-card {
    transition:
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.menu-board-card:hover,
.contact-info-card:hover,
.about-card:hover {
    transform: translateY(-4px);
}

.showcase-card img {
    transition: transform 0.5s var(--ease-out);
}

/* Section label flourish when revealed */
.section-heading.is-inview > span,
.contact-intro.is-inview > .section-label {
    animation: labelIn var(--dur-med) var(--ease-out) both;
}

@keyframes labelIn {
    from {
        opacity: 0;
        letter-spacing: 0.14em;
    }

    to {
        opacity: 1;
        letter-spacing: 0.06em;
    }
}

.section-heading.is-inview > h2 {
    animation: headingIn var(--dur-slow) var(--ease-out) 0.08s both;
}

@keyframes headingIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Info strip cells */
.info-strip-inner > div {
    transition:
        transform var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.info-strip-inner > div:hover {
    transform: translateY(-2px);
}

/* Toast */
.toast {
    transform: translateY(12px) scale(0.98);
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.toast.show {
    transform: translateY(0) scale(1);
}

/* Footer */
.footer__social-btn {
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.footer__social-btn:hover {
    transform: translateY(-2px);
}