/* ==========================================================================
   20-cinematic.css — the maximum-cinema layer
   --------------------------------------------------------------------------
   Activated by `body.cinematic` (added by js/cinematic-bootstrap.js after
   a capability check). Honours prefers-reduced-motion. Nothing in here
   touches layout or copy — it is pure atmosphere, depth, and time.

   Sections:
     1. Loading curtain — first-paint brand reveal
     2. Film grain + vignette — full-page atmospheric overlay
     3. Color grading — subtle warm cinematography wash
     4. Hero parallax + breathing
     5. Headline letter-by-letter reveal
     6. Scene transitions — section enter/leave choreography
     7. Bioluminescent CTA glow
     8. Hover micro-cinema on photo frames
     9. Audio control affordance
    10. Reduced-motion overrides
   ========================================================================== */

/* ==========================================================================
   1. Loading curtain — full-bleed cream page that wipes away on load
   ========================================================================== */
.cinematic-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 1100ms cubic-bezier(0.86, 0, 0.07, 1);
  will-change: transform;
}

body.cinematic.is-curtain-up .cinematic-curtain {
  transform: translateY(-100%);
}

.cinematic-curtain__mark {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'wght' 400;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease 200ms, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1) 200ms;
}

.cinematic-curtain__mark .dot {
  color: var(--color-rust);
}

body.cinematic .cinematic-curtain__mark {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   2. Film grain + vignette — atmospheric, sub-pixel, always-on
   ========================================================================== */

/* Grain — animated SVG noise, layered very faintly */
.cinematic-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  transition: opacity 800ms ease;
}

body.cinematic .cinematic-grain {
  opacity: 0.42;
  animation: cinematic-grain-shift 8s steps(8) infinite;
}

@keyframes cinematic-grain-shift {
  0%   { transform: translate(0,         0); }
  10%  { transform: translate(-3%,       -2%); }
  20%  { transform: translate(-7%,        4%); }
  30%  { transform: translate(2%,        -5%); }
  40%  { transform: translate(-3%,        3%); }
  50%  { transform: translate(-7%,       -1%); }
  60%  { transform: translate(3%,         5%); }
  70%  { transform: translate(-2%,        2%); }
  80%  { transform: translate(-4%,       -4%); }
  90%  { transform: translate(2%,         3%); }
  100% { transform: translate(0,         0); }
}

/* Vignette — corner darkening, fixed to viewport */
.cinematic-vignette {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(26, 22, 18, 0.18) 80%,
      rgba(26, 22, 18, 0.42) 100%);
  transition: opacity 800ms ease;
}

body.cinematic .cinematic-vignette { opacity: 1; }

/* ==========================================================================
   3. Color grading — warm cinematography wash on photographic content
   ========================================================================== */
body.cinematic .hero__video,
body.cinematic .hero__img,
body.cinematic .heritage__photo-frame img,
body.cinematic .animal-card__photo-wrap img,
body.cinematic .sale-card__photo-wrap img,
body.cinematic .menagerie__feature-photo-frame img,
body.cinematic .gallery__photo-frame img,
body.cinematic .animal-tile img {
  filter: contrast(1.04) saturate(1.05) brightness(0.98);
}

/* The dusk section already feels twilight — push it further */
body.cinematic .section--dusk,
body.cinematic .visit {
  position: relative;
}
body.cinematic .visit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(168, 84, 46, 0.05) 0%, transparent 60%);
  mix-blend-mode: screen;
  z-index: 1;
}

/* ==========================================================================
   4. Hero parallax + breathing
   ========================================================================== */
/* Hero photo layer translates slower than scroll for depth */
body.cinematic .hero__video,
body.cinematic .hero__img {
  will-change: transform;
}

/* Subtle breathing on hero text — like the headline is alive */
body.cinematic .hero__headline {
  animation: cinematic-breathe 7.5s ease-in-out infinite;
  transform-origin: left bottom;
}

@keyframes cinematic-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.005); }
}

/* Hero overlay deepens slightly for more cinematic feel */
body.cinematic .hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(26, 22, 18, 0.18) 0%,
    rgba(26, 22, 18, 0.05) 30%,
    rgba(26, 22, 18, 0.20) 65%,
    rgba(26, 22, 18, 0.78) 100%);
}

/* ==========================================================================
   5. Headline letter-by-letter reveal
   ========================================================================== */
.cine-line {
  display: inline-block;
  overflow: visible;
}

.cine-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 700ms ease;
}

.cine-char.is-on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Preserve whitespace inside split lines */
.cine-char--space {
  width: 0.25em;
  opacity: 1;
  filter: none;
  transform: none;
}

/* ==========================================================================
   6. Scene transitions — section-level enter choreography
   ========================================================================== */

/* Every major section becomes a scene with a soft enter */
body.cinematic .section,
body.cinematic .heritage,
body.cinematic .animals,
body.cinematic .menagerie,
body.cinematic .for-sale,
body.cinematic .visit,
body.cinematic .contact,
body.cinematic .gallery {
  position: relative;
}

/* Heritage scene — historical photo desaturation that warms as you scroll */
body.cinematic .heritage__photo-frame--bw img {
  filter: grayscale(100%) contrast(1.12) brightness(0.96);
  transition: filter 1400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.cinematic .scene-warmed .heritage__photo-frame--bw img {
  filter: grayscale(28%) sepia(0.18) contrast(1.06) brightness(1.01);
}

/* Animals scene — mono on first paint, color when in view */
body.cinematic .animal-tile img {
  filter: grayscale(38%) contrast(1.05) saturate(0.85) brightness(0.92);
  transition: filter 1500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.cinematic .animal-tile.is-on-screen img {
  filter: contrast(1.05) saturate(1.08) brightness(1.00);
}

/* Menagerie cards — gentle scale on enter */
body.cinematic .animal-card {
  transform: translateY(8px) scale(0.985);
  opacity: 0.4;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.cinematic .animal-card.is-on-screen {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* For-sale cards — same deal */
body.cinematic .sale-card {
  transform: translateY(8px);
  opacity: 0.45;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.cinematic .sale-card.is-on-screen {
  transform: translateY(0);
  opacity: 1;
}

/* Gallery items — staggered fade with slight tilt */
body.cinematic .gallery__item {
  transform: translateY(10px) rotate(-0.15deg);
  opacity: 0.4;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 900ms ease;
}
body.cinematic .gallery__item.is-on-screen {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* ==========================================================================
   7. Bioluminescent CTA glow — primary CTA pulses very softly
   ========================================================================== */
body.cinematic .btn--primary {
  box-shadow:
    0 0 0 0 rgba(168, 84, 46, 0.4),
    0 6px 18px rgba(26, 22, 18, 0.10);
  animation: cinematic-glow 4.5s ease-in-out infinite;
}

@keyframes cinematic-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(168, 84, 46, 0.0),
      0 6px 18px rgba(26, 22, 18, 0.10);
  }
  50% {
    box-shadow:
      0 0 28px 4px rgba(168, 84, 46, 0.22),
      0 6px 22px rgba(26, 22, 18, 0.14);
  }
}

/* Disable the pulse on hover so it doesn't fight the hover state */
body.cinematic .btn--primary:hover { animation: none; }

/* ==========================================================================
   8. Hover micro-cinema — slower, more deliberate photo scale
   ========================================================================== */
body.cinematic .heritage__photo-frame img,
body.cinematic .menagerie__feature-photo-frame img,
body.cinematic .animal-card__photo-wrap img,
body.cinematic .sale-card__photo-wrap img,
body.cinematic .gallery__photo-frame img {
  transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 800ms ease;
}

body.cinematic .heritage__photo-block:hover .heritage__photo-frame img,
body.cinematic .menagerie__feature-photo-frame:hover img,
body.cinematic .animal-card:hover .animal-card__photo-wrap img,
body.cinematic .sale-card:hover .sale-card__photo-wrap img,
body.cinematic .gallery__item--clickable:hover .gallery__photo-frame img {
  transform: scale(1.04);
}

/* ==========================================================================
   8b. Cinematic scroll progress — minimal rust bar at top of viewport
   ========================================================================== */
.cinematic-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-rust);
  z-index: 9999;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  box-shadow: 0 0 12px rgba(168, 84, 46, 0.5);
}

/* ==========================================================================
   9. Audio control affordance — bottom-right floating mute/unmute
   ========================================================================== */
.cinematic-audio-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(26, 22, 18, 0.78);
  color: var(--color-paper);
  border: 1px solid rgba(242, 236, 223, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: none; /* shown only when audio element is present */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--font-body);
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              border-color var(--transition-fast);
}

.cinematic-audio-btn:hover {
  background: var(--color-rust);
  border-color: var(--color-rust);
  transform: scale(1.05);
}

.cinematic-audio-btn:focus-visible {
  outline: 3px solid var(--color-rust);
  outline-offset: 3px;
}

body.cinematic.has-audio .cinematic-audio-btn { display: flex; }

/* ==========================================================================
   10. Reduced-motion — kill everything that animates
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.cinematic .cinematic-grain,
  body.cinematic .cinematic-vignette {
    opacity: 0;
  }
  body.cinematic .cinematic-curtain {
    display: none;
  }
  body.cinematic .hero__headline,
  body.cinematic .btn--primary {
    animation: none;
  }
  body.cinematic .cine-char {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  body.cinematic .heritage__photo-frame--bw img,
  body.cinematic .animal-tile img {
    transition: none;
  }
  body.cinematic .animal-card,
  body.cinematic .sale-card,
  body.cinematic .gallery__item {
    transform: none;
    opacity: 1;
    transition: none;
  }
}