/* =============================================================================
   Abkons wireframes — motion
   Language: mottmac.com (data/mottmac-effects.md) in Abkons colours/geometry.
   All hidden states are scoped to html.js so content is visible without JS,
   and everything is disabled under prefers-reduced-motion.

   HOOKS
   section[data-visibility="false"]   → main.js flips to "true" once when it enters the viewport
     [data-animate="title"]           → line wipe-up: translateY(100%) + slanted clip sweep, 2s easeOutCirc, 75ms stagger
     [data-animate="fade"]            → opacity 0→1, 1s ease-in-out (0.25s delay if the section has a title)
     [data-animate="fade-from-bottom"]→ opacity + translateY(10%), 1s ease-in-out; add style="--stagger:N" for N×80ms
   .reveal (any element, + style="--stagger:N") → brief's reveal: translateY(24px)→0, 650ms, N×80ms delay
   .media.lazy                         → picture fades in .75s and settles scale(1.05)→1 over 2s once loaded
   ========================================================================== */

/* ---- M1/M2 Title wipe-up -------------------------------------------------- */
.js [data-visibility] [data-animate="title"] {
  display: block;
  transform: translateY(100%);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path var(--dur-title) var(--ease-circ), transform var(--dur-title) var(--ease-circ);
}
.js [data-visibility="true"] [data-animate="title"] {
  transform: none;
  clip-path: polygon(-40% 0, 100% -50%, 100% 120%, -40% 120%);
}
.js [data-animate="title"] + [data-animate="title"] { transition-delay: 75ms; }
.js [data-animate="title"] + [data-animate="title"] + [data-animate="title"] { transition-delay: 150ms; }

/* ---- M3/M4 Fade + fade from bottom --------------------------------------- */
.js [data-visibility] [data-animate="fade"] { opacity: 0; transition: opacity 1s ease-in-out; transition-delay: calc(var(--stagger, 0) * var(--stagger-step)); }
.js [data-visibility] [data-animate="fade-from-bottom"] {
  opacity: 0; transform: translateY(10%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition-delay: calc(var(--stagger, 0) * var(--stagger-step));
}
.js [data-visibility="true"] [data-animate^="fade"] { opacity: 1; transform: none; }
.js [data-visibility]:has([data-animate="title"]) [data-animate="fade"] { transition-delay: calc(.25s + var(--stagger, 0) * var(--stagger-step)); }

/* ---- Brief reveal (.reveal) ----------------------------------------------- */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * var(--stagger-step));
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- M5 Lazy image fade + settle ------------------------------------------ */
.js .media.lazy picture, .js .media.lazy > img { opacity: 0; }
.js .media.lazy img { transform: scale(1.05); }
.media picture, .media > img { transition: opacity .75s ease-in-out; }
/* hero image: no fade (it is the LCP element); only the parallax transform moves it */

/* ---- Header hide on scroll down / slide back on scroll up (M8) ------------ */
.site-header.is-hidden { transform: translateY(calc(-100% - 2px)); transition: none; }
.site-header.is-hidden.has-menu-open, .site-header.is-hidden:focus-within { transform: none; }

/* ---- Mega menu columns fade up 100/200/300ms (M9) ------------------------- */
.js .mega:not([hidden]) .mega__col { animation: mega-col .5s ease-in-out both; }
.js .mega:not([hidden]) .mega__col:nth-child(1) { animation-delay: .1s; }
.js .mega:not([hidden]) .mega__col:nth-child(2) { animation-delay: .2s; }
.js .mega:not([hidden]) .mega__col:nth-child(3) { animation-delay: .3s; }
@keyframes mega-col { from { opacity: 0; transform: translateY(2.25rem); } to { opacity: 1; transform: none; } }

/* ---- Drawer: panel slide, items rise 100ms per item, rules grow ------------ */
.drawer .drawer__backdrop { opacity: 0; transition: opacity var(--dur-med) ease-in-out; }
.drawer .drawer__panel { transform: translateX(100%); transition: transform .45s var(--ease-out); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer .drawer__item { opacity: 0; transform: translateY(2.25rem); transition: opacity .45s ease-in-out, transform .45s ease-in-out; transition-delay: calc(var(--i, 0) * 100ms + 150ms); }
.drawer .drawer__item::after { transform: scaleX(0); transition: transform .75s ease-in-out; transition-delay: calc(var(--i, 0) * 100ms + 150ms); }
.drawer.is-open .drawer__item { opacity: 1; transform: none; }
.drawer.is-open .drawer__item::after { transform: scaleX(1); }
.drawer .drawer__meta { opacity: 0; transition: opacity .75s ease-out .9s; }
.drawer.is-open .drawer__meta { opacity: 1; }

/* ---- Hero play pulse + video placeholder drift ----------------------------- */
.hero__play::before {
  content: ""; position: absolute; inset: 14% 12% 14% 26%; background: rgba(255, 255, 255, .26);
  animation: play-pulse 2.8s var(--ease-out) infinite;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@keyframes play-pulse { 0% { transform: scale(.92); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
.hero__play[aria-pressed="true"]::before { animation: none; opacity: 0; }
.hero__video { animation: video-drift 14s ease-in-out infinite alternate; }
@keyframes video-drift { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }

/* ---- Reduced motion: show everything, stop loops ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-visibility] [data-animate], .js .reveal, .js .media.lazy picture, .js .media.lazy img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__media img { --parallax: 0px; }
  .hero__play::before { display: none; }
}