/* ========================================================================== AE Creative — Video modal (fullscreen YouTube player) Created once by assets/js/video-modal.js and appended to — no page includes this markup directly, so there is exactly one modal definition site-wide. Built entirely from existing tokens (colors, radii, shadows, ease) — no new colors, no new framework. The global `prefers-reduced-motion` override in animations.css already disables the transitions below automatically, same as every other animation on the site. ========================================================================== */ .video-modal{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,40px); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s; } .video-modal.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease)} .video-modal__backdrop{ position:absolute;inset:0;background:rgba(9,9,12,.88);backdrop-filter:blur(14px); } .video-modal__dialog{ position:relative;width:min(1000px,100%);z-index:1; transform:scale(.96);transition:transform .3s var(--ease); } .video-modal.is-open .video-modal__dialog{transform:scale(1)} .video-modal__close{ position:absolute;top:-52px;inset-inline-end:0;width:40px;height:40px;border-radius:99px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff; display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer; transition:background .2s var(--ease),transform .2s var(--ease); } .video-modal__close:hover,.video-modal__close:focus-visible{background:var(--grad);transform:scale(1.06)} .video-modal__frame{ position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden; background:var(--bg-1);border:1px solid var(--line-2);box-shadow:var(--e-3); } .video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-modal__empty{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; flex-direction:column;gap:10px;color:var(--text-2);font-size:14px;text-align:center;padding:24px; } .video-modal__empty-icon{ width:56px;height:56px;border-radius:99px;background:var(--brand-soft);border:1px solid var(--brand-line); color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px; } @media (max-width:640px){ .video-modal__close{top:-44px;width:36px;height:36px;font-size:14px} }