/* magerash.com — the apex landing and the (emulated) inside. No third-party requests:
   the fonts are whatever the visitor's system has, and the scripts are this site's own. */

/* ---------------------------------------------------------------- themes
   One rule per theme, two selectors each: the page (data-theme on <html>, set from the saved
   setting by js/theme.js) and the swatch that previews it. THE DEFAULT is the rule that also
   carries :root — Ocean. js/app.js reads --name to know which one that is. */

html[data-theme="amethyst"], .sw-amethyst {
  --name: "Amethyst";
  --bg: #0a0612; --ink: #f3ecff; --muted: #a99bc4; --faint: #6f6290;
  --line: rgba(196, 167, 255, 0.14); --panel: rgba(20, 12, 34, 0.55);
  --a1: #a855f7; --a2: #581c87; --a3: #f0abfc; --hl: #d8b4fe; --orb: 0.55;
}

:root,
html[data-theme="ocean"], .sw-ocean {
  --name: "Ocean";
  --bg: #03111a; --ink: #e6f8ff; --muted: #8fb3c4; --faint: #557a8c;
  --line: rgba(125, 211, 252, 0.13); --panel: rgba(6, 24, 36, 0.55);
  --a1: #22d3ee; --a2: #0c4a6e; --a3: #5eead4; --hl: #a5f3fc; --orb: 0.5;
}

html[data-theme="ember"], .sw-ember {
  --name: "Ember";
  --bg: #120805; --ink: #fff1e6; --muted: #c9a693; --faint: #8c6a5a;
  --line: rgba(253, 186, 116, 0.13); --panel: rgba(36, 16, 8, 0.55);
  --a1: #fb923c; --a2: #9f1239; --a3: #fde047; --hl: #fed7aa; --orb: 0.5;
}

html[data-theme="jade"], .sw-jade {
  --name: "Jade";
  --bg: #04100b; --ink: #e8fff4; --muted: #93bfa9; --faint: #5a8370;
  --line: rgba(110, 231, 183, 0.12); --panel: rgba(6, 26, 18, 0.55);
  --a1: #34d399; --a2: #064e3b; --a3: #bef264; --hl: #a7f3d0; --orb: 0.5;
}

html[data-theme="sakura"], .sw-sakura {
  --name: "Sakura";
  --bg: #12060b; --ink: #fff0f6; --muted: #c79bb0; --faint: #8a6074;
  --line: rgba(249, 168, 212, 0.13); --panel: rgba(34, 10, 22, 0.55);
  --a1: #f472b6; --a2: #831843; --a3: #c4b5fd; --hl: #fbcfe8; --orb: 0.5;
}

html[data-theme="graphite"], .sw-graphite {
  --name: "Graphite";
  --bg: #0b0b0c; --ink: #fafafa; --muted: #a1a1aa; --faint: #6b6b74;
  --line: rgba(255, 255, 255, 0.09); --panel: rgba(24, 24, 27, 0.6);
  --a1: #d4d4d8; --a2: #3f3f46; --a3: #ffffff; --hl: #e4e4e7; --orb: 0.28;
}

html[data-theme="paper"], .sw-paper {
  --name: "Paper";
  --bg: #f6f3ee; --ink: #1c1917; --muted: #57534e; --faint: #8f877e;
  --line: rgba(28, 25, 23, 0.09); --panel: rgba(255, 255, 255, 0.7);
  --a1: #7c3aed; --a2: #3b0764; --a3: #f472b6; --hl: #6d28d9; --orb: 0.28;
}

/* Registered, so a theme switch fades instead of jumping. Initial values are Ocean's. */
@property --bg    { syntax: "<color>"; inherits: true; initial-value: #03111a; }
@property --ink   { syntax: "<color>"; inherits: true; initial-value: #e6f8ff; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #8fb3c4; }
@property --faint { syntax: "<color>"; inherits: true; initial-value: #557a8c; }
@property --line  { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --a1    { syntax: "<color>"; inherits: true; initial-value: #22d3ee; }
@property --a2    { syntax: "<color>"; inherits: true; initial-value: #0c4a6e; }
@property --a3    { syntax: "<color>"; inherits: true; initial-value: #5eead4; }
@property --hl    { syntax: "<color>"; inherits: true; initial-value: #a5f3fc; }
@property --orb   { syntax: "<number>"; inherits: true; initial-value: 0.5; }

:root {
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans CJK JP", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --danger: #f87171;
  color-scheme: dark;
  transition: --bg 0.7s, --ink 0.7s, --muted 0.7s, --faint 0.7s, --line 0.7s, --panel 0.7s,
    --a1 0.7s, --a2 0.7s, --a3 0.7s, --hl 0.7s, --orb 0.7s;
}

html[data-theme="paper"] { color-scheme: light; --danger: #dc2626; }

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- background */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--orb);
  will-change: transform;
}

.orb-1 {
  width: 46vmax; height: 46vmax;
  left: -12vmax; top: -16vmax;
  background: radial-gradient(circle at 40% 40%, var(--a1), transparent 65%);
  animation: drift-1 26s ease-in-out infinite alternate;
}

.orb-2 {
  width: 40vmax; height: 40vmax;
  right: -14vmax; bottom: -18vmax;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--a1) 45%, var(--a2)), transparent 65%);
  animation: drift-2 32s ease-in-out infinite alternate;
}

.orb-3 {
  width: 28vmax; height: 28vmax;
  right: 8vmax; top: 6vmax;
  background: radial-gradient(circle at 50% 50%, var(--a3), transparent 62%);
  opacity: calc(var(--orb) * 0.4);
  animation: drift-3 22s ease-in-out infinite alternate;
}

@keyframes drift-1 { to { transform: translate(14vmax, 10vmax) scale(1.1); } }
@keyframes drift-2 { to { transform: translate(-12vmax, -8vmax) scale(1.15); } }
@keyframes drift-3 { to { transform: translate(-16vmax, 12vmax) scale(0.9); } }

/* A faint grid that fades out towards the edges, and film grain over everything. */
.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  opacity: 0.35;
}

.grain {
  position: absolute;
  inset: -50%;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- landing */

main {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(1rem, 2.6vh, 1.75rem);
  padding: 3.5rem 16px 1.5rem;
  text-align: center;
}

.gem {
  width: clamp(48px, 7vw, 64px);
  height: auto;
  filter: drop-shadow(0 0 28px color-mix(in oklab, var(--a1) 55%, transparent));
  animation: float 7s ease-in-out infinite;
}

/* Facets, light to dark. The hex is Ocean's value for a browser without color-mix(). */
.gem g { stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.6; stroke-linejoin: round; }
.f1 { fill: #c8f4fb; fill: color-mix(in oklab, var(--a1) 25%, white); }
.f2 { fill: #9aeaf6; fill: color-mix(in oklab, var(--a1) 45%, white); }
.f3 { fill: #eefcfe; fill: color-mix(in oklab, var(--a1) 8%, white); }
.f4 { fill: #64def2; fill: color-mix(in oklab, var(--a1) 70%, white); }
.f5 { fill: #22d3ee; fill: var(--a1); }
.f6 { fill: #1cb1ce; fill: color-mix(in oklab, var(--a1) 75%, var(--a2)); }
.f7 { fill: #1688a8; fill: color-mix(in oklab, var(--a1) 45%, var(--a2)); }
.f8 { fill: #0c4a6e; fill: var(--a2); }

@keyframes float {
  50% { transform: translateY(-8px) rotate(-3deg); }
}

h1 {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.grad, .cycle > span {
  background: linear-gradient(120deg, var(--ink) 10%, var(--hl) 45%, var(--a1) 75%, var(--a3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* All words share one grid cell, so the box is as wide as the widest word and
   nothing reflows while they swap. Six words × 2.5 s = one 15 s cycle. */
.cycle {
  display: inline-grid;
  padding: 0 0.06em 0.08em;
}

.cycle > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: word 15s infinite;
}

.cycle > span:nth-child(2) { animation-delay: 2.5s; }
.cycle > span:nth-child(3) { animation-delay: 5s; }
.cycle > span:nth-child(4) { animation-delay: 7.5s; }
.cycle > span:nth-child(5) { animation-delay: 10s; }
.cycle > span:nth-child(6) { animation-delay: 12.5s; }

.cycle > span.still { opacity: 1; animation: none; }

@keyframes word {
  0%       { opacity: 0; transform: translateY(0.18em) scale(0.98); }
  3%, 14%  { opacity: 1; transform: none; }
  17%, 100% { opacity: 0; transform: translateY(-0.18em) scale(0.98); }
}

.lead {
  max-width: 34ch;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
}

.lead strong {
  color: var(--ink);
  font-weight: 600;
}

a { color: var(--hl); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- sign-in card */

.card {
  width: min(100%, 360px);
  display: grid;
  gap: 0.85rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px -28px color-mix(in oklab, var(--a1) 45%, transparent);
  text-align: left;
}

.card form {
  display: grid;
  gap: 0.85rem;
}

.card-title {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field > span {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.input {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16 px keeps iOS from zooming in on focus */
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input::placeholder { color: var(--faint); }

.input:focus {
  border-color: color-mix(in oklab, var(--a1) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--a1) 22%, transparent);
}

.input[aria-invalid="true"] { border-color: var(--danger); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--bg);
  background: linear-gradient(120deg, var(--hl), var(--a1));
  transition: transform 0.15s, filter 0.2s, opacity 0.2s;
}

.btn:hover { filter: brightness(1.08); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

.link-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.link-btn:hover { color: var(--ink); }

.error {
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--danger);
}

.hint {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--faint);
  text-align: center;
}

.back {
  display: grid;
  gap: 0.85rem;
}

.back p { color: var(--muted); }
.back strong { color: var(--ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- footer */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

footer {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: 1.25rem 16px 2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ---------------------------------------------------------------- inside (/app/) */

.app { grid-template-rows: auto 1fr auto; }

.bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.brand svg { width: 24px; height: 24px; }

.who {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.who-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--bg);
  background: linear-gradient(135deg, var(--hl), var(--a1));
}

.inside {
  align-content: start;
  justify-items: stretch;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 16px 2rem;
  text-align: left;
  gap: 2.25rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.6rem;
}

.welcome {
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.inside .lead { margin-top: 0.8rem; max-width: 46ch; }

.panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.panel h2 {
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.setting {
  display: grid;
  gap: 0.8rem;
  border: 0;
  padding: 0;
  min-width: 0;
}

.setting legend {
  padding: 0;
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.setting-note {
  font-size: 0.75rem;
  color: var(--faint);
}

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.5rem;
}

.chip { position: relative; cursor: pointer; }

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.chip-body {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.chip:hover .chip-body { color: var(--ink); }

.chip input:checked + .chip-body {
  border-color: color-mix(in oklab, var(--a1) 70%, transparent);
  background: color-mix(in oklab, var(--a1) 10%, transparent);
  color: var(--ink);
}

.chip input:focus-visible + .chip-body { outline: 2px solid var(--hl); outline-offset: 2px; }

/* Each swatch carries its own theme's variables (see the theme rules above). */
.sw {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: radial-gradient(circle at 32% 30%, var(--hl), var(--a1) 45%, var(--a2));
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------------------------------------------------------------- utilities */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .orb, .gem, .dot, .cycle > span { animation: none; }
  .cycle > span:first-child { opacity: 1; }
  :root { transition: none; }
}