/* Coxswains brand-page interaction kit — shared by /habibi /plotwist /noname /taco.
   Accent-var driven (uses each page's --accent). Motion is opt-in + reduced-motion safe. */

/* scroll-reveal — only hidden when JS is active (no-JS shows everything) */
.js-reveal .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}

/* card spotlight — cursor-following accent glow (fine pointers only) */
.spot-card{position:relative}
.spot-card>.spot{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%)}
.spot-card:hover>.spot{opacity:1}
.spot-card>*{position:relative;z-index:1}

/* gallery hover zoom (unifies habibi with plotwist/noname) */
.dish img,.gallery img{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dish:hover img,.gallery figure:hover img{transform:scale(1.06)}

/* sticky-nav: darken on scroll, hide on scroll-down */
.nav{transition:transform .4s ease,background .4s ease,border-color .4s ease}
.nav.hide{transform:translateY(-102%)}

/* back-to-top */
.totop{position:fixed;right:20px;bottom:20px;z-index:60;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--accent);color:#000;cursor:pointer;display:grid;place-items:center;font-size:20px;line-height:1;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* focus-visible everywhere (a11y) */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* reduced-motion: cut all motion, reveal everything */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-reveal .reveal{opacity:1!important;transform:none!important}
  .dish:hover img,.gallery figure:hover img{transform:none!important}
  html{scroll-behavior:auto!important}
}

/* accessible image lightbox (galleries) */
.gallery figure,.dish{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:5vh 4vw;
  background:rgba(5,5,5,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb.open{display:grid}
.lb__fig{margin:0;max-width:min(1100px,92vw);display:flex;flex-direction:column;gap:14px;align-items:center}
.lb__img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__cap{color:#fff;font-weight:600;font-size:16px;letter-spacing:.01em;text-align:center}
.lb__btn{position:absolute;top:0;bottom:0;width:14%;border:0;background:transparent;color:#fff;font-size:38px;cursor:pointer;opacity:.55;transition:opacity .2s}
.lb__btn:hover,.lb__btn:focus-visible{opacity:1}
.lb__prev{left:0}.lb__next{right:0}
.lb__close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lb__close:hover,.lb__close:focus-visible{background:rgba(255,255,255,.24)}
.lb__count{position:absolute;top:24px;left:24px;color:rgba(255,255,255,.6);font-size:13px;letter-spacing:.1em}
@media (prefers-reduced-motion: reduce){.lb{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Apple-style hero flow — scroll-scrubbed recede (native scroll-driven animation). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-flow > * { animation: cxsHeroRecede linear both; animation-timeline: scroll(root); animation-range: 0 88vh; }
    .hero-flow > img:first-child, .hero-flow > .hero__bg, .hero-flow > picture:first-child { animation-name: cxsHeroDrift; }
  }
}
@keyframes cxsHeroRecede { to { transform: translateY(-7vh) scale(.93); opacity: 0; } }
@keyframes cxsHeroDrift  { to { transform: translateY(-3vh) scale(1.08); opacity: 0; } }

/* Apple-grade scroll choreography: every reveal scrubs with the scroll (view-timeline),
   gallery imagery gets depth, headline shimmers. Progressive + reduced-motion safe. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal, .reveal.in, .js-reveal .reveal {
      opacity: 1; transform: none; transition: none !important;
      animation: cxsEnter linear both !important;
      animation-timeline: view() !important;
      animation-range: entry 5% entry 55% !important;
    }
    .gallery figure img, .dish img {
      animation: cxsDepth linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes cxsEnter { from { opacity: 0; transform: translateY(36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cxsDepth { from { transform: scale(1.10) translateY(2.5%); } to { transform: scale(1.02) translateY(-2.5%); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-flow h1, .hero__title { 
    background: linear-gradient(100deg,#fff 30%,#FFC107 46%,#fff 60%);
    background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: cxsShimmer 7s ease-in-out infinite;
  }
}
@keyframes cxsShimmer { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

/* Apple pinned moment: image holds the screen and settles; a giant statement rises over it.
   Fallback (no scroll-timeline support / reduced motion) = elegant static full-bleed band. */
.pin-moment{position:relative}
.pin-moment__stage{position:relative;height:72vh;min-height:480px;display:grid;place-items:center;overflow:hidden}
.pin-moment__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin-moment__veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(5,5,5,.18),rgba(5,5,5,.72) 88%)}
.pin-moment__cap{position:relative;z-index:2;margin:0;text-align:center;padding:0 6vw;color:#fff;
  font-size:clamp(40px,7vw,96px);line-height:1.02;font-weight:700;letter-spacing:-.022em}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pin-moment{height:240vh;view-timeline-name:--cxspin}
    .pin-moment__stage{position:sticky;top:0;height:100vh}
    .pin-moment__img{animation:cxsPinSettle linear both;animation-timeline:--cxspin;animation-range:cover 0% cover 100%}
    .pin-moment__cap{animation:cxsPinCap linear both;animation-timeline:--cxspin;animation-range:cover 12% cover 60%}
  }
}
@keyframes cxsPinSettle{from{transform:scale(1.22);filter:saturate(.7)}to{transform:scale(1);filter:saturate(1)}}
@keyframes cxsPinCap{from{opacity:0;transform:translateY(9vh) scale(.94)}to{opacity:1;transform:none}}

/* Apple finishing details — machined micro-polish */
::selection{background:#FFC107;color:#050505}
html{scroll-padding-top:84px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:root{accent-color:#FFC107}
*{-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0a0c}
::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:8px;border:2px solid #0a0a0c}
::-webkit-scrollbar-thumb:hover{background:#FFC107}
.nav.scrolled, nav.scrolled{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
.btn:active, button:active{transform:scale(.97)}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,193,7,.35);border-color:#FFC107}
img{-webkit-user-drag:none}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .25s ease,background .25s ease,color .25s ease}
}

/* v58 audit fixes: mobile-correct pinned moments (svh, shorter track), press-feedback wins over magnetic drift */
.pin-moment__stage{height:72svh}
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .pin-moment__stage{height:100svh}
  @media (max-width: 740px){ .pin-moment{height:170vh} }
}}
.btn:active, button:active{transform:scale(.97) !important}