/* Eastwood Studio — "Select your region" moment (paired with regionmodal.js).
 * A mini branded landing: particle wordmark + Web/Brand/Film over the dot grid,
 * small region boxes below. Selecting one bursts the screen into a pixel flag. */
.region{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--cream);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.region.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.region.region--exit{ opacity:0; transition:opacity .42s var(--ease); }
/* the dot-grid pages set `.start > * { position:relative }`, which would drag the
   gate into normal flow and reserve a full-height gap even while hidden; keep it
   truly fixed and on top */
.start .region{ position:fixed !important; z-index:200 !important; }

/* full-screen pixel-flag assembly layer */
.region__burst{ position:fixed; inset:0; width:100%; height:100%; z-index:5; display:none; pointer-events:none; }
.region__burst.is-on{ display:block; }

.region__inner{
  position:relative; z-index:1; width:min(100% - 9vw, 860px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(1.6rem,4.5vh,3rem); padding:2rem 0;
  transition:opacity .3s var(--ease);
}
.region--bursting .region__inner{ opacity:0; pointer-events:none; }

/* --- branded top (reused landing wordmark) ---------------------------- */
.region__brand{ display:flex; flex-direction:column; align-items:center; gap:.2rem; width:100%; }
.region__brand .hero-tag{ font-size:.82rem; letter-spacing:.34em; }
/* the middots kept vanishing into the shine gradient — force them solid + visible */
.region__brand .hero-tag__sep{ -webkit-text-fill-color:var(--taupe); color:var(--taupe); opacity:.9; }
.region__stage{ position:relative; width:min(92vw,560px); height:clamp(112px,19vw,200px); }
.region__stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.region__stage .name{ position:absolute; inset:0; display:grid; place-content:center;
  line-height:.92; font-weight:700; letter-spacing:-.03em; font-size:clamp(2.4rem,9vw,5rem); }
.region__stage .name span{ display:block; }
.region__stage .name .a{ color:var(--ink); } .region__stage .name .b{ color:var(--taupe); }

/* --- pick ------------------------------------------------------------- */
.region__pick{ display:flex; flex-direction:column; align-items:center; gap:clamp(1rem,2.5vh,1.5rem); }
/* "Select your region" — the gate needs an instruction, so this label stays.
   It used to be a shining double-barrelled eyebrow; now it's plain taupe type,
   self-contained (the eyebrow system it inherited from has been removed). */
.region__label{ display:block; margin-bottom:0; text-align:center;
  font-size:.82rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--taupe); }

/* no boxes: just the living flag + writing, generous space between the two */
.region__panels{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:clamp(2.5rem,8vw,6rem); }
.region__panel{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:.5rem; cursor:pointer; font:inherit; background:none; border:0;
  transition:transform .35s var(--ease);
}
.region__panel:hover{ transform:translateY(-7px); }
.region__flagfx{ width:96px; height:64px; display:block; border-radius:5px; overflow:hidden;
  box-shadow:0 12px 26px -14px rgba(22,20,15,.5); }
.region__country{ font-size:1.08rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
/* animated underline grows on hover instead of a card */
.region__country{ position:relative; padding-bottom:4px; }
.region__country::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background:var(--amber); transform:translateX(-50%); transition:width .35s var(--ease); }
.region__panel:hover .region__country::after{ width:100%; }
.region__lang{ font-size:.82rem; color:var(--taupe); }

.region__skip{
  margin-top:.2rem; cursor:pointer; font:inherit; background:none; border:0;
  color:var(--ink-70); font-size:.88rem; border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.region__skip:hover{ color:var(--ink); border-color:var(--amber); }

@media(max-width:600px){
  .region__inner{ width:min(100% - 8vw, 480px); gap:1.8rem; }
  /* bigger wordmark on phones: wider stage + taller so it fills the width */
  .region__stage{ width:min(96vw,560px); height:clamp(160px,46vw,230px); }
  .region__panels{ gap:clamp(2rem,12vw,3.5rem); }
  .region__flagfx{ width:84px; height:56px; }
}
@media(prefers-reduced-motion:reduce){
  .region__panel:hover{ transform:none; }
}

/* --- footer region/language switcher (persistent, on every page) ------ */
.footer__lang{ display:inline-flex; align-items:center; gap:1.5rem; }
.footer__lang-opt{ display:inline-flex; align-items:center; gap:.55rem; background:none; border:0;
  cursor:pointer; font:inherit; font-size:.82rem; color:var(--ink-50); padding:.15rem 0;
  transition:color .25s var(--ease); }
.footer__lang-opt[aria-current="true"]{ color:var(--ink); font-weight:600; }
.footer__lang-opt:hover{ color:var(--ink); }
.footer__lang-sep{ color:var(--line); font-size:.9rem; }
/* living pixel-flag badge (same engine as the region gate), sized to the payment badges */
.footer__flagfx{ width:47px; height:31px; border-radius:4px; display:block; flex:0 0 auto; overflow:hidden;
  box-shadow:0 0 0 1px rgba(22,20,15,.08); }