/* ═══════════════════════════════════════════════════════════════
   LASERMOCKLAB — Studio Portal
   auth-gateway.css · v4 — Visual DNA Build
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES — defined globally
   ══════════════════════════════════════════════════════════════ */

/* Portal overlay */
@keyframes lml-gw-fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lml-gw-fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes lml-gw-exit-cinematic {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97); }
}

/* Exit sweep line */
@keyframes lml-gw-exitsweep {
  0%   { transform: translateX(-50%); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(150%); opacity: 0; }
}

/* Studio environment entrance */
@keyframes lml-studio-bg-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lml-studio-floor-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lml-studio-light-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Denim sculpture entrance — stage rises into final position */
@keyframes lml-denim-rise {
  from { opacity: 0; transform: translateY(-42%); }
  to   { opacity: 1; transform: translateY(-54%); }
}

/* Denim sway — biological 72s cycle, asymmetric ease */
@keyframes lml-denim-sway {
  0%   { transform: perspective(1100px) rotateY(-9deg)  rotateX(1.8deg); }
  18%  { transform: perspective(1100px) rotateY(6deg)   rotateX(-1.0deg); }
  38%  { transform: perspective(1100px) rotateY(3deg)   rotateX(0.4deg); }
  55%  { transform: perspective(1100px) rotateY(-7deg)  rotateX(0.9deg); }
  74%  { transform: perspective(1100px) rotateY(-4deg)  rotateX(-0.6deg); }
  88%  { transform: perspective(1100px) rotateY(-10deg) rotateX(1.4deg); }
  100% { transform: perspective(1100px) rotateY(-9deg)  rotateX(1.8deg); }
}

/* Laser diagonal scan — travels from far left to past right edge */
@keyframes lml-laser-scan {
  0%   { opacity: 0; transform: translateX(0)    rotate(-12deg); }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(240%) rotate(-12deg); }
}

/* Laser trace on denim surface */
@keyframes lml-denim-laser-glow {
  0%   { opacity: 0; }
  10%  { opacity: 0.90; }
  30%  { opacity: 0.70; }
  100% { opacity: 0; }
}

/* Studio bloom — login success light flood */
@keyframes lml-bloom-expand {
  0%   { opacity: 0; }
  35%  { opacity: 0.55; }
  75%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Glass panel float in — settles into position */
@keyframes lml-panel-float-in {
  from { opacity: 0; transform: translateY(-50%) translateX(22px); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* Panel content stagger */
@keyframes lml-gw-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer during login loading */
@keyframes lml-gw-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* MOX ambient pulse */
@keyframes lml-mox-pulse {
  0%   { opacity: 0.18; transform: scale(1); }
  50%  { opacity: 0.38; transform: scale(1.08); }
  100% { opacity: 0.18; transform: scale(1); }
}

/* Mobile vertical laser accent */
@keyframes lml-mobile-vline {
  0%   { opacity: 0.28; }
  50%  { opacity: 0.62; }
  100% { opacity: 0.28; }
}

/* Topbar laser trace after login */
@keyframes lml-topbar-sweep {
  from { transform: translateX(-100%); opacity: 0.9; }
  to   { transform: translateX(100%);  opacity: 0; }
}

/* Chip + user menu */
@keyframes lml-chip-enter {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lml-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════════════════════════
   PORTAL OVERLAY
   ══════════════════════════════════════════════════════════════ */
#lml-gateway {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
  background: #07090c;
  overflow: hidden;
  opacity: 0;
  animation: lml-gw-fadein 0.35s ease forwards;
  transform-origin: center center;
}

/* Simple fast fade — guest mode */
#lml-gateway.lml-gw-hidden {
  animation: lml-gw-fadeout 0.25s ease forwards;
  pointer-events: none;
}

/* Cinematic scale-exit — login mode, overrides hidden */
#lml-gateway.lml-gw-exit-scale {
  animation: lml-gw-exit-cinematic 0.38s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

/* Exit sweep line (JS .active trigger) */
#lml-gw-sweep {
  position: absolute;
  top: 50%;
  left: -50%;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(31,111,235,0.6)  20%,
    rgba(88,166,255,1)    50%,
    rgba(31,111,235,0.6)  80%,
    transparent 100%
  );
  box-shadow: 0 0 10px 2px rgba(88,166,255,0.5);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
}
#lml-gw-sweep.active {
  animation: lml-gw-exitsweep 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Panel exit — Bug #2 fix: animation:none clears fill-mode so transition fires */
#lml-gateway.lml-gw-exiting-content .lml-gw-left {
  animation: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.97);
  transition: opacity 0.38s ease, transform 0.38s ease;
}


/* ══════════════════════════════════════════════════════════════
   STUDIO SCENE — full-viewport dark environment
   ══════════════════════════════════════════════════════════════ */
.lml-studio-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Atmospheric depth haze + center glow memory — connects objects visually */
.lml-studio-scene::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  height: 44%;
  background:
    /* Center glow memory — horizontal indigo luminance between objects */
    radial-gradient(ellipse 55% 40% at 52% 50%,
      rgba(20,50,130,0.28) 0%,
      rgba(12,30,85,0.16) 45%,
      transparent 75%
    ),
    /* Atmospheric depth band */
    linear-gradient(180deg,
      transparent 0%,
      rgba(7,13,34,0.38) 20%,
      rgba(9,16,42,0.52) 50%,
      rgba(7,13,34,0.38) 78%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── Background atmosphere — deep layered studio darkness ─── */
.lml-studio-bg {
  position: absolute;
  inset: 0;
  background:
    /* Primary vignette — darkness presses from corners, center slightly lighter */
    radial-gradient(ellipse 72% 72% at 44% 46%, transparent 22%, rgba(0,0,0,0.90) 100%),
    /* Upper-right void — where laser machine lives, dark and deep */
    radial-gradient(ellipse at 94% 6%, rgba(1,2,7,0.90) 0%, transparent 42%),
    /* Upper-left void */
    radial-gradient(ellipse at 6%  6%, rgba(1,2,7,0.82) 0%, transparent 38%),
    /* Overhead key light shaft — narrow, from upper-right, illuminates monolith */
    radial-gradient(ellipse 30% 60% at 70% 0%,
      rgba(32,65,145,0.40) 0%,
      rgba(18,36,90,0.22) 40%,
      transparent 68%
    ),
    /* Mid-room indigo air — gives the center volume and depth */
    radial-gradient(ellipse at 52% 44%,
      rgba(10,18,45,0.48) 0%,
      rgba(7,12,30,0.28) 40%,
      transparent 68%
    ),
    /* Secondary warm-blue suggestion near monolith zone */
    radial-gradient(ellipse at 72% 30%,
      rgba(14,28,72,0.30) 0%,
      transparent 45%
    ),
    /* Deep studio base */
    #07090c;
  opacity: 0;
  animation: lml-studio-bg-reveal 1.0s ease-out 0.2s both;
}

/* ── Studio floor — dark polished concrete ──────────────────── */
/*    Height 42% — tall enough to feel like a real floor         */
.lml-studio-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42%;
  background:
    /* Concrete grid — very subtle, polished surface */
    repeating-linear-gradient(90deg,
      transparent, transparent 89px,
      rgba(16,26,50,0.07) 89px, rgba(16,26,50,0.07) 90px
    ),
    repeating-linear-gradient(0deg,
      transparent, transparent 69px,
      rgba(16,26,50,0.05) 69px, rgba(16,26,50,0.05) 70px
    ),
    /* Floor surface — slightly lighter near top (where objects meet floor) */
    linear-gradient(180deg,
      rgba(12,18,36,0.20) 0%,
      rgba(10,15,30,0.50) 30%,
      rgba(8,12,22,0.72) 65%,
      rgba(6,9,16,0.90) 100%
    );
  opacity: 0;
  animation: lml-studio-floor-reveal 1.4s ease-out 0.5s both;
}

/* Floor reflection bridge — wide luminous pool connecting panel to monolith */
.lml-studio-floor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  width: 66%;
  height: 60%;
  background: radial-gradient(ellipse at center top,
    rgba(30,70,175,0.38) 0%,
    rgba(20,46,130,0.24) 28%,
    rgba(12,28,85,0.12) 55%,
    transparent 78%
  );
  filter: blur(32px);
}

/* Floor reflection pool under sculpture — localized contact glow */
.lml-studio-floor::after {
  content: '';
  position: absolute;
  top: 0;
  left: 54%;
  width: 32%;
  height: 52%;
  background: radial-gradient(ellipse at center top,
    rgba(48,110,240,0.30) 0%,
    rgba(28,68,180,0.18) 32%,
    rgba(14,36,110,0.08) 58%,
    transparent 78%
  );
  filter: blur(24px);
}

/* ── Overhead key light — narrow industrial source ──────────── */
.lml-studio-light {
  position: absolute;
  top: -15%;
  left: 38%;
  width: 70%;
  height: 88%;
  background: radial-gradient(ellipse at 52% 0%,
    rgba(200,220,255,0.062) 0%,
    rgba(140,180,255,0.030) 28%,
    rgba(80,130,220,0.012) 52%,
    transparent 68%
  );
  pointer-events: none;
  opacity: 0;
  animation: lml-studio-light-reveal 1.8s ease-out 0.4s both;
}

/* ── Login-success bloom — JS triggers .active class ─────── */
.lml-studio-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 66% 44%,
    rgba(235,245,255,1)   0%,
    rgba(180,215,255,0.9) 18%,
    rgba(31,111,235,0.45) 45%,
    transparent 68%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.lml-studio-bloom.active {
  animation: lml-bloom-expand 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Studio laser beam — industrial identity ────────────────── */
/*    Originates off-screen upper-right; sweeps diagonally left  */
/*    Width 140% so beam truly crosses the full composition      */
.lml-studio-laser {
  position: absolute;
  top: 41%;
  left: -110%;
  width: 140%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31,111,235,0.22) 7%,
    rgba(88,166,255,0.88) 36%,
    rgba(200,228,255,1)   46%,
    rgba(240,250,255,1)   50%,
    rgba(200,228,255,1)   54%,
    rgba(88,166,255,0.88) 64%,
    rgba(31,111,235,0.22) 93%,
    transparent 100%
  );
  box-shadow:
    0 0 6px 2px  rgba(88,166,255,0.80),
    0 0 22px 5px rgba(31,111,235,0.38),
    0 0 55px 10px rgba(31,111,235,0.14);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

/* JS-triggered diagonal sweep */
.lml-studio-laser.lml-laser-sweep {
  animation: lml-laser-scan 1.6s cubic-bezier(0.25, 0, 0.65, 1) forwards;
}

/* Laser locked on denim during exit sequence */
.lml-studio-laser.lml-laser-locked {
  opacity: 1;
  transform: translateX(118%) rotate(-12deg);
  box-shadow:
    0 0 8px 2px  rgba(88,166,255,0.90),
    0 0 28px 6px rgba(31,111,235,0.48),
    0 0 70px 14px rgba(31,111,235,0.20);
}


/* ══════════════════════════════════════════════════════════════
   DENIM SCULPTURE — Compressed Indigo Monolith
   ══════════════════════════════════════════════════════════════ */

/*
  Positioned right-of-center. Larger than before.
  max-height: 84vh prevents clipping on any screen.
  right: 6% brings it slightly more into center.
*/
.lml-denim-stage {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-54%);
  width: 26%;
  max-width: 380px;
  min-width: 180px;
  height: clamp(320px, 72vh, 680px);
  aspect-ratio: unset;
  opacity: 0;
  animation: lml-denim-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
  pointer-events: none;
}

/* The compressed indigo monolith */
.lml-denim-object {
  position: relative;
  width: 100%;
  height: 100%;

  /*
    Iconic pants silhouette — abstracted, sculptural.
    Wide waistband at top, tapers to mid-body,
    two implicit legs with deep V-notch at base.
    NOT a realistic jean — a memory of one.
  */
  clip-path: polygon(
    /* Waistband — wide, authoritative */
    18% 0%,  82% 0%,
    /* Right side — taper toward legs */
    80% 6%,  76% 17%,  73% 30%,  70% 44%,
    /* Right leg outer — slight flare at base */
    68% 58%,  68% 100%,
    /* Center V notch — deep crotch suggestion */
    57% 100%,  50% 83%,  43% 100%,
    /* Left leg outer */
    32% 100%,  32% 58%,
    /* Left side rising */
    30% 44%,  27% 30%,  24% 17%,  20% 6%
  );

  /*
    Material layers — key light FIRST (on top) so it punches
    through the woven texture rather than hiding beneath it.
  */
  background:
    /* KEY LIGHT — upper-left face, the primary illumination, must be visible */
    radial-gradient(ellipse at 26% 14%,
      rgba(100, 158, 255, 0.78) 0%,
      rgba(68,  118, 240, 0.52) 18%,
      rgba(36,   72, 185, 0.26) 38%,
      transparent 58%
    ),
    /* TOP-EDGE LIGHT — catches the waistband rim */
    radial-gradient(ellipse at 40% 2%,
      rgba(130, 180, 255, 0.45) 0%,
      rgba(80,  130, 240, 0.22) 25%,
      transparent 50%
    ),
    /* SECONDARY RIM — right edge cool separation light */
    radial-gradient(ellipse at 96% 35%,
      rgba(120, 165, 255, 0.32) 0%,
      rgba(70,  115, 215, 0.16) 25%,
      transparent 48%
    ),
    /* LOWER DARK — weight and grounding, bottom heavy */
    radial-gradient(ellipse at 50% 102%,
      rgba(1, 2, 8, 0.88) 0%,
      rgba(2, 4, 14, 0.55) 35%,
      transparent 60%
    ),
    /* DIAGONAL TWILL WEAVE — 3×1 left-hand selvedge (lighter opacity so key light shows) */
    repeating-linear-gradient(-46deg,
      transparent,          transparent 1.6px,
      rgba(2, 6, 18, 0.44) 1.6px, rgba(2, 6, 18, 0.44) 3.2px
    ),
    /* CROSS WEFT — perpendicular thread structure */
    repeating-linear-gradient(44deg,
      transparent,           transparent 6px,
      rgba(10, 18, 48, 0.14) 6px, rgba(10, 18, 48, 0.14) 7px
    ),
    /* PRIMARY SELVEDGE SURFACE — compressed indigo mineral, richer */
    linear-gradient(152deg,
      #243870 0%,
      #182d5e 12%,
      #102248 28%,
      #0c1a3a 48%,
      #060f28 70%,
      #030810 100%
    );

  /* Initial rotation matches sway keyframe start */
  transform: perspective(1100px) rotateY(-9deg) rotateX(1.8deg);
  will-change: transform;

  /* Sway — begins after denim + panel fully revealed */
  animation: lml-denim-sway 72s ease-in-out 1.9s infinite;
}

/* Left-edge specular — key light catching the garment seam, clearly visible */
.lml-denim-object::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 12%;
  height: 80%;
  background: linear-gradient(90deg,
    rgba(140, 190, 255, 0.90) 0%,
    rgba(90,  148, 248, 0.62) 28%,
    rgba(44,   90, 200, 0.28) 60%,
    transparent 100%
  );
  filter: blur(4px);
  pointer-events: none;
}

/* Center seam spine — structural vertical line */
.lml-denim-object::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 88%;
  background: linear-gradient(180deg,
    rgba(40,  80, 180, 0.65) 0%,
    rgba(22,  50, 130, 0.40) 35%,
    rgba(10,  24,  70, 0.20) 70%,
    transparent 100%
  );
  filter: blur(1.2px);
  pointer-events: none;
}

/* Laser trace — glows when beam crosses monolith surface */
.lml-denim-laser-trace {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    97deg,
    transparent 0%, transparent 22%,
    rgba(88,  166, 255, 0.28) 38%,
    rgba(180, 220, 255, 0.52) 50%,
    rgba(88,  166, 255, 0.28) 62%,
    transparent 78%, transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}
.lml-denim-laser-trace.lml-trace-active {
  animation: lml-denim-laser-glow 2.2s ease-out forwards;
}

/* Contact glow — bloom point where laser meets material surface */
.lml-denim-laser-trace::after {
  content: '';
  position: absolute;
  top: 46%;
  left: 42%;
  width: 18%;
  height: 12%;
  background: radial-gradient(ellipse at center,
    rgba(220, 240, 255, 0.65) 0%,
    rgba(120, 180, 255, 0.35) 40%,
    transparent 70%
  );
  filter: blur(4px);
  opacity: 0;
}
.lml-denim-laser-trace.lml-trace-active::after {
  opacity: 1;
  transition: opacity 0.2s ease 0.85s;
}

/* Shadow pool at sculpture base — cast toward viewer */
.lml-denim-stage::after {
  content: '';
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 10%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.38) 45%,
    transparent 72%
  );
  filter: blur(12px);
  pointer-events: none;
}

/* ── MOX ambient symbol — far right, deep in studio ─────────── */
.lml-studio-mox {
  position: absolute;
  bottom: 13%;
  right: 3.5%;
  font-size: 11px;
  color: rgba(88,166,255,0.20);
  animation: lml-mox-pulse 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: 0;
}


/* ══════════════════════════════════════════════════════════════
   GLASS RECEPTION PANEL — floating left foreground
   Observatory glass — thick, heavy, precise
   ══════════════════════════════════════════════════════════════ */
.lml-gw-left {
  position: absolute;
  right: max(32px, 5vw);
  top: 50%;
  transform: translateY(-50%);
  width: 410px;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;

  /* Scrollbar: minimal, barely visible */
  scrollbar-width: thin;
  scrollbar-color: rgba(88,166,255,0.15) transparent;

  /* Observatory glass — dark tinted, slightly translucent */
  background: rgba(6, 9, 16, 0.78);
  backdrop-filter: blur(24px) saturate(1.30);
  -webkit-backdrop-filter: blur(24px) saturate(1.30);

  /* Glass form — thick material with architectural weight */
  border-radius: 16px;
  border: 1px solid rgba(88,166,255,0.07);
  border-top-color:   rgba(255,200,120,0.13); /* warm top edge — only warmth in scene */
  border-left-color:  rgba(88,166,255,0.12);  /* cool left specular */
  border-right-color: rgba(88,166,255,0.04);  /* faint right */

  /* Glass depth: cast shadow downward + leftward, inner specular edges */
  box-shadow:
    0 48px 100px rgba(0,0,0,0.85),
    0 16px 40px  rgba(0,0,0,0.60),
    0 4px  12px  rgba(0,0,0,0.40),
    0 0 0  1px   rgba(88,166,255,0.04),
    inset 0 1px 0 rgba(255,200,120,0.08),    /* warm inner top */
    inset 1px 0 0 rgba(88,166,255,0.08),     /* cool inner left */
    inset 0 -1px 0 rgba(88,166,255,0.03);    /* subtle inner bottom */

  padding: 36px 34px 32px;
  z-index: 10;

  opacity: 0;
  animation: lml-panel-float-in 0.70s cubic-bezier(0.16, 1, 0.3, 1) 1.20s both;
}

/* Prevent scrollbar from shifting content on Windows */
.lml-gw-left::-webkit-scrollbar { width: 4px; }
.lml-gw-left::-webkit-scrollbar-track { background: transparent; }
.lml-gw-left::-webkit-scrollbar-thumb { background: rgba(88,166,255,0.15); border-radius: 2px; }


/* ══════════════════════════════════════════════════════════════
   BRAND — stagger 1
   ══════════════════════════════════════════════════════════════ */
.lml-gw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
  opacity: 0;
  animation: lml-gw-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.30s both;
}

.lml-gw-brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.lml-gw-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: #e6edf3;
  letter-spacing: -0.01em;
}

.lml-gw-brand-version {
  font-size: 10px;
  font-weight: 500;
  color: #3fb950;
  background: rgba(35,134,54,0.10);
  border: 1px solid rgba(35,134,54,0.28);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}


/* ══════════════════════════════════════════════════════════════
   HEADLINE — stagger 2
   ══════════════════════════════════════════════════════════════ */
.lml-gw-headline {
  font-size: 28px;
  font-weight: 700;
  color: #e6edf3;
  line-height: 1.14;
  letter-spacing: -0.032em;
  margin-bottom: 10px;
  max-width: 100%;
  opacity: 0;
  animation: lml-gw-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.40s both;
}

.lml-gw-headline em {
  font-style: normal;
  color: #58a6ff;
}

/* Sub-headline — stagger 3 */
.lml-gw-sub {
  font-size: 12.5px;
  color: #5a6470;
  line-height: 1.65;
  margin-bottom: 28px;
  opacity: 0;
  animation: lml-gw-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.50s both;
}


/* ══════════════════════════════════════════════════════════════
   STATUS / ERROR MESSAGES
   ══════════════════════════════════════════════════════════════ */
.lml-gw-error {
  font-size: 12px;
  color: #f85149;
  background: rgba(248,81,73,0.07);
  border: 1px solid rgba(248,81,73,0.22);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: none;
  animation: lml-gw-enter 0.2s ease both;
}
.lml-gw-error.lml-gw-error-visible { display: block; }

.lml-gw-status {
  font-size: 12px;
  color: #3fb950;
  background: rgba(35,134,54,0.07);
  border: 1px solid rgba(35,134,54,0.22);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: none;
  animation: lml-gw-enter 0.2s ease both;
}
.lml-gw-status.lml-gw-status-visible { display: block; }


/* ══════════════════════════════════════════════════════════════
   FORM — stagger 4
   ══════════════════════════════════════════════════════════════ */
.lml-gw-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  animation: lml-gw-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.60s both;
}

.lml-gw-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
}

.lml-gw-label {
  font-size: 11px;
  font-weight: 600;
  color: #7a8390;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lml-gw-input-wrap { position: relative; }

.lml-gw-input {
  width: 100%;
  background: rgba(12, 18, 30, 0.75);
  border: 1px solid rgba(50, 65, 90, 0.60);
  border-radius: 8px;
  color: #e6edf3;
  font-size: 13px;
  font-family: inherit;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.lml-gw-input:focus {
  background: rgba(18, 28, 48, 0.85);
  border-color: rgba(31,111,235,0.75);
  box-shadow: 0 0 0 3px rgba(31,111,235,0.12);
}
.lml-gw-input::placeholder { color: rgba(80,90,110,0.80); }

.lml-gw-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #5a6470;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.lml-gw-pw-toggle:hover { color: #8b949e; }

/* Remember + Forgot */
.lml-gw-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  margin-top: 2px;
}

.lml-gw-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.lml-gw-remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #1f6feb;
  cursor: pointer;
}
.lml-gw-remember-label { font-size: 12px; color: #7a8390; }

.lml-gw-forgot {
  font-size: 12px;
  color: #4a8eff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}
.lml-gw-forgot:hover { color: #79c0ff; text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════
   PRIMARY BUTTON — stagger 5
   ══════════════════════════════════════════════════════════════ */
.lml-gw-btn-primary {
  width: 100%;
  background: #1f6feb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  padding: 11px 20px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s, opacity 0.18s, transform 0.1s;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: lml-gw-enter 0.40s cubic-bezier(0.16, 1, 0.3, 1) 1.70s both;
}
.lml-gw-btn-primary:hover   { background: #388bfd; }
.lml-gw-btn-primary:active  { transform: scale(0.985); }
.lml-gw-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.lml-gw-btn-primary.lml-gw-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.13) 50%, transparent 100%);
  animation: lml-gw-shimmer 0.9s ease infinite;
}

/* Divider — stagger 5b */
.lml-gw-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
  color: #2e3840;
  font-size: 11px;
  opacity: 0;
  animation: lml-gw-enter 0.40s cubic-bezier(0.16, 1, 0.3, 1) 1.74s both;
}
.lml-gw-divider::before,
.lml-gw-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(40, 55, 80, 0.50);
}

/* Guest button — stagger 6 */
.lml-gw-btn-guest {
  width: 100%;
  background: transparent;
  color: #7a8390;
  border: 1px solid rgba(50, 65, 90, 0.50);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 10px 20px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s;
  margin-bottom: 18px;
  opacity: 0;
  animation: lml-gw-enter 0.40s cubic-bezier(0.16, 1, 0.3, 1) 1.78s both;
}
.lml-gw-btn-guest:hover {
  background: rgba(15, 24, 40, 0.65);
  color: #e6edf3;
  border-color: rgba(70, 90, 120, 0.65);
}
.lml-gw-btn-guest:active { transform: scale(0.985); }

/* Footer links — stagger 7 */
.lml-gw-footer-links {
  font-size: 12px;
  color: #5a6470;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  opacity: 0;
  animation: lml-gw-enter 0.40s cubic-bezier(0.16, 1, 0.3, 1) 1.82s both;
}
.lml-gw-footer-links a,
.lml-gw-footer-links button {
  color: #4a8eff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}
.lml-gw-footer-links a:hover,
.lml-gw-footer-links button:hover { color: #79c0ff; text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════
   TOPBAR LASER TRACE
   ══════════════════════════════════════════════════════════════ */
.lml-topbar-trace {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(31,111,235,0.5)  20%,
    rgba(88,166,255,0.9)  50%,
    rgba(31,111,235,0.5)  80%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(88,166,255,0.4);
  pointer-events: none;
  z-index: 101;
  animation: lml-topbar-sweep 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ══════════════════════════════════════════════════════════════
   TOPBAR USER CHIP
   ══════════════════════════════════════════════════════════════ */
#lml-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 4px;
}

.lml-chip-guest {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(110,64,201,0.09);
  border: 1px solid rgba(110,64,201,0.28);
  border-radius: 5px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #a371f7;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  animation: lml-chip-enter 0.2s ease-out both;
}
.lml-chip-guest:hover {
  background: rgba(110,64,201,0.17);
  border-color: rgba(110,64,201,0.46);
}

.lml-chip-guest-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a371f7;
  opacity: 0.65;
}

.lml-chip-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(31,111,235,0.08);
  border: 1px solid rgba(31,111,235,0.24);
  border-radius: 5px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #58a6ff;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s;
  animation: lml-chip-enter 0.25s ease-out both;
}
.lml-chip-user:hover { background: rgba(31,111,235,0.14); }

.lml-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f6feb, #6e40c9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}


/* ══════════════════════════════════════════════════════════════
   USER MENU DROPDOWN
   ══════════════════════════════════════════════════════════════ */
#lml-user-menu {
  display: none;
  position: fixed;
  top: 52px;
  right: 8px;
  background: #0e1826;
  border: 1px solid #1e2e42;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.70), 0 0 0 1px rgba(88,166,255,0.04);
  z-index: 90000;
  min-width: 200px;
  padding: 6px 0;
  animation: lml-menu-in 0.15s ease;
}
#lml-user-menu.open { display: block; }

.lml-um-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid #182030;
  margin-bottom: 4px;
}
.lml-um-name  { font-size: 13px; font-weight: 600; color: #e6edf3; }
.lml-um-email { font-size: 11px; color: #6e7681; margin-top: 1px; }

.lml-um-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: #8b949e;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.lml-um-item:hover { background: #152030; color: #e6edf3; }
.lml-um-item.danger { color: #f85149; }
.lml-um-item.danger:hover { background: rgba(248,81,73,0.08); }

.lml-um-sep { height: 1px; background: #182030; margin: 4px 0; }

.lml-um-badge {
  font-size: 9px;
  font-weight: 700;
  color: #3fb950;
  background: rgba(35,134,54,0.10);
  border: 1px solid rgba(35,134,54,0.28);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: auto;
  letter-spacing: 0.04em;
}


/* ══════════════════════════════════════════════════════════════
   MEDIUM SCREENS — narrow viewport adaptations
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .lml-gw-left { width: 380px; }
  .lml-denim-stage {
    right: 4%;
    width: 28%;
    height: clamp(300px, 68vh, 640px);
  }
}

@media (max-width: 1100px) {
  .lml-gw-left { width: 355px; }
  .lml-denim-stage {
    right: 3%;
    width: 30%;
    height: clamp(280px, 65vh, 580px);
  }
}

@media (max-width: 900px) {
  .lml-gw-left { width: 320px; right: max(18px, 2.5vw); }
  .lml-denim-stage {
    right: 2%;
    width: 34%;
    min-width: 150px;
    height: clamp(260px, 62vh, 520px);
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — single column, glass panel full-screen
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   MOBILE BOTTOM-SHEET ANIMATION
   ══════════════════════════════════════════════════════════════ */
@keyframes lml-mobile-bottom-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET — 768–991px : right-side panel, 3D scene behind
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
  .lml-gw-left {
    right: max(16px, 2vw);
    left: auto;    /* override the mobile left:0 */
    bottom: auto;  /* override the mobile bottom:0 */
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    max-height: 90vh;
    min-height: auto;
    border-radius: 14px;
    border: 1px solid rgba(88,166,255,0.07);
    border-top-color: rgba(255,200,120,0.13);
    background: rgba(6, 9, 16, 0.82);
    backdrop-filter: blur(24px) saturate(1.30);
    -webkit-backdrop-filter: blur(24px) saturate(1.30);
    box-shadow: 0 48px 100px rgba(0,0,0,0.85),
                0 16px 40px rgba(0,0,0,0.60);
    padding: 28px 26px 24px;
    animation: lml-panel-float-in 0.70s cubic-bezier(0.16,1,0.3,1) 1.20s both;
  }
  .lml-gw-left::before { display: none; } /* remove mobile top bar */
  .lml-gw-headline { font-size: 22px; }
  .lml-gw-sub { margin-bottom: 18px; }
}

@media (max-width: 768px) {

  /* Scene background stays — denim stage replaced by Three.js */
  .lml-denim-stage  { display: none; }
  .lml-studio-laser { display: none; }
  .lml-studio-floor::after { display: none; }
  .lml-studio-mox   { bottom: 10%; right: 5%; font-size: 10px; }

  /* Mobile: bottom-sheet panel — 3D scene visible above */
  .lml-gw-left {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;              /* detach from top */
    transform: none;
    width: auto;
    max-width: none;
    max-height: 44vh;
    min-height: auto;       /* remove the old 100dvh / 100vh override */
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    border: none;
    border-top: 1px solid rgba(88,166,255,0.18);
    padding: 20px 24px 36px;

    background: rgba(5, 8, 18, 0.93);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(88,166,255,0.12);

    animation: lml-mobile-bottom-in 0.45s cubic-bezier(0.22,1,0.36,1) 1.0s both;
  }

  /* Top horizontal accent instead of left vertical */
  .lml-gw-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(88,166,255,0.60) 30%,
      rgba(31,111,235,0.90) 60%,
      transparent 100%
    );
    box-shadow: 0 2px 12px rgba(88,166,255,0.20);
    border-radius: 2px;
  }

  /* Typography — compact for bottom-sheet */
  .lml-gw-headline { font-size: 20px; margin-bottom: 2px; }
  .lml-gw-sub { font-size: 11px; margin-bottom: 14px; }
  .lml-gw-brand { margin-bottom: 8px; }

  /* iOS font-size: 16px prevents auto-zoom on input focus */
  .lml-gw-input { font-size: 16px; padding: 13px 14px; }

  /* Tap targets: minimum 44px */
  .lml-gw-btn-primary { padding: 14px 20px; font-size: 14px; }
  .lml-gw-btn-guest   { padding: 13px 20px; font-size: 14px; }

  /* Exit: slide panel down off-screen */
  #lml-gateway.lml-gw-exiting-content .lml-gw-left {
    transform: translateY(100%);
    transition: transform 0.38s ease-in, opacity 0.30s ease;
  }

  /* Reset stagger delays — appear faster on mobile */
  .lml-gw-brand        { animation-delay: 1.10s; }
  .lml-gw-headline     { animation-delay: 1.18s; }
  .lml-gw-sub          { animation-delay: 1.24s; }
  .lml-gw-form         { animation-delay: 1.30s; }
  .lml-gw-btn-primary  { animation-delay: 1.38s; }
  .lml-gw-divider      { animation-delay: 1.40s; }
  .lml-gw-btn-guest    { animation-delay: 1.43s; }
  .lml-gw-footer-links { animation-delay: 1.46s; }

  /* Chip: dot only on small screens */
  .lml-chip-guest span:not(.lml-chip-guest-dot):not([class]) { display: none; }

  #lml-user-menu { right: 4px; }
}

@media (max-width: 400px) {
  .lml-gw-left { padding: 16px 18px 28px; max-height: 48vh; }
  .lml-gw-headline { font-size: 18px; }
  .lml-gw-field { margin-bottom: 10px; }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — collapse all non-essential animation
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Portal: simple opacity only */
  #lml-gateway { animation: lml-gw-fadein 0.2s ease forwards; }
  #lml-gw-sweep { display: none; }

  /* Scene: instant reveal, no animation */
  .lml-studio-bg,
  .lml-studio-floor,
  .lml-studio-light {
    animation: none;
    opacity: 1;
  }

  /* Denim: no rise, no sway — static resting position */
  .lml-denim-stage {
    animation: none;
    opacity: 1;
    transform: translateY(-54%);
    height: clamp(320px, 72vh, 680px);
  }
  .lml-denim-object {
    animation: none;
    transform: perspective(1100px) rotateY(-9deg) rotateX(1.8deg);
  }

  /* Laser: no scans */
  .lml-studio-laser { display: none; }
  .lml-denim-laser-trace { display: none; }

  /* Bloom: instant */
  .lml-studio-bloom.active { opacity: 1; animation: none; }

  /* Panel: instant appear */
  .lml-gw-left {
    animation: none;
    opacity: 1;
  }
  @media (min-width: 769px) {
    .lml-gw-left { transform: translateY(-50%); }
  }

  /* Stagger elements: all immediate */
  .lml-gw-brand,
  .lml-gw-headline,
  .lml-gw-sub,
  .lml-gw-form,
  .lml-gw-btn-primary,
  .lml-gw-divider,
  .lml-gw-btn-guest,
  .lml-gw-footer-links {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* MOX: static */
  .lml-studio-mox { animation: none; opacity: 0.28; }

  /* No topbar trace */
  .lml-topbar-trace { display: none; }

  /* Simple fade exits */
  #lml-gateway.lml-gw-hidden,
  #lml-gateway.lml-gw-exit-scale {
    animation: lml-gw-fadeout 0.15s ease forwards;
  }

  /* No chip animation */
  .lml-chip-user,
  .lml-chip-guest { animation: none; }

  /* No shimmer */
  .lml-gw-btn-primary.lml-gw-loading::after { animation: none; opacity: 0.10; }

  /* Mobile: static laser accent */
  .lml-gw-left::before { animation: none; opacity: 0.40; }

  /* Exit: no fill-mode conflict — direct opacity only */
  #lml-gateway.lml-gw-exiting-content .lml-gw-left {
    animation: none;
    opacity: 0;
    transform: translateY(-50%); /* preserve centering */
    transition: opacity 0.15s ease;
  }
}