/* ============================================================================
   kaam.com · the 45 s film (Sep 2026) — the door on the homepage + the player.
   Source: next/home/film.css → copy to /assets/home/film.css, bump ?v= in b.html.
   Law kept: no colour edge on rounded cards, teal = the one action, mono = labels,
   no backdrop-filter / mix-blend on the fixed player (Safari + compositor traps).
   ========================================================================== */
.kfilm{padding-top:clamp(72px,11vw,132px)}

/* A · the disc */
.film-a{display:grid;gap:34px;justify-items:center;text-align:center;max-width:1040px;margin:0 auto}
@media(min-width:900px){.film-a{grid-template-columns:auto 1fr;gap:clamp(48px,6vw,88px);justify-items:start;text-align:left;align-items:center}}
.film-disc{position:relative;width:clamp(250px,32vw,390px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;
  -webkit-tap-highlight-color:transparent}
.film-disc .ring{position:absolute;inset:-12%;width:124%;height:124%;overflow:visible;animation:filmspin 36s linear infinite;pointer-events:none}
.film-disc .ring text{font-family:var(--f-mono);font-size:8.2px;letter-spacing:.34em;fill:var(--muted);font-weight:500}
.film-disc .disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--ink);
  box-shadow:0 34px 70px -34px rgba(27,33,64,.55),0 10px 24px -14px rgba(27,33,64,.35);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.film-disc .disc video{width:100%;height:100%;object-fit:cover;display:block}
.film-disc:hover .disc,.film-disc:focus-visible .disc{transform:scale(1.025)}
@keyframes filmspin{to{transform:rotate(360deg)}}
.fplay{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(21,26,46,.28);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fplay svg{width:28px;height:28px;fill:var(--teal);margin-left:4px}
.fplay::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:rgba(255,255,255,.28);animation:filmhalo 2.6s ease-out infinite}
@keyframes filmhalo{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.film-disc:hover .fplay{transform:scale(1.07)}
.film-tx .h2{margin-top:10px}
.film-tx .sub{margin-top:14px;max-width:34ch}
.film-go{margin-top:26px}
/* the second door: the 60 s features tour (opens in the same player) */
.tour-go{display:flex;align-items:center;gap:12px;margin-top:14px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);text-align:left;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease);width:max-content;max-width:100%}
.tour-go img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.tour-go b{display:block;font:600 14.5px/1.2 var(--f-body)}
.tour-go small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.tour-go svg{color:var(--teal);flex:none;transition:transform .25s var(--ease)}
.tour-go:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.tour-go:hover svg{transform:translateX(3px)}
.tour-go:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(max-width:899px){.film-tx .sub{margin-left:auto;margin-right:auto}.tour-go{margin-left:auto;margin-right:auto}}

@media(prefers-reduced-motion:reduce){.film-disc .ring,.fplay::before{animation:none}}

/* ---- the player ------------------------------------------------------------ */
.kfp{position:fixed;inset:0;z-index:1000;background:rgba(21,26,46,.96);display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.kfp.open{opacity:1;visibility:visible;transition:opacity .35s ease}
html.kfp-lock,html.kfp-lock body{overflow:hidden}
.kfp-stage{position:relative;width:min(1200px,92vw,calc((100svh - 140px)*16/9));aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.6);transform:scale(.96);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.kfp.open .kfp-stage{transform:none}
.kfp.tall .kfp-stage{width:min(92vw,calc((100svh - 110px)*9/16));aspect-ratio:9/16}
.kfp video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.kfp-x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}
.kfp-x:hover{background:rgba(255,255,255,.18)}
.kfp-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.kfp-brand{position:absolute;top:calc(18px + env(safe-area-inset-top));left:18px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7)}
.kfp-brand img{width:36px;height:36px;border-radius:50%}
.kfp-brand .lbl{color:rgba(255,255,255,.6)}
.kfp-big{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);display:grid;place-items:center;transition:opacity .25s,transform .25s}
.kfp-big svg{width:30px;height:30px;fill:var(--teal);margin-left:4px}
.kfp.playing .kfp-big{opacity:0;transform:scale(.9);pointer-events:none}
.kfp-bar{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;display:flex;align-items:center;gap:12px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(10,14,30,.7));transition:opacity .3s}
.kfp.playing.idle .kfp-bar{opacity:0}
.kfp.playing.idle{cursor:none}
.kfp-btn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.kfp-btn:hover{background:rgba(255,255,255,.22)}
.kfp-btn svg{width:17px;height:17px;fill:currentColor}
.kfp-time{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.8);min-width:92px;text-align:center}
.kfp-track{position:relative;flex:1;height:26px;cursor:pointer;touch-action:none}
.kfp-track::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:4px;background:rgba(255,255,255,.22)}
.kfp-fill{position:absolute;left:0;top:11px;height:4px;border-radius:4px;background:var(--teal);width:0}
.kfp-knob{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;left:0;box-shadow:0 2px 8px rgba(0,0,0,.35);
  transform:scale(0);transition:transform .15s}
.kfp-track:hover .kfp-knob,.kfp.scrub .kfp-knob{transform:scale(1)}
.kfp-end{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 20px 7%;opacity:0;
  pointer-events:none;transition:opacity .5s}
.kfp.ended .kfp-end{opacity:1;pointer-events:auto}
.kfp.ended .kfp-bar,.kfp.ended .kfp-big{opacity:0;pointer-events:none}
.kfp-end .btn.ghost{background:rgba(255,255,255,.92)}
@media(max-width:899px){.kfp-stage{border-radius:16px}.kfp-bar{padding:28px 12px 10px;gap:8px}.kfp-time{min-width:76px;font-size:10.5px}
  .kfp-brand .lbl{display:none}}
/* phones (Rishi 24 Sep: "the mobile version is now shifting weirdly, the fab is moving and the page becomes longer"):
   a spinning square's corners swing outside the screen and grow the page. No spin on phones, and nothing may spill. */
.kfilm{overflow-x:clip}
@media(max-width:899px){.film-disc .ring{animation:none}}