/* Hublat — Inner Hero
   Centralized control for all internal section heroes.
   - Image opacity and blur handled here (not per page).
   - Overlay ensures text legibility across all backgrounds.
*/

.inner-hero{
  position: relative;
  overflow: hidden;

  /* Central knobs (can be tuned once for all sections) */
  --inner-hero-image-opacity: 0.22;   /* image visibility */
  --inner-hero-overlay-opacity: 0.62; /* dark overlay strength (dark mode default) */
  --inner-hero-blur: 2px;             /* image blur */
}

/* Light mode knobs */
html:not(.dark) .inner-hero{
  --inner-hero-image-opacity: 0.28;
  --inner-hero-overlay-opacity: 0.35;
}

/* Ensure foreground content is above media layers */
.inner-hero > *{
  position: relative;
  z-index: 3;
}

/* Base media layer (image) */
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: var(--hero-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: var(--inner-hero-image-opacity);
  filter: blur(var(--inner-hero-blur)) saturate(0.9);
  transform: translateZ(0);
  will-change: transform, opacity, filter;
}

/* Optional subtle motion (Ken Burns) */
@keyframes heroKenBurns {
  0%   { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.08) translate3d(-1%, -1%, 0); }
}
.hero-kenburns{
  animation: heroKenBurns 24s ease-in-out infinite alternate;
}

/* Universal overlay for legibility */
.inner-hero::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,var(--inner-hero-overlay-opacity));
  pointer-events: none;
}

/* Vignette (adds depth; doesn't replace overlay) */
.hero-vignette{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.28) 55%,
      rgba(0,0,0,0.55) 100%);
}

/* Grain/noise (very subtle) */
.hero-grain{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Improve readability of hero headings everywhere */
.inner-hero h1,
.inner-hero p{
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .hero-kenburns{ animation: none !important; }
}