/* ============================================================
   MOOVLI — Media layer
   Hero looping-video background + violet scrim, and the
   image-slot framing used by the How-it-works photo and the
   Real-studios gallery. Loaded after anim.css.
   ============================================================ */

/* ---------------------------------------------------------------
   1 · Hero looping video background
   Sits behind the grid + content. A light violet-tinted scrim
   keeps the dark headline + dashboard fully legible over motion.
--------------------------------------------------------------- */
.hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; pointer-events:none; transition:opacity 1.1s ease;
}
.hero.has-video .hero-bg-video{ opacity:1; }

.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .8s ease;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(249,250,251,.66) 0%, rgba(249,250,251,.80) 52%, var(--bg) 96%);
}
.hero.has-video .hero-scrim{ opacity:1; }
/* keep the decorative grid above the scrim for texture */
.hero .hero-grid-bg{ z-index:1; }
/* drop hint while a video file is dragged over the hero */
.hero.video-drop::before{
  content:""; position:absolute; inset:14px; z-index:6; border-radius:24px; pointer-events:none;
  border:2px dashed var(--accent); background:color-mix(in srgb,var(--accent) 8%, transparent);
}

/* ---------------------------------------------------------------
   2 · Media frame (wraps every <image-slot>)
--------------------------------------------------------------- */
.media-frame{
  position:relative; border-radius:20px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .28s cubic-bezier(.33,1,.5,1), box-shadow .28s cubic-bezier(.33,1,.5,1);
}
.media-frame:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.media-frame > image-slot{ display:block; width:100%; height:100%; }
/* subtle violet inner edge so photos read as part of the brand system */
.media-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%, transparent);
}

/* ---------------------------------------------------------------
   3 · How-it-works wide photo
--------------------------------------------------------------- */
/* ratio-based (not a fixed height) so the 16:9 photo is never cropped to a thin 3:1 strip */
.how-photo{ aspect-ratio:5/2; margin:46px 0 0; }
.how-photo img{ object-position:50% 30%; }
@media(max-width:760px){ .how-photo{ aspect-ratio:16/10; } }

/* ---------------------------------------------------------------
   4 · Real-studios gallery
--------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:56px; }
.gallery-grid .g-tall{ grid-column:span 3; height:clamp(280px,30vw,380px); }
.gallery-grid .g-wide{ grid-column:span 2; height:clamp(210px,22vw,270px); }

@media(max-width:880px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid .g-tall{ grid-column:span 1; height:clamp(220px,40vw,300px); }
  .gallery-grid .g-wide{ grid-column:span 1; height:clamp(180px,34vw,240px); }
}
@media(max-width:520px){
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-grid .g-tall,.gallery-grid .g-wide{ height:230px; }
}