/* ==========================================================================
   RESMA V2 — motion system
   CSS keyframes/transitions driven by IntersectionObserver (js/animations.js).
   Everything is progressive: without JS the page is simply visible, and all
   motion is disabled under prefers-reduced-motion (bottom of file).
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lineRedraw {
  0% { transform: scaleX(1); transform-origin: right; }
  45% { transform: scaleX(0); transform-origin: right; }
  46% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
@keyframes scrollCue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes lbIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-26px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroZoom {
  from { transform: scale(1.14); }
  to { transform: scale(1.02); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 12px 30px -14px rgba(251, 118, 92, 0.7), 0 0 0 0 rgba(251, 118, 92, 0.35); }
  50% { box-shadow: 0 12px 30px -14px rgba(251, 118, 92, 0.7), 0 0 0 10px rgba(251, 118, 92, 0); }
}

/* ---- Page transition curtain: wipes away on arrival, wipes in on leaving */
@keyframes curtainOut {
  0% { clip-path: inset(0 0 0 0); visibility: visible; }
  99% { visibility: visible; }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}
@keyframes curtainIn {
  0% { clip-path: inset(100% 0 0 0); visibility: visible; }
  100% { clip-path: inset(0 0 0 0); visibility: visible; }
}
@keyframes curtainLogo {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.curtain {
  animation: curtainOut 0.85s 0.3s var(--ease-io) both;
}
.curtain img {
  animation: curtainLogo 0.5s var(--ease) both;
}
.curtain.is-leaving {
  animation: curtainIn 0.45s var(--ease-io) both;
}
.curtain.is-leaving img {
  animation: curtainLogo 0.4s 0.1s var(--ease) both;
}

/* ---- Entrance (CSS-only, so it plays before any script loads) */
.header-bar {
  animation: dropIn 1s 0.55s var(--ease) both;
}
.hero__media img,
.page-hero__bg img {
  animation: heroZoom 2.8s 0.2s var(--ease) both;
}
.hero__copy > *,
.page-hero .container > * {
  animation: riseIn 1.1s var(--ease) both;
}
.hero__copy > :nth-child(1), .page-hero .container > :nth-child(1) { animation-delay: 0.6s; }
.hero__copy > :nth-child(2), .page-hero .container > :nth-child(2) { animation-delay: 0.7s; }
.hero__copy > :nth-child(3), .page-hero .container > :nth-child(3) { animation-delay: 0.85s; }
.hero__copy > :nth-child(4) { animation-delay: 1s; }
.hero__card { animation: riseIn 1.2s 1.05s var(--ease) both; }
.hero__scroll { animation: fadeIn 1s 1.6s both; }
.hero-stats .stat { animation: none; }
.hero__cta .btn--solid, .hero__cta .btn:first-child { animation: glowPulse 3.2s 2.4s ease-in-out 2; }
/* hero heading words are animated by the splitter instead of a block rise */
.js .hero__copy > h1,
.js .page-hero h1 {
  animation: none;
}

/* ---- Split text: words rise out of a mask */
.js [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.04em 0.06em 0.16em;
  margin: -0.04em -0.06em -0.16em;
}
.js [data-split] .wi {
  display: inline-block;
  transform: translateY(115%) rotate(2deg);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0s));
}
.js [data-split].is-in .wi {
  transform: none;
}

/* ---- Scroll reveal (only hidden while html.js is set) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-48px); }
.js [data-reveal="right"] { transform: translateX(48px); }
.js [data-reveal="scale"] { transform: scale(0.93); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* image reveal: clip wipe + settling zoom */
.js [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 98% 0 round var(--r-2));
  transition: clip-path 1.4s var(--ease-io);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="mask"] img {
  transform: scale(1.22);
  transition: transform 2s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--r-2)); }
.js [data-reveal="mask"].is-in img { transform: scale(1); }
.js .gallery__item[data-reveal="mask"]:hover img { transform: scale(1.07); }

/* staggered children */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), border-color 0.4s, box-shadow 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}
/* once revealed, hover transforms must respond instantly */
.js [data-stagger].is-in > .prog-card:hover,
.js [data-stagger].is-in > .tile:hover,
.js [data-stagger].is-in > .bento__item:hover,
.js [data-stagger].is-in > .person:hover { transition-delay: 0s; }

[data-parallax] { will-change: transform; }

/* ---- Reduced motion: no movement, content always visible */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .curtain { display: none; }
  .js [data-reveal],
  .js [data-stagger] > *,
  .js [data-split] .wi { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal="mask"] img { transform: none !important; }
  .timeline::before { transform: scaleX(1); }
  .mirror { -webkit-box-reflect: unset; margin-bottom: 0; }
}

/* split headings stay hidden only until the splitter has run; failsafe reveal after 1.4s */
@keyframes forceShow { to { visibility: visible; } }
.js [data-split]:not(.is-split) {
  visibility: hidden;
  animation: forceShow 0s 1.4s forwards;
}