/*
  Ravenhome public site.

  Same visual language as the hub portal (dark navy base, blue/violet accent,
  frosted glass, drifting light blobs), with one upgrade: a real light theme.
  Every colour goes through a custom property, so both themes share one layout.
*/

/* ---------------------------------------------------------------- tokens */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue",
    Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --blur: blur(18px) saturate(170%);
}

/* dark - the hub palette, unchanged */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-solid: #070a14;
  --bg-image:
    radial-gradient(60rem 40rem at 12% -8%, rgba(79, 141, 255, .30), transparent 60%),
    radial-gradient(48rem 34rem at 92% 4%, rgba(139, 92, 255, .26), transparent 58%),
    radial-gradient(70rem 46rem at 50% 118%, rgba(0, 196, 204, .15), transparent 60%),
    linear-gradient(168deg, #0a1020 0%, #0b1220 42%, #06090f 100%);

  --ink: #ffffff;
  --ink-dim: rgba(226, 236, 255, .74);
  --ink-faint: rgba(226, 236, 255, .5);

  --glass: rgba(255, 255, 255, .09);
  --glass-hi: rgba(255, 255, 255, .16);
  --line: rgba(255, 255, 255, .16);
  --line-hi: rgba(255, 255, 255, .32);

  --topbar-bg: rgba(7, 10, 20, .58);
  --topbar-line: rgba(255, 255, 255, .12);

  --accent: #4f8dff;
  --accent-2: #8b5cff;
  --accent-glow: rgba(79, 141, 255, .34);
  --accent-glow-hi: rgba(79, 141, 255, .46);

  --mark-shadow: 0 8px 22px rgba(79, 141, 255, .42);
  --ring: rgba(255, 255, 255, .78);

  --brand-grad: linear-gradient(180deg, #ffffff 0%, #dbe7ff 60%, #a9c6ff 100%);
  --blob-a: rgba(79, 141, 255, .55);
  --blob-b: rgba(139, 92, 255, .50);
  --blob-opacity: .5;
}

/* light - soft paper backdrop, same accent pair, dark ink */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-solid: #eef2fa;
  --bg-image:
    radial-gradient(60rem 40rem at 12% -8%, rgba(79, 141, 255, .20), transparent 60%),
    radial-gradient(48rem 34rem at 92% 4%, rgba(139, 92, 255, .16), transparent 58%),
    radial-gradient(70rem 46rem at 50% 118%, rgba(0, 196, 204, .10), transparent 60%),
    linear-gradient(168deg, #fbfcff 0%, #f1f4fb 45%, #e7ecf7 100%);

  --ink: #101a2e;
  --ink-dim: rgba(16, 26, 46, .72);
  --ink-faint: rgba(16, 26, 46, .46);

  --glass: rgba(255, 255, 255, .62);
  --glass-hi: rgba(255, 255, 255, .88);
  --line: rgba(15, 26, 46, .12);
  --line-hi: rgba(15, 26, 46, .24);

  --topbar-bg: rgba(250, 252, 255, .66);
  --topbar-line: rgba(15, 26, 46, .08);

  --accent-glow: rgba(79, 141, 255, .26);
  --accent-glow-hi: rgba(79, 141, 255, .36);

  --mark-shadow: 0 8px 20px rgba(79, 141, 255, .22);
  --ring: rgba(16, 26, 46, .55);

  --brand-grad: linear-gradient(180deg, #12224a 0%, #24418a 60%, #3d63c4 100%);
  --blob-a: rgba(79, 141, 255, .45);
  --blob-b: rgba(139, 92, 255, .38);
  --blob-opacity: .32;
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-solid);
  background-image: var(--bg-image);
  background-attachment: fixed;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- backdrop */

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

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

.blob-a {
  width: 38rem;
  height: 38rem;
  top: -12rem;
  left: -10rem;
  background: radial-gradient(circle at 30% 30%, var(--blob-a), transparent 68%);
  animation: float-a 24s ease-in-out infinite;
}

.blob-b {
  width: 32rem;
  height: 32rem;
  right: -8rem;
  bottom: -10rem;
  background: radial-gradient(circle at 60% 40%, var(--blob-b), transparent 68%);
  animation: float-b 28s ease-in-out infinite;
}

@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(3rem, 2rem, 0); }
}

@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-2.5rem, -2rem, 0); }
}

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 2.25rem);
  border-bottom: 1px solid var(--topbar-line);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: .55rem;
  box-shadow: var(--mark-shadow);
}

.brand-name {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name {
    background-image: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* theme switch: a quiet glass square next to the primary action */
.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--glass);
  color: var(--ink-dim);
  cursor: pointer;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .15s var(--ease);
}

.icon-btn:hover {
  border-color: var(--line-hi);
  background: var(--glass-hi);
  color: var(--ink);
}

.icon-btn:active { transform: scale(.96); }

.icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

/* Show the theme you would switch to, not the one you are in. */
:root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }

/* primary action - placeholder until the login flow exists */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: 0 1.05rem;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 26px var(--accent-glow);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}

.admin-btn .icon { width: 1.05rem; height: 1.05rem; }

.admin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px var(--accent-glow-hi);
}

.admin-btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------- content */

/* Intentionally empty for now. It keeps the shell's height so the footer
   sits at the bottom of the viewport on a short page. */
.stage {
  flex: 1 1 auto;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 2.25rem);
}

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

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.25rem 1rem 1.75rem;
  color: var(--ink-faint);
  font-size: .75rem;
  letter-spacing: .1em;
}

.foot .dot { opacity: .55; }

/* ---------------------------------------------------------------- responsive */

@media only screen and (max-width: 560px) {
  .topbar { padding: .7rem 1rem; }

  .brand { gap: .55rem; }

  .brand-mark { width: 1.9rem; height: 1.9rem; }

  .brand-name { font-size: 1rem; }

  .icon-btn { width: 2.4rem; height: 2.4rem; }

  .admin-btn {
    min-height: 2.4rem;
    padding: 0 .9rem;
    font-size: .8125rem;
  }
}

/* Very narrow phones: the label would start to crowd the wordmark, so the
   button keeps only its lock icon (aria-label still announces it). */
@media only screen and (max-width: 340px) {
  .brand-name { font-size: .9375rem; }
  .admin-btn { padding: 0 .8rem; }
  .admin-btn span { display: none; }
  .admin-btn .icon { width: 1.15rem; height: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  body { transition: none; }
  * { transition: none !important; }
}