/* ============================================================
   SKY QUEST — theme-mystery.css  (LIGHT version)
   "Minimal · mysterious · immersive" — but bright and airy.
   Reversible override layer — loaded AFTER all other CSS.
   Remove this <link> (and mystery.js) to return to normal.

   Keeps your original light backgrounds and text colors.
   Adds: subtle grain · soft light · hidden navigation ·
   slow fades · progressive (hover) discovery.
   ============================================================ */

:root {
  --mys-accent: #2ea3f2;
  --mys-accent-2: #00c2a8;
  --mys-ink: #204959;
  --mys-slow: 1.3s;
  --mys-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Slow the existing reveal layer down for a calmer, premium feel */
  --sq-dur: 1.1s;
}

/* Ambient particle background (see static/js/particles.js) */
.sq-particles {
  position: fixed;
  inset: 0;
  z-index: -1;            /* behind all content, above the page background */
  pointer-events: none;  /* never blocks clicks */
}

/* ---------- Progressive discovery (works on light) ----------
   Body copy rests slightly faded, then resolves on hover. */
.content p,
.content span,
.content li {
  opacity: 0.78;
  transition: opacity var(--mys-slow) var(--mys-ease),
              color var(--mys-slow) var(--mys-ease);
}
.content p:hover,
.content span:hover,
.content [class*="bottom-content"]:hover p,
.content [class*="bottom-content"]:hover span {
  opacity: 1;
}

/* Images sit quiet, then come alive on hover */
.content img {
  filter: saturate(0.92) contrast(0.98);
  transition: filter var(--mys-slow) var(--mys-ease),
              transform var(--mys-slow) var(--mys-ease);
}
.content img:hover {
  filter: saturate(1.06) contrast(1.03) brightness(1.03);
}

/* Footer logo: dark outline-halo so the white mark stays visible on ANY
   background (overrides the generic .content img filter above). */
.footer-logo img {
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.8))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)) !important;
}

/* Footer: sticks to the end of the scroll (bottom of the page) even when
   the content is short, with a brand-colored gradient under the blue links. */
.footer {
  margin-top: auto;            /* push to the bottom of the flex column */
  flex-shrink: 0;
  background: linear-gradient(135deg, #182a4a 0%, #15466e 50%, #0c3b3f 100%) !important;
  border-top: 1px solid rgba(46, 163, 242, 0.35);
  box-shadow: 0 -8px 30px -12px rgba(0, 0, 0, 0.45);
}

/* The fixed header is hidden by default and overlays content when revealed,
   so we no longer reserve 91px for it — that gap was the white band at the top.
   Also fill the full height so the old calc() offsets don't leave a gap at
   the bottom. */
.container {
  padding-top: 0 !important;
  height: 100% !important;
}
.content {
  height: 100% !important;
  /* padding (e.g. History page top spacing) must fit INSIDE the height,
     otherwise .content grows taller than the viewport and the footer gets
     clipped by .container's overflow:hidden */
  box-sizing: border-box;
  /* flex column lets the footer's margin-top:auto pin it to the end of scroll */
  display: flex !important;
  flex-direction: column;
}
/* keep direct children at natural height so tall pages scroll all the way
   down to the footer instead of shrinking content to fit */
.content > * {
  flex-shrink: 0;
}

/* Soft glowing dividers instead of hard lines */
.divider {
  background: linear-gradient(90deg, transparent,
              rgba(46, 163, 242, 0.55), transparent) !important;
  opacity: 0.7;
}

/* ============================================================
   SUBTLE LIGHT GRAIN + AIRY VIGNETTE
   (over everything, never blocks clicks)
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%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");
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  /* barely-there edge softening so it never looks "dark" */
  background: radial-gradient(ellipse at 50% 40%,
              transparent 60%, rgba(32, 73, 89, 0.06) 100%);
}

/* Soft cursor light — a gentle tinted halo on the bright page */
.mys-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(circle,
              rgba(46, 163, 242, 0.10) 0%,
              rgba(0, 194, 168, 0.06) 38%,
              transparent 70%);
  transition: opacity 0.6s var(--mys-ease);
  opacity: 0;
}

/* The bright floating glows from animations.css are nice on light —
   keep them, just calm them a touch so they read as "soft light". */
.sq-glow { opacity: 0.22 !important; }

/* ============================================================
   HIDDEN NAVIGATION (light, frosted)
   Header is concealed; slides down when the cursor nears the
   top edge, or when the discovery trigger is hovered/tapped.
   ============================================================ */
.header-container {
  /* very light brand-tinted gradient: faint blue -> white -> faint teal */
  background: linear-gradient(
    135deg,
    rgba(46, 163, 242, 0.10) 0%,
    rgba(255, 255, 255, 0.80) 45%,
    rgba(0, 194, 168, 0.10) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(32, 73, 89, 0.10) !important;
  box-shadow: 0 8px 30px -16px rgba(32, 73, 89, 0.25);
  transition: transform 0.7s var(--mys-ease),
              opacity 0.7s var(--mys-ease) !important;
}
.header-container.mys-hide {
  transform: translateY(-100%);
  opacity: 0;
}

/* Show horizontal tabs in the top bar instead of the hamburger drawer.
   Fall back to the drawer on narrow screens where tabs won't fit. */
.menu {
  display: flex !important;
}
.ss-dropdown {
  display: none !important;
}
/* No white box behind each tab — let them sit on the frosted bar */
.menu-main-item {
  background-color: transparent !important;
}
/* Tab hover dropdowns — same light brand gradient as the header/drawer */
.menu-sub-item {
  background: linear-gradient(
    135deg,
    rgba(46, 163, 242, 0.12) 0%,
    rgba(255, 255, 255, 0.94) 45%,
    rgba(0, 194, 168, 0.12) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(46, 163, 242, 0.18);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 30px -14px rgba(32, 73, 89, 0.3);
}
@media (max-width: 900px) {
  .menu {
    display: none !important;
  }
  .ss-dropdown {
    display: flex !important;
  }
}

/* Drawer (hamburger menu) — same very light brand gradient as the header */
.ss-dropdown-content {
  background: linear-gradient(
    135deg,
    rgba(46, 163, 242, 0.12) 0%,
    rgba(255, 255, 255, 0.92) 45%,
    rgba(0, 194, 168, 0.12) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(46, 163, 242, 0.18);
}

/* Minimal discovery trigger — a faint breathing line at top center */
.mys-nav-trigger {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  margin-top: 10px;
  border-radius: 4px;
  background: rgba(46, 163, 242, 0.55);
  z-index: 2500;
  cursor: pointer;
  animation: mys-breathe 3.4s ease-in-out infinite;
}
@keyframes mys-breathe {
  0%, 100% { opacity: 0.3;  width: 48px; }
  50%      { opacity: 0.85; width: 72px; }
}
.mys-nav-trigger.mys-trigger-hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   MOBILE — keep it light so phones don't lag
   ============================================================ */
@media (max-width: 768px) {
  .mys-cursor-glow { display: none; }            /* no cursor on touch */
  .content p, .content span, .content li { opacity: 0.9; } /* easier to read */
}

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mys-nav-trigger { animation: none !important; }
  .content p, .content span, .content li,
  .content img { opacity: 1 !important; filter: none !important; }
  .mys-cursor-glow { display: none !important; }
}