/* ÁLBUM VIVO · DIRECCIÓN DE MOVIMIENTO V6
   Tres momentos de portada: insignia → fotografías → sello del aniversario.
   CSS @keyframes para entrada; IntersectionObserver únicamente activa clases de
   visibilidad. Toda animación respeta prefers-reduced-motion.
   Easing de rebote controlado: cubic-bezier(.34,1.56,.64,1).
*/
:root {
  --motion-spring: cubic-bezier(.34,1.56,.64,1);
  --motion-ease: cubic-bezier(.22,.72,.28,1);
  --motion-fast: 220ms;
  --motion-medium: 480ms;
  --motion-long: 860ms;
}
/* La insignia proporcionada tiene transparencia auténtica y silueta cuadrada;
   nunca la recortamos con clip-path ni con object-fit:cover. */
.logo img {width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 2px #07152c16);transition:transform .5s var(--motion-spring),filter .4s ease;}
.logo:hover img,.logo:focus-visible img {transform:rotate(-6deg) scale(1.08);filter:drop-shadow(0 7px 7px #07152c30)}
.footer-brand img {width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 12px #0005)}
.manifesto-crest img {object-fit:contain;width:auto;max-width:min(100%,240px);max-height:245px;filter:drop-shadow(0 12px 20px #0004)}
.hero-micro {gap:17px;align-items:center;margin-bottom:24px;letter-spacing:.04em;line-height:1.5;}
.hero-micro > span {display:block;color:#d5e0fb;font:600 11px/1.6 var(--mono);letter-spacing:.075em;}
.hero-micro > span b {color:var(--oro);font-size:10px;font-weight:600;}
.hero-mini-crest {height:82px;width:82px;flex:0 0 82px;object-fit:contain;filter:drop-shadow(0 7px 16px #0005)}
/* Entrada de portada: tres escenas rápidas, sin bucle que distraiga. */
.hero-micro {animation:herotext-in .7s .08s var(--motion-ease) both;}
.hero-mini-crest {animation:crest-seal .9s .13s var(--motion-spring) both;}
.hero h1 {animation:herotext-in .84s .32s var(--motion-ease) both;}
.hero-copy>p {animation:herotext-in .85s .55s var(--motion-ease) both;}
.hero-buttons {animation:herotext-in .75s .72s var(--motion-ease) both;}
.hero-place {animation:herotext-in .75s .9s var(--motion-ease) both;}
.hero-stage::before {animation:orb-reveal .9s .3s var(--motion-spring) both;}
.hero-image-main {animation:photocard-arrive .92s .48s var(--motion-ease) both;transform-origin:50% 55%;transition:filter .5s var(--motion-ease)}
.hero-image-mini {animation:photomini-arrive .85s 1.0s var(--motion-spring) both;transform-origin:center;}
.hero-stamp {animation:stamp-arrive 1.05s 1.48s var(--motion-spring) both;}
.hero-spark-one {animation:spark-arrive .8s 1.9s var(--motion-spring) both;}
.hero-spark-two {animation:spark-arrive .8s 2.05s var(--motion-spring) both;}
.hero-running {animation:herotext-in .72s 2.15s var(--motion-ease) both;}
@keyframes herotext-in {0%{opacity:0;transform:translateY(28px);visibility:hidden}100%{opacity:1;transform:translateY(0);visibility:visible}}
@keyframes crest-seal {0%{opacity:0;transform:scale(.65) rotate(-26deg)}75%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes orb-reveal {from{opacity:0;transform:scale(.7) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes photocard-arrive {from{opacity:0;transform:translate(64px,35px) rotate(11deg) scale(.92)}to{opacity:1;transform:rotate(4deg) scale(1)}}
@keyframes photomini-arrive {from{opacity:0;transform:translate(-46px,48px) rotate(-17deg) scale(.86)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes stamp-arrive {from{opacity:0;transform:scale(.55) rotate(-48deg)}65%{opacity:1}to{opacity:1;transform:scale(1) rotate(-12deg)}}
@keyframes spark-arrive {from{opacity:0;transform:scale(.5) rotate(-55deg)}to{opacity:1;transform:scale(1) rotate(0)}}
/* Hover: eleva las fotografías con suavidad sin alterar su encuadre real. */
@media (hover:hover){
  .hero-stage:hover .hero-image-main {filter:brightness(1.07)}
  .hero-stage:hover .hero-image-mini {filter:drop-shadow(0 10px 12px #0003)}
}
/* Señalización accesible, consistente y no decorativa. */
.main-nav a:not(.nav-special){position:relative;}
.main-nav a:not(.nav-special)::after{content:'';position:absolute;bottom:-8px;left:0;right:100%;height:2px;background:var(--rojo);transition:right .35s var(--motion-ease)}
.main-nav a:not(.nav-special):hover::after,.main-nav a:not(.nav-special):focus-visible::after{right:0}
.button,.filter,.round-arrow,.tab,.btn,.dialog-arrow {transition:transform .3s var(--motion-spring),background-color .25s ease,box-shadow .35s var(--motion-ease),color .25s ease;}
.button:active,.filter:active,.dialog-arrow:active,.btn:active{transform:scale(.97)}
.button-yellow:hover {box-shadow:0 12px 25px #ffd90034}
.button-blue:hover {box-shadow:0 12px 24px #0c2b5f30}
/* Colección de entradas al hacer scroll; no hay desvanecimientos eternos. */
.motion-ready .motion-item {opacity:0;visibility:hidden;transform:translateY(30px);transition:opacity .68s var(--motion-ease),transform .72s var(--motion-ease),visibility 0s .72s;will-change:opacity,transform}
.motion-ready .motion-item.is-visible {opacity:1;visibility:visible;transform:translateY(0);transition-delay:0ms;}
.motion-ready .motion-item.motion-order-1.is-visible{transition-delay:75ms}
.motion-ready .motion-item.motion-order-2.is-visible{transition-delay:145ms}
/* Fotografías y videos se incorporan al flujo conservando sus tamaños. */
.gallery-photo {overflow:hidden;position:relative;isolation:isolate}
.gallery-photo img {transition:transform .7s var(--motion-ease),filter .5s ease;}
.gallery-photo:after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(126deg,transparent 43%,#fff4 50%,transparent 57%);transform:translateX(-150%);transition:transform .72s ease;}
.gallery-photo:hover:after,.gallery-photo:focus-visible:after{transform:translateX(150%)}
.gallery-photo:hover img,.gallery-photo:focus-visible img{transform:scale(1.045)}
.zoom-icon {transition:transform .3s var(--motion-spring),background .25s ease}
.gallery-photo:hover .zoom-icon{transform:rotate(45deg) scale(1.08)}
.place-card .round-arrow {transition:transform .55s var(--motion-spring),background .25s ease,color .25s ease}
.place-card:hover .round-arrow,.place-card:focus-visible .round-arrow{transform:rotate(45deg)}
.place-card:active {transform:translateY(-2px)}
.video-card {transition:transform .38s var(--motion-ease),box-shadow .38s ease}
.video-card:hover {transform:translateY(-5px);box-shadow:0 20px 42px #101b3c23}
.video-frame {overflow:hidden}
.video-frame video {transition:filter .35s ease}
.video-card:hover video {filter:brightness(1.055)}
/* Transición de identidad y comentario, conservando lectura y accesibilidad. */
.manifesto-crest {transform-origin:center}
.manifesto-copy .eyebrow {animation:none}
.comments-panel:focus-within{box-shadow:0 28px 70px #0e2a6430}
.anonymous-promise {font:600 12px/1.55 var(--body);color:#315774;background:#edf7fe;padding:10px 13px;border-left:3px solid #2b84b9;border-radius:3px;margin:0 0 9px}
.anonymous-promise span{font-size:15px;color:#1f698f;margin-right:6px}
.comment-item {animation:comment-appear .4s var(--motion-ease) both}
@keyframes comment-appear {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.comment-meta .anonymous-tag {color:#175f83;font:700 10px/1.4 var(--mono);letter-spacing:.06em;background:#e9f4fa;padding:6px 9px;border-radius:5px}
.comment-item:hover {border-color:#9badcd}
.photo-dialog[open]{animation:dialog-enter .3s var(--motion-ease) both}
.photo-dialog[open]::backdrop{animation:backdrop-enter .3s ease both}
@keyframes dialog-enter {from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}
@keyframes backdrop-enter {from{background-color:#02081700}to{background-color:#020817dd}}
.dialog-picture img {animation:photo-zoom-in .3s var(--motion-ease) both}
@keyframes photo-zoom-in {from{opacity:.35;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
/* Mantener la expresividad original de las tarjetas sin interferencia de la entrada. */
.motion-ready .place-card.motion-item.is-visible:hover,.motion-ready .place-card.motion-item.is-visible:focus-visible {transform:translateY(-8px)}
.motion-ready .video-card.motion-item.is-visible:hover {transform:translateY(-5px)}
.motion-ready .anniversary-note.motion-item.is-visible {transform:rotate(3deg)}
/* Tablet/móvil: la insignia mantiene proporciones y las entradas usan menor recorrido. */
@media(max-width:850px){.logo img{width:56px;height:56px}.hero-mini-crest{width:72px;height:72px;flex-basis:72px}.hero-micro{gap:13px;margin-bottom:21px}.hero-image-main,.hero-image-mini{animation-duration:.75s}}
@media(max-width:570px){.logo img{width:52px;height:52px}.hero-mini-crest{width:61px;height:61px;flex-basis:61px}.hero-micro>span{font-size:10px}.hero-micro>span b{font-size:9px}.hero-micro{margin-bottom:20px}.footer-brand img{width:64px;height:64px}.manifesto-crest img{max-height:100px;max-width:110px}.motion-ready .motion-item{transform:translateY(15px)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important;}
  .motion-ready .motion-item {opacity:1!important;visibility:visible!important;transform:none!important;will-change:auto!important;}
}