/* ==========================================================================
   SORIAN JOYERÍA - TRANSICIONES (transiciones.css)
   Movimiento con propósito: guiar la mirada, confirmar acciones y dar
   continuidad. Curvas suaves, duraciones cortas, nada que distraiga.
   ========================================================================== */

:root {
  --tr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --tr-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 1. Titular de la portada: cada línea sube desde una máscara ---------- */
.mk-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.mk-line > span {
  display: block;
}

body.intro-finished .mk-hero-hook {
  animation: none;
}

body.intro-finished .mk-line > span {
  animation: trLineUp 1s var(--tr-ease) backwards;
}

body.intro-finished .mk-line:nth-child(1) > span { animation-delay: 0.25s; }
body.intro-finished .mk-line:nth-child(2) > span { animation-delay: 0.37s; }
body.intro-finished .mk-line:nth-child(3) > span { animation-delay: 0.49s; }

@keyframes trLineUp {
  from { transform: translateY(105%); }
}

/* ---------- 2. Títulos de sección: suben desde una máscara al aparecer ---------- */
.reveal .sj-title,
.sj-title.reveal,
.mk-head-row.reveal .sj-title {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s var(--tr-ease) 0.08s, transform 0.9s var(--tr-ease) 0.08s;
}

.reveal:not(.is-revealed) .sj-title,
.sj-title.reveal:not(.is-revealed) {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.4em);
}

/* La etiqueta dorada encima del título se dibuja como una línea */
.reveal .sj-tag {
  transition: letter-spacing 1s var(--tr-ease), opacity 0.8s ease;
}

.reveal:not(.is-revealed) .sj-tag {
  letter-spacing: 0.6em;
  opacity: 0;
}

/* ---------- 3. Fotos: fundido al terminar de cargar (nunca aparecen de golpe) ---------- */
.pl-js .product-img:not(.product-img-alt),
.pl-js .mk-product-media img:not(.mk-product-alt),
.pl-js .mk-collection img,
.pl-js .qv-media img,
.pl-js .cart-item-img,
.pl-js .fav-item-img,
.pl-js .mk-why-media img {
  opacity: 0;
  transition-property: opacity, transform, clip-path;
  transition-duration: 0.6s, 1.1s, 1.1s;
  transition-timing-function: ease, var(--tr-ease), var(--tr-ease);
}

.pl-js .product-img.is-loaded:not(.product-img-alt),
.pl-js .mk-product-media img.is-loaded:not(.mk-product-alt),
.pl-js .mk-collection img.is-loaded,
.pl-js .qv-media img.is-loaded,
.pl-js .cart-item-img.is-loaded,
.pl-js .fav-item-img.is-loaded,
.pl-js .mk-why-media img.is-loaded {
  opacity: 1;
}

/* ---------- 4. Foto de portada: leve desplazamiento al hacer scroll ---------- */
@supports (animation-timeline: view()) {
  .mk-hero-img {
    animation: mkSlowZoom 14s var(--tr-ease) forwards, trParallax linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }

  .mk-why-media img {
    animation: trParallaxSoft linear both;
    animation-timeline: view();
  }
}

@keyframes trParallax {
  to { translate: 0 8%; }
}

@keyframes trParallaxSoft {
  from { translate: 0 -3%; }
  to { translate: 0 3%; }
}

/* ---------- 5. Barra de progreso de lectura (inicio) ---------- */
@supports (animation-timeline: scroll()) {
  body:has(.mk-hero)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    height: 2px;
    background: linear-gradient(90deg, var(--sj-gold-deep), var(--sj-gold));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: trProgress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
}

@keyframes trProgress {
  to { transform: scaleX(1); }
}

/* ---------- 6. Catálogo: las joyas se reacomodan al filtrar ---------- */
html.vt-catalog::view-transition-old(root) {
  animation: trFadeOut 0.18s ease both;
}

html.vt-catalog::view-transition-new(root) {
  animation: trFadeIn 0.28s ease 0.05s both;
}

::view-transition-group(*.pc) {
  animation-duration: 0.5s;
  animation-timing-function: var(--tr-ease);
}

::view-transition-old(*.pc) {
  animation: trCardOut 0.22s ease both;
}

::view-transition-new(*.pc) {
  animation: trCardIn 0.42s var(--tr-ease) 0.06s both;
}

/* Las tarjetas que se quedan solo se deslizan, sin parpadeo */
::view-transition-image-pair(*.pc) {
  isolation: auto;
}

@keyframes trFadeOut { to { opacity: 0; } }
@keyframes trFadeIn { from { opacity: 0; } }

@keyframes trCardOut {
  to { opacity: 0; transform: scale(0.96); }
}

@keyframes trCardIn {
  from { opacity: 0; transform: scale(0.96); }
}

/* Durante el reacomodo no se repite la entrada escalonada de las tarjetas */
html.vt-catalog .product-card {
  animation: none !important;
}

/* ---------- 7. Bolsa: salto breve al añadir una joya ---------- */
.pl-bump {
  animation: trBump 0.5s var(--tr-ease);
}

.pl-bump .badge-count {
  animation: trBadge 0.5s var(--tr-ease);
}

@keyframes trBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.14); }
  60% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes trBadge {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ---------- 8. Bolsa y ventanas: entrada con curva de cajón ---------- */
.theme-light .cart-drawer {
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.5s;
}

.theme-light .cart-drawer.active .cart-item-card {
  animation: trItemIn 0.45s var(--tr-ease) backwards;
}

.theme-light .cart-drawer.active .cart-item-card:nth-child(2) { animation-delay: 0.05s; }
.theme-light .cart-drawer.active .cart-item-card:nth-child(3) { animation-delay: 0.1s; }
.theme-light .cart-drawer.active .cart-item-card:nth-child(n+4) { animation-delay: 0.14s; }

@keyframes trItemIn {
  from { opacity: 0; transform: translateX(18px); }
}

.theme-light .drawer-backdrop {
  transition: opacity 0.4s ease, visibility 0.4s;
}

/* Vista rápida: la información entra después de la foto */
.modal-overlay.active .qv-info > * {
  animation: trRise 0.5s var(--tr-ease) backwards;
}

.modal-overlay.active .qv-info > *:nth-child(2) { animation-delay: 0.04s; }
.modal-overlay.active .qv-info > *:nth-child(3) { animation-delay: 0.08s; }
.modal-overlay.active .qv-info > *:nth-child(4) { animation-delay: 0.12s; }
.modal-overlay.active .qv-info > *:nth-child(n+5) { animation-delay: 0.16s; }

@keyframes trRise {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- 9. Enlaces con flecha: la flecha avanza ---------- */
.shop-hero-link i,
.mk-link i {
  transition: transform 0.3s var(--tr-ease);
}

.shop-hero-link:hover i {
  transform: translateY(3px);
}

.mk-link:hover i {
  transform: translateX(3px);
}

/* ---------- Reducir movimiento: todo quieto, contenido visible ---------- */
@media (prefers-reduced-motion: reduce) {
  body.intro-finished .mk-line > span,
  .mk-hero-img,
  .mk-why-media img,
  .pl-bump,
  .pl-bump .badge-count,
  .theme-light .cart-drawer.active .cart-item-card,
  .modal-overlay.active .qv-info > * {
    animation: none !important;
  }
  .reveal:not(.is-revealed) .sj-title,
  .sj-title.reveal:not(.is-revealed) {
    clip-path: none;
    transform: none;
  }
  .reveal:not(.is-revealed) .sj-tag {
    letter-spacing: inherit;
    opacity: 1;
  }
  .pl-js .product-img:not(.product-img-alt),
  .pl-js .mk-product-media img:not(.mk-product-alt),
  .pl-js .mk-collection img,
  .pl-js .qv-media img,
  .pl-js .cart-item-img,
  .pl-js .fav-item-img,
  .pl-js .mk-why-media img {
    transition: none;
  }
  body:has(.mk-hero)::before {
    display: none;
  }
}