/* =============================================
   NARRATIVA VISUAL PROFESIONAL - ETHARA SYSTEMS
   Nivel Fortune 500 · Cinematográfico
   Imagen HD 2880×4320px con cover
   ============================================= */

.ethara-visual {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: #000;
  will-change: transform;

  /* Custom properties para overlays dinámicos */
  --overlay-opacity: 0.6;
  --vignette-opacity: 0.5;
}

/* Imagen HD con object-fit cover */
.ethara-visual__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  will-change: object-position, transform;

  /* Optimización de rendering */
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* Overlay adaptativo para profundidad */
.ethara-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.2) 100%
  );
  opacity: var(--overlay-opacity);
  will-change: opacity;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}

/* Vignette cinematográfico */
.ethara-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  opacity: var(--vignette-opacity);
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity 0.4s ease-out;
}

#root {
  position: relative;
  z-index: 10;
  min-height: 300vh;
}

/* Fade in inicial suave */
@keyframes narrativeFadeIn {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ethara-visual__image.loaded {
  animation: narrativeFadeIn 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}