/* NOYSH Global Market Gateway. D2 language: Instrument Sans, square controls, ink/paper, no collection colour in the UI.
   The campaign film is the hero; readability is created locally around the interface only. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Instrument Sans",system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;overflow:hidden;
  /* warm sunset colours from the posters, so nothing reads as black before the poster paints */
  background:linear-gradient(180deg,#e3ca9b 0%,#b59867 55%,#4d3921 100%)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

.gw{position:fixed;inset:0;overflow:hidden}

/* ---------- film ---------- */
.film{position:absolute;inset:0}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* desktop: the full ultra-wide film (not pre-cropped); framing chosen over the whole loop so the models
   mostly sit right of the compact column (tested 52 / 44 / 38%) */
.film img,.film video{object-position:44% 50%}
.film video{opacity:0;transition:opacity .6s ease}
.film video.on{opacity:1}

/* ---------- local readability (no full-screen darkening) ---------- */
.shade{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 62% at 25% 50%,rgba(20,12,4,.52) 0%,rgba(20,12,4,.30) 45%,rgba(20,12,4,0) 100%),
    radial-gradient(ellipse 16% 12% at 94% 4%,rgba(20,12,4,.40) 0%,rgba(20,12,4,0) 100%)}

/* ---------- language ---------- */
.lang{position:absolute;top:22px;right:28px;display:flex;gap:2px;z-index:3}
.lang button{background:none;border:0;padding:8px 10px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8);cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.35)}
.lang button[aria-pressed="true"]{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- desktop composition: a compact column, subtly left of centre ---------- */
.logo{position:absolute;z-index:2;width:156px;height:auto;left:calc(25% - 78px);top:calc(50% - 228px)}
.panel{position:absolute;z-index:2;left:calc(25% - 180px);top:calc(50% - 150px);width:360px;display:grid;gap:18px;text-shadow:0 1px 12px rgba(0,0,0,.28)}
.panel h1{margin:0;font-size:17px;font-weight:500;letter-spacing:-.005em;text-align:center}
/* country selector: one typographic field + a restrained list (no flags, no cards) */
.sel{position:relative}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;padding:0 14px 0 16px;cursor:pointer;
  background:rgba(255,255,255,.05);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);text-align:left;
  font-size:14px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;transition:background .2s,box-shadow .2s}
.sel-btn:hover{background:rgba(255,255,255,.1)}
.sel-val.ph{color:rgba(255,255,255,.78)}
.chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;flex:none}
.sel.open .chev{transform:translateY(2px) rotate(-135deg)}
.sel.open .sel-btn{box-shadow:inset 0 0 0 1px #fff}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:4px 0;list-style:none;
  background:rgba(22,15,8,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  animation:selIn .18s ease-out;text-shadow:none}
.sel-list:focus{outline:none}
.sel-list:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 2px #fff}
@keyframes selIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sel-list li{position:relative;display:flex;align-items:center;min-height:44px;padding:0 40px 0 16px;cursor:pointer;
  font-size:13.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.sel-list li + li{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.sel-list li.act{color:#fff;background:rgba(255,255,255,.07)}
.sel-list li[aria-selected="true"]{color:#fff;font-weight:600}
/* a very restrained check for the chosen country */
.sel-list li[aria-selected="true"]::after{content:"";position:absolute;right:18px;top:50%;width:5px;height:10px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-65%) rotate(45deg)}
.info{font-size:14px;line-height:1.45;text-align:center;min-height:20px}
.info p{margin:0}
.info b{display:block;font-weight:600;margin-bottom:4px}
.info.soon{text-align:left;padding:12px 14px;background:rgba(20,12,4,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.go{height:52px;border:0;background:#fff;color:#141414;font-size:15px;font-weight:500;cursor:pointer;text-shadow:none}
.go:disabled{background:rgba(255,255,255,.22);color:rgba(255,255,255,.82);cursor:default}
.later{margin:0;font-size:12.5px;text-align:center;color:rgba(255,255,255,.78)}

/* ---------- portrait / mobile: logo at the top, the choice in the lower part (faces and garments stay free) ---------- */
@media (orientation: portrait){
  .film img,.film video{object-position:50% 50%}
  .shade{background:
    linear-gradient(180deg,rgba(20,12,4,.34) 0%,rgba(20,12,4,0) 20%),
    linear-gradient(0deg,rgba(20,12,4,.66) 0%,rgba(20,12,4,.44) 26%,rgba(20,12,4,0) 46%)}
  .lang{top:max(14px,env(safe-area-inset-top));right:12px}
  .lang button{font-size:13px;padding:8px}
  /* logo high in the sky band, above the models' heads */
  .logo{width:104px;left:calc(50% - 52px);top:max(46px,calc(env(safe-area-inset-top) + 34px))}
  .panel{left:18px;right:18px;width:auto;top:auto;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));gap:10px}
  .panel h1{font-size:15px}
  .sel-btn{height:46px;font-size:13.5px}
  /* mobile list: lighter translucent surface, slightly tighter rows (40 px targets), same typography */
  .sel-list{padding:2px 0;background:rgba(26,18,10,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  .sel-list li{min-height:40px;font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.88)}
  .sel-list li + li{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .sel-list li.act{background:rgba(255,255,255,.06)}
  .info{font-size:13px}
  /* Serbia note: short copy, compact and subordinate to the film */
  .info.soon{padding:7px 10px;background:rgba(20,12,4,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .info.soon b{font-size:12.5px;margin-bottom:1px}
  .info.soon p{font-size:12.5px;line-height:1.35}
  .go{height:48px}
  .later{font-size:11.5px}
}
/* short landscape screens (phones turned sideways): keep the column compact */
@media (orientation: landscape) and (max-height:560px){
  .logo{width:110px;top:20px;left:calc(25% - 55px)}
  .panel{top:58px;gap:10px}
  .sel-btn{height:40px}
  .sel-list li{min-height:36px}
  .later{display:none}
}
@media (prefers-reduced-motion: reduce){ .film video{display:none} *{transition:none !important} }