/* Hero film reels (js/hero-film.js). The stepped title and copy come from css/hero.css; the shop's food
   film plays in three reel panels under SOUVLAKI, left of SHOP (two on phones, between SHOP and the copy),
   gently staggered like a strip of reels. Each panel starts the film a third of the loop apart and shows
   that frame as its poster, so the three reels never repeat. html.hero-film is set by js/boot.js. */

html.hero-film .o-hero--home .hero-film__panel:nth-child(2) { --poster: url(../assets/videos/hero-loop-b.webp); }
html.hero-film .o-hero--home .hero-film__panel:nth-child(3) { --poster: url(../assets/videos/hero-loop-c.webp); }
/* the video is clipped to the rounded panel itself: a clip on the parent alone is dropped once the panel
   is transformed in 3D (the hover tilt) */
html.hero-film .o-hero--home .hero-film__panel video,
html.hero-film .o-hero--home .hero-film__glare {
  border-radius: var(--panel-r, 12px);
  clip-path: inset(0 round var(--panel-r, 12px));
}
html.hero-film .o-hero--home {
  --st-gap: clamp(8px, .9vw, 16px);
  --st-top: calc(var(--title-top) + var(--title-fs) * .95);      /* just under SOUVLAKI */
  --st-bottom: clamp(28px, 5svh, 56px);
}
html.hero-film .o-hero--home .hero-film__frame {
  position: absolute;
  z-index: 1;
  left: var(--lock-x);
  top: var(--st-top);
  bottom: var(--st-bottom);
  width: calc(var(--lock-w) - var(--shop-w) - var(--title-fs) * .3);   /* stops short of SHOP */
  display: grid;
  grid-template-columns: repeat(var(--panels, 3), minmax(0, 1fr));
  gap: var(--st-gap);
  pointer-events: none;
}
html.hero-film .o-hero--home .hero-film__panel {
  position: relative;
  overflow: hidden;
  --panel-r: clamp(10px, 1vw, 16px);
  border-radius: var(--panel-r);
  background: var(--shop-ink) var(--poster, url(../assets/videos/hero-loop-a.webp)) 50% 42% / cover no-repeat;
  box-shadow: 0 24px 40px -22px rgb(16 26 67 / .55), 0 0 0 1px rgb(16 26 67 / .06);
  opacity: 0;
  translate: 0 24px;
  transition: opacity .7s ease, translate .9s cubic-bezier(.16, 1, .3, 1);
}
html.hero-film.hero-loaded .o-hero--home .hero-film__panel {   /* dealt in after the intro */
  opacity: 1;
  translate: 0 0;
}
html.hero-film .o-hero--home .hero-film__panel:nth-child(1) { margin-top: 6%; rotate: -1.5deg; }
html.hero-film .o-hero--home .hero-film__panel:nth-child(2) { margin-bottom: 6%; rotate: 1deg; transition-delay: .12s; }
html.hero-film .o-hero--home .hero-film__panel:nth-child(3) { margin-top: 10%; rotate: -.5deg; transition-delay: .24s; }
html.hero-film .o-hero--home .hero-film__panel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(1.08) contrast(1.05);
  opacity: 0;
}
html.hero-film .o-hero--home .hero-film__frame.is-open video {
  opacity: 1;
  transition: opacity 1s ease;
}
/* interactive reels (js/hero-film.js reelMotion): transform is written per frame; the glare follows the pointer */
html.hero-film .o-hero--home .hero-film__frame.is-interactive .hero-film__panel {
  pointer-events: auto;
  cursor: default;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;                               /* a finger can still scroll the page from a reel */
}
html.hero-film .o-hero--home .hero-film__panel.is-active {
  box-shadow: 0 40px 60px -26px rgb(16 26 67 / .6), 0 0 0 1px rgb(16 26 67 / .08);
}
html.hero-film .o-hero--home .hero-film__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgb(255 255 255 / .28), rgb(255 255 255 / 0) 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .35s ease;
}
html.hero-film .o-hero--home .hero-film__panel.is-active .hero-film__glare {
  opacity: 1;
}
@media (max-width: 767px) {
  html.hero-film .o-hero--home .hero-film__frame {   /* between SHOP and the copy: two reels, centred */
    top: var(--pita-top);
    bottom: auto;
    left: 50%;
    height: calc(var(--pita-w) * var(--pita-ar));
    width: calc(var(--pita-w) * var(--pita-ar) * 9 / 16 * 2 + var(--st-gap));
    translate: -50% 0;
  }
  html.hero-film .o-hero--home .hero-film__panel:nth-child(1) { margin-top: 8%; }
  html.hero-film .o-hero--home .hero-film__panel:nth-child(2) { margin-bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  html.hero-film .o-hero--home .hero-film__panel {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html.hero-film .o-hero--home .hero-film__panel video {   /* the poster frame stays; no film */
    display: none;
  }
}