/* cellow111 — "Soft Candy Glass"
   Pastel candy palette on a dusky plum ground, rounded geometric type, and
   frosted-glass link boxes with a soft bloom instead of hard neon. */

:root {
  --ground-1: #17101f;
  --ground-2: #241733;
  --ground-3: #2e1b3d;
  --pink: #ffb3d9;
  --lilac: #c8a4ff;
  --ice: #a9e8ff;
  --text: #fdf4ff;
  --muted: rgba(253, 244, 255, 0.62);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('/assets/fonts/Baloo2-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('/assets/fonts/Baloo2-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ground-1) 0%, var(--ground-2) 45%, var(--ground-3) 100%);
  font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.page-wrap {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ---------- video ---------- */

.video-panel {
  width: 40%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--pink), var(--lilac) 55%, var(--ice));
}

.video-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#unmute-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(23, 16, 31, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

#unmute-btn:hover {
  transform: scale(1.06);
  background: rgba(23, 16, 31, 0.68);
}

/* ---------- links ---------- */

.link-panel {
  position: relative;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  gap: 16px;
}

/* A soft candy aura behind the content. Without it the flat plum ground reads
   as empty space next to the video rather than as the other half of a pair. */
.link-panel::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 105%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 179, 217, 0.16) 0%,
    rgba(200, 164, 255, 0.1) 38%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.link-panel > * {
  position: relative;
  z-index: 1;
}

.link-panel h1 {
  font-family: 'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  /* Solid, not pastel. The name has to stay readable over the video on mobile,
     where it sits against whatever frame is playing — a pastel gradient fill
     loses too much contrast against bright skin tones and warm backgrounds.
     The candy palette carries the accents instead; the name carries legibility. */
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(255, 179, 217, 0.45), 0 2px 10px rgba(23, 16, 31, 0.75),
    0 1px 3px rgba(23, 16, 31, 0.9);
}

.tagline {
  color: var(--muted);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 62px;
  padding: 18px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* TikTok is the quieter one — an ice-blue hairline. */
.btn-tiktok {
  border-color: rgba(169, 232, 255, 0.5);
  box-shadow: 0 0 22px rgba(169, 232, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-tiktok:hover {
  border-color: rgba(169, 232, 255, 0.85);
  box-shadow: 0 0 32px rgba(169, 232, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* VIP is the warm, prominent one — the paid link should win the eye. */
.btn-vip {
  border-color: rgba(255, 179, 217, 0.62);
  background: linear-gradient(120deg, rgba(255, 179, 217, 0.16), rgba(200, 164, 255, 0.16));
  box-shadow: 0 0 26px rgba(255, 179, 217, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-vip:hover {
  border-color: rgba(255, 179, 217, 0.95);
  box-shadow: 0 0 38px rgba(255, 179, 217, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.btn:hover {
  transform: translateY(-2px);
}

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

/* Deliberately quiet. The blog exists for search traffic, so the homepage has
   to link to it for crawlers to reach it and for the pages to pass any
   authority back — but it must not compete with the two CTAs above it. */
.diary-link {
  margin-top: 4px;
  color: rgba(253, 244, 255, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.diary-link:hover {
  color: var(--pink);
  border-bottom-color: rgba(255, 179, 217, 0.5);
}

.btn:focus-visible,
.diary-link:focus-visible,
#unmute-btn:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .page-wrap {
    position: relative;
    flex-direction: column;
    overflow: hidden;
    /* Three fallbacks, least to most reliable. 100vh: baseline, but iOS Safari
       measures it with the address bar hidden, so it overshoots the real
       viewport and pushes content below the fold. 100dvh: correct on iOS
       Safari 15.4+, silently ignored below that. calc(var(--vh)*100): set from
       script.js's actual window.innerHeight — wins anywhere custom properties
       are supported, regardless of dvh support. */
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
  }

  .video-panel,
  .link-panel {
    width: 100%;
  }

  /* Full-bleed video with the CTAs overlaid, rather than stacked below it.
     A pastel gradient frames the video; a scrim darkens only its top and
     bottom edges, keeping the middle — where the subject is — clear. */
  .video-panel {
    position: absolute;
    inset: 0;
    border: 4px solid transparent;
    border-image: linear-gradient(160deg, var(--pink), var(--lilac) 55%, var(--ice)) 1;
  }

  /* Weighted to the bottom, not symmetric. The subject's face sits in the upper
     half of the frame, so the scrim stays light there and ramps up underneath,
     where the CTAs live. */
  .video-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(23, 16, 31, 0.7) 0%,
      transparent 16%,
      transparent 40%,
      rgba(23, 16, 31, 0.72) 74%,
      rgba(23, 16, 31, 0.95) 100%
    );
    pointer-events: none;
  }

  #unmute-btn {
    top: 20px;
    bottom: auto;
  }

  /* Anchored to the bottom rather than centered — centered content lands
     directly on her face, which buries the subject and hurts the CTAs' contrast
     at the same time. */
  .link-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    justify-content: flex-end;
    padding: 32px 20px 40px;
    gap: 13px;
  }

  .link-panel::before {
    display: none;
  }

  .link-panel h1 {
    font-size: clamp(2.2rem, 11vw, 2.9rem);
  }

  .link-panel .tagline {
    color: rgba(253, 244, 255, 0.86);
    margin-bottom: 10px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95);
  }

  .diary-link {
    color: rgba(253, 244, 255, 0.62);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  }

  /* The frosted panels sit over live video here, so they need more body to
     stay legible than they do against a flat gradient. */
  .btn {
    background: rgba(23, 16, 31, 0.42);
    min-height: 58px;
    padding: 16px 24px;
  }

  .btn-vip {
    background: linear-gradient(120deg, rgba(255, 179, 217, 0.26), rgba(200, 164, 255, 0.26)),
      rgba(23, 16, 31, 0.42);
  }
}

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

  .btn:hover {
    transform: none;
  }
}