/* morganhollymoore — "After Dark"
   Tokens, the capsule + halo box language, the sparkle signature, and the
   lander. Written mobile-first: 99% of traffic is a phone in an in-app
   browser.

   The palette is pulled straight out of the hero video: a city balcony at
   night. Ink-blue black for the ground, platinum and cold steel for the
   silvers, and a single sodium-streetlight amber as the only warm thing on the
   page — which is what makes the VIP button the one object your eye lands on.
   It is deliberately nothing like the sibling sites in this network, which run
   pink-and-cyan neons. Every accent below is expressed through the custom
   properties in :root, so retinting the whole site is an edit to that block and
   nowhere else. */

/* ------------------------------------------------------------- fonts ---- */

@font-face {
  font-family: 'Baloo 2';
  src: url('/assets/fonts/Baloo2-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/Nunito-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/SpaceMono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --void: #0d0e12;
  --ultra: #171923;
  --bubble: #ec8f4e;
  --shock: #ffd0a0;
  --cyber: #9fb3c8;
  --lilac: #b8bdc9;
  --zap: #f2e9dc;
  --milk: #eef0f4;
  --muted: rgba(238, 240, 244, 0.62);
  --dim: #8d93a1;
  --hairline: rgba(184, 189, 201, 0.3);

  --f-display: 'Baloo 2', 'Trebuchet MS', ui-rounded, system-ui, sans-serif;
  --f-body: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* The capsule. One number drives every rounded box on the site. */
  --r: 999px;
  --r-card: 14px;

  --pad: 22px;
  --measure: 35rem;
  color-scheme: dark;
}

/* Konami easter egg. Flipping two custom properties re-tints the entire site,
   because every accent below is expressed in terms of them rather than in raw
   hex. Nothing else has to know the mode exists. */
body.overdrive {
  --bubble: #9fb3c8;
  --shock: #cfd8e4;
  --cyber: #ec8f4e;
  --lilac: #8fb6c9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--void);
  color: var(--milk);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Holographic sheen. A very slow, very faint conic sweep — the candy-coated
   equivalent of film grain. Fixed and non-interactive, one compositor layer,
   no per-frame paint cost because only the rotation animates. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  background: conic-gradient(
    from 0deg,
    #ec8f4e,
    #b8bdc9,
    #9fb3c8,
    #f2e9dc,
    #ec8f4e
  );
  animation: holo 44s linear infinite;
  will-change: transform;
}
@keyframes holo {
  to {
    transform: rotate(1turn);
  }
}

::selection {
  background: var(--bubble);
  color: #fff;
}

a {
  color: var(--cyber);
}

:focus-visible {
  outline: 2px solid var(--cyber);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ----------------------------------------------------------- sparkle ---- */
/* The signature. A gradient hairline with a four-point star riding along it,
   twinkling as it goes. Under every page title and nowhere else, so it reads as
   a mark rather than as decoration. */

.sparkle {
  position: relative;
  width: 92px;
  height: 16px;
  margin: 12px auto 0;
  flex: none;
}
.sparkle i {
  position: absolute;
  inset: 7px 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bubble) 25%,
    var(--lilac) 50%,
    var(--cyber) 75%,
    transparent
  );
}
/* The star is one element: a square with two conic pinches, which gives a
   four-point twinkle without an SVG or a second node. */
.sparkle b {
  position: absolute;
  top: 2px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--zap);
  filter: drop-shadow(0 0 6px var(--zap));
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle {
  0%   { left: 4px;  transform: scale(0.5) rotate(0deg);    opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: scale(1) rotate(180deg); }
  88%  { opacity: 1; }
  100% { left: 76px; transform: scale(0.5) rotate(360deg);  opacity: 0; }
}

/* ------------------------------------------------------------ buttons ---- */
/* Two layers: the outer element paints the gradient rim and the halo, .face
   paints the fill. Both are capsules, and because .face is inset by 2px the gap
   between them becomes an even border the whole way around the curve — which a
   single border plus a background gradient cannot do. */

.btn {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 2px;
  border-radius: var(--r);
  text-decoration: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn .face {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 68px;
  padding: 0 24px;
  border-radius: var(--r);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Candy gloss: a specular band across the top of the fill. */
.btn .face::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  border-radius: var(--r) var(--r) 40% 40% / var(--r) var(--r) 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Each glow is declared twice: a literal rgba first, then the color-mix version
   that follows whatever --bubble/--cyber currently are. Browsers without
   color-mix() drop the second declaration and keep the first, so they lose the
   overdrive re-tint but never the glow itself. */
.btn-vip {
  background: linear-gradient(120deg, var(--shock), var(--bubble) 45%, var(--lilac));
  box-shadow: 0 6px 26px -4px rgba(236, 143, 78, 0.7);
  box-shadow: 0 6px 26px -4px color-mix(in srgb, var(--bubble) 70%, transparent);
}
.btn-vip .face {
  background: linear-gradient(168deg, var(--shock) 0%, var(--bubble) 52%, #a8562a 100%);
  color: #fff;
  text-shadow: 0 1px 6px rgba(20, 12, 30, 0.45);
}

.btn-tiktok {
  background: linear-gradient(120deg, var(--cyber), var(--lilac));
  box-shadow: 0 6px 24px -6px rgba(159, 179, 200, 0.55);
  box-shadow: 0 6px 24px -6px color-mix(in srgb, var(--cyber) 55%, transparent);
}
.btn-tiktok .face {
  background: rgba(13, 14, 18, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--milk);
}

/* The secondary networks. Deliberately quieter than TikTok: they share the
   capsule and the rim but drop the coloured glow, so the eye still lands on VIP
   first and the stack does not turn into five competing gradients. */
.btn-social {
  background: linear-gradient(120deg, var(--hairline), var(--lilac) 70%, var(--hairline));
}
.btn-social .face {
  background: rgba(13, 14, 18, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--milk);
  font-size: 1rem;
}

/* A press state, not a hover state — there is no hover on a phone. */
.btn:active {
  transform: scale(0.978);
}
.btn-vip:active {
  box-shadow: 0 2px 34px -2px rgba(236, 143, 78, 0.9);
  box-shadow: 0 2px 34px -2px color-mix(in srgb, var(--bubble) 90%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn-vip:hover {
    box-shadow: 0 12px 34px -4px rgba(236, 143, 78, 0.85);
    box-shadow: 0 12px 34px -4px color-mix(in srgb, var(--bubble) 85%, transparent);
  }
  .btn-tiktok:hover {
    box-shadow: 0 12px 30px -6px rgba(159, 179, 200, 0.75);
    box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--cyber) 75%, transparent);
  }
}

/* ------------------------------------------------------------- lander ---- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
}

.video-panel {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--void);
}
.video-panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* This clip is bright — white tile, hard ceiling lights — so the scrim has to
   work considerably harder than a dark one would. Two jobs: kill enough of the
   top that the live counter stays legible, then ramp to near-solid from the
   midpoint down so the display type and the buttons sit on real ground rather
   than on a lit bathroom wall. The tinted radial at the bottom is what stops
   that ramp reading as a plain grey fade. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(13, 14, 18, 0.9) 0%,
      rgba(13, 14, 18, 0.42) 12%,
      rgba(13, 14, 18, 0.28) 24%,
      /* Her face sits around a third of the way down. Darkening from here keeps
         it clear above while giving the name somewhere to land. */
      rgba(13, 14, 18, 0.62) 42%,
      rgba(13, 14, 18, 0.9) 58%,
      rgba(13, 14, 18, 0.98) 72%,
      var(--void) 100%
    ),
    radial-gradient(130% 62% at 50% 100%, rgba(236, 143, 78, 0.34), transparent 68%),
    radial-gradient(90% 44% at 8% 84%, rgba(159, 179, 200, 0.16), transparent 70%);
}

#unmute-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(13, 14, 18, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--milk);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#unmute-btn[data-on='true'] {
  border-color: var(--cyber);
  color: var(--cyber);
  box-shadow: 0 0 14px -2px var(--cyber);
}

.link-panel {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  /* Bottom-weighted on mobile: keeps her face visible, puts the CTAs where a
     thumb already is, and lets the scrim do the contrast work. */
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom, 0px) + 28px);
  text-align: center;
}

/* ------------------------------------------------------- hit counter ---- */
/* The Y2K odometer. Same honest /live number as anywhere else — it just looks
   like a visitor counter from 2003, because that is funnier. */

/* `display: flex` on a class beats the UA's `[hidden] { display: none }`, so
   without this the element stays laid out when the counter suppresses itself
   and a lone pulsing dot floats at the top of the page with no number beside
   it. Every `hidden` toggle in the markup needs its display rule neutralised
   the same way — see also .quiz-back below. */
.live[hidden] {
  display: none;
}

.live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 0;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyber);
  box-shadow: 0 0 10px var(--cyber);
  animation: pulse 2.4s ease-in-out infinite;
}
.live .odo {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(13, 14, 18, 0.72);
  border: 1px solid var(--hairline);
  color: var(--zap);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 15vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0;
  background: linear-gradient(174deg, #fff 8%, var(--shock) 48%, var(--lilac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* drop-shadow rather than text-shadow: text-shadow paints behind the glyph
     box, which a transparent gradient-filled glyph does not have. */
  filter: drop-shadow(0 2px 18px rgba(236, 143, 78, 0.5))
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 1.5em;
  margin: 14px 0 24px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.95);
}
.tagline .caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--bubble);
  box-shadow: 0 0 8px var(--bubble);
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.links {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  max-width: 460px;
}

.sub-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.sub-links a {
  color: var(--muted);
  text-decoration: none;
  /* 14px of vertical padding on a ~20px line box clears the 48px tap-target
     floor. The underline is drawn by a pseudo-element rather than the border,
     so the padding can grow the target without pushing the rule away from the
     text. */
  padding: 14px 8px;
  position: relative;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
}
.sub-links a::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 11px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.16s ease;
}
.sub-links a:active,
.sub-links a:hover {
  color: var(--milk);
}
.sub-links a:active::after,
.sub-links a:hover::after {
  background: var(--bubble);
}
.sub-links span {
  color: var(--lilac);
  opacity: 0.55;
}

/* Sparkle canvas. A cursor trail is dead weight on a phone, so on touch this is
   what the trail becomes — see script.js, which binds by pointer type rather
   than by screen width. */
#fx {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* ------------------------------------------------------ custom cursor ---- */
/* Fine pointers only. The element is inert and purely decorative — the real
   system cursor is left alone on anything interactive, so nobody ever loses
   track of what they are about to click. */

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  background: var(--zap);
  filter: drop-shadow(0 0 8px var(--bubble));
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.12s ease;
}
#cursor.on {
  opacity: 1;
}
#cursor.tap {
  transform: scale(1.7) rotate(35deg);
}

/* --------------------------------------------------------- sticky CTA ---- */
/* On the long pages the CTA scrolls away and conversion dies with it. This pins
   after roughly a screen of scroll, inside the home-indicator inset. */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px var(--pad) calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(180deg, rgba(13, 14, 18, 0), rgba(13, 14, 18, 0.96) 44%);
  transform: translateY(140%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.sticky-cta.on {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta .btn .face {
  min-height: 54px;
  font-size: 1rem;
}

/* ------------------------------------------------------------ desktop ---- */

@media (min-width: 769px) {
  .stage {
    display: grid;
    grid-template-columns: 42% 58%;
  }
  .video-panel {
    position: fixed;
    inset: 0 58% 0 0;
  }
  /* Full-height panel, so the scrim only needs to protect the unmute control
     rather than carry text contrast. */
  .scrim {
    background:
      linear-gradient(
        180deg,
        rgba(13, 14, 18, 0.62) 0%,
        rgba(13, 14, 18, 0) 24%,
        rgba(13, 14, 18, 0) 74%,
        rgba(13, 14, 18, 0.7) 100%
      ),
      radial-gradient(80% 40% at 50% 100%, rgba(236, 143, 78, 0.28), transparent 70%);
  }
  #unmute-btn {
    top: auto;
    bottom: 20px;
    right: 20px;
  }
  .link-panel {
    grid-column: 2;
    justify-content: center;
    padding: 40px;
  }
  .live {
    position: absolute;
    top: 26px;
    margin: 0;
    padding-top: 0;
  }
  .name,
  .tagline,
  .sub-links a,
  .live {
    text-shadow: none;
  }
  .sticky-cta {
    display: none; /* the CTA is always in view on a desktop layout */
  }
}

/* ---------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body::after {
    animation: none;
  }
  .sparkle b {
    left: 40px;
    opacity: 1;
    transform: scale(1);
  }
  .tagline .caret {
    display: none;
  }
  .sticky-cta {
    transition: none;
  }
  #fx,
  #cursor {
    display: none;
  }
}