/* Piezas comunes de las entradas con fotografía: foto a pantalla completa, marca arriba, frase abajo y zona táctil */
.gate{position:fixed;inset:0;z-index:50;overflow:hidden;background:#000;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.gate.is-gone{display:none}
.photo{position:absolute;inset:0;will-change:transform,opacity}
.photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);display:block;animation:lento 16s ease-out both}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 48%,rgba(0,0,0,.94) 100%);transition:opacity .4s}
.top{position:absolute;left:0;right:0;top:calc(20px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:opacity .4s}
.top img{width:46px;height:46px;opacity:.95}
.top small{font-size:10px;letter-spacing:.46em;padding-left:.46em;text-transform:uppercase;color:#e9dcb4;font-weight:500}
.bottom{position:absolute;left:0;right:0;bottom:calc(5dvh + env(safe-area-inset-bottom));padding:0 24px;text-align:center;transition:opacity .4s}
.bottom h2{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(31px,9.4vw,40px);line-height:1.06;color:#f6efdc;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.8);opacity:0;animation:sube 1.4s cubic-bezier(.2,.7,.2,1) .5s forwards}
.hint{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-size:11px;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:rgba(245,238,220,.88);opacity:0;animation:fade 1.2s ease 1.5s forwards,latido 2.6s ease-in-out 2.8s infinite}
.hint::before,.hint::after{content:"";width:22px;height:1px;background:var(--gold);opacity:.8}
.hit{position:absolute;z-index:5;cursor:pointer;border-radius:12px}
.hit:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.onda{position:absolute;z-index:4;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;pointer-events:none}
.onda::before,.onda::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold-2);opacity:0;animation:onda 2.6s ease-out 1.8s infinite}
.onda::after{animation-delay:3.1s}
.is-opening .top,.is-opening .bottom,.is-opening .shade,.is-opening .onda{opacity:0}
.is-opening .hit{pointer-events:none}
@keyframes lento{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes latido{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes onda{0%{transform:scale(.5);opacity:.85}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.photo img,.bottom h2,.hint,.onda::before,.onda::after{animation:none}.bottom h2,.hint{opacity:1}}

/* Modo video: el cuadro congelado se parte en dos por la línea del tajo */
.clip{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;background:#000}
.gate.rasgando{background:transparent}
.mitad{position:absolute;left:0;top:0;z-index:6;will-change:transform,opacity;transition:transform .95s cubic-bezier(.55,0,.25,1),opacity .5s ease .55s}
.abierto .mitad{opacity:0}
.tajo{position:absolute;z-index:7;width:4000px;height:3px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,#fff3c4 30%,#fff 50%,#fff3c4 70%,transparent 100%);
  box-shadow:0 0 14px 4px rgba(255,214,120,.9),0 0 46px 14px rgba(216,180,90,.55);opacity:1;transition:opacity .45s ease .2s,height .5s ease}
.abierto .tajo{opacity:0;height:14px}
.destello{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(70% 60% at 50% 50%,rgba(255,236,170,.85),rgba(216,180,90,.25) 60%,transparent 80%);opacity:.9;transition:opacity .6s ease}
.abierto .destello{opacity:0}