/* ============================================
   HOME - index.markdown only (loaded via `styles: [home]`)
   Hero slideshow overrides for the shared .vl-gc* shell in main.css, plus the home sections:
   community cards, dev news, newsletter (the girls strip is the shared .vl-girls in main.css).
   Dark monochrome + one warm accent (--warm); the community cards carry a faint
   Patreon coral / Discord blurple undertone (owner's request).
   ============================================ */

.vl-home-hero,
.home-community,
.home-news,
.home-newsletter {
  --home-head: #f3ece4;
  --home-text: #e2d9cf;
  --home-line: rgba(212, 169, 138, 0.26);
  --home-glow: rgba(212, 169, 138, 0.26);
}

.home-h2 {
  font-family: 'Cormorant', serif;
  font-weight: normal;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1.1;
  color: var(--home-head);
  text-align: center;
  margin: 0 auto 2.2rem;
  max-width: 52rem;
  text-wrap: balance;
}


/* =============================================
   HERO - ONE persistent overlay (logo, game definition, story, status, CTAs) over cross-fading
   backgrounds of the girls. Nothing in the overlay changes between slides, so nothing jumps.
   ============================================= */
/* The game definition identifies the product before the story adds atmosphere. */
.vl-home-hero .vl-gc-content { gap: 0; }
.vl-home-hero .vl-home-title { margin: 0; line-height: 0; }
.vl-home-hero .vl-home-title picture { display: block; }
.vl-home-hero .vl-gc-logo { display: block; }
.vl-home-hero .vl-gc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  margin: 1rem 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #bbcebd;
  white-space: nowrap;
}
.vl-home-hero .vl-gc-status::before {
  content: '';
  flex: none;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #8db99a;
}
.vl-home-hero .vl-gc-status-sep { color: rgba(187, 206, 189, 0.55); }

.vl-home-hero .vl-home-copy {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 34rem;
  margin-top: 1.35rem;
}
/* Keep the story in the display serif as an accent, with a quieter weight than the definition. */
.vl-home-hero .vl-home-hook {
  margin: 0;
  font-family: 'Cormorant', serif;
  font-size: clamp(1.28rem, 1.55vw, 1.42rem);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(246, 239, 231, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.7);
  text-wrap: pretty;
}
/* The first sentence is the plain-language product definition. */
.vl-home-hero .vl-gc-desc {
  font-family: 'Geologica', sans-serif;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.55;
  color: #f1e9e1;
  max-width: none;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}
.vl-home-hero .vl-nowrap { white-space: nowrap; }
.vl-home-hero .vl-gc-actions { gap: 1rem 1.1rem; margin-top: 1.3rem; }
.vl-home-hero .vl-cta-sub {
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(232, 224, 216, 0.66);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.vl-home-hero .vl-btn { min-height: 44px; padding: 10px 26px; font-size: 0.92rem; }

/* Slideshow controls: 44px tap targets (main.css draws 30px arrows and 8px dots). */
.vl-home-hero .vl-gc-arrow { width: 44px; height: 44px; font-size: 1.5rem; }
.vl-home-hero .vl-gc-arrow:focus-visible,
.vl-home-hero .vl-gc-dot:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 2px;
}
.vl-home-hero .vl-gc-dots { gap: 0; }
.vl-home-hero .vl-gc-dot,
.vl-home-hero .vl-gc-dot.active,
.vl-home-hero .vl-gc-dot:hover:not(.active) {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.vl-home-hero .vl-gc-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.vl-home-hero .vl-gc-dot:hover::before { background: rgba(255, 255, 255, 0.8); }
.vl-home-hero .vl-gc-dot.active::before {
  background: var(--warm);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 16px rgba(214, 182, 160, 0.4);
  transform: scale(1.25);
}

/* Desktop / landscape: the overlay sits bottom-left over every slide. */
@media (orientation: landscape) and (min-width: 601px) {
  .vl-home-hero { min-height: 640px; }
  /* Readability scrim for the copy, whatever the slide: a dark wash from the left edge plus a
     pool of shade behind the text block. The wash's stops follow the text column's right edge
     (6% padding + the 36rem measure) so narrower screens, where the copy covers more of the
     image, stay dark enough behind it (pitch >= 7:1 on the brightest slide); max() keeps wide
     screens at the percentage stops, so the girl right of the copy stays bright. */
  .vl-home-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 80% at 8% 90%, rgba(8, 7, 6, 0.7) 0%, rgba(8, 7, 6, 0.35) 55%, transparent 80%),
      linear-gradient(to right,
        rgba(8, 7, 6, 0.66) 0%,
        rgba(8, 7, 6, 0.56) max(40%, calc(6% + 35rem)),
        rgba(8, 7, 6, 0.38) max(50%, calc(6% + 44rem)),
        transparent max(66%, calc(6% + 58rem)));
  }
  .vl-home-hero .vl-gc-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    /* The pitch measure (36rem) plus the 6% side paddings, so wide screens keep the same line length. */
    width: calc(36rem + 12%);
    max-width: 100%;
    padding: 0 6% clamp(4.8rem, 10vh, 7rem);
  }
  .vl-home-hero .vl-gc-logo {
    width: auto;
    max-width: min(560px, 100%);
    max-height: clamp(120px, 28vh, 270px);
    margin-left: -0.6rem;
  }
  .vl-home-hero .vl-gc-nav {
    left: auto;
    right: 1.5rem;
    bottom: 1.6rem;
    transform: none;
    gap: 0.25rem;
  }
}
/* Short landscape screens (laptops 720-820px tall): smaller logo so the stack clears the header. */
@media (orientation: landscape) and (min-width: 601px) and (max-height: 820px) {
  .vl-home-hero { height: auto; min-height: 100svh; }
  .vl-home-hero .vl-gc-track { position: absolute; inset: 0; height: auto; }
  .vl-home-hero .vl-gc-content {
    position: relative;
    padding-top: clamp(5.5rem, 12vh, 7rem);
    padding-bottom: clamp(4rem, 8vh, 5rem);
  }
  .vl-home-hero .vl-gc-logo { max-height: clamp(180px, 30vh, 230px); }
  .vl-home-hero .vl-home-copy { margin-top: 1.3rem; }
  .vl-home-hero .vl-gc-actions { margin-top: 1.2rem; }
}
/* Narrow landscape (small laptops, phones on their side): keep the CTA row clear of the controls. */
@media (orientation: landscape) and (min-width: 601px) and (max-width: 1100px) {
  .vl-home-hero .vl-gc-content { padding-bottom: 5.75rem; }
}
/* Phones on their side (≤500px tall): the 640px hero would push the pitch and CTAs below the
   first screen. Let the copy set the hero's height instead (just under the header, smaller logo),
   with the slides stretched behind it. */
@media (orientation: landscape) and (min-width: 601px) and (max-height: 500px) {
  .vl-home-hero { height: auto; min-height: 0; }
  .vl-home-hero .vl-gc-track { position: absolute; inset: 0; height: auto; }
  .vl-home-hero .vl-gc-content {
    position: relative;
    padding: 4.5rem 6% 4.5rem;
  }
  .vl-home-hero .vl-gc-logo { max-height: 84px; }
  .vl-home-hero .vl-home-copy { margin-top: 0.9rem; }
  .vl-home-hero .vl-home-hook { font-size: 1.15rem; }
  .vl-home-hero .vl-gc-actions { margin-top: 1.1rem; }
  /* The copy spans most of the width here and crosses the girl's face: a deeper wash. */
  .vl-home-hero-shade {
    background:
      radial-gradient(ellipse 70% 90% at 8% 70%, rgba(8, 7, 6, 0.55) 0%, rgba(8, 7, 6, 0.3) 60%, transparent 85%),
      linear-gradient(to right,
        rgba(8, 7, 6, 0.72) 0%,
        rgba(8, 7, 6, 0.62) calc(6% + 36rem),
        rgba(8, 7, 6, 0.36) calc(6% + 46rem),
        transparent calc(6% + 60rem));
  }
}

/* At very narrow landscape widths, give the image and copy separate space. */
@media (orientation: landscape) and (min-width: 601px) and (max-width: 800px) and (min-height: 501px) and (max-height: 820px) {
  .vl-home-hero { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .vl-home-hero .vl-gc-track {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    position: static;
    flex: none;
    height: auto;
  }
  .vl-home-hero .vl-gc-slide,
  .vl-home-hero .vl-gc-slide.active {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .vl-home-hero .vl-gc-bg { position: relative; flex-shrink: 0; height: 34svh; }
  .vl-home-hero .vl-gc-scrim {
    position: absolute;
    inset: 0 0 auto;
    height: 34svh;
    background:
      linear-gradient(to bottom, var(--bg) 0, rgba(8, 7, 6, 0.7) 3.5rem, transparent 7rem),
      linear-gradient(to bottom, transparent 35%, var(--bg) 100%);
  }
  .vl-home-hero-shade { display: none; }
  .vl-home-hero .vl-gc-content {
    position: relative;
    width: 100%;
    max-width: none;
    align-items: center;
    text-align: center;
    background: var(--bg);
    padding: 0.75rem 6% 2.5rem;
  }
  .vl-home-hero .vl-gc-logo {
    width: min(350px, 70vw);
    max-width: none;
    max-height: none;
    margin: -4rem auto 0;
    object-position: center center;
  }
  .vl-home-hero .vl-home-copy { max-width: 42rem; margin: 1.2rem auto 0; }
  .vl-home-hero .vl-gc-status { margin-top: 0.8rem; }
  .vl-home-hero .vl-gc-actions { justify-content: center; margin-top: 1.4rem; }
  .vl-home-hero .vl-gc-nav {
    position: absolute;
    top: calc(34svh + 1.5rem);
    left: 0;
    right: 0;
    bottom: auto;
    transform: none;
    width: 100%;
    justify-content: space-between;
    padding: 0 0.5rem;
  }
  .vl-home-hero .vl-gc-dots { display: none; }
}

/* Portrait / phone: main.css stacks image → overlay; centre the copy under the image. */
@media (orientation: portrait), (max-width: 600px) {
  .vl-home-hero-shade { display: none; }
  /* Keep the art below the compact header, then limit the fades to its edges so the face stays clear. */
  .vl-home-hero .vl-gc-bg {
    padding-top: 3.5rem;
    background-origin: content-box;
    /* Only the middle of a wide slide shows here: each slide sets its own portrait anchor
       (`mobile_x` / `mobile_y` in _data/vampire_mistress_hero.yml) so the girl stays centred. */
    background-position: var(--gc-bg-mx, var(--gc-bg-x, 50%)) var(--gc-bg-my, var(--gc-bg-y, 50%));
  }
  .vl-home-hero .vl-gc-scrim {
    background:
      linear-gradient(to bottom, var(--bg) 0, var(--bg) 3.5rem, transparent 5.25rem),
      linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
  }
  .vl-home-hero .vl-gc-content { padding: 0.75rem 6% 1.75rem; }
  .vl-home-hero .vl-gc-logo { margin: -5rem auto 0; }
  .vl-home-hero .vl-home-copy { margin: 1.2rem auto 0; gap: 0.55rem; }
  .vl-home-hero .vl-home-hook { font-size: clamp(1.15rem, 3.4vw, 1.3rem); }
  .vl-home-hero .vl-gc-desc { font-size: clamp(0.94rem, 2.4vw, 1rem); line-height: 1.55; margin: 0 auto; }
  .vl-home-hero .vl-gc-status { margin-top: 0.75rem; }
  .vl-home-hero .vl-gc-actions { justify-content: center; margin-top: 1.4rem; }
  .vl-home-hero .vl-gc-arrow { font-size: 2.2rem; padding: 0; }
}
/* Portrait tablets: the one-block copy is shorter than the screen - let the hero end with it
   instead of leaving an empty band above the girls. */
@media (orientation: portrait) and (min-width: 601px) {
  .vl-home-hero { min-height: 0; }
}
/* Phones: a slightly shorter image zone + logo so the first CTA lands on the first screen. */
@media (max-width: 600px) {
  .vl-home-hero .vl-gc-bg,
  .vl-home-hero .vl-gc-scrim { height: 46svh; }
  .vl-home-hero .vl-gc-nav { top: calc(46svh + 1.2rem); }
  .vl-home-hero .vl-gc-logo { max-width: min(310px, 88%); margin-top: -4.5rem; }
  /* Tighter copy so the first CTA still lands on the first screen. */
  .vl-home-hero .vl-home-copy { margin-top: 0.9rem; gap: 0.45rem; }
  .vl-home-hero .vl-home-hook { font-size: 1.1rem; line-height: 1.32; }
  .vl-home-hero .vl-gc-desc { font-size: 0.94rem; line-height: 1.5; }
  .vl-home-hero .vl-gc-status { margin-top: 0.6rem; font-size: 0.74rem; }
  .vl-home-hero .vl-gc-actions { margin-top: 1.1rem; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .vl-home-hero .vl-gc-bg,
  .vl-home-hero .vl-gc-scrim { height: 40svh; }
  .vl-home-hero .vl-gc-nav { top: calc(40svh + 1.2rem); }
  .vl-home-hero .vl-gc-logo { max-width: min(270px, 78%); }
  .vl-home-hero .vl-home-copy { margin-top: 0.9rem; }
  .vl-home-hero .vl-home-hook { font-size: 1.15rem; }
  .vl-home-hero .vl-gc-actions { margin-top: 1.1rem; }
}


/* =============================================
   COMMUNITY - Patreon + Discord cards (faint brand undertones)
   ============================================= */
.home-community { padding: 3.5rem 6%; }
.home-community .vl-cards-row { max-width: 960px; gap: 1.25rem; }
.home-community .vl-card {
  --home-tint: rgba(212, 169, 138, 0.08);
  --home-tint-line: rgba(212, 169, 138, 0.2);
  --vl-card-glow: rgba(212, 169, 138, 0.16);
  justify-content: center;
  padding: 2.1rem 1.8rem 2rem;
  border-color: var(--home-tint-line);
  background: linear-gradient(160deg, var(--home-tint), transparent 75%), #141110;
}
.home-community .vl-card::before { display: none; }
.home-community .vl-card:hover {
  border-color: var(--home-tint-hover, rgba(212, 169, 138, 0.5));
  background: linear-gradient(160deg, var(--home-tint), transparent 85%), #171311;
}
/* Patreon coral (#FF424D) and Discord blurple (#5865F2), kept faint. */
.home-community .vl-card-patreon {
  --home-tint: rgba(255, 66, 77, 0.1);
  --home-tint-line: rgba(255, 110, 110, 0.2);
  --home-tint-hover: rgba(255, 120, 120, 0.45);
  --home-icon: #eea59f;
  --vl-card-glow: rgba(255, 90, 90, 0.16);
}
.home-community .vl-card-discord {
  --home-tint: rgba(88, 101, 242, 0.13);
  --home-tint-line: rgba(130, 140, 245, 0.22);
  --home-tint-hover: rgba(140, 150, 250, 0.5);
  --home-icon: #aab2f5;
  --vl-card-glow: rgba(100, 112, 245, 0.18);
}
.home-community .vl-card-icon { color: var(--home-icon, rgba(255, 255, 255, 0.7)); }
.home-community .vl-card:hover .vl-card-icon { color: var(--home-icon, var(--warm)); }
.home-community .vl-card-top { margin-bottom: 0.7rem; }
.home-community .vl-card-title { font-size: 1.8rem; color: var(--home-head); }
.home-community .vl-card-text {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd5cc;
}


/* =============================================
   NEWSLETTER - one line + the Brevo form in a quiet panel
   ============================================= */
.home-newsletter {
  background: var(--bg);
  padding: 2.5rem 6% 4rem;
}
.home-newsletter .vl-newsletter-inner {
  max-width: 640px;
  padding: 2.2rem 1.5rem 2rem;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(212, 169, 138, 0.08), transparent 70%),
    #121010;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.home-newsletter .vl-newsletter-text { margin-bottom: 1.1rem; }
.home-newsletter-title {
  font-family: 'Cormorant', serif;
  font-weight: normal;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--home-head);
  margin: 0;
  text-wrap: balance;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 600px) {
  .home-h2 { margin-bottom: 1.8rem; }
  .home-community { padding: 3rem 1rem 2.5rem; }
  .home-community .vl-card { padding: 1.8rem 1.3rem 1.7rem; }
  .home-news { padding: 0 1rem 3rem; }
  .home-newsletter { padding: 2rem 1rem 3rem; }
  .home-newsletter .vl-newsletter-inner { padding: 1.9rem 1rem 1.7rem; }
}
@media (max-width: 440px) {
}

@media (prefers-reduced-motion: reduce) {
  .vl-home-hero .vl-gc-slide { transition: none; }
  .home-community .vl-card { transition: none; }
  .home-community .vl-card:hover { transform: none; }
}