/* ══════════════════════════════════════════════════════════════════
   Sellos sobre las tarjetas de video del overview (01 y 03).
   Como en las tarjetas sin video: grandes, girados y cortados contra la
   esquina superior derecha. Entrada simple: aparecen y se asientan.
   ══════════════════════════════════════════════════════════════════ */
.stk{position:absolute;pointer-events:none;aspect-ratio:1.3/1}
.stk>span{position:absolute;display:block;
  transform:rotate(var(--r,0deg));transform-origin:50% 50%;will-change:transform,opacity}
.stk>span>svg{filter:drop-shadow(0 8px 14px rgba(4,8,40,.3))}
.stk>span>svg{display:block;width:100%;height:auto;overflow:visible}
.stk .s-asia  {left:30%;top:6%;width:41%;--r:7deg;z-index:3;--d:.25s}
.stk .s-africa{left:58%;top:1%;width:38%;--r:10deg;z-index:4;--d:.37s}
.stk .s-latam {left:22%;top:33%;width:35%;--r:-12deg;z-index:5;--d:.49s}
.stk .s-me    {left:46%;top:35%;width:43%;--r:-4deg;z-index:6;--d:.61s}
.stk.stk-one{aspect-ratio:1/1}
.stk .s-one{left:0;top:0;width:100%;--r:-12deg;--d:.08s;z-index:2}

@media(prefers-reduced-motion:no-preference){
}
@keyframes sealIn{from{opacity:0;transform:rotate(calc(var(--r,0deg) + 8deg)) scale(.9)}
  to{opacity:1;transform:rotate(var(--r,0deg))}}

/* cortados contra la esquina superior derecha (dentro de la tarjeta) */
#ov .pane>.stk{z-index:2;right:-9%;top:-5%;width:80%}
#ov .pane>.stk.stk-one{right:-12%;top:-7%;width:52%}
@media(max-width:820px){
  #ov .pane>.stk{right:-8%;top:-5%;width:78%}
  #ov .pane>.stk.stk-one{right:-11%;top:-6%;width:48%}}
#ov .pane:not(.on)>.stk{opacity:0;visibility:hidden}

/* sellos de capítulo usados como ilustración de la tarjeta */
#ov img.art.art-sc{object-fit:contain}

/* ══ Entrada de los sellos: sólo opacidad y un desplazamiento corto,
   sin escalar ni girar piezas (así el SVG no se rasteriza y no pixela) ══ */
@media(prefers-reduced-motion:no-preference){
  #ov .pane.on .stk>span,#ov .pane.on .art.art-sc{animation:sealRoll .62s cubic-bezier(.22,1,.36,1) var(--d,.08s) backwards}
  #ov.stk-wait .pane.on .stk>span,#ov.stk-wait .pane.on .art.art-sc{animation:none;opacity:0}
}
@keyframes sealUp{from{opacity:0;transform:translateY(18px) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}

#ov .pane .art.art-sc{filter:drop-shadow(0 10px 18px rgba(4,8,40,.16))}

/* entrada: el sello entra rodando desde afuera de la tarjeta, como una
   moneda que se acomoda en la esquina (sin escalar: no pixela) */
@keyframes sealRoll{
  from{opacity:0;transform:translate(38%,-12%) rotate(calc(var(--r,0deg) + 75deg))}
  35%{opacity:1}
  to{opacity:1;transform:rotate(var(--r,0deg))}}

/* sin sello en las tarjetas que no están al frente */
#ov .pane:not(.on) .art.art-sc{opacity:0;visibility:hidden}

/* 03 The Market Atlas: los sellos de regiones caen como una estampa,
   uno tras otro (golpe seco desde arriba, aplastan y se asientan) */
#ov .pane .stk:not(.stk-one) .s-asia{--d:.08s}
#ov .pane .stk:not(.stk-one) .s-africa{--d:.2s}
#ov .pane .stk:not(.stk-one) .s-latam{--d:.32s}
#ov .pane .stk:not(.stk-one) .s-me{--d:.44s}
@media(prefers-reduced-motion:no-preference){
  #ov .pane.on .stk:not(.stk-one)>span{animation:stamp .55s linear var(--d) backwards}
}
@keyframes stamp{
  0%{opacity:0;transform:rotate(calc(var(--r) - 8deg)) scale(1.55);animation-timing-function:cubic-bezier(.55,0,.8,.3)}
  45%{opacity:1;transform:rotate(var(--r)) scale(.93);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  70%{transform:rotate(var(--r)) scale(1.03);animation-timing-function:ease-in-out}
  100%{opacity:1;transform:rotate(var(--r)) scale(1)}}

#ov .pane.on .art.art-sc{will-change:transform,opacity}