/* ═══════════════════════════════════════════════════════════════════════════
   SAFFRON PREMIUM — mobile interaction & motion layer          2026-08-18
   Additive only. Enhances feel/motion; never touches panel geometry, the
   100dvh / safe-centre / band-guard / close-button fixes, or page layout.
   Covers BOTH nav systems (homepage .menu* + shared .sfnav*) and all buttons.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --px-ease:    cubic-bezier(.16,.84,.32,1);   /* house curve */
  --px-spring:  cubic-bezier(.34,1.36,.48,1);  /* gentle luxury overshoot */
  --px-io:      cubic-bezier(.65,0,.35,1);
  --px-fast:120ms; --px-med:300ms; --px-slow:560ms;
  --px-gold:    var(--gold, #C9A24B);
  --px-saffron: var(--saffron-lit, #E8842A);
}

/* ── UNIVERSAL: kill mobile tap lag + blue flash on everything tappable ──── */
a,button,[role="button"],[class*="btn"],[class*="cta"],[class*="Cta"],
label,summary,input,select,textarea,
.menu__link,.sfnav-link,.nav-link,.sb-cta,.faq-a,.hero__cta{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ── UNIVERSAL PRESS FEEDBACK via :where() — ZERO specificity ─────────────
   Every button/CTA on the site gets a tactile press. Because :where() carries
   no specificity, ANY element that already defines its own :active transform
   overrides this automatically — so we enhance the plain ones and never fight
   a page's intentional animation. This is what makes it safe site-wide.     */
:where(button, a[class*="cta"], a[class*="Cta"], [role="button"],
       [class*="btn"]:not(.menu__link):not(.sfnav-link),
       .sb-cta, .hero__cta, .faq-a, .cta-arrow, .railcta, .startsoul__cta,
       .oh-cta, .xshow__cta, .trigger-btn, .auth-btn){
  transition:transform 300ms var(--px-spring);
}
:where(button, a[class*="cta"], a[class*="Cta"], [role="button"],
       [class*="btn"]:not(.menu__link):not(.sfnav-link):not(.menu-btn):not(.sfnav-btn),
       .sb-cta, .hero__cta, .faq-a, .cta-arrow, .railcta, .startsoul__cta,
       .oh-cta, .xshow__cta, .trigger-btn, .auth-btn):active{
  transform:scale(.965);
  transition:transform var(--px-fast) var(--px-ease);
}

/* ── PRESS FEEDBACK — explicit for the flagship CTAs (springy release) ───── */
.btn,.magnetic,.sfnav-desktop__link{
  transition:transform 300ms var(--px-spring),
             box-shadow 300ms var(--px-ease),
             background-color 300ms var(--px-ease),
             color 300ms var(--px-ease),
             border-color 300ms var(--px-ease);
  will-change:transform;
}
.btn:active,.magnetic:active{
  transform:scale(.965);
  transition:transform var(--px-fast) var(--px-ease);
}

/* ══ HAMBURGER — homepage .menu-btn ═══════════════════════════════════════ */
.menu-btn{
  transition:transform 300ms var(--px-spring),
             border-color 300ms var(--px-ease),
             background-color 300ms var(--px-ease),
             box-shadow 300ms var(--px-ease);
  will-change:transform;
}
.menu-btn:active{transform:scale(.9);transition:transform var(--px-fast) var(--px-ease)}
.menu-btn span{transition:transform .5s var(--px-spring),opacity .3s var(--px-ease),width .4s var(--px-ease)}
body.menu-open .menu-btn{
  border-color:rgba(232,132,42,.55);
  box-shadow:0 0 0 1px rgba(232,132,42,.20), 0 6px 22px -8px rgba(232,132,42,.5);
}
body.menu-open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* ══ HAMBURGER — shared .sfnav-btn ════════════════════════════════════════ */
.sfnav-btn{
  transition:transform 300ms var(--px-spring),
             border-color 300ms var(--px-ease),
             background-color 300ms var(--px-ease),
             box-shadow 300ms var(--px-ease) !important;
  will-change:transform;
}
.sfnav-btn:active{transform:scale(.9) !important;transition:transform var(--px-fast) var(--px-ease) !important}
.sfnav-btn__bar{transition:transform .5s var(--px-spring),opacity .25s var(--px-ease) !important}
html.sfnav-open .sfnav-btn{
  box-shadow:0 0 0 1px rgba(232,132,42,.22), 0 6px 22px -8px rgba(232,132,42,.5);
}

/* ══ NAV LINKS — tactile press + numeral pop ══════════════════════════════ */
.menu__link{transition:transform .72s var(--px-ease),opacity .52s var(--px-ease),color .28s var(--px-ease),letter-spacing .4s var(--px-ease)}
.menu__link:active{color:var(--px-gold);letter-spacing:.005em}
.menu__link .mnum{transition:opacity .28s var(--px-ease),color .28s var(--px-ease),transform .5s var(--px-spring)}
.menu__link:active .mnum{transform:translateY(-.15em) scale(1.12);opacity:1;color:var(--px-gold)}

.sfnav-link{transition:transform .7s var(--px-ease),opacity .7s var(--px-ease),color .3s var(--px-ease),letter-spacing .4s var(--px-ease) !important}
.sfnav-link:active{color:var(--px-gold);letter-spacing:.005em}
.sfnav-link__num{transition:opacity .3s var(--px-ease),color .3s var(--px-ease),transform .5s var(--px-spring)}
.sfnav-link:active .sfnav-link__num{transform:scale(1.14);opacity:1;color:var(--px-gold)}

/* ══ HOMEPAGE MENU — warm radial depth (matches the shared panel) ═════════ */
/* The homepage fullscreen menu paints flat; give it the same lit warmth the
   shared panel has, so the two systems feel like one design. Painted behind
   the links (z-index:0 wash, links already sit above via their own stacking). */
.menu::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 88% 6%,  rgba(232,132,42,.13), transparent 62%),
    radial-gradient(52% 40% at 4% 96%,  rgba(201,162,75,.08), transparent 66%);
  opacity:0;transition:opacity .9s var(--px-ease);
}
body.menu-open .menu::before{opacity:1}
.menu__inner{position:relative;z-index:1}

/* ══ CTA BUTTONS — refined depth + slow gold sheen ════════════════════════ */
.btn--solid{
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 24px -12px rgba(0,0,0,.5);
  position:relative;overflow:hidden;isolation:isolate;
}
.btn--solid:active{box-shadow:0 1px 2px rgba(0,0,0,.22), 0 4px 12px -8px rgba(0,0,0,.5)}
.btn--solid::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:px-sheen 6.5s var(--px-ease) 2s infinite;
}
@keyframes px-sheen{0%{transform:translateX(-120%)}18%,100%{transform:translateX(120%)}}

/* ══ FINISHING TOUCHES — universal, zero-risk ═════════════════════════════ */
/* Gold text selection instead of the browser's default blue. */
::selection{background:rgba(201,162,75,.28);color:inherit}
::-moz-selection{background:rgba(201,162,75,.28);color:inherit}
/* Keyboard focus: a considered gold ring, only for keyboard users (:where =
   zero specificity, so any element's own focus style still wins). */
:where(a,button,[role="button"],input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--px-gold);
  outline-offset:3px;
  border-radius:3px;
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .btn,.magnetic,.menu-btn,.sfnav-btn,.menu-btn span,.sfnav-btn__bar,
  .menu__link,.sfnav-link,.menu__link .mnum,.sfnav-link__num{
    transition-duration:.01ms !important;
  }
  .btn:active,.magnetic:active,.menu-btn:active,.sfnav-btn:active{transform:none !important}
  .btn--solid::after{animation:none !important;opacity:0 !important}
}