/* alexalizzz — "Chrome"
   Tokens, the pill box language, the magnetic buttons, and the lander.
   Written mobile-first: 99% of traffic is a phone in an in-app browser. */

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

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/BricolageGrotesque-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --ground: #080b1a;
  --deep: #10152e;
  --hot: #ff2f9e;
  --hot-lift: #ff6dbe;
  --chrome: #dfe6f5;
  --bone: #f4f2fa;
  --muted: rgba(244, 242, 250, 0.6);
  --silver: #8a97b8;
  --hairline: rgba(223, 230, 245, 0.26);

  --f-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The pill. One radius drives every soft edge on the site. */
  --pill: 999px;

  /* Magnetic offset; script.js overwrites these per button on approach. */
  --pull-x: 0px;
  --pull-y: 0px;

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

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

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

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

/* Film grain. Static, generated, and cheap — an animated canvas grain is a
   battery and paint-cost mistake on a phone. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

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

.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;
}

/* -------------------------------------------------------------- drip ---- */
/* The signature. A hairline with a bead that swells, falls, and starts over.
   It appears under every page title and nowhere else, so it reads as a mark
   rather than as decoration. */

.drip {
  position: relative;
  width: 62px;
  height: 30px;
  margin: 10px auto 0;
  flex: none;
}
.drip::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hot) 22%, var(--hot) 78%, transparent);
}
.drip i {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--hot);
  transform-origin: 50% 0;
  animation: drip 7.5s cubic-bezier(0.55, 0.06, 0.68, 0.19) infinite;
}
@keyframes drip {
  0%, 48% { transform: translateY(0) scale(0.85, 0.35); opacity: 0; }
  58%     { transform: translateY(0) scale(1, 1);       opacity: 1; }
  66%     { transform: translateY(3px) scale(0.78, 1.55); opacity: 1; }
  100%    { transform: translateY(26px) scale(0.6, 1.15); opacity: 0; }
}

/* ------------------------------------------------------------ buttons ---- */
/* Two layers: the outer element paints the rim, .face paints the fill. Both
   carry the same clip path, and because .face is inset by 1px the gap between
   the two clips becomes a border on every edge — including the diagonals,
   which a plain border cannot follow. */

.btn {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 2px;
  border-radius: var(--pill);
  text-decoration: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Magnetic: script.js writes --pull-x/--pull-y as the pointer approaches, so
     the button leans toward the cursor and springs back on leave. The
     transition is deliberately slower on leave than on approach, which is what
     makes it read as a spring rather than a snap. */
  transform: translate(var(--pull-x, 0px), var(--pull-y, 0px));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease;
}

.btn.is-pulling {
  transition: transform 0.09s ease-out, filter 0.18s ease;
}

.btn .face {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding: 0 26px;
  border-radius: var(--pill);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* Chrome: a bright band raked across the fill, the way brushed metal catches
   one line of light rather than glowing evenly. */
.btn .face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 44%,
    rgba(255, 255, 255, 0.08) 52%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.btn-vip {
  background: linear-gradient(180deg, var(--hot-lift), var(--hot));
  box-shadow: 0 10px 30px -12px rgba(255, 47, 158, 0.75);
}

.btn-vip .face {
  background: linear-gradient(168deg, #ff7cc6 0%, var(--hot) 46%, #c50f6e 100%);
  color: #fff;
}

.btn-tiktok {
  background: linear-gradient(180deg, var(--chrome), var(--silver));
}

.btn-tiktok .face {
  background: rgba(10, 5, 7, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--bone);
}

/* A press state, not a hover state — there is no hover on a phone. */
.btn:active {
  transform: scale(0.985);
}
.btn-vip:active {
  filter: drop-shadow(0 4px 26px rgba(255, 45, 74, 0.7));
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn-vip:hover {
    filter: drop-shadow(0 12px 30px rgba(255, 45, 74, 0.6));
  }
  .btn-tiktok:hover {
    background: rgba(236, 228, 230, 0.42);
  }
}

/* ------------------------------------------------------------- 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(--ground);
}
.video-panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Darkens the top and the bottom, leaves the middle — where her face is —
   alone. The content sits in the dark bottom band rather than over her. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(10, 5, 7, 0.86) 0%,
      rgba(10, 5, 7, 0.24) 15%,
      rgba(10, 5, 7, 0.08) 26%,
      /* The name sits around a third of the way down. Without this stop it
         lands on her face at almost no contrast and the type has to be rescued
         by a heavy shadow. Darkening from here keeps her eyes clear above and
         gives the display type a ground to sit on. */
      rgba(10, 5, 7, 0.5) 40%,
      rgba(10, 5, 7, 0.84) 56%,
      rgba(10, 5, 7, 0.96) 70%,
      var(--ground) 100%
    ),
    radial-gradient(120% 60% at 50% 100%, rgba(107, 6, 23, 0.55), 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(10, 5, 7, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#unmute-btn[data-on='true'] {
  border-color: var(--hot);
  color: var(--hot);
}

.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) + 30px);
  text-align: center;
}

/* `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. */
.live[hidden] {
  display: none;
}

.live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 8px var(--hot);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.7rem, 14vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85);
}

.tagline {
  margin: 12px 0 26px;
  font-size: 0.82rem;
  letter-spacing: 0.19em;
  text-transform: lowercase;
  color: var(--muted);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

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

.sub-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  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.9);
}
.sub-links a::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  height: 1px;
  background: transparent;
  transition: background 0.16s ease;
}
.sub-links a:active,
.sub-links a:hover {
  color: var(--bone);
}
.sub-links a:active::after,
.sub-links a:hover::after {
  background: var(--hot);
}
.sub-links span {
  color: var(--silver);
  opacity: 0.5;
}

/* Tap-burst 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;
}

/* --------------------------------------------------------- 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: 10px var(--pad) calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(180deg, rgba(10, 5, 7, 0), rgba(10, 5, 7, 0.94) 42%);
  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: 56px;
}

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

@media (min-width: 769px) {
  .stage {
    display: grid;
    grid-template-columns: 40% 60%;
  }
  .video-panel {
    position: fixed;
    inset: 0 60% 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(10, 5, 7, 0.6) 0%,
      rgba(10, 5, 7, 0) 22%,
      rgba(10, 5, 7, 0) 78%,
      rgba(10, 5, 7, 0.6) 100%
    );
  }
  #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 {
    text-shadow: none;
  }
  .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;
  }
  .drip i {
    opacity: 1;
    transform: none;
  }
  .sticky-cta {
    transition: none;
  }
  #fx {
    display: none;
  }
}

/* The lander carried 26 words of visible text -- a name, a tagline and two
   button labels -- on a template shared across ~20 sibling domains. Google
   ruled a sibling's homepage "Duplicate, Google chose different canonical"
   on exactly that. This surfaces the per-creator intro that previously only
   rendered on /about, which is the one piece of copy on the page that is
   genuinely this creator's. Kept visually quiet so it does not compete with
   the buttons, which are still the point of the page. */
.lander-lede {
  margin: 18px auto 0;
  max-width: 34rem;
  font-size: 0.86rem;
  line-height: 1.65;
  text-align: center;
  opacity: 0.72;
}
@media (max-width: 480px) {
  .lander-lede { font-size: 0.8rem; }
}