/* Ready2Party — animaciones (solo transform/opacity/clip-path; se apagan con movimiento reducido) */

/* Barra superior fija */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; transition: background-color .3s ease, box-shadow .3s ease; }
.top { max-width: none; padding-left: max(var(--espacio-2), calc((100% - 1200px) / 2)); padding-right: max(var(--espacio-2), calc((100% - 1200px) / 2)); }
.is-scrolled .top { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 var(--linea); backdrop-filter: blur(6px); }

/* ---------- entrada del inicio ---------- */
.anim .lockup-ready span { display: inline-block; opacity: 0; transform: translateY(.35em); animation: sube .6s cubic-bezier(.2,.7,.2,1) forwards; }
.anim .lockup-lines i { transform: scaleX(0); transform-origin: left; animation: traza .5s ease-out forwards; animation-delay: .75s; }
.anim .lockup-lines i + i { animation-delay: .85s; }
.anim .lockup-script { clip-path: inset(-.5em calc(100% + .4em) -.6em -.4em); animation: escribe 1s cubic-bezier(.5,0,.2,1) forwards; animation-delay: .95s; }
.anim .hero-lead, .anim .hero-actions { opacity: 0; transform: translateY(10px); animation: sube .5s ease-out forwards; animation-delay: 1.5s; }
.anim .hero-actions { animation-delay: 1.65s; }
.anim .hero-arch img, .anim .hero-arch video { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); animation: abre 1.1s cubic-bezier(.3,.6,.2,1) forwards; animation-delay: .2s; }
.anim .arch-lines path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dibuja 1.6s ease-in-out forwards; animation-delay: .4s; }
.anim .arch-lines path + path { animation-delay: .6s; }

@keyframes sube { to { opacity: 1; transform: none; } }
@keyframes traza { to { transform: scaleX(1); } }
@keyframes escribe { to { clip-path: inset(-.5em -.4em -.6em -.4em); } }
@keyframes abre { to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
@keyframes dibuja { to { stroke-dashoffset: 0; } }

/* ---------- video de la portada: aparece sobre la foto cuando ya está corriendo ---------- */
.hero-video { opacity: 0; transition: opacity .8s ease; }
.hero-video.listo { opacity: 1; }

/* ---------- arco que se dibuja junto a cada título ---------- */
.con-arco { display: flex; align-items: flex-end; gap: 14px; }
.con-arco::before {
  content: ""; flex: none; width: 26px; height: 32px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M2 32V13a11 11 0 0 1 22 0v19' fill='none' stroke='%237FB3C2' stroke-width='2'/%3E%3Cpath d='M8 32V14a5 5 0 0 1 10 0v18' fill='none' stroke='%231E4A5C' stroke-width='2'/%3E%3C/svg%3E");
}
.anim .con-arco::before { clip-path: inset(100% 0 0 0); transition: clip-path .9s cubic-bezier(.3,.6,.2,1); }
.anim .con-arco.visto::before { clip-path: inset(0 0 0 0); }

/* ---------- franja de foto grande ---------- */
.franja { position: relative; min-height: clamp(360px, 60vh, 620px); display: grid; place-items: center; overflow: hidden; color: var(--blanco); text-align: center; padding: var(--espacio-5) max(var(--espacio-2), env(safe-area-inset-left, 0px)); }
.franja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.franja.visto img { transform: scale(1); }
.franja::after { content: ""; position: absolute; inset: 0; background: rgba(27, 43, 51, .42); }
.franja p { position: relative; z-index: 1; margin: 0; font-family: var(--sans); font-style: italic; font-weight: 300; font-size: clamp(26px, 4.4vw, 44px); line-height: 1.25; letter-spacing: .01em; max-width: 18em; text-wrap: balance; }

/* ---------- foto al pasar el mouse en "Qué celebras" (solo computadora) ---------- */
.ev-preview { display: none; }
@media (hover: hover) and (min-width: 860px) {
  .eventos { position: relative; }
  .ev-preview {
    display: block; position: absolute; right: max(var(--espacio-2), calc((100% - 1200px) / 2)); top: 50%;
    width: 220px; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; pointer-events: none;
    opacity: 0; transform: translateY(-50%) scale(.96); transition: opacity .3s ease, transform .3s ease;
  }
  .ev-preview.on { opacity: 1; transform: translateY(-50%) scale(1); }
  .ev-preview img { width: 100%; height: 100%; object-fit: cover; }
  .ev-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
  .ev-preview video.listo { opacity: 1; }
  .event-list a { transition: padding-left .25s ease; }
  .event-list a:hover { padding-left: var(--espacio-3); }
  .event-list { margin-right: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .anim .lockup-ready span, .anim .hero-lead, .anim .hero-actions { opacity: 1; transform: none; animation: none; transition: none; }
  .anim .con-arco::before { clip-path: none; transition: none; }
  .anim .lockup-lines i { transform: none; animation: none; }
  .anim .lockup-script, .anim .hero-arch img, .anim .hero-arch video { clip-path: none; animation: none; }
  .anim .arch-lines path { stroke-dashoffset: 0; animation: none; }
  .franja img { transform: none; transition: none; }
}