/* ══════════════════════════════════════
   Keyframes
   ══════════════════════════════════════ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(2.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-3rem); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(3rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Lego: blocks fly from their corner and snap into place */
@keyframes legoTopLeft {
    0%   { opacity: 0; transform: translate(-4rem, -3rem) rotate(-8deg) scale(0.7); }
    70%  { opacity: 1; transform: translate(0.3rem, 0.2rem) rotate(1deg) scale(1.03); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes legoTopRight {
    0%   { opacity: 0; transform: translate(4rem, -3rem) rotate(8deg) scale(0.7); }
    70%  { opacity: 1; transform: translate(-0.3rem, 0.2rem) rotate(-1deg) scale(1.03); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes legoBottomLeft {
    0%   { opacity: 0; transform: translate(-4rem, 3rem) rotate(6deg) scale(0.7); }
    70%  { opacity: 1; transform: translate(0.3rem, -0.2rem) rotate(-1deg) scale(1.03); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes legoBottomRight {
    0%   { opacity: 0; transform: translate(4rem, 3rem) rotate(-6deg) scale(0.7); }
    70%  { opacity: 1; transform: translate(-0.3rem, -0.2rem) rotate(1deg) scale(1.03); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
    80%  { transform: scale(0.96) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes curtainReveal {
    from { clip-path: inset(0 50% 0 50%); opacity: 0; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ══════════════════════════════════════
   Default hidden state
   Elements start invisible; animation
   fires when the parent slide gets
   [data-anim="active"] via JS.
   ══════════════════════════════════════ */

/* --- Hero --- */
.js-main-swiper .hero__title,
.js-main-swiper .hero__text,
.js-main-swiper .hero__actions {
    opacity: 0;
}

/* --- Birth / Story (header is outside nested swiper) --- */
.js-main-swiper .story-stage__title,
.js-main-swiper .story-stage__intro,
.js-main-swiper .story-stage__nav {
    opacity: 0;
}

/* --- Birth / Story (cards inside nested swiper) --- */
.js-main-swiper .story-card__copy,
.js-main-swiper .story-card__media {
    opacity: 0;
}

/* --- Magic --- */
.js-main-swiper .magic-stage__eyebrow,
.js-main-swiper .magic-stage__title,
.js-main-swiper .magic-stage__text,
.js-main-swiper .magic-stage__actions,
.js-main-swiper .magic-stage__figure,
.js-main-swiper .magic-card {
    opacity: 0;
}

/* --- Footer --- */
.js-main-swiper .footer-site__brand-col,
.js-main-swiper .footer-site__menu-col,
.js-main-swiper .footer-site__contact-col,
.js-main-swiper .footer-site__bottom,
.js-main-swiper .footer_sitetomosha {
    opacity: 0;
}

/* ══════════════════════════════════════
   HERO (slide 0 — active on load)
   ══════════════════════════════════════ */

[data-anim="active"] .hero__title {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

[data-anim="active"] .hero__text {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

[data-anim="active"] .hero__actions {
    animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* ══════════════════════════════════════
   BIRTH / STORY (slide 1)
   Header area: animates when main slide
   is active. Cards: animate per inner
   slide via nested swiper class.
   ══════════════════════════════════════ */

[data-anim="active"] .story-stage__title {
    animation: slideLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

[data-anim="active"] .story-stage__intro {
    animation: slideRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

[data-anim="active"] .story-stage__nav {
    animation: fadeIn 0.6s ease 0.35s forwards;
}

/* Inner story slides — trigger per inner active slide */
.story-slide.swiper-slide-active .story-stage__head {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.story-slide.swiper-slide-active .story-card__text {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.story-slide.swiper-slide-active .story-card__copy {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.story-slide.swiper-slide-active .story-card__media {
    animation: curtainReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* ══════════════════════════════════════
   MAGIC (slide 2) — lego build cards
   ══════════════════════════════════════ */

[data-anim="active"] .magic-stage__eyebrow {
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

[data-anim="active"] .magic-stage__title {
    animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

[data-anim="active"] .magic-stage__text {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

[data-anim="active"] .magic-stage__actions {
    animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

[data-anim="active"] .magic-stage__figure {
    animation: popIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* Lego cards fly from their respective corners */
[data-anim="active"] .magic-card--top-left {
    animation: legoTopLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

[data-anim="active"] .magic-card--top-right {
    animation: legoTopRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards;
}

[data-anim="active"] .magic-card--bottom-left {
    animation: legoBottomLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

[data-anim="active"] .magic-card--bottom-right {
    animation: legoBottomRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
}

/* Fallback: if ACF positions aren't set, stagger by nth-child */
[data-anim="active"] .magic-card:nth-child(1):not([class*="magic-card--"]) {
    animation: legoTopLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
[data-anim="active"] .magic-card:nth-child(2):not([class*="magic-card--"]) {
    animation: legoTopRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards;
}
[data-anim="active"] .magic-card:nth-child(3):not([class*="magic-card--"]) {
    animation: legoBottomLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}
[data-anim="active"] .magic-card:nth-child(4):not([class*="magic-card--"]) {
    animation: legoBottomRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
}

/* ══════════════════════════════════════
   FOOTER (slide 3)
   ══════════════════════════════════════ */

[data-anim="active"] .footer-site__brand-col {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

[data-anim="active"] .footer-site__menu-col {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

[data-anim="active"] .footer-site__contact-col {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

[data-anim="active"] .footer-site__bottom {
    animation: fadeIn 0.6s ease 0.6s forwards;
}

[data-anim="active"] .footer_sitetomosha {
    animation: scaleIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* ══════════════════════════════════════
   Reduce motion
   ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .js-main-swiper [data-anim] * {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    .js-main-swiper .story-card__copy,
    .js-main-swiper .story-card__media {
        opacity: 1 !important;
        animation: none !important;
    }
}
/* =========================================
   MOBILE FALLBACK: swipers disabled
   ========================================= */

@media (max-width: 767.98px) {
    .js-main-swiper .hero__title,
    .js-main-swiper .hero__text,
    .js-main-swiper .hero__actions,

    .js-main-swiper .story-stage__title,
    .js-main-swiper .story-stage__intro,
    .js-main-swiper .story-stage__nav,
    .js-main-swiper .story-card__copy,
    .js-main-swiper .story-card__media,

    .js-main-swiper .magic-stage__eyebrow,
    .js-main-swiper .magic-stage__title,
    .js-main-swiper .magic-stage__text,
    .js-main-swiper .magic-stage__actions,
    .js-main-swiper .magic-stage__figure,
    .js-main-swiper .magic-card,

    .js-main-swiper .footer-site__brand-col,
    .js-main-swiper .footer-site__menu-col,
    .js-main-swiper .footer-site__contact-col,
    .js-main-swiper .footer-site__bottom,
    .js-main-swiper .footer_sitetomosha {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
    }

    .story-slide .story-stage__head,
    .story-slide .story-card__text,
    .story-slide .story-card__copy,
    .story-slide .story-card__media {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
    }

    .story-stage__nav {
        display: none !important;
    }
}