/* ============================================================
   Entrance: "Liquid Chrome Eclipse" (see intro.js)
   ============================================================ */
.gate { background: #020605; color: #e8eef1; overflow: hidden; -webkit-user-select: none; user-select: none; }
.gate__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gate__orb, .gate__flash { display: none; position: absolute; }
.gate__light {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px; pointer-events: none; will-change: transform;
  background: radial-gradient(circle, rgba(190, 255, 225, 0.16), rgba(255, 224, 160, 0.06) 38%, transparent 66%);
  mix-blend-mode: screen; transition: opacity 0.6s;
}
.gate__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* fallback (no WebGL): a CSS chrome orb */
.gate--static { background: radial-gradient(70% 55% at 50% 38%, #123d31, #04100c 68%, #010302); }
.gate--static .gate__gl { display: none; }
.gate--static .gate__orb {
  display: block; left: 50%; top: 38%; width: min(19vh, 30vw); aspect-ratio: 0.42; border-radius: 6px; translate: 0 0;
  transform: translate(-50%, -50%); will-change: transform;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(220, 255, 235, 0.9) 50%, transparent calc(50% + 1px)), linear-gradient(115deg, #1a2522 0%, #050807 38%, #0b1210 62%, #020403 100%);
  box-shadow: 0 0 120px rgba(80, 210, 160, 0.22), inset 0 0 0 1px rgba(220, 235, 230, 0.25);
}
.gate--static .gate__flash { display: block; inset: 0; background: #eaf6ef; opacity: 0; pointer-events: none; }

/* top bar */
.gate__top {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px;
  padding: clamp(16px, 3vw, 30px) clamp(18px, 4vw, 44px); pointer-events: none;
  opacity: 0;
}
.gate__tag { font: 500 0.7rem/1 var(--text); letter-spacing: 0.32em; text-transform: uppercase; color: rgba(220, 238, 230, 0.55); }

/* centre stage */
.gate__stage {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(34px, 8vh, 84px); text-align: center; pointer-events: none;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.5, 0, 0.2, 1), filter 0.7s ease;
}
.gate__stage > * { pointer-events: auto; }
.gate__title {
  margin: 0; font-family: var(--display); font-weight: 400; font-style: italic; font-optical-sizing: auto;
  font-size: clamp(3.4rem, 10.5vw, 8rem); line-height: 1.02; letter-spacing: -0.01em; white-space: nowrap;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.55));
}
.gate__ch {
  display: inline-block; opacity: 0;
  background: var(--chrome) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.gate__line {
  margin: 0.9rem 0 clamp(20px, 3.4vh, 34px); font: 400 clamp(0.66rem, 1.7vw, 0.8rem)/1.4 var(--text);
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(220, 238, 230, 0.7); opacity: 0;
}

/* the Enter button */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.gate__enter {
  --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; gap: 16px; overflow: hidden; isolation: isolate;
  padding: 1.15em 2.1em 1.15em 2.4em; border-radius: 999px; cursor: pointer; opacity: 0;
  font: 500 0.8rem/1 var(--text); letter-spacing: 0.34em; text-transform: uppercase; color: #f3f8f6;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(220, 238, 230, 0.26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translate(var(--mx), var(--my));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background 0.35s;
}
.gate__enter::before { /* a light that follows the cursor across the glass */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.3), transparent 58%);
}
.gate__enter-ring {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: conic-gradient(from var(--a), transparent 0 55%, rgba(255, 228, 165, 0.95) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gate-spin 2.6s linear infinite;
}
@keyframes gate-spin { to { --a: 360deg; } }
.gate__enter-label { transition: letter-spacing 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gate__enter-arrow { width: 22px; height: 11px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gate__enter:hover, .gate__enter:focus-visible { border-color: rgba(255, 228, 165, 0.6); background: rgba(255, 255, 255, 0.075); box-shadow: 0 0 46px rgba(120, 255, 200, 0.2), 0 12px 40px rgba(0, 0, 0, 0.5); }
.gate__enter:hover::before, .gate__enter:focus-visible::before, .gate__enter:hover .gate__enter-ring, .gate__enter:focus-visible .gate__enter-ring { opacity: 1; }
.gate__enter:hover .gate__enter-label, .gate__enter:focus-visible .gate__enter-label { letter-spacing: 0.4em; }
.gate__enter:hover .gate__enter-arrow, .gate__enter:focus-visible .gate__enter-arrow { transform: translateX(7px); }
.gate__enter:active { transform: translate(var(--mx), var(--my)) scale(0.96); }
.gate__enter:focus-visible { outline: 2px solid #ffe4a5; outline-offset: 5px; }

/* choreography */
.gate--ready .gate__top  { animation: gate-fade 1.6s 0.9s both; }
.gate--ready .gate__ch   { animation: gate-rise 1.5s cubic-bezier(0.2, 0.7, 0.1, 1) both; animation-delay: calc(1.1s + var(--i) * 80ms); }
.gate--ready .gate__line { animation: gate-fade 1.6s 2.0s both; }
.gate--ready .gate__enter { animation: gate-rise-btn 1.4s cubic-bezier(0.2, 0.7, 0.1, 1) 2.3s both; }
.gate--ready @keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gate-rise { from { opacity: 0; transform: translateY(0.5em) scale(1.08); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes gate-rise-btn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* the dive: UI recedes as the camera pushes in */
.gate--entering .gate__stage { opacity: 0; transform: scale(1.12); filter: blur(10px); pointer-events: none; }
.gate--entering .gate__top, .gate--entering .intro__skip { opacity: 0 !important; transition: opacity 0.5s; animation: none; }
.gate--entering .gate__light { opacity: 0; }
.gate--entering .gate__enter { pointer-events: none; }
.gate--opening { pointer-events: none; }

@media (pointer: coarse) { .gate__light { display: none; } @media (max-width: 560px) {
  .gate__tag--r { display: none; }
  .gate__title { font-size: clamp(3rem, 15.5vw, 4.6rem); }
  .gate__line { letter-spacing: 0.26em; }
  .gate__enter { padding: 1.2em 1.9em 1.2em 2.1em; }
}

/* ---------- preloader ---------- */
.gate__pre {
  position: absolute; z-index: 6; left: clamp(18px, 4vw, 44px); right: clamp(90px, 10vw, 140px); bottom: clamp(22px, 5vh, 48px);
  display: flex; align-items: center; gap: 18px; pointer-events: none; transition: opacity 0.7s ease, transform 0.9s ease;
}
.gate__pre-n { font: 400 0.8rem/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.2em; color: rgba(220, 238, 230, 0.75); min-width: 3.4ch; }
.gate__pre-bar { position: relative; flex: 1; height: 1px; background: rgba(220, 238, 230, 0.14); overflow: hidden; }
.gate__pre-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 228, 165, 0.2), #ffe4a5); transform: scaleX(0); transform-origin: 0 50%; }
.gate--ready .gate__pre { opacity: 0; transform: translateY(8px); }

/* ---------- custom cursor (mouse only) ---------- */
.gate__cursor { display: none; }
.gate--cursor, .gate--cursor * { cursor: none !important; }
.gate--cursor .gate__cursor {
  display: block; position: absolute; left: 0; top: 0; z-index: 8; width: 0; height: 0; pointer-events: none; will-change: transform;
}
.gate__cursor::before, .gate__cursor i {
  content: ""; position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%;
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, border-color 0.3s, opacity 0.3s;
}
.gate__cursor::before { width: 34px; height: 34px; border: 1px solid rgba(235, 245, 240, 0.55); }
.gate__cursor i { width: 5px; height: 5px; background: #f3f8f6; }
.gate__cursor.is-on::before { width: 74px; height: 74px; border-color: rgba(255, 228, 165, 0.75); background: rgba(255, 228, 165, 0.06); }
.gate__cursor.is-on i { opacity: 0; }
.gate__cursor.is-down::before { width: 24px; height: 24px; }
.gate--entering .gate__cursor { opacity: 0; transition: opacity 0.4s; }

/* ---------- liquid sheen rolling across the title ---------- */
.gate--ready .gate__ch {
  animation: gate-rise 1.5s cubic-bezier(0.2, 0.7, 0.1, 1) calc(0.3s + var(--i) * 80ms) both,
             gate-sheen 7s ease-in-out calc(3.4s + var(--i) * 90ms) infinite;
}
@keyframes gate-sheen { 0%, 62%, 100% { background-position: 0 0; } 78% { background-position: 0 0.5em; } 90% { background-position: 0 -0.12em; } }
.gate--ready .gate__top  { animation-delay: 0.2s; }
.gate--ready .gate__line { animation-delay: 1.1s; }
.gate--ready .gate__enter { animation-delay: 1.4s; }

.gate__brand { display: inline-flex; align-items: center; gap: 12px; }
.gate__brand img { width: 26px; height: 26px; display: block; }