/* ============================================================
   A7mad.me · Motion
   Restraint rules from 04_Design/Responsive and Motion.md:
   short reveals, slow marquee, no loops on the character,
   no scroll-jacking. Reduced motion strips transforms.
   ============================================================ */

/* Entry rise for hero content (once, on load) */
.rise {
  animation: riseIn 0.9s var(--ease-out) both;
}

.rise--d1 { animation-delay: 0.05s; }
.rise--d2 { animation-delay: 0.15s; }
.rise--d3 { animation-delay: 0.25s; }
.rise--d4 { animation-delay: 0.35s; }

@keyframes riseIn {
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}

/* Scroll reveals (IntersectionObserver adds .in) */
.rv {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity var(--t-reveal) var(--ease-soft),
    transform var(--t-reveal) var(--ease-soft);
  will-change: opacity, transform;
}

.rv--start { transform: translateX(48px); }   /* from inline-start on RTL */
.rv--end { transform: translateX(-48px); }
.rv--sc { transform: scale(0.94); }

.rv.in {
  opacity: 1;
  transform: none;
  /* D-048: once revealed, release the hint. Dozens of permanent
     will-change layers pressure mobile GPU memory and Safari
     answers by dropping/reflashing layers mid-scroll. Animating
     transforms get their compositor layer automatically anyway. */
  will-change: auto;
}

/* Hero scene: one gentle float on the bubble group, very slow */
.float-soft {
  animation: floatSoft 7s ease-in-out infinite;
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================================================
   Reduced motion: content always visible, loops stop
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rise,
  .intro__wordmark {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* D-024: no walk under reduced motion; static pose, bubble shown */
  .intro__walker {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .intro__walker .char-sprite--intro,
  .scene-glow,
  .ui-plane,
  .laptop__screen::after {
    animation: none !important;
  }

  .bubble--intro {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .rv,
  .rv--start,
  .rv--end,
  .rv--sc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .float-soft,
  .tag--live i,
  .bubble__dot,
  .nav__links.is-open {
    animation: none !important;
  }

  /* D-033: no typewriter under reduced motion - full text, short fade */
  .speech--armed .bubble--live {
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease;
  }

  .marquee__track {
    animation: none !important;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }

  .marquee__seq[aria-hidden] {
    display: none;
  }

  .intro.done {
    animation: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
  }

  .cycler__slide {
    filter: none;
    transition: opacity 0.2s ease;
    transform: none;
  }

  .btn--primary:hover,
  .btn--ghost:hover,
  .stage:hover .stage__scene,
  .chip:hover {
    transform: none;
  }
}