/* peak: page-wide motion (motion.js). Transform / opacity / clip-path only. Everything here is either
   decoration that runs while in view, or a state JS adds; without JS or with reduced motion the page is static. */

/* ---------- headings split by word (never by letter: Arabic stays joined) ---------- */
.m-w { display: inline-block; vertical-align: top; overflow: clip; padding-block: .08em .2em; margin-block: -.08em -.2em; padding-inline: .04em; margin-inline: -.04em; }
.m-wi { display: inline-block; will-change: transform; }
.m-split-done .m-wi { will-change: auto; }
/* the footer title's last word gets a hand-drawn underline that draws in (clip-path) */
.m-w--hl { position: relative; }
.m-w--hl::after {
  content: ""; position: absolute; inset-inline: .02em; bottom: .02em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13C40 5 80 4 118 8s58 6 79-2' fill='none' stroke='%232B2B2E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
}
[dir=rtl] .m-w--hl::after { transform: scaleX(-1); } /* mirrored, so it still draws from the reading start */
.m-w--hl.is-drawn::after { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); }

/* ---------- wavy band edges: drift sideways while on screen (speed from js/motion.js), swell up as they arrive ----------
   The strip is one 120 px tile wider than the band and moves exactly one tile, so the loop is seamless.
   It overhangs on the side that never makes the page scroll (left in LTR, right in RTL). */
@media (prefers-reduced-motion: no-preference) {
  .wave-next::after, .visit::before { inset-inline: auto; left: -120px; right: 0; transform-origin: 50% 100%; }
  [dir=rtl] .wave-next::after, [dir=rtl] .visit::before { left: 0; right: -120px; }
  /* the drift is a CSS animation (runs on the compositor); js/motion.js only tunes its playbackRate:
     calm while the edge is mid-screen, faster while you scroll past */
  .m-wave.wave-next::after, .m-wave.visit::before { animation: m-drift 7s linear infinite, m-swell 1.3s var(--spring) both; }
  [dir=rtl] .m-wave.wave-next::after, [dir=rtl] .m-wave.visit::before { animation-name: m-drift-rtl, m-swell; }
}
@keyframes m-drift { to { translate: 120px 0; } }
@keyframes m-drift-rtl { to { translate: -120px 0; } }
@keyframes m-swell { from { scale: 1 .15; } }

/* ---------- doodles: idle bob / wiggle after they draw in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .m-bob { animation: m-bob 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
  .m-bob--b { animation-duration: 3.8s; animation-delay: -1.4s; }
  @keyframes m-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-5deg); } 60% { transform: translateY(1px) rotate(4deg); } }
}

/* ---------- press ripple (pointer-down), on the big action buttons ---------- */
.vact, .channel__cta, .social, .foot__top, .foot__link, .foot__love { position: relative; overflow: hidden; isolation: isolate; }
.m-ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: 0; transform: scale(0);
  animation: m-ripple .65s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes m-ripple { 0% { transform: scale(0); opacity: .28; } 100% { transform: scale(1); opacity: 0; } }

/* programmatic focus after an anchor scroll should not paint a ring around a whole section */
[data-m-focus]:focus { outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .m-wi { will-change: auto; }
  .m-w--hl::after { clip-path: none; }
}

/* ---------- section kickers (Khalid 2026-10-27: "make this part animate premiumly", and every label like it):
   the pink dot sends out a soft ping, and a slow light sweeps across the words. Text colour stays each kicker's own. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kicker::before, .menu__kicker::before, .tunnel__kicker::before, .visit__kicker::before, .crumble__dot { animation: m-ping 2.8s cubic-bezier(.2, .7, .3, 1) infinite; }
  .kicker, .menu__kicker, .tunnel__kicker, .visit__kicker, .foot__kicker, .crumble__kicker > span:last-child {
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .85) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat, currentColor;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: m-shine 5.5s cubic-bezier(.45, 0, .2, 1) infinite;
  }
  .menu__kicker, .space .kicker { animation-delay: -1.8s; }
  .visit__kicker, .foot__kicker { animation-delay: -3.4s; }
}
@keyframes m-ping { 0% { box-shadow: 0 0 0 0 rgb(229 131 170 / .65); } 70%, 100% { box-shadow: 0 0 0 9px rgb(229 131 170 / 0); } }
@keyframes m-shine { 0%, 35% { background-position: 160% 0, 0 0; } 75%, 100% { background-position: -60% 0, 0 0; } }

/* ---------- hearts beat, smiles bob: tiny, slow, out of step (uses scale / translate, so set tilts and GSAP transforms stay) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .crumble__doodle--heart, .foot__love-heart, .tape__sep--heart svg, .foot__pill-ico--s, .visit__heart { animation: m-beat 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 60%; }
  .tape__sep--heart:nth-of-type(4n+3) svg { animation-delay: -1.3s; }
  .crumble__doodle--smile, .doodle--smile, .tape__sep--smile svg { animation: m-giggle 3.6s ease-in-out infinite; }
  .foot__pill-ico--e { animation: m-sway 3.6s ease-in-out infinite; } /* it is centred with translate, so it sways instead */
  .doodle--smile { animation-delay: -1.1s; }
}
@keyframes m-beat { 0%, 55%, 100% { scale: 1; } 10% { scale: 1.12; } 20% { scale: .96; } 30% { scale: 1.07; } }
@keyframes m-sway { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }
@keyframes m-giggle { 0%, 100% { translate: 0 0; scale: 1; } 40% { translate: 0 -3px; scale: 1.04; } 70% { translate: 0 1px; scale: .99; } }

/* ---------- touch devices (Khalid 2026-10-27, "on mobile some things are laggy"): drop the paint-heavy extras a phone pays for
   every frame. Same look, minus a glass blur over the playing hero video, filter shadows on moving / morphing layers,
   and the footer's flowing-line repaint (the lines stay, still). ---------- */
@media (hover: none) {
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(233 234 232 / .93); }
  .logo__art, .logo__mini, .space__door-pop { filter: none; }
  .space__chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .foot__lines .fl { animation: none; }
  :root[data-theme="dark"] .card { background: rgb(25 22 26 / .9); }
}