/* Sign-in pages. /login: the form on the left, a cinematic scene on the right (decoration only, hidden
   from assistive tech). /magic keeps the single centred card. Same tokens as the rest of the app; the
   scene is always dark, like a film still, whatever the theme. */
.auth { min-height: 100dvh; background: var(--ground); color: var(--body); font-family: var(--font); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: var(--fs-2); text-decoration: none; }
.link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- /magic: one centred card ---------- */
.auth-top { display: flex; align-items: center; height: var(--bar-h); padding: 0 max(var(--s-5), env(safe-area-inset-left)); }
.auth-main { min-height: calc(100dvh - var(--bar-h)); display: grid; place-items: center; padding: var(--s-6) var(--s-4) var(--s-8); }

/* ---------- /login: split ---------- */
.auth-split { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); min-height: 100dvh; padding: 12px; gap: 12px; }
.auth-pane { display: flex; flex-direction: column; padding: var(--s-5) clamp(var(--s-5), 4vw, var(--s-8)); }
.auth-pane .auth-card { margin: auto 0; padding: var(--s-7) 0; }
.auth-card { width: 100%; max-width: 400px; animation: auth-in 700ms var(--ease-reveal) 120ms both; }
@keyframes auth-in { from { opacity: 0; translate: 0 14px; filter: blur(6px); } }
.auth-card h1 { margin: 0; color: var(--text); font-size: clamp(28px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.auth-sub { margin: var(--s-2) 0 var(--s-6); color: var(--muted); font-size: var(--fs-1); }
.auth-foot { display: flex; gap: var(--s-5); font-size: 13px; color: var(--muted); }
.auth-foot a:hover, .auth-legal a:hover { color: var(--text); }

.auth-msg { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-menu); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--text); font-size: var(--fs-1); line-height: 1.5; }
.auth-msg[data-kind="ok"] { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.auth-msg a { color: var(--text); }

.auth-oauth { display: grid; gap: var(--s-2); }
.auth-provider { width: 100%; min-height: 46px; gap: 10px; text-decoration: none; }
.auth-provider svg { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; color: var(--muted); font-size: var(--fs-0); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.auth-form { display: grid; gap: var(--s-4); }
.auth-magic { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.field { display: grid; gap: 6px; }
.field label { color: var(--text); font-size: var(--fs-1); font-weight: 500; }
.field small { color: var(--muted); font-size: var(--fs-0); line-height: 1.45; }
.field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-2);
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease); }
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: none; border-color: var(--pen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 28%, transparent); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 68px; }
.pw-toggle { position: absolute; inset: 4px 4px 4px auto; min-width: 56px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: var(--fs-0); cursor: pointer; }
.pw-toggle:hover { color: var(--text); background: var(--raised); }
.pw-toggle:focus-visible { outline: 2px solid var(--pen); outline-offset: -2px; }
.inline { display: flex; gap: var(--s-2); }
.inline input { flex: 1; min-width: 0; }
.auth-submit { width: 100%; min-height: 46px; margin-top: var(--s-1); }
.auth-legal { margin: var(--s-6) 0 0; color: var(--muted); font-size: var(--fs-0); line-height: 1.5; }
.auth-legal a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

/* ---------- the scene ---------- */
.auth-scene { --s-bg: #050608; position: relative; overflow: hidden; isolation: isolate; container-type: size; border-radius: 24px; background: var(--s-bg); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); animation: scene-in 1400ms var(--ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1)) both; }
@keyframes scene-in { from { opacity: 0; transform: scale(1.04); } }

/* Anticode's own light: a blue glow rising from below, brightest at its core, and the blue pen
   line drawn across the horizon */
.sc-glow { position: absolute; inset: 0; z-index: -3; }
.sc-glow i { position: absolute; left: 50%; border-radius: 50%; filter: blur(60px); translate: -50% 0; will-change: transform; }
.sc-glow .g1 { bottom: -38%; width: 150%; height: 90%; background: radial-gradient(closest-side, rgba(47, 107, 255, 0.55), rgba(47, 107, 255, 0.16) 55%, transparent); animation: drift-a 22s ease-in-out infinite alternate; }
.sc-glow .g2 { bottom: -30%; width: 90%; height: 60%; background: radial-gradient(closest-side, rgba(140, 185, 255, 0.55), rgba(79, 140, 255, 0.2) 50%, transparent 75%); animation: drift-b 26s ease-in-out infinite alternate; }
.sc-glow .g3 { bottom: 31%; width: 62%; height: 2px; border-radius: 2px; filter: none; opacity: 0.7; background: linear-gradient(90deg, transparent, #4f8cff, transparent); animation: drift-c 30s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(-6%, -4%) scale(1.06); } }
@keyframes drift-b { to { transform: translate(7%, -6%) scale(1.1); } }
@keyframes drift-c { to { transform: scaleX(1.18); opacity: 0.45; } }
/* the top stays near-black, so the horizon reads as light coming up */
.auth-scene::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--s-bg) 0%, rgba(5, 6, 8, 0.85) 26%, rgba(5, 6, 8, 0) 62%); }
.sc-dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 42%, #000, transparent 75%); mask-image: radial-gradient(70% 55% at 50% 42%, #000, transparent 75%); }
.sc-grain { position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }

.sc-stage { position: absolute; inset: 0 0 auto; height: 72%; display: grid; place-content: center; justify-items: center; gap: var(--s-5); padding: 0 var(--s-6); z-index: 1; }
.sc-hi { margin: 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.025em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
.sc-hi span { display: inline-block; animation: title-in 1200ms var(--ease-reveal) 500ms both; }
@keyframes title-in { from { opacity: 0; filter: blur(14px); letter-spacing: 0.04em; } }

.sc-composer { width: min(560px, 100%); padding: 16px 16px 12px; border-radius: 22px; background: rgba(22, 22, 24, 0.86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); animation: rise 1000ms var(--ease-reveal) 800ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.sc-typed { margin: 4px 4px 18px; min-height: 2.9em; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.sc-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -0.2em; border-radius: 1px; background: var(--pen); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sc-row { display: flex; justify-content: flex-end; }
.sc-send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.sc-send svg { width: 16px; height: 16px; fill: none; stroke: #0a0a0a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-note { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.66); animation: rise 1000ms var(--ease-reveal) 1100ms both; }

/* three real templates, live: glossy browser windows in a slight arc, catching the light */
.sc-reel { position: absolute; left: 50%; bottom: -26px; z-index: 1; display: flex; align-items: flex-end; gap: min(2.4cqw, 18px); translate: -50% 0; perspective: 1400px; animation: reel-in 1600ms var(--ease-reveal) 1200ms both; }
@keyframes reel-in { from { opacity: 0; transform: translateY(70px); } }
.sc-win { --tilt: 0deg; position: relative; margin: 0; width: min(28cqw, 300px); padding: 0 0 12px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(34, 36, 42, 0.92), rgba(14, 15, 18, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 40px 80px -24px rgba(0, 0, 0, 0.85), 0 18px 40px -20px rgba(47, 107, 255, 0.55);
  transform: rotateY(var(--tilt)) translateZ(0); transform-style: preserve-3d; animation: bob 8s ease-in-out infinite alternate; }
.sc-win:nth-child(1) { --tilt: 14deg; transform-origin: right center; }
.sc-win:nth-child(2) { width: min(34cqw, 360px); translate: 0 -34px; animation-delay: -2.6s; z-index: 1; }
.sc-win:nth-child(3) { --tilt: -14deg; transform-origin: left center; animation-delay: -5.2s; }
@keyframes bob { to { translate: 0 -10px; } }
.sc-win:nth-child(2) { animation-name: bob-mid; }
@keyframes bob-mid { from { translate: 0 -34px; } to { translate: 0 -46px; } }
/* a sheen of light across the glass */
.sc-win::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 42%, transparent 70%, rgba(120, 170, 255, 0.10) 100%); mix-blend-mode: screen; }
.sc-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; }
.sc-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.sc-bar span { flex: 1; margin-left: 8px; overflow: hidden; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 10px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; text-overflow: ellipsis; text-align: center; }
/* the page itself: a real 1280px-wide build, scaled to the card */
.sc-shot { position: relative; aspect-ratio: 16 / 11; margin: 0 6px; overflow: hidden; border-radius: 8px; background: linear-gradient(110deg, #16171b 30%, #22242b 50%, #16171b 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
.sc-shot.is-live { animation: none; background: #fff; }
@keyframes shimmer { to { background-position: -150% 0; } }
.sc-shot iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 880px; border: 0; pointer-events: none; transform-origin: 0 0; transform: scale(var(--s, 0.2)); opacity: 0; transition: opacity 600ms var(--ease-reveal); }
.sc-shot.is-live iframe { opacity: 1; }
.sc-win figcaption { display: grid; gap: 2px; padding: 10px 12px 0; }
.sc-win b { font-size: 13px; font-weight: 600; color: #fff; }
.sc-win figcaption span { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }

/* ---------- small screens: the form first, a short slice of the scene above it ---------- */
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 8px; }
  .auth-scene { order: -1; height: 200px; border-radius: 20px; }
  .sc-stage { height: 100%; gap: 0; }
  .sc-composer, .sc-note, .sc-reel, .sc-dots { display: none; }
  .sc-hi { font-size: 30px; }
  .auth-pane { padding: var(--s-5) var(--s-4) var(--s-6); }
  .auth-pane > .auth-brand { display: none; }
  .auth-pane .auth-card { margin: 0 auto; padding-top: var(--s-4); }
  .auth-foot { justify-content: center; margin-top: var(--s-6); }
}
@media (max-width: 420px) { .inline { flex-direction: column; } }

/* /magic */
.magic-state { display: grid; justify-items: start; gap: var(--s-4); }
.magic-spin { width: 22px; height: 22px; border: 2px solid var(--line-2); border-top-color: var(--text); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }

@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-scene, .sc-hi span, .sc-composer, .sc-note, .sc-reel, .sc-win, .sc-shot, .sc-glow i, .sc-grain { animation: none !important; }
  .sc-caret { animation: none; }
  .magic-spin { animation-duration: 2.4s; }
}