/* th-film.css — S24e (2026-10-06): the solution page's video frame (_thbuild/v13/top.js film(), assets/th/th-film.js), on top of
   th.css §54 (the frame) and §58 (the "Stop. Watch this video." sign right above it). Duval 10-06: a real preview image, the
   play disc PERFECTLY in the middle, "Must watch · N min" at the top and nothing else (no length or progress at the bottom, no
   controls: a tap plays, a tap pauses), and a pattern + an effect around the box. Four tones only; prefers-reduced-motion
   stops every loop. Linked right before the sign, so the frame never paints unstyled. */
@property --tpf-a{syntax:'<angle>';inherits:false;initial-value:0deg}
/* the effect: a mint light runs round the bezel; the glow above breathes */
.tp-film.tp-film--video{aspect-ratio:16/9;cursor:pointer;-webkit-tap-highlight-color:transparent;border-color:rgba(79,216,166,.3);
  background:conic-gradient(from var(--tpf-a),rgba(255,255,255,.07) 0turn,rgba(255,255,255,.07) .56turn,rgba(79,216,166,.3) .7turn,#66E9B9 .8turn,#4FD8A6 .85turn,rgba(79,216,166,.3) .93turn,rgba(255,255,255,.07) 1turn);
  box-shadow:0 0 0 1px rgba(79,216,166,.12),0 0 48px -8px rgba(52,245,173,.32),0 60px 120px -60px rgba(52,245,173,.35),0 30px 70px -40px rgba(0,0,0,.9);
  animation:tpfrun 5.5s linear infinite}
@keyframes tpfrun{to{--tpf-a:1turn}}
.tp-film--video .tp-film__glow{animation:tpfglow 4.8s ease-in-out infinite}
@keyframes tpfglow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
/* the pattern: a field of mint dots round the box, strongest at the middle of each edge, drifting slowly */
.tp-film.tp-film--video::before{content:"";position:absolute;z-index:-2;inset:-30px -70px;pointer-events:none;
  background-image:radial-gradient(circle,rgba(79,216,166,.62) 1.3px,transparent 1.75px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);
  animation:tpfdots 16s linear infinite}
@keyframes tpfdots{to{background-position:18px 18px}}
/* inside: the cover (a real frame of the video), a shade for the tag and the disc, the light sweep (th.css), the tag, the disc */
.tp-film--video .tp-film__in{gap:0;background:#02180F}
.tp-film__img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.tp-film--video .tp-film__in::before{z-index:1;opacity:1;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 30%),radial-gradient(40% 46% at 50% 50%,rgba(0,0,0,.3),rgba(0,0,0,0));
  -webkit-mask-image:none;mask-image:none;transition:opacity .25s}
.tp-film--video .tp-film__in::after{z-index:1;transition:opacity .25s}
.tp-film--video .tp-film__tag{z-index:2;font-size:.8rem;background:rgba(2,24,15,.62);border-color:rgba(79,216,166,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .2s,visibility 0s .2s}
.tp-film--video .tp-film__tag b{display:inline-flex;align-items:center;gap:.6em;font-weight:800;color:#4FD8A6}
.tp-film--video .tp-film__tag b::before{content:"";width:1px;height:1.1em;background:rgba(255,255,255,.38)}
.tp-film--video .tp-film__play{z-index:2;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s,visibility 0s .2s}
.tp-film--video .tp-film__play svg{margin-left:0}
@media (hover:hover){.tp-film--video:not(.is-playing):hover .tp-film__play,.tp-film--video.is-paused:hover .tp-film__play{transform:scale(1.07)}}
.tp-film--video:focus-visible{outline:3px solid #4FD8A6;outline-offset:4px}
/* a tap before the video has data: a ring turns round the disc (shown only after 0.15 s, so a ready video never flashes it) */
.tp-film--video .tp-film__play::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;opacity:0;transition:opacity .2s}
.tp-film--video.is-loading .tp-film__play::before{opacity:1;transition-delay:.15s;animation:tpfspin .8s linear infinite}
@keyframes tpfspin{to{transform:rotate(1turn)}}
/* playing: the video only — no controls, no time, no progress */
.tp-film__video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:contain;background:#000;border:0;opacity:0;transition:opacity .2s}
.tp-film--video.is-playing .tp-film__video{z-index:3;opacity:1}
.tp-film--video.is-playing .tp-film__img,.tp-film--video.is-playing .tp-film__in::before,.tp-film--video.is-playing .tp-film__in::after{opacity:0}
.tp-film--video.is-playing .tp-film__tag,.tp-film--video.is-playing .tp-film__play{opacity:0;visibility:hidden}
/* paused: the shade, the tag and the disc come back over the paused picture */
.tp-film--video.is-playing.is-paused .tp-film__in::before{z-index:4;opacity:1}
.tp-film--video.is-playing.is-paused .tp-film__tag,.tp-film--video.is-playing.is-paused .tp-film__play{z-index:5;opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
@media (max-width:760px){
  .tp-film.tp-film--video::before{inset:-16px -14px}
  /* on a phone the disc is a little smaller, so it stays in the clear middle of the preview (words end by 42 %, cards start at 57 %) */
  .tp-film--video .tp-film__play{width:clamp(44px,12.5vw,58px);box-shadow:0 0 0 5px rgba(79,216,166,.18),0 16px 40px -12px rgba(52,245,173,.6)}
}
/* a phone: the tag says only the length (the sign right above already says "Stop. Watch this video."), so it never covers the preview's card */
@media (max-width:480px){
  .tp-film--video .tp-film__must,.tp-film--video .tp-film__tag b::before{display:none}
  .tp-film--video .tp-film__tag{padding:.5em .85em}
}
@media (prefers-reduced-motion:reduce){
  .tp-film.tp-film--video,.tp-film.tp-film--video::before,.tp-film--video .tp-film__glow{animation:none}
  .tp-film--video.is-loading .tp-film__play::before{animation-duration:2s}
}
/* v5 (2026-10-13, Duval: "the video block is physically too small on the laptop"): on a laptop or desktop the video frame fills
   the column (up to 1180 px) and is as big as the screen's height allows WHOLE (the screen minus the fixed nav and a margin):
   on a 1536x730 laptop window ~1100 px wide instead of 600. The buttons sit right under it (no longer on the first screen);
   a tap scrolls the whole frame into view (th-film.js into()). More specific than th.css's ".tp-hero .tp-film" rule. */
@media (min-width:901px) and (min-height:521px){
  .tp-hero .tp-film.tp-film--video{width:min(100%,1180px,calc((100vh - 112px) * 16 / 9))}
}
/* v5: while the video plays, the bezel light (a conic gradient turned by --tpf-a: the whole frame repainted every frame), the dot
   field and the glow stand still; they start again when the cover comes back */
.tp-film.tp-film--video.is-playing,.tp-film.tp-film--video.is-playing::before,.tp-film--video.is-playing .tp-film__glow{animation-play-state:paused}