/* ===================================================================
   CARTFIT.AI · motion.css
   scroll-reveal choreography — gated twice:
   1. html.has-motion  (added by scripts/motion.js, skipped if JS off)
   2. prefers-reduced-motion: no-preference
   so print / export / reduced-motion always see the final state.
   load order: after section styles, before responsive.css
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {

  :root { --mo-ease: cubic-bezier(0.16, 1, 0.3, 1); }

  /* ── hidden state (before section enters view) ─────────────── */
  .has-motion .screen :is(
    .d-head,
    .hero__eyebrow, .hero__brand, .hero__h, .hero__cta,
    .d-eyebrow, .d-name, .d-en, .d-jp, .d-desc, .d-frame, .spec__row,
    .co-eyebrow, .co-en, .co-facts, .co-graphic,
    .tm-photo, .tm-body, .tm-footer,
    .ac-meta, .ac-title-block, .ac-counter, .ac-row, .ac-foot,
    .nw-item, .nw-foot,
    .ct-label, .ct-address, .ct-mail, .ct-topics, .ct-foot
  ) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--mo-ease), transform 0.8s var(--mo-ease);
  }

  /* ── visible state ─────────────────────────────────────────── */
  .has-motion .screen.is-inview :is(
    .d-head,
    .hero__eyebrow, .hero__brand, .hero__h, .hero__cta,
    .d-eyebrow, .d-name, .d-en, .d-jp, .d-desc, .d-frame, .spec__row,
    .co-eyebrow, .co-en, .co-facts, .co-graphic,
    .tm-photo, .tm-body, .tm-footer,
    .ac-meta, .ac-title-block, .ac-counter, .ac-row, .ac-foot,
    .nw-item, .nw-foot,
    .ct-label, .ct-address, .ct-mail, .ct-topics, .ct-foot
  ) {
    opacity: 1;
    transform: none;
  }

  /* ── section-title rule draws in ───────────────────────────── */
  .has-motion .d-title__rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--mo-ease);
  }
  .has-motion .screen.is-inview .d-title__rule {
    transform: scaleX(1);
    transition-delay: 0.35s;
  }

  /* ── hero media: fade only (video) ─────────────────────────── */
  .has-motion .hero-media {
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  .has-motion .screen.is-inview .hero-media {
    opacity: 1;
    transition-delay: 0.15s;
  }

  /* ── contact ghost: slow fade ──────────────────────────────── */
  .has-motion .ct-ghost {
    opacity: 0;
    transition: opacity 1.6s ease;
  }
  .has-motion .screen.is-inview .ct-ghost {
    opacity: 1;
    transition-delay: 0.3s;
  }

  /* ── stagger map (delays apply entering only) ──────────────── */
  .has-motion .screen.is-inview .d-head        { transition-delay: 0.05s; }

  /* 01 hero */
  .has-motion .screen.is-inview .hero__eyebrow { transition-delay: 0.10s; }
  .has-motion .screen.is-inview .hero__brand   { transition-delay: 0.20s; }
  .has-motion .screen.is-inview .hero__h       { transition-delay: 0.32s; }
  .has-motion .screen.is-inview .hero__cta     { transition-delay: 0.45s; }

  /* 02 product */
  .has-motion .screen.is-inview .d-eyebrow     { transition-delay: 0.12s; }
  .has-motion .screen.is-inview .d-name        { transition-delay: 0.20s; }
  .has-motion .screen.is-inview .d-en          { transition-delay: 0.28s; }
  .has-motion .screen.is-inview .d-jp          { transition-delay: 0.34s; }
  .has-motion .screen.is-inview .d-desc        { transition-delay: 0.40s; }
  .has-motion .screen.is-inview .d-frame       { transition-delay: 0.25s; }
  .has-motion .screen.is-inview .spec__row:nth-child(1) { transition-delay: 0.32s; }
  .has-motion .screen.is-inview .spec__row:nth-child(2) { transition-delay: 0.37s; }
  .has-motion .screen.is-inview .spec__row:nth-child(3) { transition-delay: 0.42s; }
  .has-motion .screen.is-inview .spec__row:nth-child(4) { transition-delay: 0.47s; }
  .has-motion .screen.is-inview .spec__row:nth-child(5) { transition-delay: 0.52s; }
  .has-motion .screen.is-inview .spec__row:nth-child(6) { transition-delay: 0.57s; }

  /* 03 company (statement lines handled by company.js decode) */
  .has-motion .screen.is-inview .co-eyebrow    { transition-delay: 0.12s; }
  .has-motion .screen.is-inview .co-en         { transition-delay: 0.30s; }
  .has-motion .screen.is-inview .co-facts      { transition-delay: 0.40s; }
  .has-motion .screen.is-inview .co-graphic    { transition-delay: 0.30s; }

  /* 04 founder */
  .has-motion .screen.is-inview .tm-photo      { transition-delay: 0.15s; }
  .has-motion .screen.is-inview .tm-body       { transition-delay: 0.30s; }
  .has-motion .screen.is-inview .tm-footer     { transition-delay: 0.45s; }

  /* 05 achievements */
  .has-motion .screen.is-inview .ac-meta       { transition-delay: 0.05s; }
  .has-motion .screen.is-inview .ac-title-block{ transition-delay: 0.12s; }
  .has-motion .screen.is-inview .ac-counter:nth-child(1) { transition-delay: 0.25s; }
  .has-motion .screen.is-inview .ac-counter:nth-child(2) { transition-delay: 0.33s; }
  .has-motion .screen.is-inview .ac-counter:nth-child(3) { transition-delay: 0.41s; }
  .has-motion .screen.is-inview .ac-row:nth-child(1) { transition-delay: 0.45s; }
  .has-motion .screen.is-inview .ac-row:nth-child(2) { transition-delay: 0.52s; }
  .has-motion .screen.is-inview .ac-row:nth-child(3) { transition-delay: 0.59s; }
  .has-motion .screen.is-inview .ac-foot       { transition-delay: 0.65s; }

  /* 06 news */
  .has-motion .screen.is-inview .nw-item:nth-child(1) { transition-delay: 0.15s; }
  .has-motion .screen.is-inview .nw-item:nth-child(2) { transition-delay: 0.25s; }
  .has-motion .screen.is-inview .nw-item:nth-child(3) { transition-delay: 0.35s; }
  .has-motion .screen.is-inview .nw-item:nth-child(4) { transition-delay: 0.45s; }
  .has-motion .screen.is-inview .nw-foot       { transition-delay: 0.55s; }

  /* 07 contact */
  .has-motion .screen.is-inview .ct-label      { transition-delay: 0.10s; }
  .has-motion .screen.is-inview .ct-address    { transition-delay: 0.20s; }
  .has-motion .screen.is-inview .ct-mail       { transition-delay: 0.30s; }
  .has-motion .screen.is-inview .ct-topics     { transition-delay: 0.40s; }
  .has-motion .screen.is-inview .ct-foot       { transition-delay: 0.50s; }
}

/* keyboard focus — visible on all interactive chrome */
a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}