/* Video slot of the public home, "Flicko Autopilot" (src/flicko-video-slot.js). A large rounded glass frame holding our
   poster (public/assets/flicko/video/autopilot-poster*) and, once a video is plugged in, the player in the same box.
   Studio D tokens only (src/flicko-tokens.css), so the frame follows light/dark; the poster is the same image in both.
   The box keeps the poster's ratio (16:9, 4:5 on phones) before and after the swap: no layout shift. */
.fk-vslot{position:relative;max-width:1100px;margin:0 auto;padding:clamp(8px,2vw,24px) 24px clamp(56px,8vw,104px);box-sizing:border-box}
.fk-vslot-frame{position:relative;padding:clamp(6px,1.1vw,14px);border-radius:var(--fk-radius-xl);background:var(--fk-glass-fill);border:1px solid var(--fk-glass-border);box-shadow:var(--fk-glass-highlight),var(--fk-glass-shadow);-webkit-backdrop-filter:var(--fk-glass-blur);backdrop-filter:var(--fk-glass-blur)}
.fk-vslot-media{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:calc(var(--fk-radius-xl) - 8px);background:var(--fk-surface-alt);isolation:isolate}
.fk-vslot-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--fk-line);pointer-events:none;z-index:3}
.fk-vslot-poster,.fk-vslot-poster img,.fk-vslot-video{position:absolute;inset:0;display:block;width:100%;height:100%}
.fk-vslot-poster img{object-fit:cover;-webkit-user-select:none;user-select:none}
.fk-vslot-video{object-fit:contain;background:var(--fk-scrim-video,#150D1C);z-index:1}
.fk-vslot-video:focus-visible{outline:3px solid var(--fk-focus);outline-offset:-6px}

/* Full-frame play button (shipped `hidden`; the module shows it only when a video is configured). */
.fk-vslot-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;color:var(--fk-play-ink,#1A1024);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
.fk-vslot-play::before{content:"";position:absolute;inset:0;background:rgba(26,16,36,.06);transition:background-color var(--fk-dur-flick) ease}
.fk-vslot-play:hover::before{background:rgba(26,16,36,.14)}
.fk-vslot-play:focus{outline:none}
.fk-vslot-play:focus-visible{outline:3px solid var(--fk-focus);outline-offset:-6px}
.fk-vslot-play:focus-visible .fk-vslot-chip{box-shadow:0 0 0 3px var(--fk-focus),inset 0 1px rgba(255,255,255,.9),0 14px 32px -12px rgba(26,16,36,.5)}
.fk-vslot-chip{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(76px,9vw,104px);height:clamp(54px,6.4vw,72px);border-radius:var(--fk-radius-lg);background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px rgba(255,255,255,.9),0 14px 32px -12px rgba(26,16,36,.5);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);transition:transform var(--fk-dur-flick) var(--fk-ease-flick)}
.fk-vslot-chip svg{width:34%;height:auto;margin-left:5%;fill:currentColor}
.fk-vslot-play:hover .fk-vslot-chip{transform:scale(1.05)}
.fk-vslot-play:active .fk-vslot-chip{transform:scale(.97)}

@media (max-width:640px){
.fk-vslot-chip{top:9%}
 .fk-vslot{padding-inline:16px}
 .fk-vslot-media{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
 .fk-vslot-chip,.fk-vslot-play::before{transition:none}
 .fk-vslot-play:hover .fk-vslot-chip,.fk-vslot-play:active .fk-vslot-chip{transform:none}
}