/* PrivateRoyale website — shared stylesheet. Static, no build step.
   Palette (2026-09-06): blue-black base, cool white text, azure as the one
   accent (the app's --primary), with violet and teal only in the aurora. */

:root {
  --bg: #06080f;
  --bg-2: #0a0e18;
  --panel: rgba(10, 14, 24, 0.66);
  --line: rgba(160, 190, 255, 0.12);
  --text: #e9edf6;
  --muted: #8b95ab;
  --silver: #c7d0e2;
  --white: #ffffff;
  --tint: #7fb2ff;        /* azure: brand dot, focus ring, underline, key */
  --tint-rgb: 127, 178, 255;
  --accent: #3d8bff;
  --accent-rgb: 61, 139, 255;
  --violet-rgb: 124, 92, 255;
  --teal-rgb: 45, 212, 191;
  --danger: #ff6b6b;
  --ok: #8fe3b4;
  --radius: 18px;
  --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --font-body: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --mx: 50vw;            /* cursor, updated by app.js */
  --my: 50vh;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--white); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(var(--accent-rgb), .35); }

/* =====================================================================
   Backdrop: fog → particle canvas → horizon grid → spotlight → noise
   ===================================================================== */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }

.aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(42% 36% at 20% 26%, rgba(var(--accent-rgb), .22), transparent 70%),
    radial-gradient(38% 40% at 80% 20%, rgba(var(--violet-rgb), .16), transparent 70%),
    radial-gradient(46% 34% at 56% 90%, rgba(var(--teal-rgb), .10), transparent 70%),
    radial-gradient(30% 30% at 50% 52%, rgba(var(--tint-rgb), .05), transparent 70%);
  filter: blur(52px);
  animation: aurora-drift 28s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(3deg) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-2deg) scale(1.03); }
}

#particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.horizon {
  position: absolute; left: -30%; right: -30%; bottom: -8%; height: 55%;
  background-image:
    linear-gradient(rgba(var(--tint-rgb), .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tint-rgb), .13) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(600px) rotateX(70deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  animation: horizon-scroll 9s linear infinite;
  opacity: .8;
}
@keyframes horizon-scroll { from { background-position: 0 0; } to { background-position: 0 72px; } }
.horizon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tint-rgb), .95), transparent);
  box-shadow: 0 0 24px rgba(var(--tint-rgb), .6), 0 0 70px rgba(var(--accent-rgb), .45);
  opacity: .75;
}

.spotlight {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 560px at var(--mx) var(--my), rgba(var(--tint-rgb), .06), transparent 60%);
}

.noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(3, 5, 10, .85) 100%);
}

/* =====================================================================
   Layout
   ===================================================================== */
.page { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px clamp(20px, 5vw, 64px);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .18em;
  font-size: 13px; color: var(--text); text-transform: uppercase;
}
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tint);
  box-shadow: 0 0 10px var(--tint), 0 0 22px rgba(var(--accent-rgb), .9);
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }

.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: 1px solid rgba(var(--tint-rgb), .22);
  background: rgba(var(--tint-rgb), .04); color: var(--text);
  font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .12s, background .25s, color .25s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn:hover { text-decoration: none; border-color: rgba(var(--tint-rgb), .75); color: #fff; background: rgba(var(--tint-rgb), .08);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .08), 0 0 28px rgba(var(--accent-rgb), .22), inset 0 0 18px rgba(var(--tint-rgb), .06); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(100deg, #5b9dff 0%, #3d8bff 50%, #5b9dff 100%);
  background-size: 200% 100%;
  box-shadow: 0 10px 34px rgba(var(--accent-rgb), .30);
}
.btn.primary::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn.primary:hover { box-shadow: 0 12px 44px rgba(var(--accent-rgb), .5); background-position: 100% 0; color: #fff; }
.btn.primary:hover::after { left: 130%; }
.btn[disabled] { opacity: .55; cursor: wait; }

main.hero {
  flex: 1; display: grid; place-items: center;
  padding: 16px clamp(20px, 5vw, 64px) 72px;
}
.hero-inner { width: 100%; max-width: 820px; text-align: center; }

/* staggered entrance */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px);
  animation: reveal .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes reveal { to { opacity: 1; transform: none; filter: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  border: 1px solid rgba(var(--tint-rgb), .22); background: rgba(var(--tint-rgb), .05);
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--silver);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .10), inset 0 0 12px rgba(var(--tint-rgb), .04);
}
.eyebrow .blink { width: 6px; height: 6px; border-radius: 50%; background: var(--tint);
  box-shadow: 0 0 8px var(--tint); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { opacity: 0; } }

/* =====================================================================
   Title: brushed-silver gradient + light sweep + monochrome glitch
   ===================================================================== */
.title-wrap { position: relative; display: inline-block; margin: 0 0 26px; }
.title {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(42px, 9.2vw, 96px); letter-spacing: .05em; line-height: 1;
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 38%, #b9c8ea 58%, #6f8ac4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(var(--tint-rgb), .22)) drop-shadow(0 0 44px rgba(var(--accent-rgb), .22));
}
/* moving light sweep across the letters */
.title-wrap::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  font: inherit; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(42px, 9.2vw, 96px); letter-spacing: .05em; line-height: 1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 5.5s ease-in-out infinite; mix-blend-mode: screen;
}
@keyframes sheen { 0% { background-position: 140% 0; } 45%, 100% { background-position: -140% 0; } }
/* glitch layers (toggled by app.js with .glitch): pure white and dark grey slices */
.title-wrap .g {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(42px, 9.2vw, 96px); letter-spacing: .05em; line-height: 1;
  color: transparent; -webkit-background-clip: text; background-clip: text;
}
.title-wrap .g.r { background-color: #ffffff; }   /* not the shorthand: it resets background-clip */
.title-wrap .g.b { background-color: #3d8bff; }
.title-wrap.glitch .g.r { opacity: .95; animation: glitch-r .42s steps(1) 1; }
.title-wrap.glitch .g.b { opacity: .95; animation: glitch-b .42s steps(1) 1; }
.title-wrap.glitch .title { animation: glitch-shake .42s steps(1) 1; }
@keyframes glitch-r {
  0%   { clip-path: inset(8% 0 62% 0);  transform: translate(-7px, -2px); }
  25%  { clip-path: inset(40% 0 30% 0); transform: translate(6px, 1px); }
  50%  { clip-path: inset(70% 0 5% 0);  transform: translate(-4px, 2px); }
  75%  { clip-path: inset(20% 0 55% 0); transform: translate(5px, -1px); }
  100% { clip-path: inset(0 0 0 0);     transform: none; opacity: 0; }
}
@keyframes glitch-b {
  0%   { clip-path: inset(55% 0 20% 0); transform: translate(7px, 2px); }
  25%  { clip-path: inset(10% 0 70% 0); transform: translate(-6px, -1px); }
  50%  { clip-path: inset(30% 0 40% 0); transform: translate(4px, -2px); }
  75%  { clip-path: inset(65% 0 10% 0); transform: translate(-5px, 1px); }
  100% { clip-path: inset(0 0 0 0);     transform: none; opacity: 0; }
}
@keyframes glitch-shake {
  0% { transform: translate(1px, 0); } 25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 0); } 100% { transform: none; }
}

.lede {
  margin: 0 auto 40px; max-width: 660px;
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; color: #b6c0d6;
}
.lede .key {
  position: relative; display: inline-block; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(90deg, #ffffff, #9cc4ff, #ffffff, #7fb2ff, #ffffff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: key-flow 7s linear infinite;
  filter: drop-shadow(0 0 10px rgba(var(--tint-rgb), .45));
}
@keyframes key-flow { to { background-position: 300% 0; } }
.lede .key::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tint), var(--accent));
  box-shadow: 0 0 12px rgba(var(--tint-rgb), .7), 0 0 26px rgba(var(--accent-rgb), .55);
  transform-origin: left; animation: draw 1.2s cubic-bezier(.2, .7, .2, 1) 1.4s both;
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =====================================================================
   Invite card: glass, rotating light border, cursor glow, tilt
   ===================================================================== */
.card-wrap { perspective: 1200px; max-width: 560px; margin: 0 auto; }
.card {
  position: relative; padding: 32px 30px 26px;
  background: var(--panel); border-radius: var(--radius);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--tint-rgb), .10) inset, 0 1px 0 rgba(255, 255, 255, .08) inset;
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease-out, box-shadow .3s;
}
.card:has(.invite-input:focus) { box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 60px rgba(var(--accent-rgb), .14), 0 0 0 1px rgba(var(--tint-rgb), .28) inset; }
/* rotating light on the border */
.card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 20%, #9cc4ff 32%, transparent 44%, transparent 60%, rgba(var(--accent-rgb), .6) 72%, transparent 84%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 7s linear infinite; opacity: .85;
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-border { to { --a: 360deg; } }
/* cursor-following inner glow */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px 200px at var(--cx, 50%) var(--cy, 50%), rgba(var(--tint-rgb), .08), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.card:hover::after { opacity: 1; }
.card > * { transform: translateZ(24px); }

.card label {
  display: block; margin-bottom: 14px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.invite-row { display: flex; gap: 12px; }
.invite-input {
  flex: 1; min-width: 0;
  padding: 15px 16px; border-radius: 12px;
  border: 1px solid rgba(var(--tint-rgb), .16); background: rgba(3, 5, 10, .55); color: #fff;
  font-family: var(--font-display); font-size: 16px; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
  caret-color: var(--tint);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
}
.invite-input::placeholder { color: rgba(139, 149, 171, .45); letter-spacing: .14em; }
.invite-input:focus { border-color: rgba(var(--tint-rgb), .8); background: rgba(3, 5, 10, .65);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 0 4px rgba(var(--tint-rgb), .10), 0 0 26px rgba(var(--tint-rgb), .18); }
.invite-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 0 4px rgba(255, 107, 107, .14); animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translateX(0) translateZ(24px); } 20%, 60% { transform: translateX(-6px) translateZ(24px); } 40%, 80% { transform: translateX(6px) translateZ(24px); } }
.status { min-height: 24px; margin: 14px 0 0; font-size: 15px; color: var(--muted); text-align: left; }
.status.err { color: var(--danger); }
.status.ok  { color: var(--ok); }

.disclaimer { margin: 30px auto 0; max-width: 580px; font-size: 14px; color: var(--muted); }
.disclaimer a { color: var(--silver); border-bottom: 1px solid rgba(var(--tint-rgb), .35); }
.disclaimer a:hover { color: var(--tint); text-decoration: none; border-color: var(--tint); }

/* =====================================================================
   Footer
   ===================================================================== */
footer {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  padding: 24px clamp(20px, 5vw, 64px); font-size: 14px; color: var(--muted);
}
footer::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tint-rgb), .35), transparent);
}
footer .sep { opacity: .35; }
footer a { color: var(--muted); letter-spacing: .04em; transition: color .2s, text-shadow .2s; }
footer a:hover { color: var(--tint); text-decoration: none; text-shadow: 0 0 12px rgba(var(--accent-rgb), .6); }

/* =====================================================================
   Secondary pages
   ===================================================================== */
.doc { width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 0 48px; }
.doc h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px); letter-spacing: .06em; margin: 0 0 8px; }
.doc .meta { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.doc h2 { font-family: var(--font-display); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--tint); margin: 32px 0 10px; }
.doc p, .doc li { color: #b6c0d6; }
.doc p { margin: 0 0 12px; }
.doc .n { display: inline-block; min-width: 2.6em; color: var(--muted); font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; }
.doc .summary {
  border: 1px solid rgba(var(--tint-rgb), .28); border-left: 3px solid var(--accent); border-radius: 12px;
  padding: 14px 18px; margin: 0 0 18px; color: var(--text); background: rgba(var(--accent-rgb), .07); font-size: 17px;
}
.doc .placeholder {
  border: 1px dashed rgba(255, 255, 255, .25); border-radius: var(--radius); padding: 16px 18px;
  color: var(--muted); font-size: 15px; background: rgba(255, 255, 255, .03);
}
.form { display: grid; gap: 14px; text-align: left; }
.form label { margin-bottom: 6px; }
.text-input {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid rgba(var(--tint-rgb), .16); background: rgba(3, 5, 10, .55); color: var(--text);
  font-family: var(--font-body); font-size: 18px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.text-input:focus { border-color: rgba(var(--tint-rgb), .8); box-shadow: 0 0 0 4px rgba(var(--tint-rgb), .10); }

@media (max-width: 560px) {
  .invite-row { flex-direction: column; }
  .btn { width: 100%; }
  .topbar .btn { width: auto; }
  .lede { font-size: 17px; }
  .card { padding: 26px 20px 20px; }
}
/* Motion is part of the design and stays on regardless of the OS
   reduced-motion flag: Chrome on Windows reports it whenever "Show animations
   in Windows" is off, which would silently ship the static fallback. */