/*
  Motor de renderizado de banderas, adaptado de atlas.html.
  Las animaciones originales se disparaban con :hover/:focus-visible; aquí se
  disparan además añadiendo la clase .is-active al .slot (el juego la añade
  cuando una bandera nueva aparece en pantalla).
*/

.slot{
  position:relative;
  aspect-ratio: 3 / 2;
  background:var(--paper-dim);
  border:1px solid var(--border);
  border-radius:var(--radius-md, 12px);
  overflow:hidden;
  outline:none;
}
.slot--square{ aspect-ratio:1/1; width:64%; margin:0 auto; }
.slot--nepal{ aspect-ratio:3/4; width:50%; margin:0 auto; }

.crosshair{
  position:absolute; inset:0; margin:auto; width:13px; height:13px;
  opacity:.5; transition:opacity .3s ease; pointer-events:none; z-index:5;
}
.crosshair::before, .crosshair::after{ content:""; position:absolute; background:var(--brass); }
.crosshair::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.crosshair::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.slot.is-active .crosshair{ opacity:0; }

/* ===================== FLAG BASE ===================== */
.flag{ position:absolute; inset:0; }
/* los <svg> son elementos inline por defecto: el navegador les reserva un
   hueco de línea (alineado a la línea base) que es insignificante en banderas
   grandes pero, al no escalar con el tamaño, desplaza visiblemente el emblema
   hacia abajo en miniaturas pequeñas (tooltips). display:block lo elimina. */
.flag svg{ display:block; }
.flag--field{ width:100%; height:100%; }

/* ---- horizontal / vertical bands (curtain reveal) ---- */
.flag--h{ display:flex; flex-direction:column; }
.flag--v{ display:flex; flex-direction:row; }
.band{ flex:1 1 0; background:var(--c); position:relative; }

.flag--h .band{ transform:translateY(-120%); opacity:0; }
.flag--h .band:nth-child(even){ transform:translateY(120%); }
.flag--v .band{ transform:translateX(-120%); opacity:0; }
.flag--v .band:nth-child(even){ transform:translateX(120%); }

.slot.is-active .flag--h .band{
  animation-name:bandFromTop; animation-duration:.5s;
  animation-timing-function:cubic-bezier(.22,.9,.32,1); animation-fill-mode:forwards;
}
.slot.is-active .flag--h .band:nth-child(even){ animation-name:bandFromBottom; }
.slot.is-active .flag--v .band{
  animation-name:bandFromLeft; animation-duration:.5s;
  animation-timing-function:cubic-bezier(.22,.9,.32,1); animation-fill-mode:forwards;
}
.slot.is-active .flag--v .band:nth-child(even){ animation-name:bandFromRight; }

.band:nth-child(1){ animation-delay:0s !important; }
.band:nth-child(2){ animation-delay:.08s !important; }
.band:nth-child(3){ animation-delay:.16s !important; }
.band:nth-child(4){ animation-delay:.24s !important; }
.band:nth-child(5){ animation-delay:.32s !important; }
.band:nth-child(6){ animation-delay:.40s !important; }
.band:nth-child(7){ animation-delay:.48s !important; }
.band:nth-child(8){ animation-delay:.56s !important; }
.band:nth-child(9){ animation-delay:.64s !important; }

@keyframes bandFromTop{ from{ transform:translateY(-120%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes bandFromBottom{ from{ transform:translateY(120%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes bandFromLeft{ from{ transform:translateX(-120%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes bandFromRight{ from{ transform:translateX(120%); opacity:0; } to{ transform:translateX(0); opacity:1; } }

/* ---- field fade (for solid-background flags) ---- */
.field-fade{ position:absolute; inset:0; background:var(--c); opacity:0; transition:none; }
.slot.is-active .field-fade{ animation:fieldFade .4s ease forwards; }
@keyframes fieldFade{ from{ opacity:0; } to{ opacity:1; } }

/* ---- generic pop (circles, stars, emblems) ---- */
.pop{ position:absolute; transform:scale(0); opacity:0; transform-origin:center; background:var(--c); }
.slot.is-active .pop{ animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes popIn{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* spin-pop variant (rotates while appearing) */
.pop-spin{ position:absolute; transform:rotate(var(--rot-from,-70deg)) scale(0); opacity:0; }
.slot.is-active .pop-spin{ animation:popSpin .55s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes popSpin{ from{ transform:rotate(var(--rot-from,-70deg)) scale(0); opacity:0; } to{ transform:rotate(var(--rot-to,0deg)) scale(1); opacity:1; } }

/* grow bar (crosses) */
.bar{ position:absolute; background:var(--c); transform:scale(0); opacity:0; }
.bar--x{ transform-origin:center; transform:scaleX(0); opacity:0; }
.bar--y{ transform-origin:center; transform:scaleY(0); opacity:0; }
.slot.is-active .bar--x{ animation:growX .45s ease forwards; }
.slot.is-active .bar--y{ animation:growY .45s ease forwards; }
@keyframes growX{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }
@keyframes growY{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }

/* delays helper classes */
.d1{ animation-delay:.10s !important; }
.d2{ animation-delay:.20s !important; }
.d3{ animation-delay:.30s !important; }
.d4{ animation-delay:.40s !important; }
.d5{ animation-delay:.50s !important; }
.d6{ animation-delay:.60s !important; }

/* ---- slide from left (e.g. hoist-side triangle) ---- */
.slide-left{ position:absolute; transform:translateX(-100%); opacity:0; }
.slot.is-active .slide-left{ animation:slideLeftIn .5s cubic-bezier(.22,.9,.32,1) forwards; }
@keyframes slideLeftIn{ from{ transform:translateX(-100%); opacity:0; } to{ transform:translateX(0); opacity:1; } }

/* ---- diagonal bar (saltire), rotation baked in via --rot ---- */
.bar--diag{ position:absolute; background:var(--c); transform:rotate(var(--rot,0deg)) scaleX(0); opacity:0; transform-origin:center; }
.slot.is-active .bar--diag{ animation:growXRot .5s ease forwards; }
@keyframes growXRot{ from{ transform:rotate(var(--rot,0deg)) scaleX(0); opacity:0; } to{ transform:rotate(var(--rot,0deg)) scaleX(1); opacity:1; } }

/* shapes */
.star5{ clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background:var(--c); }
.star7{ clip-path: polygon(50.0% 0.0%, 59.64% 29.98%, 89.09% 18.83%, 71.67% 45.06%, 98.75% 61.13%, 67.37% 63.86%, 71.69% 95.05%, 50.0% 72.22%, 28.31% 95.05%, 32.63% 63.86%, 1.25% 61.13%, 28.33% 45.06%, 10.91% 18.83%, 40.36% 29.98%); background:var(--c); }
.star6{ clip-path: polygon(50% 0%, 63.75% 26.18%, 93.3% 25%, 77.5% 50%, 93.3% 75%, 63.75% 73.82%, 50% 100%, 36.25% 73.82%, 6.7% 75%, 22.5% 50%, 6.7% 25%, 36.25% 26.18%); background:var(--c); }
.star8{ clip-path: polygon(50% 0%, 60.72% 24.13%, 85.36% 14.64%, 75.87% 39.28%, 100% 50%, 75.87% 60.72%, 85.36% 85.36%, 60.72% 75.87%, 50% 100%, 39.28% 75.87%, 14.64% 85.36%, 24.13% 60.72%, 0% 50%, 24.13% 39.28%, 14.64% 14.64%, 39.28% 24.13%); background:var(--c); }
.star12{ clip-path: polygon(50% 0%, 58.54% 18.12%, 75% 6.7%, 73.33% 26.67%, 93.3% 25%, 81.88% 41.46%, 100% 50%, 81.88% 58.54%, 93.3% 75%, 73.33% 73.33%, 75% 93.3%, 58.54% 81.88%, 50% 100%, 41.46% 81.88%, 25% 93.3%, 26.67% 73.33%, 6.7% 75%, 18.12% 58.54%, 0% 50%, 18.12% 41.46%, 6.7% 25%, 26.67% 26.67%, 25% 6.7%, 41.46% 18.12%); background:var(--c); }
.usa-star{ position:absolute; width:8.10%; height:11.44%; background:#f0f0f0; }
.disc{ border-radius:50%; background:var(--c); }

/* ---- Korean trigrams (kwa): 3 stacked bars, solid or broken ---- */
.kwa{ position:absolute; display:flex; flex-direction:column; justify-content:space-between; }
.kwa-bar{ width:100%; height:24%; background:#000000; }
.kwa-bar--broken{ position:relative; height:24%; background:transparent; }
.kwa-bar--broken::before, .kwa-bar--broken::after{ content:""; position:absolute; top:0; height:100%; width:41%; background:#000000; }
.kwa-bar--broken::before{ left:0; }
.kwa-bar--broken::after{ right:0; }

@media (prefers-reduced-motion: reduce){
  .band, .pop, .pop-spin, .bar--x, .bar--y, .field-fade{ transition:none !important; }
  .slot .flag *{ animation:none !important; opacity:1 !important; transform:none !important; }
  .crosshair{ display:none; }
}