/* ============================================================================
   DS SIGHT — motion & interaction system
   ----------------------------------------------------------------------------
   One coordinated set of signature effects, repeated across every page:
     • hero entrance (label → headline → copy → action settle in)
     • section reveals on scroll (fade + small rise, once)
     • poster → video crossfade (no flash, no layout shift)
     • nav condenses into a defined dark surface on scroll
     • button / link / arrow micro-interactions + clear keyboard focus
     • one quiet silver light-sweep when a decorative accent appears
     • very limited desktop parallax on a single featured element
   Character: calm, precise, gentle deceleration, no bounce.
   Progressive enhancement: nothing is hidden unless <html class="ds-motion">
   is set by JS, so no-JS and reduced-motion visitors see the full static page.
   ========================================================================== */

:root {
  /* Motion tokens */
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --ds-dur-xs: 200ms;   /* interaction transitions */
  --ds-dur-s: 320ms;    /* hover / small state changes */
  --ds-dur-m: 620ms;    /* reveals + entrances */
  --ds-rise: 16px;      /* reveal travel */
  --ds-focus: #78AEF0;  /* ice-blue focus / interaction accent */
}

/* ---- Section reveals ---------------------------------------------------- */
html.ds-motion .ds-reveal { opacity: 0; transform: translateY(var(--ds-rise)); will-change: opacity, transform; }
html.ds-motion .ds-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--ds-dur-m) var(--ds-ease-out), transform var(--ds-dur-m) var(--ds-ease-out);
}
/* Small groups can stagger via an inline --i index (kept subtle, ≤4 items). */
html.ds-motion .ds-reveal.is-in { transition-delay: calc(var(--i, 0) * 70ms); }

/* ---- Hero entrance ------------------------------------------------------ */
/* Driven by JS adding .is-in (like reveals) rather than a CSS load-animation,
   so the _ds framework re-rendering the hero can't leave it stuck: the engine
   re-adds .is-in idempotently. The booking action is usable immediately —
   only opacity/transform animate, never layout or pointer events. */
html.ds-motion .ds-enter { opacity: 0; transform: translateY(12px); }
html.ds-motion .ds-enter.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--ds-dur-m) var(--ds-ease-out), transform var(--ds-dur-m) var(--ds-ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---- Poster → video crossfade ------------------------------------------ */
/* The container keeps a stable box (aspect-ratio set inline). The poster sits
   under the video; the video fades in only once it can paint a frame. */
.ds-media { position: relative; }
.ds-media > video { opacity: 0; transition: opacity 500ms var(--ds-ease-out); }
.ds-media.is-playing > video { opacity: 1; }

/* ---- Navigation: condense into a defined dark surface on scroll --------- */
.ds-navbar { transition: background var(--ds-dur-s) var(--ds-ease), border-color var(--ds-dur-s) var(--ds-ease), box-shadow var(--ds-dur-s) var(--ds-ease); }
.ds-navbar-wrap { transition: padding var(--ds-dur-s) var(--ds-ease); }
html.ds-scrolled .ds-navbar-wrap { padding-top: 10px; padding-bottom: 10px; }
html.ds-scrolled .ds-navbar {
  background: linear-gradient(160deg, rgba(16,20,28,0.94), rgba(9,11,16,0.96));
  border-color: rgba(154,163,184,0.30);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

/* ---- Portfolio / media hover ------------------------------------------- */
/* Very slight scale; original crop preserved; titles never depend on hover. */
@media (hover: hover) and (pointer: fine) {
  .ds-hover, .ds-reel { overflow: hidden; }
  .ds-hover > img, .ds-hover > video, .ds-reel > video { transition: transform var(--ds-dur-s) var(--ds-ease); will-change: transform; }
  .ds-hover:hover > img, .ds-hover:hover > video, a:hover > .ds-reel > video { transform: scale(1.03); }
}

/* ---- Buttons / links / arrows ------------------------------------------ */
.ds-arrow { display: inline-block; transition: transform var(--ds-dur-xs) var(--ds-ease); }
a:hover .ds-arrow, button:hover .ds-arrow { transform: translateX(3px); }
.ds-link-cta::after, .ds-link-cta-quiet::after { transition: transform var(--ds-dur-xs) var(--ds-ease), color var(--ds-dur-xs) var(--ds-ease); }

/* Clear, consistent keyboard focus (dimensions/hit-areas unchanged). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Signature silver light-sweep -------------------------------------- */
/* One pass across a decorative silver accent when it first appears. Readable
   text and the logo are never wrapped in this. */
.ds-sweep { position: relative; overflow: hidden; }
html.ds-motion .ds-sweep.is-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.40) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: ds-sweep 1150ms var(--ds-ease-out) 220ms 1;
}
@keyframes ds-sweep { to { transform: translateX(130%); } }

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

/* ---- Reduced motion: complete, attractive static experience ------------ */
@media (prefers-reduced-motion: reduce) {
  html.ds-motion .ds-reveal,
  html.ds-motion .ds-enter { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .ds-media > video { opacity: 1 !important; }
  html.ds-motion .ds-sweep.is-in::after { display: none !important; }
  [data-parallax] { transform: none !important; }
  .ds-arrow { transition: none !important; }
}