/* Skala hero — static rock that comes alive (video) on cursor movement */

#skala-hero-layer{
  position:absolute; inset:0; z-index:20; /* above sky(z-0)/ridge(z-10)/origin videos, below text(z-50) */
  overflow:hidden; pointer-events:none;
}
/* bleed so the parallax shift never exposes edges */
#skala-hero-layer .skala-media{ position:absolute; inset:-26px; will-change:transform; }
#skala-hero-layer img,
#skala-hero-layer video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
/* the video is revealed only inside a soft circular spot around the cursor;
   the spot's center/radius are driven from JS via CSS variables */
#skala-hero-layer video{
  --skala-mx:50%; --skala-my:50%; --skala-r:0px;
  opacity:1;
  -webkit-mask-image:radial-gradient(circle var(--skala-r) at var(--skala-mx) var(--skala-my), #000 52%, transparent 100%);
          mask-image:radial-gradient(circle var(--skala-r) at var(--skala-mx) var(--skala-my), #000 52%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* soft mist at the bottom so the dark rock melts into the light page below */
#skala-hero-layer .skala-fade{
  position:absolute; left:0; right:0; bottom:0; height:15%;
  background:linear-gradient(to bottom, transparent, #f4f8fc);
}

/* light hero text while the dark rock is on screen (glass pills keep their own bg) */
body.skala-dark #top h1{ color:#f4f8fc; text-shadow:0 2px 28px rgba(0,0,0,.55); }
body.skala-dark #top .text-ink:not(.glass-scrim *):not(.glass-light *){ color:#f4f8fc; }
body.skala-dark #top .text-ink-soft:not(.glass-scrim *):not(.glass-light *){ color:#d3dde6; }
body.skala-dark #top .text-ink-faint:not(.glass-scrim *):not(.glass-light *){ color:#a6b4c2; }

/* glass panels in the hero: grey frame + black text (white-on-white blended) */
#top .glass-scrim{
  border:1px solid rgba(110,122,134,.65) !important;
  background:rgba(255,255,255,.85) !important;
}
#top .glass-scrim, #top .glass-scrim *{ color:#10161b !important; }