/* COUGAR COUNTY v4 — cinematic layer (on top of style.css). Bright, snowy look per Robert. */
:root{--lb:clamp(36px,10.5vh,120px);--ice:#EAF2F6;--sky:#8FB8D8}

/* brighter stills: the v3 images are sunny, let them breathe */
.v4 .scene__bg img,.v4 .bgvid{filter:saturate(1.06) contrast(1.02)}
.v4 .shade-bl{background:linear-gradient(to top,rgba(8,12,16,.86) 0%,rgba(8,12,16,.45) 34%,rgba(8,12,16,0) 62%),linear-gradient(to right,rgba(8,12,16,.55) 0%,rgba(8,12,16,0) 55%)}
.v4 .shade-top{background:linear-gradient(to bottom,rgba(8,12,16,.35) 0%,rgba(8,12,16,0) 40%),linear-gradient(to top,rgba(8,12,16,.6) 0%,rgba(8,12,16,0) 30%)}
.shade-frame{background:radial-gradient(90% 70% at 50% 55%,rgba(8,12,16,0) 40%,rgba(8,12,16,.55) 100%),linear-gradient(to top,rgba(8,12,16,.7),rgba(8,12,16,0) 45%)}

/* iris-wipe reveal of each still when its scene becomes active (combined with Ken Burns from style.css) */
.v4 .scene__bg{clip-path:inset(9% 0 9% 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.v4 .scene.is-active .scene__bg{clip-path:inset(0 0 0 0)}
.v4 .scene.hero .scene__bg{clip-path:none}

/* ---------- letterbox frames ---------- */
.letterbox i{position:absolute;left:0;right:0;height:var(--lb);background:#05080a;z-index:2;transform:scaleY(0);transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.letterbox i:first-child{top:0;transform-origin:top}
.letterbox i:last-child{bottom:0;transform-origin:bottom}
.scene.is-active .letterbox i{transform:scaleY(1);transition-delay:.15s}
.frame .slug{top:calc(var(--lb) + 22px);z-index:3}
.framecap{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--lb) + 34px);text-align:center;z-index:3}
.framecap__line{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,4vw,64px);line-height:1.05;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45);text-wrap:balance}
.framecap__sub{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ice);text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* subtitle-style anamorphic streak under the caption */
.framecap::after{content:"";display:block;margin:22px auto 0;width:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,149,82,.9),transparent);transition:width 2.2s 1.2s var(--ease)}
.scene.is-active .framecap::after{width:min(520px,70vw)}

/* ---------- split-word typography ---------- */
.w{display:inline-block;opacity:0;filter:blur(10px);transform:translate3d(0,.45em,0) rotate(2deg);transition:opacity 1.1s var(--ease),filter 1.3s var(--ease),transform 1.4s var(--ease);transition-delay:calc(var(--wd,0) * 1ms)}
.scene.is-active .w{opacity:1;filter:blur(0);transform:none}
.split.reveal{opacity:1;transform:none}
.v4 .hero .title{font-size:clamp(22px,3.4vw,58px);font-weight:300;text-shadow:0 2px 40px rgba(0,0,0,.35)}

/* ---------- light leaks ---------- */
.leak{position:fixed;inset:-20%;pointer-events:none;z-index:38;mix-blend-mode:screen;opacity:.0;transition:opacity 2.5s var(--ease)}
body.entered .leak{opacity:.32}
.leak::before,.leak::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)}
.leak::before{width:46vmax;height:30vmax;left:-6vmax;top:8vmax;background:radial-gradient(closest-side,rgba(255,170,90,.55),rgba(255,120,60,0));animation:leakA 19s ease-in-out infinite alternate}
.leak::after{width:38vmax;height:38vmax;right:-8vmax;bottom:2vmax;background:radial-gradient(closest-side,rgba(140,190,255,.45),rgba(120,170,255,0));animation:leakB 23s ease-in-out infinite alternate}
@keyframes leakA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(18vw,10vh) scale(1.25)}}
@keyframes leakB{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-14vw,-12vh) scale(.9)}}
.flare{position:fixed;inset:0;pointer-events:none;z-index:42;opacity:0;mix-blend-mode:screen;background:linear-gradient(100deg,rgba(255,190,120,0) 30%,rgba(255,200,140,.28) 48%,rgba(255,255,255,.12) 52%,rgba(255,190,120,0) 70%);transform:translateX(-60%)}
.flare.go{animation:flare 1.5s var(--ease)}
@keyframes flare{0%{opacity:0;transform:translateX(-60%)}35%{opacity:1}100%{opacity:0;transform:translateX(60%)}}

/* gate opens like a shutter */
.shutter{position:fixed;inset:0;z-index:90;pointer-events:none}
.shutter i{position:absolute;left:0;right:0;height:50.5%;background:#050706;transition:transform 1.9s cubic-bezier(.8,0,.15,1)}
.shutter i:first-child{top:0}.shutter i:last-child{bottom:0}
body.entered .shutter i:first-child{transform:translateY(-100%)}
body.entered .shutter i:last-child{transform:translateY(100%)}
body.locked .shutter{display:none}

/* ---------- foreground snow (depth layer) ---------- */
#snow2{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:43;filter:blur(1.6px);opacity:.75}

/* ---------- chapter progress ---------- */
.chapters{position:fixed;z-index:60;left:var(--pad);bottom:22px;display:flex;gap:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--frost);transition:opacity 1s}
body.locked .chapters,body.on-hero .chapters,body.on-end .chapters{opacity:0;pointer-events:none}
.chapters button{position:relative;padding:6px 0 9px;opacity:.5;transition:opacity .5s;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.chapters button b{font-weight:400;color:var(--sodium-hi);margin-right:7px}
.chapters button::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(234,242,246,.25)}
.chapters button span.fill{position:absolute;left:0;bottom:0;height:1px;width:var(--f,0%);background:var(--sodium-hi);transition:width .8s var(--ease);z-index:1}
.chapters button.on{opacity:1}
.chapters button:hover{opacity:.9}

/* ---------- character cards: hover life ---------- */
.v4 .people .card{perspective:900px}
.v4 .people .card__img{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .6s;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.v4 .people .card:hover .card__img{box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(201,149,82,.45)}
.v4 .people .card__img::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.28),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .5s;mix-blend-mode:soft-light}
.v4 .people .card:hover .card__img::after{opacity:1}
.v4 .card__img img{filter:saturate(1) brightness(.96)}
.v4 .card:hover .card__img img{transform:scale(1.035)}
.v4 .card__name{position:relative;display:inline-block}
.v4 .card__name::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--sodium-hi);transition:width .7s var(--ease)}
.v4 .card:hover .card__name::after{width:100%}
.v4 .card__txt{transition:color .5s}
.v4 .card:hover .card__txt{color:var(--fog)}

/* loop slot marker (WaterMurch) — invisible to viewers */
video[data-pending]{display:none}

@media (max-width:820px),(max-aspect-ratio:4/5){
  :root{--lb:clamp(28px,7vh,64px)}
  .chapters{display:none}
  .framecap__line{font-size:clamp(26px,8vw,40px)}
  #snow2{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  .v4 .scene__bg{clip-path:none!important;transition:none}
  .w{opacity:1;filter:none;transform:none;transition:none}
  .leak,.flare,#snow2,.shutter{display:none}
  .letterbox i{transform:scaleY(1);transition:none}
  .v4 .people .card__img{transform:none!important}
  .framecap::after{width:min(520px,70vw);transition:none}
}

/* legibility on bright stills */
.v4 .slug{text-shadow:0 1px 10px rgba(0,0,0,.55)}
.v4 .hero .content::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,90vw);height:260px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(8,12,16,.42),rgba(8,12,16,0));z-index:-1;pointer-events:none}
body.on-plain .chapters{opacity:0;pointer-events:none}
/* end card: "bright and beautiful" — only a soft pool behind the text */
.v4 .shade-deep{background:radial-gradient(48% 42% at 50% 48%,rgba(8,12,16,.72),rgba(8,12,16,.35) 60%,rgba(8,12,16,.08) 100%),linear-gradient(to top,rgba(8,12,16,.55),rgba(8,12,16,0) 25%)}
.v4 .end .content{text-shadow:0 1px 18px rgba(0,0,0,.7)}
.v4 .end .content{width:min(760px,calc(100% - 2*var(--pad)));padding:44px 30px 38px;background:rgba(8,12,16,.42);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);box-shadow:0 30px 80px rgba(0,0,0,.25)}

/* ---------- v7 FULL-FRAME & MOBILE CINEMA BAND FIX ---------- */
/* Desktop: stop over-cropping 16:9 story stills with -7vh and heavy letterbox bars */
.scene__bg { top: 0 !important; bottom: 0 !important; }
.scene__bg img { transform: scale(1.02); }
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(var(--kx,0),var(--ky,0),0); }
  to   { transform: scale(1.0) translate3d(0,0,0); }
}
.letterbox i { height: clamp(14px, 3.2vh, 32px) !important; }
.frame .slug { top: calc(clamp(14px, 3.2vh, 32px) + 18px) !important; }
.framecap { bottom: calc(clamp(14px, 3.2vh, 32px) + 24px) !important; }
.people .card__img img { object-position: var(--pos, 50% 35%) !important; transform: scale(1.01) !important; }
.people:not(.county) .card__txt { min-height: 9.2em; }

/* Mobile / Portrait (<4:5): display 16:9 story stills as an uncropped upper cinema band (like the A4 vertical PDF) so wide 2-character shots & faces are never chopped off */
@media (max-width: 820px), (max-aspect-ratio: 4/5) {
  .scene:not(.hero):not(.end):not(.plain):not(.writer):not(.cave):not(#the-evidence):not(#the-lions) .scene__bg {
    top: 54px !important;
    bottom: auto !important;
    height: 38vh !important;
    clip-path: none !important;
  }
  .scene.frame .scene__bg {
    top: 58px !important;
    bottom: auto !important;
    height: 44vh !important;
    clip-path: none !important;
  }
  .scene:not(.hero):not(.end):not(.plain):not(.writer):not(.cave):not(#the-evidence):not(#the-lions) .scene__bg img {
    object-fit: cover !important;
    object-position: 50% 35% !important;
    transform: none !important;
    animation: none !important;
  }
  .scene:not(.hero):not(.end):not(.plain):not(.writer):not(.cave):not(#the-evidence):not(#the-lions) .scene__shade {
    top: 54px !important;
    bottom: auto !important;
    height: 39vh !important;
    background: linear-gradient(to bottom, rgba(11,15,14,0.35) 0%, rgba(11,15,14,0) 22%, rgba(11,15,14,0) 68%, var(--bg) 100%) !important;
  }
  .scene.frame .scene__shade {
    top: 58px !important;
    height: 45vh !important;
  }
  .letterbox { display: none !important; }
  .scene:not(.hero):not(.end):not(.plain):not(.writer):not(.cave):not(.frame):not(#the-evidence):not(#the-lions) .slug {
    top: calc(54px + 38vh + 8px) !important;
  }
  .scene:not(.hero):not(.end):not(.plain):not(.writer):not(.cave):not(.frame):not(#the-evidence):not(#the-lions) .content {
    top: calc(54px + 38vh + 32px) !important;
    bottom: 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
  }
  .scene.frame .slug {
    top: 66px !important;
  }
  .scene.frame .framecap {
    top: calc(58px + 44vh + 24px) !important;
    bottom: auto !important;
  }
}

@media (max-width: 820px){.people:not(.county) .card__txt{min-height:11.2em}}