/* ============================================================
   SANDRA — Layout: section containers, grids, positioning
   ============================================================ */

/* ---- HERO ---- */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: center;
  padding: clamp(96px, 15vh, 150px) 0 clamp(34px, 6vh, 56px);
}
.hero__stage {
  position: absolute; inset: 0; z-index: 0;
}
.hero__stage img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 57%;
  filter: contrast(1.12) brightness(.46) saturate(1.05);
  transform: scale(1.06);
}
.lantern__halo {
  position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%);
  width: min(70vmin, 620px); aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 55%, transparent), color-mix(in srgb, var(--c-accent) 16%, transparent) 40%, transparent 66%);
  opacity: 0; filter: blur(6px); mix-blend-mode: screen; z-index: 3;
}
.lantern__halo--soft {
  position: absolute; inset: -18% -14%; left: auto; top: auto; transform: none;
  width: auto; aspect-ratio: auto;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-accent) 40%, transparent), transparent 60%);
  opacity: .7;
}
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero__stage::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}
#hero-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}
#hero-video { display: none; }
.hero__top    { position: relative; z-index: 4; opacity: 0; }
.hero__bottom { position: relative; z-index: 4; opacity: 0; }
/* Stack sub + scroll-cue vertically and center them within the container */
.hero__bottom .container {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 5vh, 40px);
}

/* ---- Hero SVG title ---- */
.hero-title-svg {
  width: 100%;
  max-width: 772px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.hero-title-svg path {
  fill: var(--c-text);
  fill-opacity: 0;
  stroke: var(--c-accent);
  stroke-width: 1;
  stroke-opacity: 0;
}

/* ---- Group section ---- */
.group {
  position: relative; z-index: 2;
  padding-block: var(--s-section);
  clip-path: inset(100% 0 0 0);
}

.group__copy {
  max-width: 38rem;
  margin-bottom: var(--s-gap);
}

.group__media {
  position: relative;
  max-width: 32rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  margin: 0;
}

.group__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- CAST / CHARACTERS ---- */
.cast {
  position: relative; z-index: 2;
  padding: clamp(90px, 16vh, 180px) 0 40px;
}
.cast__head {
  margin-bottom: clamp(60px, 10vh, 120px);
}
/* Galerie vivante: generous vertical breathing room between pieces */
.character {
  position: relative;
  padding-block: clamp(60px, 11vh, 130px);
}

.char-media {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--media-radius);
  background: var(--c-bg-2);
  /* Galerie vivante: museum hairline frame — reduced opacity to avoid edge artifact */
  outline: 1px solid color-mix(in srgb, var(--c-text) 6%, transparent);
  outline-offset: 10px;
}
.char-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(var(--media-contrast)) brightness(var(--media-bright)) saturate(var(--media-sat));
  transform: scale(1.06);
  will-change: transform;
}
.char-media .spot {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, transparent 40%, rgba(20, 17, 16, .5) 100%);
  box-shadow: inset 0 0 120px rgba(20, 17, 16, .6);
  opacity: .35; /* galerie: reduced spot, type does the work */
}
.char-copy { max-width: 34ch; }

/* ---- CONTEMPLATE / LIGHT & FORM ---- */
.contemplate {
  position: relative; z-index: 2;
  padding: clamp(130px, 20vh, 220px) 0 clamp(90px, 16vh, 180px);
}
.contemplate .cast__head { margin-bottom: clamp(50px, 9vh, 110px); }

.moment {
  position: relative; margin: 0;
  padding-block: clamp(50px, 9vh, 110px);
}
.moment__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--media-radius);
  /* Galerie vivante: museum hairline frame — reduced opacity to avoid edge artifact */
  outline: 1px solid color-mix(in srgb, var(--c-text) 6%, transparent);
  outline-offset: 10px;
}
.moment__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(var(--media-contrast)) brightness(var(--media-bright)) saturate(var(--media-sat));
  transform: scale(1.06);
}
/* Lantern moment: slightly warmer treatment */
.moment--lantern .moment__media img {
  filter: contrast(1.1) brightness(.9) saturate(1.05);
}

/* ---- CONTACT / CTA ---- */
.contact {
  position: relative; z-index: 2;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(90px, 16vh, 180px) 0 0;
  text-align: center;
}
.contact__inner { max-width: 680px; margin: 0 auto; }
.contact__links {
  list-style: none; margin: 56px auto 0; padding: 34px 0 0; max-width: 440px;
  border-top: 1px solid var(--c-rule);
  display: grid; gap: 14px;
}
.contact__links li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
}

/* Contact section: initial hidden states for footer reveal sequence */
.contact .kicker,
.contact__lede,
.contact .cta,
.contact__links li { opacity: 0; }
.contact__title em { clip-path: inset(0 100% 0 0); }

/* ---- FOOTER ---- */
.foot {
  margin-top: auto; padding: 70px 0 40px;
  font-size: 12.5px; color: var(--c-ink-faint); text-align: center;
}
.foot > .container {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
}

/* ---- PUFFER: circle clip-path reveal ---- */
.puffer {
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.puffer__reveal {
  width: 100%;
  height: 100vh;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}
.puffer__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.puffer__caption {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--c-accent);
  font-style: italic;
  font-variant: small-caps;
  font-size: 2.6rem;
  opacity: 0;
  z-index: 10;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {
  /* col-lg-6 stacks below 992px — restore portrait feel for media */
  .char-copy { max-width: none; }
  .char-media { aspect-ratio: 5 / 4; }
}

@media (min-width: 992px) {
  .char-copy { padding-left: 10px; }
}