:root {
  --gate-night: #100711;
  --gate-night-soft: #1b0a1c;
  --gate-ink: #f8eee7;
  --gate-muted: #cfb9c6;
  --gate-rose: #ed6f9a;
  --gate-fuchsia: #bd205f;
  --gate-plum: #57113f;
  --gate-peacock: #11655f;
  --gate-sky: #a9d9e8;
  --gate-gold: #d8aa5d;
  --gate-panel: #fbf3e8;
  --gate-panel-ink: #271720;
  --gate-panel-muted: #6d5962;
  --gate-line: #d9c8bd;
}

body.auth-gate {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 70% 25%, color-mix(in srgb, var(--lotus-glow, #daaa66) 18%, transparent), transparent 60%),
    linear-gradient(155deg, #0c111b 2%, var(--lotus-sky, #1c4458) 62%, #0b1c25);
  color: var(--gate-ink);
}

body.auth-gate::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(
      115deg,
      transparent 0 48%,
      #f8eee706 48% 48.12%,
      transparent 48.12%
    ),
    radial-gradient(circle at center, #fff 0 1px, transparent 1.2px);
  background-size:
    100% 100%,
    38px 38px;
  content: "";
  opacity: calc(0.22 - var(--lotus-sun, 1) * 0.15);
  pointer-events: none;
}

.auth-nav {
  position: relative;
  z-index: 3;
  border-color: #f8eee71c;
}
.auth-nav .pub-brand {
  color: var(--gate-ink);
}
.auth-nav .pub-symbol,
.auth-nav .brand-period {
  color: var(--gate-gold);
}
.auth-nav > p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--gate-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-nav > p span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gate-rose);
  box-shadow:
    0 0 0 5px #ed6f9a17,
    0 0 22px #ed6f9a66;
}
.auth-nav-enter {
  display: none;
}

.auth-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  align-items: center;
  gap: clamp(36px, 4vw, 64px);
  width: min(1320px, calc(100% - 64px));
  min-height: calc(100vh - 170px);
  margin-inline: auto;
  padding: 58px 0 72px;
}
.auth-story {
  position: relative;
  min-width: 0;
}
.auth-story .pub-eyebrow {
  color: #d7bbc9;
}
.auth-story h1 {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0;
  color: var(--gate-ink);
  font: 400 clamp(60px, 7.2vw, 112px)/0.88 var(--pub-serif);
  letter-spacing: -0.07em;
  text-shadow: 0 18px 60px #06020799;
}
.auth-story h1 em {
  color: #f08ab0;
  font-weight: 400;
  text-shadow: 0 0 42px #bd205f4f;
}
.auth-deck {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 28px 0 0;
  color: var(--gate-muted);
  font-size: clamp(16px, 1.5vw, 20px);
}
.small-spark {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--gate-gold);
  box-shadow: 0 0 20px #d8aa5d73;
  transform: rotate(45deg);
}

.auth-sculpture {
  position: relative;
  height: clamp(390px, 32vw, 480px);
  margin: -94px -4vw -48px 6vw;
  isolation: isolate;
}
.auth-sculpture-visual {
  position: absolute;
  inset: 0 0 58px;
}
.auth-sculpture::before {
  position: absolute;
  z-index: -1;
  inset: 13% 10% 7%;
  border: 1px solid #b7dce344;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 44%,
    #a9e1ff40 0,
    #8dbbcb2a 36%,
    #b4265e28 55%,
    transparent 74%
  );
  box-shadow:
    inset 0 0 100px #a9d9e811,
    0 0 120px #397a9140;
  content: "";
  transform: rotate(-7deg) scale(0.9, 0.72);
}
.auth-sculpture::after {
  position: absolute;
  inset: 14% 17%;
  z-index: -1;
  border: 1px solid #a9d9e833;
  border-radius: 50%;
  content: "";
  transform: rotate(19deg) scale(0.88, 0.68);
}
.auth-sculpture-grid {
  position: absolute;
  inset: 4% 0 0;
  background-image:
    linear-gradient(#e7b86b0d 1px, transparent 1px),
    linear-gradient(90deg, #e7b86b0d 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #0008, transparent 70%);
}
.auth-sculpture-fallback,
.auth-sculpture-canvas {
  position: absolute;
  inset: 0;
}
.auth-sculpture-fallback {
  overflow: clip;
  transition: opacity 0.45s ease;
}
.auth-sculpture-fallback svg,
.auth-sculpture-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.auth-sculpture-fallback svg {
  transform-origin: center;
  transform:
    translateY(clamp(0%, calc((1 - var(--lotus-opening, 1) + var(--lotus-decay, 0)) * 31%), 31%))
    scale(calc((0.3 + var(--lotus-opening, 1) * 0.7) * (1 - var(--lotus-decay, 0) * 0.22)), calc((0.3 + var(--lotus-opening, 1) * 0.7) * (1 - var(--lotus-decay, 0) * 0.82)))
    rotate(calc(var(--lotus-decay, 0) * -5deg));
  transition: none;
}
.auth-sculpture:has([data-sculpture-state="ready"]) .auth-sculpture-fallback {
  opacity: 0;
}
.auth-lotus-controls {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
}
.auth-lotus-controls[hidden] {
  display: none;
}
.auth-lotus-stages {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #f6cfdf38;
  border-radius: 4px;
  background: #160915d9;
  box-shadow: 0 12px 34px #07030773;
  backdrop-filter: blur(14px);
}
.auth-lotus-stages button,
.auth-lotus-actions button {
  min-height: 44px;
  border-radius: 2px;
  color: #ead6df;
  font: 650 11px/1 var(--pub-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-lotus-stages button {
  padding: 0 13px;
  border: 0;
  background: transparent;
}
.auth-lotus-stages button span {
  margin-right: 5px;
  color: #d8aa5d;
  font-size: 8px;
}
.auth-lotus-stages button[aria-pressed="true"] {
  background: #f5dedc;
  box-shadow: inset 0 0 0 1px #fff8;
  color: #42102f;
}
.auth-lotus-actions {
  display: flex;
  gap: 6px;
}
.auth-lotus-motion,
.auth-lotus-orientation {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 124px;
  padding: 0 13px;
  border: 1px solid #d8aa5d7a;
  background: #301026d9;
  white-space: nowrap;
}
.auth-lotus-orientation {
  min-width: 108px;
}
.auth-lotus-orientation[aria-pressed="true"] {
  border-color: #7dd1c5;
  color: #a9eee2;
}
.auth-lotus-stages button:focus-visible,
.auth-lotus-motion:focus-visible,
.auth-lotus-orientation:focus-visible {
  outline: 3px solid #f4b3ca;
  outline-offset: 3px;
}
.auth-lotus-motion:disabled,
.auth-lotus-orientation:disabled {
  cursor: default;
  opacity: 0.72;
}
.auth-lotus-status {
  position: absolute;
  z-index: 2;
  bottom: 52px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  color: #e5c9d5;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.auth-annotation {
  position: absolute;
  right: 3%;
  bottom: 20%;
  margin: 0;
  color: #c7dfe2;
  font: italic 12px/1.3 var(--pub-serif);
  text-shadow: 0 2px 15px #080207;
  transform: rotate(4deg);
}
.auth-annotation::before {
  display: inline-block;
  width: 42px;
  margin: 0 11px 4px 0;
  border-top: 1px solid #d8aa5d8c;
  content: "";
}

.auth-panel {
  position: relative;
  z-index: 2;
  scroll-margin-top: 20px;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid #cba871;
  border-radius: 2px;
  background: #fbf3e8f5;
  box-shadow:
    18px 24px 0 #070f0ecc,
    0 34px 90px #0502058c;
  color: var(--gate-panel-ink);
  backdrop-filter: blur(18px);
}
.auth-panel::before {
  position: absolute;
  inset: 10px;
  border: 1px solid #d9c8bd;
  content: "";
  pointer-events: none;
}
.auth-panel::after {
  position: absolute;
  top: 10px;
  right: 30px;
  width: 64px;
  border-top: 2px solid var(--gate-fuchsia);
  content: "";
}
.auth-panel > * {
  position: relative;
  z-index: 1;
}
.auth-panel-kicker {
  display: flex;
  justify-content: space-between;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--gate-line);
  color: var(--gate-panel-muted);
  font-size: 9px;
  letter-spacing: 0.16em;
}
.auth-panel .pub-eyebrow {
  color: #74405a;
}
.auth-panel h2 {
  margin: 8px 0 14px;
  color: var(--gate-panel-ink);
  font: 400 clamp(36px, 4vw, 54px)/1 var(--pub-serif);
  letter-spacing: -0.045em;
}
.auth-panel form,
.auth-panel [data-auth-checking] {
  padding-top: 30px;
}
.auth-panel-copy {
  margin: 0 0 28px;
  color: var(--gate-panel-muted);
  font-size: 14px;
}
.auth-panel label {
  display: block;
  margin-bottom: 8px;
  color: #4f3541;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-panel input {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid #9f858f;
  border-radius: 2px;
  background: #fffdfa;
  color: var(--gate-panel-ink);
  font-size: 17px;
}
.auth-panel input:focus {
  border-color: var(--gate-fuchsia);
  outline: 3px solid #bd205f38;
  outline-offset: 2px;
}
.auth-primary,
.auth-secondary {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  border-radius: 2px;
  font: 650 12px/1.2 var(--pub-sans);
  letter-spacing: 0.04em;
}
.auth-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 1px solid #43102f;
  background: #43102f;
  color: #fffaf6;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.auth-primary:hover {
  border-color: var(--gate-fuchsia);
  background: var(--gate-fuchsia);
  transform: translateY(-1px);
}
.auth-secondary {
  border: 0;
  background: transparent;
  color: var(--gate-panel-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.auth-panel :disabled {
  cursor: wait;
  opacity: 0.56;
}
.auth-status {
  min-height: 24px;
  margin: 18px 0 0;
  color: #8b2448;
  font-size: 13px;
}
.auth-privacy {
  margin: 23px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gate-line);
  color: var(--gate-panel-muted);
  font-size: 11px;
  line-height: 1.55;
}

.auth-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
  padding: 24px 0 30px;
  border-top: 1px solid #f8eee71c;
  color: #bca4b0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth-footer p {
  margin: 0;
}

@media (max-width: 900px) {
  .auth-nav > p {
    display: none;
  }
  .auth-nav-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 92px;
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid #a9d9e87a;
    color: var(--gate-ink);
    font: 650 12px/1 var(--pub-sans);
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .auth-nav-enter span {
    color: var(--gate-sky);
  }
  .auth-nav-enter:focus-visible {
    outline-color: var(--gate-sky);
  }
  .auth-stage {
    grid-template-columns: 1fr;
    width: min(660px, calc(100% - 40px));
    gap: 0;
    padding-top: 42px;
  }
  .auth-story h1 {
    font-size: clamp(54px, 13vw, 86px);
  }
  .auth-sculpture {
    height: min(100vw, 540px);
    margin: -54px -7vw 4px;
  }
  .auth-panel {
    margin-top: 18px;
  }
  .auth-footer {
    width: calc(100% - 40px);
  }
}
@media (max-width: 520px) {
  .auth-stage {
    padding-top: 24px;
  }
  .auth-story h1 {
    font-size: clamp(46px, 13vw, 54px);
    line-height: 0.9;
    letter-spacing: -0.055em;
  }
  .auth-deck {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.5;
  }
  .auth-sculpture {
    height: 454px;
    margin: 16px -5vw 0;
  }
  .auth-sculpture-visual {
    inset: 104px 0 0;
  }
  .auth-lotus-controls {
    top: 0;
    bottom: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    width: calc(100% - 24px);
  }
  .auth-lotus-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .auth-lotus-stages button {
    padding-inline: 5px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }
  .auth-lotus-motion {
    flex: 1;
    min-width: 0;
  }
  .auth-lotus-orientation {
    flex: 1;
    min-width: 0;
  }
  .auth-lotus-actions {
    width: 100%;
  }
  .auth-lotus-status {
    top: 108px;
    bottom: auto;
    font-size: 11px;
  }
  .auth-annotation {
    right: auto;
    bottom: 4px;
    left: 50%;
    font-size: 14px;
    white-space: nowrap;
    transform: translateX(-50%);
  }
  .auth-annotation::before {
    width: 22px;
    margin-right: 8px;
  }
  .auth-panel {
    padding: 30px 25px;
    box-shadow:
      9px 12px 0 #070f0ecc,
      0 24px 60px #0502058c;
  }
  .auth-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
@media (max-width: 380px) {
  .auth-lotus-stages button span {
    display: none;
  }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  .auth-nav {
    min-height: 64px;
  }
  .auth-stage {
    padding-top: 12px;
  }
  .auth-story h1 {
    margin-top: 12px;
    font-size: 48px;
    line-height: 0.86;
  }
  .auth-deck {
    max-width: none;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.3;
  }
  .auth-sculpture {
    height: 180px;
    margin-top: -48px;
  }
  .auth-sculpture-visual {
    bottom: 52px;
  }
  .auth-lotus-status,
  .auth-annotation {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-primary,
  .auth-sculpture::before,
  .auth-weather,
  .auth-sculpture-fallback,
  .auth-sculpture-fallback svg {
    transition: none;
  }
}

/* All weather is evaluated from active renderer time, including pause/hidden.
   Dark foreground scrims keep the invitation and navigation readable at noon. */
.auth-weather {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-weather-sun {
  position: absolute;
  width: min(54vw, 650px);
  aspect-ratio: 1;
  top: -15%;
  left: 23%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3ca66 0%, #eab76d22 16%, transparent 64%);
  opacity: var(--lotus-sun, 1);
}
.auth-weather-clouds {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 15% 30%, #bac9d640, transparent 38%),
    radial-gradient(ellipse at 78% 64%, #b3c8d533, transparent 32%),
    radial-gradient(ellipse at 35% 90%, #849ba966, transparent 35%);
  opacity: var(--lotus-mist, 0.15);
  transform: translateX(var(--lotus-cloud-x, 0%));
}
.auth-weather-rain {
  position: absolute;
  inset: -160px -80px;
  background-image: repeating-linear-gradient(108deg, transparent 0 38px, #bad8e52e 39px, transparent 40px 80px);
  background-size: 80px 160px;
  mask-image: repeating-linear-gradient(0deg, transparent 0 120px, #000 125px 150px, transparent 160px);
  opacity: var(--lotus-rain, 0);
  transform: translate(var(--lotus-rain-x, 0px), var(--lotus-rain-y, 0px));
}
.auth-sculpture::before {
  opacity: calc(0.4 + var(--lotus-opening, 1) * 0.6 - var(--lotus-decay, 0) * 0.4);
  border-color: color-mix(in srgb, var(--lotus-glow, #daaa66) 35%, transparent);
  transition: none;
}