/* ================================================================
   YNIKMH — Case File cinematic page
   Extends style.css. All tokens (colours/fonts/spacing) reused.
   Scoped to body.case-page so nothing else on the site is touched.
   ================================================================ */

/* ---------- header: transparent over hero, fades in on load ---------- */
body.case-page header.site-nav{
  position: fixed;
  width: 100%;
  transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease, opacity .6s ease;
}
body.case-page header.site-nav.hero-mode{
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.case-page header.site-nav.nav-enter{
  opacity: 0;
}
body.case-page header.site-nav.nav-enter.nav-in{
  opacity: 1;
}
body.case-page main{ display:block; }

/* ---------- rain layer ---------- */
.rain-field{
  position: fixed; inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.2s ease;
  mix-blend-mode: screen;
}
.rain-field .drop{
  position: absolute;
  top: -60px;
  width: 1.5px;
  background: linear-gradient(180deg, transparent, rgba(210,225,245,0.85), rgba(210,225,245,0.2), transparent);
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rain-field .drop.back{
  filter: blur(.6px);
}
@keyframes fall{
  from{ transform: translateY(-10vh); }
  to{ transform: translateY(115vh); }
}
.rain-field.rain-heavy{ opacity: 1; }
.rain-field.rain-light{ opacity: .45; }
.rain-field.rain-none{ opacity: .12; }

/* soft mist so rain reads against the dark bg */
.rain-mist{
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(120,140,170,0.06), transparent 60%);
}

/* lightning: real flash overlay + brightness kick */
.flash-overlay{
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(235,240,255,0.9), rgba(210,220,245,0.25) 45%, transparent 75%);
  opacity: 0;
}
body.lightning-flash{ filter: brightness(1.55) contrast(1.05); }
body.lightning-flash .flash-overlay{ opacity: 1; }
body{ transition: filter .09s ease-out; }
.flash-overlay{ transition: opacity .09s ease-out; }

/* film grain over the whole experience, very subtle, adds texture */
.grain{
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- generic full-screen scene ---------- */
.scene{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 3;
  padding: 60px 32px;
  border-bottom: none;
}

/* ---------- hero ---------- */
.case-hero{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  background: radial-gradient(ellipse at 50% 20%, #17131a 0%, var(--ink) 70%);
  overflow: hidden;
  z-index: 3;
}
.case-hero .case-label{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0;
  animation: heroFade 1.2s ease forwards;
  animation-delay: .3s;
}
.case-hero h1{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(42px, 8vw, 92px);
  line-height: 1.06;
  letter-spacing: .01em;
  margin: 26px 0 30px;
  opacity: 0;
  animation: heroFade 1.4s ease forwards;
  animation-delay: .6s;
}
.case-hero .case-status{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  opacity: 0;
  animation: heroFade 1.2s ease forwards;
  animation-delay: 1.1s;
}
.case-hero .case-status strong{
  color: var(--oxblood-bright);
  font-weight: 600;
  margin-left: .6em;
}
.case-hero .case-badge{
  margin-top: 34px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  border: 1px solid var(--line);
  padding: 8px 18px;
  opacity: 0;
  animation: heroFade 1.2s ease forwards;
  animation-delay: 1.5s;
}
@keyframes heroFade{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}
.scroll-cue{
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--parchment-dim); opacity: 0;
  animation: heroFade 1s ease forwards, cueDrift 2.4s ease-in-out infinite;
  animation-delay: 2s, 2s;
}
@keyframes cueDrift{
  0%,100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 8px); }
}

/* ---------- file-opening transition ---------- */
.file-open{
  min-height: 46vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 3;
}
.file-open .seam{
  position: relative;
  width: min(420px, 70vw);
  height: 1px;
  background: var(--line);
}
.file-open .seam::before{
  content: "";
  position: absolute; top: 0; left: 0;
  height: 1px; width: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}
.file-open.in-view .seam::before{ transform: scaleX(1); }
.file-open .seam-label{
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--parchment-dim);
  opacity: 0; transition: opacity .8s ease .3s;
  white-space: nowrap;
}
.file-open.in-view .seam-label{ opacity: .7; }

/* ---------- scene one / two ---------- */
.scene-line{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(28px, 5.4vw, 56px);
  line-height: 1.3;
  max-width: 18ch;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
}
.scene-line em{
  font-style: normal;
  color: var(--oxblood-bright);
}
.scene.in-view .scene-line{ opacity: 1; transform: none; }
.scene-two .scene-line{ letter-spacing: .01em; }

/* ---------- evidence sections ---------- */
.evidence{
  padding: 100px 0;
  position: relative; z-index: 3;
  border-bottom: 1px solid var(--line);
}
.evidence .wrap{ max-width: 860px; }
.evidence-frame{
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 10px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease;
}
.evidence.in-view .evidence-frame{ opacity: 1; transform: none; }
.evidence-frame img{
  width: 100%; display: block;
  filter: grayscale(.35) saturate(.75) brightness(.7) contrast(1.15) sepia(.12);
  transition: filter .18s ease;
}
body.lightning-flash .evidence-frame img{
  filter: grayscale(.15) saturate(1) brightness(1.25) contrast(1.1) sepia(.05);
}
.evidence-caption{
  margin-top: 18px;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--parchment-dim);
  opacity: .75;
  letter-spacing: .02em;
  max-width: 52ch;
}
.evidence-text{
  margin-top: 26px;
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--parchment);
  opacity: .85;
  max-width: 56ch;
}
.evidence-text.dim{ color: var(--parchment-dim); }

/* ---------- narrative / interstitial text blocks between scenes ---------- */
.narrative{
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 32px;
  position: relative; z-index: 3;
}
.narrative p{
  font-family: 'EB Garamond', serif;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.8;
  font-style: italic;
  color: var(--parchment-dim);
  max-width: 42ch;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1s ease, transform 1s ease;
}
.narrative.in-view p{ opacity: .85; transform: none; }
.evidence-tag{
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 1.2em;
  display:flex; align-items:center; gap:.6em;
}
.evidence-tag::before{ content:""; width:22px; height:1px; background:var(--brass); display:inline-block; }
.evidence-tag span{ color: var(--parchment-dim); }

.evidence.wide .wrap{ max-width: 1040px; }

/* ---------- emotional beat ---------- */
.emotional{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 3;
  border-bottom: 1px solid var(--line);
}
.emotional .lines{ text-align: center; }
.emotional .q{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(26px, 5vw, 46px);
  color: var(--parchment-dim);
  margin: 0 0 .5em;
  opacity: 0; transform: translateY(10px);
  transition: opacity .9s ease, transform .9s ease;
}
.emotional .q:last-child{ margin-bottom: 0; color: var(--oxblood-bright); }
.emotional.q1 .q:nth-child(1){ opacity: 1; transform: none; }
.emotional.q2 .q:nth-child(1),
.emotional.q2 .q:nth-child(2){ opacity: 1; transform: none; }
.emotional.q3 .q:nth-child(1),
.emotional.q3 .q:nth-child(2),
.emotional.q3 .q:nth-child(3){ opacity: 1; transform: none; }

/* ---------- book reveal ---------- */
.book-reveal{
  padding: 110px 0;
  text-align: center;
  position: relative; z-index: 3;
  border-bottom: 1px solid var(--line);
}
.book-reveal .cover{
  width: min(340px, 62vw);
  margin: 0 auto 40px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px var(--shadow), 0 0 90px rgba(139,20,30,0.18);
  opacity: 0; transform: translateY(26px) scale(.92);
  transition: opacity 1.3s cubic-bezier(.2,.7,.3,1), transform 1.3s cubic-bezier(.2,.7,.3,1), box-shadow 1.3s ease;
}
.book-reveal.in-view .cover{
  opacity: 1; transform: translateY(0) scale(1);
  box-shadow: 0 50px 120px var(--shadow), 0 0 130px rgba(139,20,30,0.3);
}
.book-reveal p{
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--parchment-dim);
  max-width: 46ch; margin: 0 auto 36px;
}

/* ---------- ending / stamp ---------- */
.case-ending{
  padding: 120px 0 130px;
  text-align: center;
  position: relative; z-index: 3;
}
.stamp{
  display: inline-block;
  font-family: 'Cormorant SC', serif;
  font-weight: 700;
  font-size: clamp(30px, 6vw, 52px);
  letter-spacing: .06em;
  color: var(--oxblood-bright);
  border: 3px solid var(--oxblood-bright);
  padding: 14px 34px;
  transform: rotate(-4deg);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.stamp small{
  display:block;
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: .3em;
  color: var(--parchment-dim); margin-bottom: 6px;
}
.case-ending.in-view .stamp{ opacity: .92; transform: rotate(-4deg) scale(1); }
.case-ending p{
  margin: 40px auto 36px;
  max-width: 44ch;
  color: var(--parchment-dim);
  font-style: italic;
}
.case-ending p.ending-tagline{
  margin-top: -12px;
  color: var(--parchment);
  opacity: .9;
}

@media (max-width: 900px){
  .evidence .wrap{ max-width: 92vw; }
  .evidence.wide .wrap{ max-width: 94vw; }
}

@media (max-width: 640px){
  .case-hero{ padding: 0 20px; min-height: 100svh; }
  .case-hero h1{ font-size: clamp(34px, 11vw, 56px); }
  .case-hero .case-label{ font-size: 10.5px; letter-spacing: .28em; }
  .case-hero .case-status{ font-size: 11px; }
  .case-hero .case-badge{ font-size: 9.5px; padding: 7px 14px; margin-top: 26px; }
  .scroll-cue{ bottom: 26px; font-size: 9.5px; }

  .scene{ min-height: 100svh; padding: 50px 20px; }
  .scene-line{ font-size: clamp(24px, 8vw, 38px); max-width: 16ch; }

  .narrative{ min-height: 44vh; padding: 46px 20px; }
  .narrative p{ font-size: 17px; max-width: 30ch; line-height: 1.7; }

  .evidence{ padding: 60px 0; }
  .evidence .wrap{ max-width: 94vw; padding: 0 4px; }
  .evidence-frame{ padding: 6px; }
  .evidence-tag{ font-size: 10px; letter-spacing: .2em; margin-bottom: 1em; }
  .evidence-caption{ font-size: 13.5px; max-width: 100%; }
  .evidence-text{ font-size: 16px; line-height: 1.7; max-width: 100%; }

  .emotional{ min-height: 70vh; }
  .emotional .q{ font-size: clamp(22px, 7.5vw, 32px); }

  .book-reveal{ padding: 70px 0; }
  .book-reveal .cover{ width: min(240px, 68vw); margin-bottom: 30px; }
  .book-reveal p{ font-size: 17px; max-width: 30ch; }

  .case-ending{ padding: 80px 0 90px; }
  .stamp{ font-size: clamp(26px, 9vw, 38px); padding: 12px 24px; }
  .case-ending p{ max-width: 30ch; font-size: 16px; }

  .btn.primary{ padding: 14px 26px; font-size: 13px; }

  .rain-field .drop{ width: 1px; }
}

@media (max-width: 380px){
  .case-hero h1{ font-size: 30px; }
  .scene-line{ font-size: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .rain-field{ display: none; }
  .scene-line, .evidence-frame, .book-reveal .cover, .stamp, .emotional .q, .narrative p{
    opacity: 1 !important; transform: none !important;
  }
}