/* =====================================================================
   Sandstone Arabian Contracting — motion layer
   ---------------------------------------------------------------------
   Additive only. style.css (the approved design) is untouched; delete this
   file and motion.js and the site returns to exactly how it was.

   Language: precise, decelerating, restrained.
     • one easing curve (--m-ease) for almost everything: a fast start that settles
       like a lowered plumb line; --m-ease-io is the carousel's existing curve
     • four durations, three travel distances, one stagger step
     • gold (--gold) is the only accent colour used
   Everything below sits inside prefers-reduced-motion: no-preference, so
   visitors who ask for less motion get the original site, unchanged.
   ===================================================================== */

:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-ease-io: cubic-bezier(.65, 0, .25, 1);
  --m-fast: .18s;        /* colour / press feedback */
  --m-base: .32s;        /* hover, focus, small state changes */
  --m-slow: .7s;         /* content entrances */
  --m-hero: .95s;        /* hero entrance */
  --m-rise-sm: 8px;      /* menu items */
  --m-rise: 16px;        /* content entrances */
  --m-rise-lg: 28px;     /* hero entrance */
  --m-nudge: 4px;        /* arrow travel on hover */
  --m-stagger: 70ms;     /* delay between siblings that arrive together */
  --dir: 1;              /* flips to -1 in RTL so horizontal movement follows reading direction */
}
html[dir="rtl"] { --dir: -1; }

@media (prefers-reduced-motion: no-preference) {

  /* ——— keyframes ——— */
  @keyframes m-rise    { from { opacity: 0; transform: translateY(var(--m-rise)); } }
  @keyframes m-rise-lg { from { opacity: 0; transform: translateY(var(--m-rise-lg)); } }
  @keyframes m-rise-sm { from { opacity: 0; transform: translateY(var(--m-rise-sm)); } }
  @keyframes m-fade    { from { opacity: 0; } }
  @keyframes m-settle  { from { transform: scale(1.07); } }
  @keyframes m-veil    { from { opacity: .55; } }
  @keyframes m-draw    { from { transform: scaleX(0); } }
  @keyframes m-wipe     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes m-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes m-line {
    0%   { transform: translateX(calc(-100% * var(--dir))); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(0); opacity: 0; }
  }

  /* ——— 0. Existing scroll reveal: same behaviour, tuned curve + stagger ——— */
  .reveal { transform: translateY(var(--m-rise)); transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); }
  .reveal.is-in { transform: none; transition-delay: calc(var(--m-i, 0) * var(--m-stagger)); }
  .reveal.is-done { transition: none; }                       /* hand hover transitions back once settled */
  .card.reveal.is-done { transition: box-shadow var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }


  /* Entrances added by motion.js (only ever applied to content that starts below the fold) */
  .m-reveal { opacity: 0; transform: translateY(var(--m-rise)); transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); }
  .m-reveal.m-in { opacity: 1; transform: none; transition-delay: calc(var(--m-i, 0) * var(--m-stagger)); }


  /* ——— A. Hero: settle, veil, staggered rise (pure CSS, no hidden start state) ——— */
  .hero__media, .page-hero__media { overflow: hidden; }
  .hero__media > video, .hero__media > img, .page-hero__media > img { animation: m-settle 2.6s var(--m-ease) backwards; }
  .hero::before, .page-hero::before, .pd-hero::before { animation: m-veil 1.5s var(--m-ease) backwards; }

  .hero__inner > * { animation: m-rise-lg var(--m-hero) var(--m-ease) backwards; }
  .hero__inner > :nth-child(1) { animation-delay: .06s; }
  .hero__inner > :nth-child(2) { animation-delay: .14s; }
  .hero__inner > :nth-child(3) { animation-delay: .26s; }
  .hero__inner > :nth-child(4) { animation-delay: .38s; }
  .hero__inner > :nth-child(5) { animation-delay: .54s; }

  .page-hero__inner > *, .pd-hero__inner > * { animation: m-rise var(--m-hero) var(--m-ease) backwards; }
  .page-hero__inner > :nth-child(1), .pd-hero__inner > :nth-child(1) { animation-delay: .04s; }
  .page-hero__inner > :nth-child(2), .pd-hero__inner > :nth-child(2) { animation-delay: .12s; }
  .page-hero__inner > :nth-child(3) { animation-delay: .2s; }
  .page-hero__inner > :nth-child(4) { animation-delay: .3s; }


  /* ——— B. Header & navigation ——— */
  .site-header::after {                                      /* gold hairline appears once the header is stuck */
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
    opacity: 0; transition: opacity var(--m-base) var(--m-ease);
  }
  .site-header.is-stuck::after { opacity: .55; }

  .nav a { transition: color var(--m-fast) var(--m-ease); }
  .nav a:not(.btn)::after {                                  /* underline wipes in from the reading-start side, exits the far side */
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform var(--m-base) var(--m-ease);
  }
  html[dir="rtl"] .nav a:not(.btn)::after { transform-origin: 0 50%; }
  .nav a:not(.btn):is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: 0 50%; }
  html[dir="rtl"] .nav a:not(.btn):is(:hover, :focus-visible)::after { transform-origin: 100% 50%; }
  .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; animation: m-draw var(--m-slow) var(--m-ease) .35s backwards; }
  html[dir="rtl"] .nav a[aria-current="page"]::after { transform-origin: 100% 50%; }

  .lang a { transition: color var(--m-fast) var(--m-ease); }

  @media (max-width: 960px) {
    .nav a:not(.btn)::after { display: none; }               /* the mobile menu already separates rows with rules */
    .nav.is-open a { animation: m-rise-sm var(--m-base) var(--m-ease) backwards; }
    .nav.is-open a:nth-child(1) { animation-delay: .04s; }
    .nav.is-open a:nth-child(2) { animation-delay: .08s; }
    .nav.is-open a:nth-child(3) { animation-delay: .12s; }
    .nav.is-open a:nth-child(4) { animation-delay: .16s; }
    .nav.is-open a:nth-child(5) { animation-delay: .2s; }
    .nav.is-open a:nth-child(6) { animation-delay: .24s; }
    .nav.is-open a:nth-child(7) { animation-delay: .28s; }
  }


  /* ——— H. Buttons & links ——— */
  .btn {
    transition: background var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease),
                transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease);
  }
  .btn--gold:hover { box-shadow: 0 12px 24px -12px rgba(216, 169, 77, .75); }
  .btn--ghost:hover { border-color: var(--gold); background: rgba(216, 169, 77, .12); }
  .btn--navy:hover { box-shadow: inset 0 -2px 0 var(--gold); }
  .btn:active { transform: translateY(0) scale(.985); box-shadow: none; transition-duration: var(--m-fast); }

  .link-arrow {                                              /* underline draws in instead of snapping on */
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size var(--m-base) var(--m-ease);
  }
  html[dir="rtl"] .link-arrow { background-position: 100% 100%; }
  .link-arrow:is(:hover, :focus-visible), .card:is(:hover, :has(a.stretch:focus-visible)) .link-arrow { background-size: 100% 1px; text-decoration: none; }

  /* arrows travel a few pixels along the reading direction (.flip marks the directional icons) */
  .icon.flip { transition: transform var(--m-base) var(--m-ease); }
  :is(.btn, .link-arrow, .svc-row, .related a, .aside__nav a:last-child, .card):is(:hover, :focus-visible) .icon.flip { transform: translateX(var(--m-nudge)); }
  html[dir="rtl"] :is(.btn, .link-arrow, .svc-row, .related a, .aside__nav a:last-child, .card):is(:hover, :focus-visible) .icon.flip { transform: scaleX(-1) translateX(var(--m-nudge)); }
  :is(.pd-hero__top > a:first-child, .aside__nav a:first-child):is(:hover, :focus-visible) .icon.flip { transform: translateX(calc(var(--m-nudge) * -1)); }
  html[dir="rtl"] :is(.pd-hero__top > a:first-child, .aside__nav a:first-child):is(:hover, :focus-visible) .icon.flip { transform: scaleX(-1) translateX(calc(var(--m-nudge) * -1)); }

  .arrows button { transition: background var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease), transform var(--m-fast) var(--m-ease); }
  .arrows button:active { transform: scale(.94); }


  /* ——— D. Project cards ——— */
  .card { transition: box-shadow var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }
  .card.reveal:not(.is-done) { transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
  .card:is(:hover, :has(a.stretch:focus-visible)) { transform: translateY(-3px); box-shadow: var(--shadow); }   /* restores the intended lift that .reveal.is-in was masking */
  .card__media img { transition: transform 1.1s var(--m-ease); }
  .card:is(:hover, :has(a.stretch:focus-visible)) .card__media img { transform: scale(1.045); }
  .card__media .badge { z-index: 1; }
  .card__media::after {                                      /* soft navy veil that deepens the image on hover */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(27, 47, 58, .46), rgba(27, 47, 58, 0) 58%);
    opacity: 0; transition: opacity var(--m-base) var(--m-ease);
  }
  .card__media::before {                                     /* gold rule draws along the foot of the image */
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; z-index: 2; pointer-events: none;
    background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--m-slow) var(--m-ease);
  }
  html[dir="rtl"] .card__media::before { transform-origin: 100% 50%; }
  .card:is(:hover, :has(a.stretch:focus-visible)) .card__media::after { opacity: 1; }
  .card:is(:hover, :has(a.stretch:focus-visible)) .card__media::before { transform: scaleX(1); }

  @supports selector(:has(*)) {                              /* keyboard: the whole card shows focus, not just the title link */
    .card:has(a.stretch:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
    .card a.stretch:focus-visible { outline: none; }
  }

  .pn a { transition: box-shadow var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease); }
  .pn a:is(:hover, :focus-visible) { border-color: var(--gold); }
  .pn img { transition: transform var(--m-slow) var(--m-ease); }
  .pn a:is(:hover, :focus-visible) img { transform: scale(1.04); }
  .pn a { overflow: hidden; }

  .m-pop { animation: m-rise var(--m-base) var(--m-ease) backwards; animation-delay: calc(var(--m-i, 0) * 50ms); }   /* cards re-entering after a filter */


  /* ——— E. Services ——— */
  .svc-row { position: relative; transition: background var(--m-base) var(--m-ease), padding var(--m-base) var(--m-ease); }
  .svc-row::before {
    content: ""; position: absolute; inset-inline-start: 0; top: -1px; bottom: -1px; width: 2px; background: var(--gold);
    transform: scaleY(0); transition: transform var(--m-base) var(--m-ease);
  }
  .svc-row:is(:hover, :focus-visible)::before { transform: scaleY(1); }
  .svc-row .icon { transition: transform var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease); }
  .svc-row:is(:hover, :focus-visible) .icon { color: var(--gold-ink); }

  .related a { transition: color var(--m-base) var(--m-ease); }
  .tabs-bar a { transition: color var(--m-fast) var(--m-ease), border-color var(--m-base) var(--m-ease); }
  .tabs-bar a:hover { border-bottom-color: rgba(216, 169, 77, .5); }
  .tabs-bar a.is-active:hover { border-bottom-color: var(--gold); }


  /* ——— F. Statistics: tiles rise in after the hero; numbers are counted by motion.js ——— */
  .stat { animation: m-rise var(--m-slow) var(--m-ease) backwards; animation-delay: calc(.35s + var(--n, 0) * 80ms); }
  .stat:nth-child(2) { --n: 1; }
  .stat:nth-child(3) { --n: 2; }
  .stat:nth-child(4) { --n: 3; }


  /* ——— G. Client logos ——— */
  .logo-tile { transition: border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
  .logo-tile:hover { border-color: var(--gold); box-shadow: 0 14px 26px -18px rgba(27, 47, 58, .55); }
  .logo-tile img { transition: transform var(--m-slow) var(--m-ease); }
  .logo-tile:hover img { transform: scale(1.04); }
  .logos.m-in .logos__track > .logo-tile:nth-child(-n+4) { animation: m-rise var(--m-slow) var(--m-ease) backwards; }
  .logos.m-in .logos__track > .logo-tile:nth-child(2) { animation-delay: 70ms; }
  .logos.m-in .logos__track > .logo-tile:nth-child(3) { animation-delay: 140ms; }
  .logos.m-in .logos__track > .logo-tile:nth-child(4) { animation-delay: 210ms; }
  .logos.m-reveal { transform: none; transition: opacity var(--m-slow) var(--m-ease); }    /* the row only fades; its tiles do the rising */


  /* ——— Gallery, tabs, filters, lightbox ——— */
  .gallery:not([hidden]) { animation: m-fade var(--m-base) var(--m-ease); }
  .gallery img { transition: transform 1s var(--m-ease); }
  .gtabs button { transition: color var(--m-fast) var(--m-ease), border-color var(--m-base) var(--m-ease); }
  .gtabs button:hover { color: var(--navy); }
  .seg button { transition: background var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease); }
  .seg button:not([aria-pressed="true"]):hover { background: rgba(216, 169, 77, .12); }
  dialog.lightbox[open] { animation: m-fade var(--m-base) var(--m-ease); }
  dialog.lightbox[open]::backdrop { animation: m-fade var(--m-base) var(--m-ease); }
  dialog.lightbox img { animation: m-rise var(--m-slow) var(--m-ease) backwards; }


  /* ——— I. Footer, contact, forms ——— */
  .site-footer li a { display: inline-block; transition: color var(--m-fast) var(--m-ease), transform var(--m-base) var(--m-ease); }
  .site-footer li a:is(:hover, :focus-visible) { transform: translateX(calc(3px * var(--dir))); }
  .info .icon, .site-footer .contact-li .icon { transition: transform var(--m-base) var(--m-ease); }
  .info:hover .icon { transform: translateY(-2px); }
  .info a, .aside .contact-lines a { transition: color var(--m-fast) var(--m-ease); }
  .field input, .field select, .field textarea { transition: border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
  .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(216, 169, 77, .2); }
  .form-status.is-ok, .form-status.is-bad { animation: m-rise-sm var(--m-base) var(--m-ease); }
  .field.has-error .err { animation: m-rise-sm var(--m-base) var(--m-ease); }
  .map-load { transition: color var(--m-base) var(--m-ease); }
  .map-load .icon { transition: transform var(--m-base) var(--m-ease); }
  .map-load:hover .icon { transform: translateY(-3px); }


  /* ——— SIGNATURE — the gold survey line ———
     As a project or company image is drawn into view, a gold hairline travels across it in the
     reading direction and the picture is revealed behind it, like a section line being struck
     on a drawing. One gesture, used only on framed images, once per image. */
  .m-sweep { position: relative; overflow: hidden; }
  .m-sweep:not(.m-in) > img { clip-path: inset(0 100% 0 0); }
  .m-sweep.m-in > img { animation: m-wipe 1.05s var(--m-ease-io) backwards; animation-delay: calc(var(--m-i, 0) * var(--m-stagger)); }
  html[dir="rtl"] .m-sweep:not(.m-in) > img { clip-path: inset(0 0 0 100%); }
  html[dir="rtl"] .m-sweep.m-in > img { animation-name: m-wipe-rtl; }
  .m-line {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    border-inline-end: 2px solid var(--gold);
    box-shadow: inset calc(-14px * var(--dir)) 0 18px -14px rgba(216, 169, 77, .55);
    animation: m-line 1.05s var(--m-ease-io) backwards; animation-delay: calc(var(--m-i, 0) * var(--m-stagger));
  }


  /* ——— Page-to-page navigation: a brief cross-fade; the header stays put ——— */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
}