/* ============================================================
   Apple Scroll Shrink — CSS
   Compatible con Flatsome & cualquier tema WordPress
   ============================================================ */

/* ── 1. Wrapper: ocupa el espacio de scroll ──────────────────── */
.ass-wrapper {
  position: relative;
  width: 100%;
  height: var(--ass-scroll-height, 200vh);
  /* Aseguramos que rompe el container de Flatsome para llegar a full-screen */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── 2. Sticky: fija el frame en pantalla mientras scrolleás ─── */
.ass-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* ── 3. Frame: el elemento que se transforma ─────────────────── */
.ass-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  border-radius: 0px;           /* empieza sin bordes */
  overflow: hidden;
  will-change: width, height, border-radius;
  pointer-events: auto;

  /* Sombra que aparece con el shrink */
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.05s linear;
}

/* ── 4. Media (video / imagen / iframe) ──────────────────────── */
.ass-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* Iframe de YouTube necesita escalar un poco más para evitar barras */
.ass-media--iframe {
  width: 177.78vh;   /* 16:9 escalado por alto */
  min-width: 100%;
  height: 56.25vw;   /* 16:9 escalado por ancho */
  min-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ── 5. Overlay opcional ─────────────────────────────────────── */
.ass-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--ass-overlay-color, 0, 0, 0), 0);
  pointer-events: none;
  transition: background 0.05s linear;
  z-index: 2;
}

/* ── 6. Estado "shrunk" (clase agregada por JS) ──────────────── */
.ass-frame.is-shrunk {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ── 7. Responsive: en mobile el container es más angosto ────── */
@media (max-width: 767px) {
  .ass-wrapper {
    height: calc(var(--ass-scroll-height, 200vh) * 0.75);
  }
}

/* ── 8. Reducir movimiento (accesibilidad) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ass-frame {
    width: 100% !important;
    height: 56.25vw !important;
    border-radius: 20px !important;
  }
  .ass-sticky {
    position: relative;
    height: auto;
  }
  .ass-wrapper {
    height: auto;
  }
}

/* ── 9. Asegurar que Flatsome no interfiera ──────────────────── */
.ass-wrapper .ass-sticky,
.ass-wrapper .ass-frame {
  max-width: none !important;
}