/* OSVI Fragances — movimiento: entradas y salidas al hacer scroll, parallax,
   frascos que flotan, glows y transición entre páginas.
   Todo vive bajo .js-mov (lo pone osvi.js), así sin JavaScript o con
   «reducir movimiento» la página se ve completa y quieta. */

/* ---------- Transición entre páginas ---------- */
/* Transición entre páginas: la estrella de OSVI crece desde el clic y cubre la pantalla
   (filo dorado + relleno verde noche); en la página nueva se cierra al centro. */
@property --cortina { syntax: "<length>"; inherits: true; initial-value: 0px; }
.js-mov { --cx: 50vw; --cy: 50vh; }
.js-mov::before, .js-mov::after {
  --k: 1; content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 400;
  clip-path: polygon(
    var(--cx) calc(var(--cy) - var(--cortina) * var(--k) * .5),
    calc(var(--cx) + var(--cortina) * var(--k) * .16) calc(var(--cy) - var(--cortina) * var(--k) * .16),
    calc(var(--cx) + var(--cortina) * var(--k) * .5) var(--cy),
    calc(var(--cx) + var(--cortina) * var(--k) * .16) calc(var(--cy) + var(--cortina) * var(--k) * .16),
    var(--cx) calc(var(--cy) + var(--cortina) * var(--k) * .5),
    calc(var(--cx) - var(--cortina) * var(--k) * .16) calc(var(--cy) + var(--cortina) * var(--k) * .16),
    calc(var(--cx) - var(--cortina) * var(--k) * .5) var(--cy),
    calc(var(--cx) - var(--cortina) * var(--k) * .16) calc(var(--cy) - var(--cortina) * var(--k) * .16));
}
.js-mov::before { background: linear-gradient(135deg, #94692A, #F3DDA4 45%, #D2A65C 70%, #94692A); }
.js-mov::after { --k: .9; background: radial-gradient(circle at var(--cx) var(--cy), #0b2019, #04110E 45%); }
.js-mov.saliendo { animation: cortina-cubre .55s cubic-bezier(.7, 0, .84, 0) forwards; }
.js-mov.entrando { animation: cortina-descubre .9s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes cortina-cubre { from { --cortina: 0px; } to { --cortina: 900vmax; } }
@keyframes cortina-descubre { from { --cortina: 900vmax; } to { --cortina: 0px; } }

/* ---------- Entradas y salidas al hacer scroll ---------- */
.js-mov [data-anim] {
  opacity: 0;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay: var(--retraso, 0s);
  will-change: opacity, transform;
}
.js-mov [data-anim="subir"]   { transform: translateY(46px); }
.js-mov [data-anim="izq"]     { transform: translateX(-60px); }
.js-mov [data-anim="der"]     { transform: translateX(60px); }
.js-mov [data-anim="zoom"]    { transform: scale(.9); filter: blur(6px); }
.js-mov [data-anim="girar"]   { transform: translateY(40px) rotate(-9deg) scale(.94); }
/* La cortina recorta la foto, no la tarjeta: un elemento recortado entero
   no cuenta como visible para IntersectionObserver y nunca entraría. */
.js-mov [data-anim="cortina"] { transform: translateY(40px); }
.js-mov [data-anim="cortina"] img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) var(--retraso, 0s), transform .12s linear; }
.js-mov [data-anim="cortina"].visible img { clip-path: inset(0 0 0 0); }
.js-mov [data-anim].visible {
  opacity: 1; transform: none; filter: none;
}
/* La tarjeta de lealtad conserva su giro al terminar de entrar */
.js-mov .tarjeta-lealtad[data-anim].visible { transform: rotate(-2.5deg); }
/* Al salir de pantalla se va más rápido y sin retraso */
.js-mov [data-anim].saliendo-vista { transition-duration: .5s; transition-delay: 0s; }

/* Títulos: cada línea sube desde una máscara */
.js-mov .titulo[data-anim="titulo"] { opacity: 1; }
.titulo .linea-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.titulo .linea-mask > span { display: block; }
.js-mov .titulo[data-anim="titulo"] .linea-mask > span { transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--retraso, 0s) + var(--l, 0) * 90ms); }
.js-mov .titulo[data-anim="titulo"].visible .linea-mask > span { transform: none; }

/* ---------- Parallax de fotos ---------- */
.js-mov [data-parallax] { transform: translate3d(0, var(--py, 0px), 0) scale(var(--zoom, 1.14)); transition: transform .12s linear; }
/* Más específico que el zoom de hover de osvi.css, para no perder el desplazamiento */
.js-mov .coleccion img[data-parallax] { transform: translate3d(0, var(--py, 0px), 0) scale(var(--zoom, 1.14)); transition: transform .12s linear, filter .6s, clip-path 1.3s var(--ease) var(--retraso, 0s); }
.js-mov .coleccion:hover img[data-parallax] { --zoom: 1.2; }
.foto-marco { overflow: visible; }
.foto-marco__caja { position: relative; z-index: 1; overflow: hidden; border-radius: var(--radio); }
.foto-marco__caja img { display: block; }

/* ---------- Frascos que flotan ---------- */
@media (prefers-reduced-motion: no-preference) {
  .producto-foto { animation: flotar-frasco 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.9s); }
  .ficha__media .producto-foto { animation-duration: 7s; }
}
@keyframes flotar-frasco { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- Glow detrás de cada frasco ---------- */
.tarjeta__media, .ficha__media { isolation: isolate; }
.tarjeta__media::before, .ficha__media::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--mx, 50%); top: var(--my, 52%); width: 78%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--brillo, #D2A65C) 55%, transparent) 0%, color-mix(in srgb, var(--brillo, #D2A65C) 18%, transparent) 38%, transparent 68%);
  filter: blur(18px); opacity: .55;
  transition: opacity .5s, width .6s var(--ease), left .25s ease-out, top .25s ease-out;
}
.ficha__media::before { width: 70%; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .tarjeta__media::before, .ficha__media::before { animation: latir 4.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
}
@keyframes latir { 0%, 100% { scale: 1; opacity: .5; } 50% { scale: 1.12; opacity: .8; } }
.tarjeta__media:hover::before { opacity: 1; width: 92%; }

/* Un brillo que cruza la tarjeta al pasar el cursor */
.tarjeta__media::after { transition: border-color .4s, background-position .9s var(--ease); background: linear-gradient(115deg, transparent 35%, rgba(243, 221, 164, .14) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 120% 0; }
.tarjeta:hover .tarjeta__media::after { background-position: -20% 0; }

/* ---------- Inclinación 3D que sigue al cursor ---------- */
.js-mov .tarjeta__media, .js-mov .ficha__media { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.js-mov .tarjeta__media.inclinando, .js-mov .ficha__media.inclinando { transition: transform .08s linear; }
.js-mov .estrella-marco { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }

/* ---------- Glow de la estrella de la portada ---------- */
.estrella-marco::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(243, 221, 164, .35), rgba(210, 166, 92, .12) 45%, transparent 70%);
  filter: blur(30px);
}
@media (prefers-reduced-motion: no-preference) {
  .estrella-marco::before { animation: latir 6s ease-in-out infinite; }
  .estrella-marco__linea { animation: aparecer 1.2s ease both .9s, girar-linea 40s linear infinite 2s; transform-origin: 50% 50%; }
  .estrella-marco__chispa { animation: titilar 3.4s ease-in-out infinite; }
  .estrella-marco__chispa + .estrella-marco__chispa { animation-delay: 1.7s; }
}
@keyframes girar-linea { to { rotate: 360deg; } }
@keyframes titilar { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .25; scale: .5; } }

/* ---------- Auras doradas que se mueven en los fondos oscuros ---------- */
.con-aura { position: relative; overflow: hidden; isolation: isolate; }
.con-aura > .contenedor, .con-aura > img { position: relative; }
.aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.con-aura > .contenedor { z-index: 1; }
.autor.con-aura > img { z-index: -2; position: absolute; }
.aura i {
  position: absolute; width: 46vmax; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 166, 92, .16), transparent 62%);
  filter: blur(40px);
}
.aura i:nth-child(1) { left: -12%; top: -20%; }
.aura i:nth-child(2) { right: -14%; bottom: -30%; width: 38vmax; background: radial-gradient(circle, rgba(20, 58, 48, .9), transparent 65%); }
.aura i:nth-child(3) { left: 40%; top: 30%; width: 26vmax; background: radial-gradient(circle, rgba(243, 221, 164, .08), transparent 60%); }
@media (prefers-reduced-motion: no-preference) {
  .aura i:nth-child(1) { animation: deriva-a 22s ease-in-out infinite alternate; }
  .aura i:nth-child(2) { animation: deriva-b 28s ease-in-out infinite alternate; }
  .aura i:nth-child(3) { animation: deriva-c 18s ease-in-out infinite alternate; }
}
@keyframes deriva-a { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes deriva-b { to { transform: translate(-20vw, -12vh) scale(.9); } }
@keyframes deriva-c { to { transform: translate(-14vw, 10vh) scale(1.3); } }

/* Partículas doradas que suben en «Fragancias de autor» */
.chispas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.chispas span { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--champan); box-shadow: 0 0 10px 2px rgba(243, 221, 164, .55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .chispas span { animation: chispa-sube var(--d, 9s) linear infinite; animation-delay: var(--r, 0s); }
}
@keyframes chispa-sube { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 85% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--x, 20px), -110vh); } }

/* ---------- Botones dorados con destello ---------- */
.btn--oro { position: relative; overflow: hidden; }
.btn--oro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); }
@media (prefers-reduced-motion: no-preference) {
  .btn--oro:hover::after { animation: destello .9s var(--ease); }
}
@keyframes destello { to { transform: translateX(120%); } }

/* ---------- Visor 3D ---------- */
.ver-3d {
  position: absolute; z-index: 3; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: 21px; border: 1px solid rgba(210, 166, 92, .55); background: rgba(4, 17, 14, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--champan); font: 600 12px/1 var(--f-texto); letter-spacing: .06em;
  transition: background .3s, border-color .3s;
}
.ver-3d:hover { background: rgba(14, 42, 35, .9); border-color: var(--oro); }
.ver-3d:disabled { opacity: .7; cursor: progress; }
.ver-3d svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ver-ar { right: auto; left: 18px; }
.ficha__media.en-3d .ver-ar { display: none; }

/* Realidad aumentada (model-viewer) */
.ar-capa { position: fixed; inset: 0; z-index: 120; background: radial-gradient(70% 60% at 50% 45%, #0e2a23, var(--verde-noche)); display: grid; }
.ar-capa model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.ar-capa__ir { position: absolute; left: 50%; bottom: 32px; translate: -50% 0; white-space: nowrap; }
.ar-capa__nota { position: absolute; left: 24px; right: 24px; bottom: 32px; text-align: center; font: italic 400 18px/1.4 var(--f-serif); color: var(--champan); }
.ar-capa__cerrar { position: absolute; top: 16px; right: 16px; color: var(--champan); }
.visor3d__lienzo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 2; cursor: grab; touch-action: none; }
.visor3d__lienzo:active { cursor: grabbing; }
.ficha__media.en-3d { transform: none !important; }
.ficha__media.en-3d > .producto-foto, .ficha__media.en-3d > .ficha__estrella { opacity: 0; transition: opacity .4s; }
.visor3d__pista { position: absolute; z-index: 3; left: 0; right: 0; top: 22px; text-align: center; font-size: 12px; color: #CFC7B4; opacity: 0; pointer-events: none; transition: opacity .5s; }
.ficha__media.en-3d .visor3d__pista { opacity: 1; }
.ficha__media.visor3d--tocado .visor3d__pista { opacity: 0; }

@media (pointer: coarse) {
  .js-mov .tarjeta__media, .js-mov .ficha__media, .js-mov .estrella-marco { transform: none; }
}