/* ── Content (homepage "videos" icon): a film reel that unrolls ──
   The reel sits next to the icon and the strip unrolls away from it
   (data-dir="ltr" or "rtl", set in film.js from the side the card opened on).
   Each frame links to content.html. */
.popup[data-theme="film"]{--popup-w:710px;--close-color:#8a5a3b;background:transparent;box-shadow:none;opacity:1;transform:none!important;transition:none!important}
.popup[data-theme="film"] .popup-content{padding:14px 6px 6px;overflow:visible}
.popup[data-theme="film"] .popup-tail{display:none}
.popup[data-theme="film"] .popup-close{top:-10px;right:-4px;background:#fff8ee;box-shadow:0 2px 8px rgba(90,58,30,.25);transition:opacity .2s ease,transform .35s var(--spring)}
.popup[data-theme="film"]:has(.film.is-unrolling) .popup-close,.popup[data-theme="film"]:has(.film.is-rolling-up) .popup-close{opacity:0;pointer-events:none}

.film{position:relative;display:flex;align-items:center}
.film[data-dir="rtl"]{flex-direction:row-reverse}

/* The reel, seen from the side: a spool of wound film between two pink
   flanges. The strip comes off the front of the spool. --sh is the strip's
   height (frame + padding); the wound film is exactly as tall. */
.film{--sh:208px;--rw:128px}
.film-reel{position:relative;z-index:2;flex:none;width:var(--rw);height:calc(var(--sh) + 36px)}
.fr-wind{position:absolute;left:14px;right:14px;top:18px;bottom:18px;overflow:hidden;border-radius:0 0 50% 50% / 0 0 14px 14px;background:#4d342b;box-shadow:6px 10px 14px rgba(58,36,23,.28)}
.fr-surface{position:absolute;top:0;bottom:0;left:-52px;width:calc(100% + 104px);
  background:
    repeating-linear-gradient(90deg,#fbf1e3 0 12px,transparent 12px 26px) 0 7px/100% 9px no-repeat,
    repeating-linear-gradient(90deg,#fbf1e3 0 12px,transparent 12px 26px) 0 calc(100% - 7px)/100% 9px no-repeat,
    repeating-linear-gradient(90deg,#8a6a5a 0 44px,#5a3e33 44px 52px) 0 24px/100% calc(100% - 48px) no-repeat,
    #5a3e33;
  translate:0 0;will-change:translate}
/* Round shading so the wound film reads as a cylinder */
.fr-wind::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,18,14,.75),rgba(30,18,14,.2) 22%,rgba(255,240,230,.14) 45%,rgba(30,18,14,.1) 62%,rgba(30,18,14,.8))}
.fr-flange{position:absolute;left:0;right:0;height:36px;border-radius:50%}
.fr-top{top:0;background:radial-gradient(ellipse at 50% 42%,#f7c3cc,#f2a7b4 55%,#e58fa0 100%);box-shadow:inset 0 -5px 0 #d97d90,0 1px 0 rgba(90,40,50,.2)}
.fr-top i{position:absolute;left:50%;top:50%;width:30px;height:12px;margin:-7px 0 0 -15px;border-radius:50%;background:radial-gradient(ellipse,#8a5a3b 0 28%,#fbf1e3 32%);box-shadow:0 2px 0 #e58fa0}
.fr-top::before{content:'';position:absolute;left:18%;top:22%;width:26%;height:18%;border-radius:50%;background:rgba(255,255,255,.45)}
.fr-bottom{bottom:0;background:linear-gradient(#e58fa0,#d97d90);box-shadow:inset 0 5px 0 #f2a7b4,4px 10px 14px rgba(58,36,23,.26)}

/* The strip scrolls sideways; the sprocket holes are painted on the track */
.film-strip{position:relative;z-index:1;flex:1;background:#5a3e33;min-width:0;margin-left:calc(var(--rw) * -.5);overflow-x:auto;overflow-y:hidden;border-radius:8px;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;outline:none;contain:paint;box-shadow:0 10px 20px rgba(58,36,23,.26)}
.film-strip::-webkit-scrollbar{display:none}
.film-strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.film-strip:focus-visible{box-shadow:0 0 0 3px #f2a7b4,0 10px 20px rgba(58,36,23,.26)}
.film[data-dir="rtl"] .film-strip{margin-left:0;margin-right:calc(var(--rw) * -.5);direction:rtl}
.film-track{display:flex;gap:10px;width:max-content;padding:24px 12px;padding-inline-start:calc(var(--rw) * .5 + 10px);
  background:
    repeating-linear-gradient(90deg,#fbf1e3 0 12px,transparent 12px 26px) 0 7px/100% 9px no-repeat,
    repeating-linear-gradient(90deg,#fbf1e3 0 12px,transparent 12px 26px) 0 calc(100% - 7px)/100% 9px no-repeat,
    #5a3e33}

.film-frame{position:relative;flex:none;display:block;width:120px;height:160px;overflow:hidden;border-radius:5px;background:#2b2320;color:#fff;text-decoration:none;direction:ltr;transition:transform .35s var(--spring),box-shadow .2s ease}
a.film-frame:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 2px #f2a7b4}
a.film-frame:focus-visible{outline:3px solid #f2a7b4;outline-offset:2px}
.film-pic,.film-pic img,.film-pic video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.film-pic{-webkit-user-drag:none;user-select:none}
.film-play{position:absolute;left:50%;top:42%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,248,238,.9);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.film-play::after{content:'';position:absolute;left:11px;top:8px;border:7px solid transparent;border-left:10px solid #8a5a3b;border-right:0}
.film-frame:hover .film-play{opacity:0;transition:opacity .2s ease}
.film-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(20,14,12,.82));line-height:1.2}
.film-cap b{font-size:.74rem;line-height:1.2}
.film-cap small{font-size:.62rem;opacity:.75}

.film-title,.film-end{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 14px;line-height:1.25}
.film-title{background:#fbf1e3;color:#8a5a3b}
.film-title b{font-size:1rem;color:#5a3a22}
.film-title small{font-size:.7rem;color:#8a6a55}
.film-kicker{font:700 1.05rem/1 'Caveat',cursive;color:#e8826f}
.film-end{background:#e8826f;color:#fff8ee}
.film-end .film-kicker{color:#fff3e6}
.film-end b{font-size:.95rem}
.film-go{display:grid;place-items:center;width:30px;height:30px;margin-top:4px;border-radius:50%;background:#fff8ee;color:#e8826f;transition:transform .3s var(--spring)}
.film-end:hover .film-go{transform:translateX(4px)}


/* Unroll on open, roll back up on close */
@keyframes filmUnrollL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes filmUnrollR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes filmWind{from{translate:0 0}to{translate:var(--wind,104px) 0}}
@keyframes filmReelIn{from{transform:translateY(-14px) scale(.6);opacity:0}}
.film.is-unrolling .film-reel{animation:filmReelIn .35s var(--spring) both}
.film.is-unrolling .fr-surface{animation:filmWind 1.4s cubic-bezier(.3,.8,.3,1) both}
.film.is-unrolling .film-strip{animation:filmUnrollL 1.4s cubic-bezier(.3,.8,.3,1) both;will-change:clip-path}

.film[data-dir="rtl"].is-unrolling .film-strip{animation-name:filmUnrollR}
.film.is-rolling-up .film-strip{animation:filmUnrollL .55s cubic-bezier(.6,0,.8,.4) reverse both;will-change:clip-path}
.film[data-dir="rtl"].is-rolling-up .film-strip{animation-name:filmUnrollR}
.film.is-rolling-up .fr-surface{animation:filmWind .55s cubic-bezier(.6,0,.8,.4) reverse both}
.film.is-rolling-up .film-reel{animation:filmReelIn .25s ease-in .45s reverse both}


@media (max-width:700px){
  .film{--sh:180px;--rw:100px}
  .film-frame{width:104px;height:140px}
  .film-track{gap:10px;padding-top:20px;padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .film *{animation:none!important}
}