/* Narrow Sea NEXT — global motion layer. build.py loads this (and next-global.js) on every page of the variant.
   Motion is transform/opacity only (the kicker wipe clips one line of text), driven by IntersectionObserver, never by
   scroll handlers. Everything here sits behind prefers-reduced-motion: no-preference, on screen only: with reduced
   motion, or in print, the page is exactly the live site. Prefix nsx-. */

:root {
  --nsx-ease: cubic-bezier(.16, 1, .3, 1);       /* long, soft settle: a slow ship coming alongside */
  --nsx-ease-io: cubic-bezier(.65, 0, .35, 1);
}

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

  /* ---------- page: fades in on load, fades out before an internal navigation (≤150 ms) ---------- */
  body > main, body > .foot,
  body:not(.layout-site) > div:not(.desk):not(.toast-host):not(.modal-back) {
    animation: nsx-page-in .15s ease-out backwards;
  }
  html.nsx-leave body > main, html.nsx-leave body > .foot,
  html.nsx-leave body:not(.layout-site) > div:not(.desk):not(.toast-host):not(.modal-back) {
    opacity: 0; transition: opacity .12s ease-in;
  }

  /* ---------- reveal on first view (next-global.js marks the units; nothing is hidden without JS) ---------- */
  [data-nsx-rv] { opacity: 0; transform: translate3d(0, 18px, 0); }
  [data-nsx-rv].nsx-in {
    opacity: 1; transform: none;
    transition: opacity .8s var(--nsx-ease) var(--nsx-d, 0ms), transform 1s var(--nsx-ease) var(--nsx-d, 0ms);
  }
  /* kicker lines draw in left to right */
  [data-nsx-rv="kicker"] { transform: none; clip-path: inset(0 100% 0 0); }
  [data-nsx-rv="kicker"].nsx-in {
    clip-path: inset(0 0 0 0);
    transition: clip-path .9s var(--nsx-ease-io) var(--nsx-d, 0ms), opacity .35s linear var(--nsx-d, 0ms);
  }
  /* the gold accent rule draws from its left edge */
  [data-nsx-rv="rule"] { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; }
  [data-nsx-rv="rule"].nsx-in { transform: none; transition: transform 1.1s var(--nsx-ease-io) var(--nsx-d, 0ms); }

  /* ---------- buttons: gold sheen sweep on hover, a firm press ---------- */
  .btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .3s var(--nsx-ease), transform .18s var(--nsx-ease); }
  .btn:not([disabled]):not(.is-disabled):not(.is-loading):active { transform: translateY(1px) scale(.985); transition-duration: .15s, .15s, .15s, .3s, .06s; }
  .btn--primary:not([disabled]):not(.is-disabled):not(.is-loading):active { box-shadow: inset 0 1px 2px rgba(7, 28, 43, .22); }
}

@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn--primary, .btn--secondary, .btn--outline { position: relative; overflow: hidden; isolation: isolate; }
  .btn--primary::after, .btn--secondary::after, .btn--outline::after {
    content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 46%; pointer-events: none; z-index: 1;
    background: linear-gradient(100deg, transparent 0%, rgba(197, 164, 109, .34) 50%, transparent 100%);
    transform: translate3d(-130%, 0, 0) skewX(-18deg); opacity: 0;
  }
  .btn--primary::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 246, 226, .62) 50%, transparent 100%); }
  .btn--primary:not([disabled]):not(.is-disabled):not(.is-loading):hover::after,
  .btn--secondary:not([disabled]):not(.is-disabled):not(.is-loading):hover::after,
  .btn--outline:not([disabled]):not(.is-disabled):not(.is-loading):hover::after {
    transform: translate3d(330%, 0, 0) skewX(-18deg); opacity: 1;
    transition: transform .8s var(--nsx-ease-io), opacity .15s linear;
  }
  .btn--primary:not([disabled]):not(.is-disabled):not(.is-loading):hover { box-shadow: 0 10px 24px -12px rgba(7, 28, 43, .55); }
  .btn--secondary:not([disabled]):not(.is-disabled):not(.is-loading):hover { box-shadow: 0 10px 24px -12px rgba(7, 28, 43, .7), inset 0 0 0 1px rgba(197, 164, 109, .45); }
}

/* ---------- phones: every modal is a bottom sheet (layout always; the motion only without reduced motion) ---------- */
@media screen and (max-width: 600px) {
  .modal-back { align-items: flex-end; padding: 0; }
  .modal-back > .modal, .modal-back > [role="dialog"] {
    max-width: none; width: 100%; border: 0; border-radius: 14px 14px 0 0;
    max-height: 92vh; max-height: 92dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 48px rgba(7, 28, 43, .28);
  }
}
@media screen and (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .modal-back { animation: nsx-fade .26s ease-out both; }
  .modal-back > .modal, .modal-back > [role="dialog"] { animation: nsx-sheet .42s var(--nsx-ease) both; }
  /* the desk drawer rises as a full-height sheet (desk.js hides it 220 ms after close, so closing stays under that) */
  .desk__panel { opacity: 1; transform: translate3d(0, 100%, 0); transition: transform .2s cubic-bezier(.4, 0, 1, 1); }
  .desk.is-open .desk__panel { transform: none; transition: transform .42s var(--nsx-ease); }
}

@keyframes nsx-page-in { from { opacity: 0; } }
@keyframes nsx-fade { from { opacity: 0; } }
@keyframes nsx-sheet { from { transform: translate3d(0, 100%, 0); } }

/* ---------- print and reduced motion: everything visible, nothing moves ---------- */
@media print {
  [data-nsx-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .btn::after { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-nsx-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}