/* ==========================================================================
   Envolve Media — site.css
   Base reset + design tokens carried verbatim from the 2026 prototypes, plus a
   thin layer that replaces the preview runtime's inline `style-hover` with real
   CSS :hover / :focus-visible, adds keyboard focus rings, a responsive mobile
   nav, and reduced-motion handling. Layout/spacing stays inline on the markup so
   the port is pixel-faithful to the prototypes.
   ========================================================================== */

/* --- Base (from prototype <style> blocks) ------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:#0a0b0f;
  color:#f4f6fb;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:#7cc0f5;text-decoration:none;}
a:hover{color:#a9d6f9;}
::selection{background:#2b53d8;color:#fff;}

img{max-width:100%;}
picture{display:contents;}          /* wrapper must not disturb the <img>'s box */

.site{position:relative;overflow-x:hidden;background:#0a0b0f;color:#f4f6fb;}

@keyframes emCue{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(8px);opacity:1;}}
@keyframes emFade{from{opacity:0;}to{opacity:1;}}

/* --- Keyboard focus visibility ----------------------------------------- */
a:focus-visible,button:focus-visible{
  outline:2px solid #5db8ef;
  outline-offset:3px;
  border-radius:6px;
}

/* --- Hover/focus helpers (replace runtime style-hover) ------------------ */
/* Text-colour link: nav bar + footer explore. */
.nav-link{color:#c1c8d4;transition:color .2s ease;}
.nav-link:hover,.nav-link:focus-visible,.nav-link[aria-current="page"]{color:#fff;}

/* Generic text link with per-element colours via --c / --ch. */
.tlink{color:var(--c,#7cc0f5);transition:color .2s ease;}
.tlink:hover,.tlink:focus-visible{color:var(--ch,#a9d6f9);}

/* Background / border / brightness / opacity deltas driven by custom props. */
.h-bg{transition:background .25s ease,border-color .25s ease;}
.h-bg:hover,.h-bg:focus-visible{background:var(--hb);}
.h-bd:hover,.h-bd:focus-visible{border-color:var(--hbc);}
.h-brighten{transition:filter .25s ease;}
.h-brighten:hover,.h-brighten:focus-visible{filter:brightness(var(--b,1.09));}
.h-op{transition:opacity .25s ease;}
.h-op:hover,.h-op:focus-visible{opacity:var(--o,1);}

/* Image zoom on hover of a parent card / gallery tile. */
.svc:hover img,.svc:focus-visible img{transform:scale(1.06);}
.gitem:hover img,.gitem:focus-visible img{transform:scale(1.05);}

/* Video facade play button: base centring here so :hover can scale it. */
.playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .25s ease;}
.facade:hover .playbtn,.facade:focus-visible .playbtn{transform:translate(-50%,-50%) scale(1.08);}

/* --- Navigation: desktop bar + mobile disclosure menu ------------------ */
.nav-desktop{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#f4f6fb;cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);}

.nav-mobile{
  position:fixed;top:0;left:0;right:0;z-index:55;
  display:flex;flex-direction:column;
  padding:84px clamp(20px,6vw,120px) 30px;
  background:rgba(9,10,14,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .3s ease,visibility .38s;
}
.nav-mobile.open{transform:translateY(0);opacity:1;visibility:visible;}
.nav-mobile .nav-link{
  padding:15px 4px;font-size:18px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.07);
}
@media (min-width:721px){.nav-mobile{display:none;}}
@media (max-width:720px){
  .nav-desktop{display:none;}
  .nav-toggle{display:inline-flex;}
}
body.em-menu-open{overflow:hidden;}

/* --- Responsive: movie playlist grid 3 -> 2 -> 1 ----------------------- */
@media (max-width:900px){.movie-grid{grid-template-columns:repeat(2,1fr)!important;}}
@media (max-width:560px){.movie-grid{grid-template-columns:1fr!important;}}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}