/* Entry page: logo animation, language choice, terms bar */
.gate2{flex:1 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw 84px;}

/* brand: icon + name, centred together */
:root{--g-ease:cubic-bezier(.45,.05,.15,1);}
.g-brand{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,26px);transform-origin:50% 0;transition:transform 1.6s var(--g-ease);}
/* after choosing a language: the logo group rises (distance set by gate.js) and shrinks 25% */
.chosen .g-brand{transform:translateY(var(--g-dy,-8vh)) scale(.75);}
.g-icon{height:clamp(56px,7.5vw,78px);width:auto;display:block;opacity:0;transition:opacity .5s ease;}
.g-solid .g-icon{opacity:1;}
#webgl-bg canvas{transition:opacity .5s ease;}
.g-solid #webgl-bg canvas{opacity:0;}
.g-name{line-height:0;font-size:0;opacity:0;transition:opacity .7s ease;}
.g-name .logo-name{width:min(clamp(190px,28vw,370px),calc(100vw - 12vw - 84px));}
.g1 .g-name{opacity:1;}
#g-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15;}

/* language / enter area */
.g-stage{display:grid;justify-items:center;margin-top:clamp(56px,10vh,104px);opacity:0;transform:translateY(12px);transition:opacity 1.3s ease,transform 1.3s var(--ease);}
.g2 .g-stage{opacity:1;transform:none;}
.g-step{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4vh,38px);transition:opacity .6s ease,transform .8s var(--ease),visibility .6s;}
.g-title{display:grid;justify-items:center;text-align:center;white-space:nowrap;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.45rem,3vw,2.1rem);color:var(--silver);line-height:1.2;}
.g-title .a,.g-title .b{grid-area:1/1;display:block;}
.g-title .b{opacity:0;}
.g2 .g-title .a{animation:swapA 6.4s ease-in-out infinite;}
.g2 .g-title .b{animation:swapB 6.4s ease-in-out infinite;}
@keyframes swapA{0%,42%{opacity:1;filter:blur(0);transform:none}50%,92%{opacity:0;filter:blur(7px);transform:translateY(-6px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes swapB{0%,42%{opacity:0;filter:blur(7px);transform:translateY(6px)}50%,92%{opacity:1;filter:blur(0);transform:none}100%{opacity:0;filter:blur(7px);transform:translateY(6px)}}

/* refined small buttons */
.g-buttons{display:flex;gap:22px;justify-content:center;}
.g-buttons .pill,.g-enter .pill{
  min-width:0;padding:10px 26px;gap:9px;
  font-size:.84rem;letter-spacing:.1em;
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04);
}
.g-buttons .pill{min-width:116px;justify-content:center;}
.g-enter .pill.solid{border-color:transparent;background:linear-gradient(135deg,#e2c898,#b9915c);}
.g-enter .pill .ico{font-size:1.1em;}
/* hover: clean negative (light fill, dark text) so the label is always legible */
.g-buttons .pill:hover,.g-enter .pill:hover,.g-enter .pill.solid:hover{background:#f2efe9;color:#0a0f1d;border-color:#f2efe9;box-shadow:0 8px 26px rgba(0,0,0,.35);}

.g-enter{opacity:0;visibility:hidden;transform:translateY(14px);}
.g-enter .g-title span{display:none;}
[data-l]{display:none;}
html[data-lang="en"] [data-l="en"],html[data-lang="pt"] [data-l="pt"]{display:inline;}
.chosen .g-lang{opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none;}
.chosen .g-enter{opacity:1;visibility:visible;transform:none;transition-delay:.5s;}
.chosen .g-enter .g-title{animation:none;}

/* "Welcome" takes over as the focal point: large, sitting where the logo group was.
   It is taken out of the layout flow (position:absolute) so nothing shifts before the choice;
   gate.js sets --g-ey (its vertical offset). Scoped to .js so the no-script fallback is untouched. */
.js .g-stage{position:relative;pointer-events:none;}
.js .g2 .g-stage{pointer-events:auto;}
.js .g-enter{
  grid-area:auto;position:absolute;top:0;left:50%;width:max-content;gap:clamp(18px,3.2vh,30px);
  transform:translate(-50%,calc(var(--g-ey,0px) + 22px));
  transition:opacity 1.2s ease .4s,transform 1.6s var(--g-ease) .3s,visibility 0s linear .4s;
}
.js .chosen .g-enter{transform:translate(-50%,var(--g-ey,0px));}
.js .g-enter .g-title{
  font-size:clamp(2.8rem,7.2vw,5.6rem);
  transform:scale(.88);filter:blur(10px);
  transition:transform 1.6s var(--g-ease) .3s,filter 1.3s ease .4s;
}
.js .chosen .g-enter .g-title{transform:none;filter:blur(0);}
/* used by gate.js while resizing, so the layout recalculation does not animate */
.g-rs .g-brand,.g-rs .g-enter,.g-rs .g-enter .g-title{transition:none!important;}

.gate-bar{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:20;
  width:min(720px,calc(100% - 28px));
  padding:16px 26px;border-radius:999px;text-align:center;
  font-size:.95rem;font-weight:300;letter-spacing:.02em;line-height:1.55;color:rgba(242,239,233,.82);
  background:linear-gradient(120deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 40%,rgba(255,255,255,.07)),rgba(14,24,46,.38);
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 40px rgba(0,0,0,.4);
  opacity:0;transform:translate(-50%,24px);pointer-events:none;
  transition:opacity .9s ease,transform .9s var(--ease);
}
.chosen .gate-bar{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition-delay:.8s;}
.gate-bar a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(217,189,140,.4);transition:color .3s,border-color .3s;}
.gate-bar a:hover{color:var(--text);border-color:var(--text);}
@media (max-width:560px){.gate-bar{border-radius:26px;padding:14px 20px;font-size:.88rem;}.g-buttons .pill{min-width:104px;padding:10px 20px;}}
@media (prefers-reduced-motion:reduce){
  .g-name,.g-stage,.g-icon,.g-brand,.g-enter,.g-enter .g-title{transition:none!important;}
  .g2 .g-title .a,.g2 .g-title .b{animation:none;}
  .g-title .b{display:none;}
}