/* =========================================================================
 * motion.css — Keyframes + data-attribute hooks
 * Source: docs/ui/motion-vocabulary.md
 * JOICE.AI CO., LIMITED — joicettech.com
 *
 * EVERY animation is wrapped in `@media (prefers-reduced-motion: no-preference)`
 * with a reduced-motion fallback.
 * ========================================================================= */

/* Universal reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyframes --------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes split-word {
  from { opacity: 0; transform: translate3d(0, 110%, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes kinetic-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
@keyframes reveal-on-load {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* 1. fade-up ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
  }
  [data-reveal].is-revealed {
    animation: fade-up var(--t-slow) var(--e-out) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* 2. fade-up-stagger ----------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal-stagger] > * {
    opacity: 0;
    animation: fade-up var(--t-slow) var(--e-out) both;
  }
  [data-reveal-stagger].is-revealed > *:nth-child(1) { animation-delay: 0ms;   }
  [data-reveal-stagger].is-revealed > *:nth-child(2) { animation-delay: 80ms;  }
  [data-reveal-stagger].is-revealed > *:nth-child(3) { animation-delay: 160ms; }
  [data-reveal-stagger].is-revealed > *:nth-child(4) { animation-delay: 240ms; }
  [data-reveal-stagger].is-revealed > *:nth-child(5) { animation-delay: 320ms; }
  [data-reveal-stagger].is-revealed > *:nth-child(6) { animation-delay: 400ms; }
  [data-reveal-stagger].is-revealed > *:nth-child(n+7) { animation-delay: 480ms; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-stagger] > * { opacity: 1; transform: none; }
}

/* 3. split-text (hero H1 word-by-word) ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-split-text] > .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
  }
  [data-split-text] > .word > .inner {
    display: inline-block;
    transform: translate3d(0, 110%, 0);
    opacity: 0;
    will-change: transform, opacity;
  }
  [data-split-text].is-revealed > .word > .inner {
    animation: split-word var(--t-cine) var(--e-inout) both;
  }
  [data-split-text].is-revealed > .word:nth-child(1) > .inner { animation-delay: 80ms;  }
  [data-split-text].is-revealed > .word:nth-child(2) > .inner { animation-delay: 200ms; }
  [data-split-text].is-revealed > .word:nth-child(3) > .inner { animation-delay: 320ms; }
  [data-split-text].is-revealed > .word:nth-child(4) > .inner { animation-delay: 440ms; }
  [data-split-text].is-revealed > .word:nth-child(5) > .inner { animation-delay: 560ms; }
  [data-split-text].is-revealed > .word:nth-child(6) > .inner { animation-delay: 680ms; }
  [data-split-text].is-revealed > .word:nth-child(n+7) > .inner { animation-delay: 800ms; }
}
@media (prefers-reduced-motion: reduce) {
  [data-split-text] > .word > .inner { transform: none; opacity: 1; }
}

/* 4. marquee ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .c-marquee__track {
    animation: marquee var(--t-marquee) linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-marquee__track { animation: none; transform: none; }
}

/* 5. parallax ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-parallax] [data-depth="0"] { transform: translate3d(0, calc(var(--scroll-y) * 0.00px), 0); }
  [data-parallax] [data-depth="1"] { transform: translate3d(0, calc(var(--scroll-y) * -0.10px), 0); }
  [data-parallax] [data-depth="2"] { transform: translate3d(0, calc(var(--scroll-y) * -0.18px), 0); }
  [data-parallax] [data-depth] { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] [data-depth] { transform: none !important; }
}

/* 6. kinetic-type -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-kinetic] {
    overflow: hidden;
    height: 80vh;
  }
  [data-kinetic] .c-kinetic__track {
    animation: kinetic-drift 18s linear infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-kinetic] { height: auto; overflow: visible; }
  [data-kinetic] .c-kinetic__track { animation: none; transform: none; }
}

/* 7. magnetic ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-magnetic] {
    transform: translate3d(var(--mx, 0), var(--my, 0), 0);
    transition: transform var(--t-fast) var(--e-spring);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none; transition: none; }
}

/* 8. hover-lift (cards) -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .c-card,
  .c-news-card,
  .c-contact-card {
    transition: transform var(--t-base) var(--e-out),
                border-color var(--t-base) var(--e-out),
                box-shadow var(--t-base) var(--e-out);
  }
  .c-card:hover,
  .c-news-card:hover,
  .c-contact-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-champagne);
  }
  .c-news-card:hover .c-news-card__media img { transform: scale(1.04); }
  .c-news-card__media img { transition: transform 1.2s var(--e-out); }
}
@media (prefers-reduced-motion: reduce) {
  .c-card:hover, .c-news-card:hover, .c-contact-card:hover { transform: none; }
}

/* 10. mascot float ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .c-mascot img:hover,
  .c-mascot img:focus-visible {
    animation: mascot-float 1.4s var(--e-inout) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-mascot img:hover, .c-mascot img:focus-visible { animation: none; transform: none; }
}

/* 14. drawer ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .c-drawer,
  .c-drawer__scrim {
    transition: transform var(--t-base) var(--e-inout),
                opacity   var(--t-base) var(--e-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-drawer, .c-drawer__scrim { transition: none; }
}