/* ===================================================================
   CARMELICIOUS CREATIVE STUDIO — Home Page
   Scoped under body.cc-page-home. Loaded conditionally.
   =================================================================== */

.cc-page-home { padding-top: 0; }  /* hero is full-bleed under fixed header */

.cc-home-hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: calc(var(--cc-header-h) + var(--cc-space-xl)) var(--cc-gutter) var(--cc-space-2xl);
  overflow: hidden; isolation: isolate;
}

/* AMBIENT VIDEO — sits far behind, heavily veiled */
.cc-hero-video { position: absolute; inset: 0; z-index: -2; }
.cc-hero-video video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;   /* lever for which part stays in frame */
  opacity: 0.28;             /* deliberately low — atmosphere, not content */
  filter: grayscale(0.35) contrast(1.05);
}
/* Warm cream veil (was a dark charcoal scrim). It floats the ambient video
   behind a wash of morning light and fades to the page's own cream at the
   bottom, so the hero dissolves into the section below instead of ending on a
   hard dark band. A soft warm-white bloom sits on top for the "sunrise" glow. */
.cc-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(247,241,231,0.55) 0%,
      rgba(247,241,231,0.75) 45%,
      rgba(247,241,231,0.97) 100%),
    radial-gradient(ellipse 70% 55% at 50% -15%,
      rgba(255,255,255,0.6) 0%,
      rgba(216,155,108,0.10) 40%,
      transparent 70%);
}

/* HERO BLOOM — a static, airy wash of morning light that carries the hero now
   that the ambient video is disabled. Independent of the (commented-out) video
   block, so the hero looks complete on its own. Mirrors the Phase-20 bloom. */
.cc-hero-bloom {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% -15%,
      rgba(255,255,255,0.6) 0%,
      rgba(216,155,108,0.10) 40%,
      transparent 70%);
}

/* HERO TITLE — solid, confident display type on cream (no gradient shimmer).
   "Carmelicious" carries the peach accent; it's large display text, so the
   deeper terracotta clears AA-large contrast comfortably. */
.cc-hero-title { color: var(--cc-cream); white-space: nowrap; }
.cc-hero-title .cc-hero-accent { color: var(--cc-peach-dark); }

/* Pull the body copy up under the headline and calm the line-heights so the
   whole hero block feels like a single, deliberate cluster of type. */
.cc-home-hero .cc-lead {
  max-width: 560px; margin: var(--cc-space-md) auto 0;
  font-family: var(--cc-font-accent); font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5;
  white-space: nowrap;
}
.cc-home-hero .cc-prose {
  max-width: 560px; margin: var(--cc-space-md) auto 0;
}
.cc-home-hero .cc-prose p {
  font-family: var(--cc-font-accent); font-weight: 500;
  font-size: 1.2rem; line-height: 1.6;
}

/* SCROLL CUE */
.cc-scroll-cue {
  position: absolute; bottom: var(--cc-space-lg); left: 50%;
  transform: translateX(-50%); width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, rgba(184,122,78,0.65), transparent);
  background-size: 100% 200%;
  animation: cc-scroll-cue 2.4s ease-in-out infinite;
}
@keyframes cc-scroll-cue {
  0%   { background-position: 0% -100%; }
  100% { background-position: 0% 200%; }
}

/* CTA BAND — shared component now lives in components.css (.cc-cta-band) */

/* Keep the closing-CTA headline on a single line on the home page. The shared
   band uses the narrow (760px) container, which is too tight for the italic
   heading; widen it to the full container here and stop it wrapping. Small
   screens fall back to normal wrapping so it never overflows. */
.cc-page-home .cc-cta-band .cc-container-narrow { max-width: var(--cc-container); }
.cc-page-home .cc-cta-band .cc-h2 { white-space: nowrap; }
@media (max-width: 640px) {
  .cc-page-home .cc-cta-band .cc-h2 { white-space: normal; }
}

@media (max-width: 640px) {
  .cc-btn-row { flex-direction: column; align-items: stretch; }
  .cc-btn-row .cc-btn { width: 100%; }
  .cc-hero-video video { opacity: 0.20; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-scroll-cue { animation: none; }
  .cc-hero-video video { display: none; }   /* static poster only */
}

/* ───────────────────────────────────────────────
   TEMPLATE HELPERS (scoped to this page)
   ─────────────────────────────────────────────── */

/* Static poster frame injected by JS when motion/data is constrained.
   Mirrors the video's veiled treatment so the swap is seamless. */
.cc-hero-video .cc-hero-poster {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
  opacity: 0.28; filter: grayscale(0.35) contrast(1.05);
}
@media (max-width: 640px) {
  .cc-hero-video .cc-hero-poster { opacity: 0.20; }
}

/* Section intro (.cc-section-head) is now a shared component in components.css */

/* ───────────────────────────────────────────────
   UPDATE NOTE — a gentle P.S. above the footer.
   Airy, understated: a short peach hairline over an accent-italic line in
   muted text. Colours are the theme-adaptive muted/line tokens, so it reads
   in both light and dark palettes.
   ─────────────────────────────────────────────── */
.cc-update-note {
  text-align: center;
  padding-block: var(--cc-space-md) var(--cc-space-sm);
}
.cc-update-note p {
  font-family: var(--cc-font-accent);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cc-cream-soft);
  margin: 0;
}
.cc-update-note::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--cc-line);
  margin: 0 auto var(--cc-space-sm);
}