/* =====================================================================
   Cinematic layer: film grain, vignettes, slower reveals, a dark
   "screening room" for the reels and letterbox bars in the video viewer.
   Everything is scoped to html.cinematic, set by the one-line switch in
   index.html's <head>.
   Compare: add ?cinematic=off to the URL.
   Remove: delete the cinematic.css <link> and the switch <script>.
   The hero is intentionally untouched.
   ===================================================================== */
html.cinematic {
  --cine-ink: #070b24;
  --cine-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Film grain: one oversized fixed layer, moved by transform (no repaint) ---------- */
html.cinematic::after {
  content: "";
  position: fixed;
  inset: -10%; /* the keyframes below shift at most 6% on one axis; -10% is the smallest overscan that still covers it */
  z-index: calc(var(--z-grain) + 1);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .07 0 0 0 0 .16 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  opacity: .1;
  animation: cine-grain 1s steps(6) infinite;
}
@keyframes cine-grain {
  0% { transform: translate3d(0, 0, 0); }
  17% { transform: translate3d(-4%, 3%, 0); }
  33% { transform: translate3d(3%, -5%, 0); }
  50% { transform: translate3d(-6%, -2%, 0); }
  67% { transform: translate3d(5%, 4%, 0); }
  83% { transform: translate3d(-2%, 6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- Slower, longer-tailed reveals (content only; controls keep their snappy hovers) ---------- */
html.cinematic .e-reveal:not(a, button, .a-btn, .a-icon, .shop-category) {
  transition-duration: 1.2s;
  transition-timing-function: var(--cine-ease);
}

/* ---------- Vignettes on photos ---------- */
html.cinematic .feast-photo::after,
html.cinematic .reel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(7, 11, 36, 0) 55%, rgba(7, 11, 36, .42));
}
/* The theme already draws .m-img::after exactly over the padded photo; only swap its fill. */
html.cinematic .o-news-slider .m-img::after {
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(7, 11, 36, 0) 55%, rgba(7, 11, 36, .42));
}
html.cinematic .feast-photo {
  position: relative;
}
html.cinematic .o-news-slider .m-img .m-tag {
  z-index: var(--z-lift);
}

/* ---------- Reels: a dark screening room ---------- */
html.cinematic .shop-section.shop-reels {
  background: var(--cine-ink);
  color: var(--paper);
}
html.cinematic .shop-reels::before {
  /* projector light behind the fan; brightens as the cards open (--open from reels.js) */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(1300px, 130vw);
  aspect-ratio: 1.6;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(48, 71, 198, .55), rgba(4, 25, 168, .18) 45%, rgba(7, 11, 36, 0) 72%);
  opacity: calc(.35 + var(--open, 1) * .65);
}
html.cinematic .shop-reels :is(h2, .eyebrow, .section-aside) {
  color: var(--paper);
}
html.cinematic .shop-reels .eyebrow {
  opacity: .75;
}
html.cinematic .shop-reels .shop-socials a {
  color: var(--paper);
  border-color: rgba(244, 240, 230, .32);
}
@media (hover: hover) {
  html.cinematic .shop-reels .shop-socials a:hover {
    background: var(--paper);
    color: var(--cine-ink);
    border-color: var(--paper);
  }
}
html.cinematic .shop-reels {
  --focus-ring: var(--paper); /* dark screening room, same reasoning as .reel-viewer */
}
html.cinematic .reel-card {
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(244, 240, 230, .08);
}
@media (hover: hover) {
  html.cinematic .reel-card:hover {
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 60px -10px rgba(48, 71, 198, .55), 0 0 0 1px rgba(244, 240, 230, .16);
  }
}
/* Focus pull: cards arrive soft and sharpen */
@media (scripting: enabled) {
  html.cinematic .reel-card {
    filter: blur(14px);
    transition: opacity 1.1s ease, translate 1.4s var(--cine-ease), filter 1.2s var(--cine-ease), box-shadow .4s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 140ms);
  }
  html.cinematic .reels-stage.is-in .reel-card {
    filter: none;
  }
}
html.cinematic .reels-dots span {
  background: rgba(244, 240, 230, .28);
}
html.cinematic .reels-dots span.is-active {
  background: var(--paper);
}

/* ---------- Viewer: darker house, letterbox bars ---------- */
html.cinematic .reel-viewer-backdrop {
  background: #000;
}
html.cinematic .reel-viewer-backdrop img {
  opacity: .32;
}
html.cinematic .reel-viewer-frame {
  width: min(100vw, calc(82dvh * 9 / 16));
}
html.cinematic .reel-viewer::before,
html.cinematic .reel-viewer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: var(--z-front);
  height: 7dvh;
  background: #000;
  pointer-events: none;
  animation: cine-bar .9s var(--cine-ease) both;
}
html.cinematic .reel-viewer::before {
  top: 0;
  --from: -100%;
}
html.cinematic .reel-viewer::after {
  bottom: 0;
  --from: 100%;
}
html.cinematic .reel-viewer.is-closing::before,
html.cinematic .reel-viewer.is-closing::after {
  animation: cine-bar-out .45s ease-in both;
}
@keyframes cine-bar {
  from { transform: translateY(var(--from)); }
  to { transform: none; }
}
@keyframes cine-bar-out {
  from { transform: none; }
  to { transform: translateY(var(--from)); }
}
@media (max-width: 767px) {
  html.cinematic .reel-viewer::before,
  html.cinematic .reel-viewer::after {
    height: 5dvh;
  }
  html.cinematic .reel-viewer-frame {
    width: min(100vw, calc(88dvh * 9 / 16));
  }
}

/* ---------- Reduced motion: still grain, no focus pull, bars without movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html.cinematic::after {
    animation: none;
    inset: 0;
  }
  html.cinematic .reel-card,
  html.cinematic .reels-stage.is-in .reel-card {
    filter: none;
    transition: none;
  }
  html.cinematic .reel-viewer::before,
  html.cinematic .reel-viewer::after {
    animation: none;
  }
  html.cinematic .e-reveal:not(a, button, .a-btn, .a-icon, .shop-category) {
    transition-duration: .001ms; /* the 1.2s cinematic override above doesn't otherwise check this preference */
  }
}