/* Garoon motion: foundation CSS (tokens, base classes). Area-specific rules go to motion-<area>.css, not here.
 * Spec: docs/motion/SPEC.md. Start states apply only under html.js-motion (no JS => everything is visible). */

:root {
  /* easing: 5 language tokens + cover/label/morph family (same values as GM.ease in core.js) */
  --ease-text: cubic-bezier(.35, .15, .35, 1);
  --ease-ui: cubic-bezier(.35, 0, 0, 1);
  --ease-move: cubic-bezier(.645, .045, .355, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-cover-in: cubic-bezier(.55, 0, .15, 1);
  --ease-cover-out: cubic-bezier(.65, 0, .45, 1);
  --ease-label: cubic-bezier(.4, 0, .2, 1);
  --ease-morph: cubic-bezier(.65, 0, .35, 1);
  /* duration scale */
  --dur-micro: 167ms;
  --dur-base: 300ms;
  --dur-med: 600ms;
  --dur-long: 1000ms;
  --dur-xl: 1400ms;
  --stagger-line: .06s;
  --stagger-item: .025s;
  /* body.style.zoom mirrored by core (1 when no zoom) */
  --zoom: 1;
  --curtain: #e7e4e0;
}

html { scroll-behavior: auto !important; }
.o-hidden { overflow: hidden; }
html.gm-locked { overflow: hidden; }
html.pl-skip body.o-hidden { overflow: visible; }

/* ---------- line masks (GM.splitLines / GM.revealLines) ---------- */
.gm-line { display: block; overflow: hidden; padding: .1em 0; margin: -.1em 0; }
.gm-line__in { display: block; will-change: transform; }
html.js-motion [data-m="lines"]:not(.gm-ready) { visibility: hidden; }

/* ---------- media clip reveals (GM.revealClip): start state before JS sets it ---------- */
html.js-motion [data-m="clip"]:not(.gm-in) { clip-path: inset(100% 0 0 0); }
html.js-motion [data-m="fade"]:not(.gm-in),
html.js-motion [data-m="fade-group"]:not(.gm-in) > * { opacity: 0; }
html.js-motion [data-m="draw"] { transform-origin: left center; }
.gm-rm [data-m] { opacity: 1 !important; clip-path: none !important; visibility: visible !important; transform: none !important; }

/* ---------- preloader (base; preloader.js / motion-preloader.css own the look) ---------- */
#preloader {
  margin: 0; display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  background-color: #000; overflow: hidden; z-index: 99999;
  zoom: calc(1 / var(--zoom, 1));
}
#preloader .loader { display: flex; justify-content: center; align-items: center; }
#preloader .symbol-container { position: relative; width: 120px; height: 120px; }
#preloader .symbol { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#preloader .symbol.visible { opacity: 1; }
#preloader .symbol path { fill: none; stroke: #9c958a; stroke-width: 5; }
html.pl-skip #preloader { display: none !important; }

/* ---------- page-transition curtain (base; transitions.js / motion-transitions.css own the motion) ---------- */
#gm-curtain {
  position: fixed; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden;
  background: var(--curtain); z-index: 99998; pointer-events: none;
  zoom: calc(1 / var(--zoom, 1));
}
#gm-curtain .gm-curtain__label {
  position: absolute; left: 0; right: 0; bottom: 4vh; padding: 0 3vw;
  font: 500 clamp(28px, 6vw, 96px)/1 'Basis Grotesque Arabic Pro', sans-serif; color: #3c3c3c; white-space: nowrap;
}
html.pt-cover #gm-curtain { height: 100vh; height: 100lvh; }
html.pt-cover #gm-curtain .gm-curtain__label::before { content: var(--pt-label, ''); }
.gm-rm #gm-curtain, .gm-rm #preloader { display: none !important; }

/* ---------- reduced motion: no transitions/animations from motion layer ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-m] { opacity: 1 !important; clip-path: none !important; visibility: visible !important; transform: none !important; }
}

/* ---------- [regression fix] footer keeps the original 3x2 block; SEO "Services" column sits as a 4th column in row 2 (no extra row, same height) ---------- */
@media (min-width: 501px) {
  footer .footer-info-items { display: grid; grid-template-columns: repeat(4, 220px); gap: 50px 90px; max-width: none; width: auto; align-content: start; }
  footer .footer-info-items .footer_menu:nth-child(4) { grid-column: 1; grid-row: 2; }
  footer .footer-info-items .footer_menu:nth-child(5) { grid-column: 2; grid-row: 2; }
  footer .footer-info-items .footer_menu.footer_services { grid-column: 4; grid-row: 2; height: 0; overflow: visible; }
  footer .footer-info-items .footer_menu:nth-child(7) { grid-column: 3; grid-row: 2; }
}
@media (max-width: 500px) { footer .footer-info-items .footer_menu.footer_services { display: none; } }