/* CANDID ENTERTAINMENT — black + rose gold.
   Template behavior preserved: logo splits on load -> full-screen video in the middle ->
   scroll shrinks the video into the grid center while the image layers spawn out. */

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

:root {
  --gutter: 2rem;
  --black: #060606;
  --ink: #f3e9e4;
  --muted: #b8a69d;
  --rg-1: #f6d5c8;
  --rg-2: #e3b3a4;
  --rg-3: #c68d78;
  --rg-4: #9c6d62;
  --rg-grad: linear-gradient(135deg, #f6d5c8 0%, #e3b3a4 42%, #9c6d62 100%);
  --rg-line: rgba(198, 141, 120, 0.45);
}
@media (max-width: 600px) { :root { --gutter: 1rem; } }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  background: var(--black); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.content-wrap { background: var(--black); overflow: clip; }

/* Lenis smooth-scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Scroll stage (sticky spacer) ---------- */
.stage { min-height: 340vh; }        /* deliberate, filmic pacing for the reveal + shrink */
.content {
  min-height: 100vh; width: 100vw;
  display: flex; place-items: center; align-content: center;
  position: sticky; top: 0; overflow: hidden;
}

/* ---------- Grid: 7 cols x 3 rows (5 on tablet, 3 on phone) ----------
   The grid is HEIGHT-constrained, not width: --fit-h caps the cell so three rows
   fit in 84vh, which at 1440x900 leaves ~290px of unused margin each side. So
   COLUMNS are close to free and ROWS are expensive — going 5 -> 7 adds six tiles
   at the same tile size, where a fourth row would have shrunk all of them. */
.grid {
  --offset: 0; --cols: 7;
  --gap: clamp(8px, 3vw, 40px);
  /* Cap cell width so the three rows + gaps fit within 84vh (no cut-off).
     Slots now carry their photo's NATIVE aspect ratio (--ar) instead of a
     uniform 4:5, so a row is as tall as its tallest image. Measured worst case across the
     current set is 4.66x cell width (sum of each row's tallest image);
     4.29 adds headroom. Recompute if a taller photo is swapped in. */
  --fit-h: calc((84vh - 2 * var(--gap)) / 4.81);
  width: min(1360px, calc(100% - (2 * var(--gutter))),
             calc(var(--cols) * var(--fit-h) + (var(--cols) - 1) * var(--gap)));
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, auto);
  gap: var(--gap); margin: 0 auto; align-content: center;
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
}
/* Each step drops the OUTERMOST layer and pulls --offset in by one, so the
   remaining layers keep their distance-from-centre. Layer order in the markup is
   outside-in for exactly this reason: what gets hidden first is the outer ring,
   so the strongest frames (layers 3-4) survive to the smallest screen. */
@media (max-width: 1100px) {
  .grid { --cols: 5; --offset: -1; grid-template-columns: repeat(5, 1fr); }
  .grid > .layer:nth-of-type(1) { display: none; }
}
@media (max-width: 600px) {
  .grid { --cols: 3; --offset: -2; grid-template-columns: repeat(3, 1fr); }
  .grid > .layer:nth-of-type(2) { display: none; }
}
.grid > .layer {
  display: grid; grid-column: 1 / -1; grid-row: 1 / -1;
  grid-template-columns: subgrid; grid-template-rows: subgrid;
  will-change: transform, opacity;
}
/* Each slot carries its photo's own aspect ratio, so a slot is usually SHORTER
   than the row (rows size to their tallest image). Left alone the slots pin to the
   top of the cell and the row's bottom edge goes ragged. Centring puts every image
   in a row on one horizontal axis, so varied heights read as rhythm, not drift. */
.grid > .layer > div { display: grid; align-content: center; justify-items: stretch; }

/* Odd children take the left column of the pair, even the right. The negative
   line numbers count from the end, so `1`/`-2` is always the outermost pair
   whatever --cols is; --offset walks the inner pairs in as columns are dropped. */
.grid > .layer:nth-of-type(1) div:nth-of-type(odd)  { grid-column: 1; }
.grid > .layer:nth-of-type(1) div:nth-of-type(even) { grid-column: -2; }
.grid > .layer:nth-of-type(2) div:nth-of-type(odd)  { grid-column: calc(2 + var(--offset)); }
.grid > .layer:nth-of-type(2) div:nth-of-type(even) { grid-column: calc(-3 - var(--offset)); }
.grid > .layer:nth-of-type(3) div:nth-of-type(odd)  { grid-column: calc(3 + var(--offset)); }
.grid > .layer:nth-of-type(3) div:nth-of-type(even) { grid-column: calc(-4 - var(--offset)); }
.grid > .layer:nth-of-type(4) div:first-of-type { grid-column: calc(4 + var(--offset)); grid-row: 1; }
.grid > .layer:nth-of-type(4) div:last-of-type  { grid-column: calc(4 + var(--offset)); grid-row: -1; }

/* ---------- Image placeholder slots ---------- */
.slot {
  width: 100%; aspect-ratio: var(--ar, 4 / 5); border-radius: 1rem;
  background: radial-gradient(120% 120% at 30% 20%, rgba(156, 109, 98,0.16), transparent 60%), #100c0b;
  border: 1px solid var(--rg-line);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
/* contain, not cover: the frame already carries the photo's own ratio, so this
   is belt-and-braces — if a replacement image has a slightly different ratio it
   is letterboxed against the slot rather than silently cropped. */
.slot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Center video: opens FULL-SCREEN, shrinks into grid center on scroll ---------- */
/* Centrepiece spans the middle 3 columns of the middle row. The .media inside is
   sized by JS to the image's own ratio and centred, so the flanking tiles in those
   columns stay visible either side of it.
   The span is derived from --offset rather than hard-coded, because this rule sits
   AFTER the breakpoints at equal specificity and so would beat any override in
   them: 7col/0 -> 3/6, 5col/-1 -> 2/5, 3col/-2 -> 1/4, always centred. */
.grid .scaler {
  position: relative;
  grid-row: 2 / 3;
  grid-column: calc(3 + var(--offset)) / calc(6 + var(--offset));
}
.scaler { z-index: 3; width: 100%; height: 100%; }
.media {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 100vw; height: 100vh;               /* full-screen at load */
  border-radius: 14px; overflow: hidden; will-change: width, height;
  /* metallic rose-gold frame + restrained glow */
  box-shadow:
    0 0 0 1px rgba(249, 215, 202,0.6),
    0 0 0 3px rgba(156, 109, 98,0.38),
    0 18px 60px rgba(0,0,0,0.55),
    0 0 60px rgba(200, 143, 122,0.22);
}
.theme-video, .theme-still, .poster-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-fallback {
  display: grid; align-content: center; justify-items: center; gap: 0.6rem;
  background: radial-gradient(130% 100% at 50% 40%, rgba(156, 109, 98,0.22), transparent 62%), #0b0808;
}
.pf-kicker { font-size: clamp(0.6rem, 1.2vw, 0.85rem); letter-spacing: 0.5em; color: var(--rg-2); }
.pf-title { font-size: clamp(1.8rem, 6vw, 4rem); font-weight: 800; letter-spacing: 0.08em;
  background: var(--rg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-note { font-size: 0.6rem; letter-spacing: 0.35em; color: var(--muted); opacity: 0.6; }

.vctrl {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: flex; gap: 8px; opacity: 0.85; transition: opacity .3s ease;
}
.media:hover .vctrl { opacity: 1; }
.vbtn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(198, 141, 120,0.55);
  background: rgba(6,6,6,0.45); backdrop-filter: blur(6px);
  color: var(--rg-1); transition: background .2s ease, transform .2s ease;
}
.vbtn:hover { background: rgba(156, 109, 98,0.35); transform: translateY(-1px); }
.vbtn .ic { width: 16px; height: 16px; fill: currentColor; }
.ic-play, .ic-muted { display: none; }
.vbtn.paused .ic-pause { display: none; }
.vbtn.paused .ic-play  { display: block; }
.vbtn.muted .ic-sound  { display: none; }
.vbtn.muted .ic-muted  { display: block; }

/* ---------- Logo curtain: only the logo on load; parts on scroll (part of the timeline) ---------- */
.reveal { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.panel {
  position: absolute; top: 0; height: 100%; width: 50vw;
  background: var(--black); overflow: hidden; will-change: transform;
}
.panel-l { left: 0; }
.panel-r { right: 0; }
.panel img { position: absolute; top: 50%; width: min(84vw, 940px); height: auto; translate: 0 -50%; }
/* place each half so the logo's centre lands exactly on the seam at viewport middle */
.panel-l img { left: calc(50vw - min(42vw, 470px)); }
.panel-r img { left: calc(0px - min(42vw, 470px)); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 6vh; translate: -50% 0; z-index: 7;
  display: grid; justify-items: center; gap: 8px;
  font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--rg-3), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Outro / CTA ---------- */
.outro { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 0.8rem; text-align: center; padding: 2rem; }
.outro-logo { width: min(72vw, 640px); height: auto; margin-bottom: 0.4rem; }
.cta-row { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; justify-content: center; }
.cta { text-decoration: none; color: var(--ink); padding: 0.8rem 1.8rem; border-radius: 999px; border: 1px solid var(--rg-3); letter-spacing: 0.25em; font-size: 0.78rem; transition: all .2s ease;
  font-family: inherit; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; }
.cta:hover { background: rgba(156, 109, 98,0.18); transform: translateY(-2px); }
.cta:focus-visible { outline: 2px solid var(--rg-2); outline-offset: 3px; }
.cta-solid { background: var(--rg-grad); color: #1a0c0a; border-color: transparent; font-weight: 700; }
.cta-solid:hover { filter: brightness(1.08); }
/* LISTEN — streaming links not wired yet: present but clearly "coming soon" */
.cta-soon { cursor: default; color: var(--muted); border-color: var(--rg-line); opacity: 0.72; }
.cta-soon:hover { background: transparent; transform: none; }
.cta-soon em { font-style: normal; font-size: 0.58em; letter-spacing: 0.18em; padding: 0.15em 0.5em; border-radius: 999px;
  background: var(--rg-grad); color: #1a0c0a; font-weight: 700; }
.foot { margin-top: 2.4rem; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--muted); opacity: 0.6; }
.foot-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rg-line); }
.foot-link:hover { color: var(--rg-2); }

/* ---------- Reduced motion: settle into final grid, no split ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { display: none; }
  .media { width: 100%; height: 100%; }
  .scroll-cue i { animation: none; }
}

/* ===== Rose-gold video: branded play overlay + controls ===== */
.play-hero {
  position: absolute; inset: 0; z-index: 5; cursor: pointer; border: 0;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: radial-gradient(closest-side, rgba(6,6,6,0.42), rgba(6,6,6,0.05));
  color: var(--ink); font: inherit;
}
.play-hero[hidden] { display: none; }
.ph-ring {
  width: clamp(58px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: rgba(6,6,6,0.35); backdrop-filter: blur(4px);
  border: 2px solid var(--rg-2);
  box-shadow: 0 0 24px rgba(200, 143, 122,0.5), inset 0 0 18px rgba(249, 215, 202,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.play-hero:hover .ph-ring, .play-hero:focus-visible .ph-ring {
  transform: scale(1.06); box-shadow: 0 0 40px rgba(200, 143, 122,0.75);
}
.ph-tri { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--rg-1); margin-left: 5px; }
.ph-txt { font-size: clamp(0.56rem, 1.2vw, 0.78rem); letter-spacing: 0.35em; color: var(--rg-1); }
.vctrl[hidden] { display: none; }

/* ===== CANDI assistant ===== */
.candi-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--rg-3); color: var(--ink);
  background: linear-gradient(135deg, rgba(20,10,9,0.96), rgba(6,6,6,0.96));
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 22px rgba(200, 143, 122,0.28);
  font-size: 0.8rem; transition: transform .2s ease, box-shadow .2s ease;
}
.candi-launch:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,0,0,0.55), 0 0 30px rgba(200, 143, 122,0.45); }
.candi-launch .candi-star { color: var(--rg-1); font-size: 0.95rem; }
.candi-launch .candi-name { font-weight: 800; letter-spacing: 0.22em;
  background: var(--rg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.candi-badge { font-size: 0.55rem; letter-spacing: 0.12em; font-weight: 700; color: #1a0c0a;
  background: var(--rg-grad); border-radius: 4px; padding: 2px 5px; }
.candi-launch[hidden] { display: none; }

.candi-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--rg-3);
  background: linear-gradient(180deg, #120a09, #060606);
  box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 50px rgba(200, 143, 122,0.2);
  animation: candiIn .22s ease;
}
.candi-panel[hidden] { display: none; }
@keyframes candiIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.candi-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid rgba(198, 141, 120,0.25); }
.candi-head .candi-star { color: var(--rg-1); font-size: 1.1rem; }
.candi-title { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
.candi-title strong { letter-spacing: 0.18em; background: var(--rg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.candi-title small { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--muted); }
.candi-close { background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 6px; border-radius: 8px; }
.candi-close:hover { color: var(--rg-1); background: rgba(156, 109, 98,0.15); }
.candi-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 0.82rem; line-height: 1.42; }
.msg.candi { align-self: flex-start; background: #1a1210; border: 1px solid rgba(198, 141, 120,0.25); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--rg-grad); color: #1a0c0a; border-bottom-right-radius: 4px; font-weight: 500; }
.candi-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.candi-chip { cursor: pointer; font-size: 0.68rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--rg-line); background: rgba(156, 109, 98,0.1); color: var(--rg-1); transition: background .15s ease; }
.candi-chip:hover { background: rgba(156, 109, 98,0.28); }
.candi-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(198, 141, 120,0.25); }
.candi-input input { flex: 1; background: #0c0807; border: 1px solid var(--rg-line); border-radius: 999px; padding: 9px 14px; color: var(--ink); font-size: 0.82rem; outline: none; }
.candi-input input:focus { border-color: var(--rg-3); box-shadow: 0 0 0 2px rgba(156, 109, 98,0.25); }
.candi-send { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; color: #1a0c0a; background: var(--rg-grad); font-size: 0.9rem; display: grid; place-items: center; }
.candi-send:hover { filter: brightness(1.08); }
.candi-disc { margin: 0; padding: 0 14px 12px; font-size: 0.58rem; letter-spacing: 0.05em; color: var(--muted); opacity: 0.75; text-align: center; }

@media (max-width: 600px) {
  .candi-panel { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: min(72dvh, calc(100dvh - 20px)); }
  .candi-launch { right: 12px; bottom: 12px; }
}
:focus-visible { outline: 2px solid var(--rg-2); outline-offset: 2px; }

/* ===== Star-orbit intro (hidden by default -> shown only when JS animates it) ===== */
.logo-intro { position: absolute; inset: 0; z-index: 8; display: none; pointer-events: none; }
/* opaque black cover so the curtain's baked star is hidden -> no duplicate star during the orbit */
.logo-intro.active { display: block; background: var(--black); }
.li-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(84vw, 940px); aspect-ratio: 1170 / 818; }
.li-word, .li-star { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.li-star { will-change: opacity; }
.li-shimmer { position: absolute; left: 31%; top: 50%; width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.2); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(249, 215, 202,0.85), rgba(200, 143, 122,0.25) 45%, transparent 70%);
  mix-blend-mode: screen; }
.logo-intro.settled .li-shimmer { animation: liShimmer 0.5s ease-out forwards; }
@keyframes liShimmer {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}

/* ===== Email signup — placeholder spot only (full form designed next round) ===== */
.signup { display: flex; gap: 8px; margin-top: 1.4rem; justify-content: center; flex-wrap: wrap; }
.signup-input { background: #0c0807; border: 1px solid var(--rg-line); border-radius: 999px;
  padding: 0.7rem 1.2rem; color: var(--ink); font-size: 0.8rem; min-width: 220px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.signup-input::placeholder { color: var(--muted); }
.signup-input:focus-visible, .signup-input:focus { outline: none; border-color: var(--rg-2);
  box-shadow: 0 0 0 3px rgba(227, 179, 164, 0.16); }
/* Only after a failed submit — never punish someone mid-typing. */
.signup.invalid .signup-input { border-color: #e0806f; }

.signup-btn { border: 1px solid var(--rg-3); background: transparent; color: var(--rg-1);
  border-radius: 999px; padding: 0.7rem 1.4rem; letter-spacing: 0.2em; font-size: 0.72rem;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.signup-btn:hover:not(:disabled) { background: var(--rg-grad); color: #120b09; border-color: transparent; }
.signup-btn:focus-visible { outline: 2px solid var(--rg-2); outline-offset: 3px; }
.signup-btn:disabled { opacity: 0.55; cursor: default; }
/* Sending state: the label is swapped in JS, so this only carries the pulse. */
.signup.sending .signup-btn { animation: sgPulse 1.1s ease-in-out infinite; }
@keyframes sgPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields
   but happily fill anything still in the DOM and laid out. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.signup-status { margin: 10px 0 0; font-size: 0.68rem; letter-spacing: 0.12em;
  min-height: 1em; opacity: 0; transition: opacity 0.3s ease; }
.signup-status.show { opacity: 1; }
.signup-status.ok  { color: var(--rg-1); }
.signup-status.err { color: #e0806f; }

.signup-note { margin: 6px auto 0; font-size: 0.6rem; letter-spacing: 0.11em; color: var(--muted);
  opacity: 0.7; max-width: 34rem; line-height: 1.7; }
/* Success collapses the form and its consent line — leaving a live input under a
   "you're on the list" message invites a confused second submit. */
.signup.done, .signup.done + .signup-status + .signup-note { display: none; }

@media (prefers-reduced-motion: reduce) {
  .signup.sending .signup-btn { animation: none; }
  .signup-input, .signup-btn, .signup-status { transition: none; }
}