/* PARALLAX EFFECT*/
/* Marco general */
.torn-window{
  width: 100%;
  aspect-ratio: 2 / 3;
  /*margin-inline: auto;*/
  position: relative;
  overflow: visible;
  margin: 0;
}

html[data-bs-theme="light"] .torn-window.bg-light-dark {
    background: rgb(var(--bs-light-rgb));
}

html[data-bs-theme="dark"] .torn-window.bg-light-dark {
    background: linear-gradient(to bottom, rgb(var(--bs-dark-rgb)) 0%, rgb(var(--bs-black-rgb)) 100%);
}

html[data-bs-theme="light"] .torn-window.bg-white-black {
    background: rgb(var(--bs-white-rgb));
}

html[data-bs-theme="dark"] .torn-window.bg-white-black {
    background: linear-gradient(to bottom, rgb(var(--bs-black-rgb)) 0%, rgb(var(--bs-dark-rgb)) 100%);
}

/*
  VIEWPORT RECORTADO (AQUI vive el "papel roto")
  - Esto se desplaza normal con la página (como cualquier bloque).
  - La máscara NO cambia con el parallax porque NO la movemos.
*/
.torn-viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;            /* recorta de respaldo */
  background: rgba(0,0,0,.05); /* por si tarda en cargar la img */
  margin-left: -3px;
  /* ===== MASK SVG aplicado al viewport (no a la imagen) ===== */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400'%3E%3Cpath fill='white' d='M 0 -406 C 206 -336 219 -417 302 -460 C 457 -536 545 -522 593 -518 C 873 -487 781 -538 1000 -550 L 1000 748 C 770 970 753 847 628 892 C 396 963 460 882 281 856 C 197 854 173 858 0 980 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 110%;
  -webkit-mask-position: center;

  /*mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400'%3E%3Cpath fill='white' d='M 0 -406 C 206 -336 219 -417 302 -460 C 457 -536 545 -522 593 -518 C 873 -487 781 -538 1000 -550 L 1000 748 C 770 970 753 847 628 892 C 396 963 460 882 281 856 C 197 854 173 858 0 980 Z'/%3E%3C/svg%3E");*/
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400'%3E%3Cdefs%3E%3Cfilter id='strong-inner' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeFlood flood-color='black' flood-opacity='1'/%3E%3CfeComposite operator='out' in2='SourceGraphic'/%3E%3CfeMorphology operator='dilate' radius='10'/%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComposite operator='atop' in2='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23strong-inner)' d='M 0 -406 C 206 -336 219 -417 302 -460 C 457 -536 545 -522 593 -518 C 873 -487 781 -538 1000 -550 L 1000 748 C 770 970 753 847 628 892 C 396 963 460 882 281 856 C 197 854 173 858 0 980 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100% 110%;
  mask-position: center;
}

/* Capa imagen (la movemos con parallax) */
.torn-media{
  position:absolute;
  inset:0;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.torn-media img{
  width: 100%;
  height: 160%;       /* extra para que al mover no se vea hueco */
  position:absolute;
  left: 0;
  top: -30%;          /* centra la imagen dentro del viewport */
  object-fit: cover;
  display:block;
  will-change: transform;
  transform: translate3d(0,0,0);
}


/* Asegura orden: viewport y su contenido por debajo de overlays */
.torn-viewport{ z-index: 1; }
.torn-media{ z-index: 2; }

@media (prefers-reduced-motion: reduce){
  .torn-media img { transform:none !important; }
}