/* ========== GEO ========== */
.geo { padding: 110px 0; border-top: 1px solid var(--line); background: var(--bg-2); }
.geo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.geo-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.geo .card h3 { font-size: 24px; position: relative; z-index: 2; }
.geo .card p  { position: relative; z-index: 2; }

/* ===== Flag-as-section-background (emerges from darkness — cinematic, crossfade) ===== */
.geo { position: relative; isolation: isolate; overflow: hidden; }
.geo > .wrap { position: relative; z-index: 2; }

/* 4 stacked flag layers — crossfade between each other on hover */
.geo-flag-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.7) brightness(0.6) contrast(1.05);
  transform: scale(1.06);
  transform-origin: center;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.geo-flag-layer[data-flag="eu"] { background-image: url("../../img/flags/eu.svg"); }
.geo-flag-layer[data-flag="kr"] { background-image: url("../../img/flags/kr.svg"); }
.geo-flag-layer[data-flag="jp"] { background-image: url("../../img/flags/jp.svg"); }
.geo-flag-layer[data-flag="ae"] { background-image: url("../../img/flags/ae.svg"); }

/* JS-driven activation only: `.flag-active--<flag>` is toggled by
   js/modules/geo-flags.js (mouse hover on desktop, auto-cycle on touch).
   Determines which of the 4 stacked flag layers is currently visible.
   No :has() reliance — works the same in every modern engine. */
.geo.flag-active--eu .geo-flag-layer[data-flag="eu"],
.geo.flag-active--kr .geo-flag-layer[data-flag="kr"],
.geo.flag-active--jp .geo-flag-layer[data-flag="jp"],
.geo.flag-active--ae .geo-flag-layer[data-flag="ae"] {
  opacity: 0.22;
  transform: scale(1.0);
}

.geo::after {
  /* cinematic side-lit vignette across the whole section */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 110% 80% at 18% 0%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.88) 100%),
    linear-gradient(140deg, rgba(0,0,0,0.0) 18%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.78) 100%);
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.geo.flag-active--eu::after,
.geo.flag-active--kr::after,
.geo.flag-active--jp::after,
.geo.flag-active--ae::after { opacity: 1; }

.geo.flag-active--eu .geo-card[data-flag="eu"] .geo-tag,
.geo.flag-active--kr .geo-card[data-flag="kr"] .geo-tag,
.geo.flag-active--jp .geo-card[data-flag="jp"] .geo-tag,
.geo.flag-active--ae .geo-card[data-flag="ae"] .geo-tag {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  transition: color 1s var(--ease), border-color 1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .geo-flag-layer, .geo::after { transition: none; }
  .geo-flag-layer { transform: none; }
}