/* NYXAR night: video background + full-bleed interactive photo chapters */

/* background video behind the whole page */
#night-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#081118;overflow:hidden;contain:strict}
#night-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.night-veil{position:absolute;inset:0;background:
  radial-gradient(120% 95% at 50% 36%, rgba(8,16,22,.10), rgba(8,16,22,.50) 68%, rgba(8,16,22,.82)),
  linear-gradient(180deg, rgba(29,67,95,.34), rgba(15,36,51,.18) 40%, rgba(8,16,22,.55))}
.night-veil::after{content:"";position:absolute;inset:0;background:rgba(7,15,20,.64);opacity:var(--veil,0);
  transition:opacity .2s linear;will-change:opacity}
#night-bg{--veil:0}

/* hero now sits straight on the video */
.hero{background:transparent!important}
.hero .hero-inner::before{background:radial-gradient(closest-side,rgba(6,13,18,.46),rgba(6,13,18,.14) 62%,transparent)!important}

/* chapters */
.chapter{position:relative;height:min(92vh,960px);min-height:560px;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;background:#081118;border-block:1px solid rgba(255,255,255,.06);cursor:crosshair;
  content-visibility:auto;contain-intrinsic-size:auto 860px}
.ch-media{position:absolute;inset:-4%;z-index:-2;contain:paint}
.ch-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 55%);display:block;max-width:none;
  transform:translate3d(calc(var(--px,0) * -28px), calc(var(--py,0) * -18px), 0) scale(var(--z,1.08));
  will-change:transform;backface-visibility:hidden}
.ch-base{filter:brightness(.52) saturate(.78) contrast(1.14)}

/* the lantern: a masked window that only ever moves, no per-frame repaint */
.ch-lens{position:absolute;left:0;top:0;width:var(--lens,860px);height:var(--lens,860px);overflow:hidden;
  opacity:var(--lit,.78);transition:opacity .5s ease;will-change:transform;
  transform:translate3d(calc(var(--lx,430px) - var(--lens,860px) / 2), calc(var(--ly,430px) - var(--lens,860px) / 2), 0);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.62) 38%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.62) 38%, transparent 72%)}
.ch-lens .ch-lit{width:var(--mw,100%);height:var(--mh,100%);inset:auto;
  filter:brightness(1.34) saturate(1.02) contrast(1.12);
  transform:translate3d(calc(var(--lens,860px) / 2 - var(--lx,430px)), calc(var(--lens,860px) / 2 - var(--ly,430px)), 0)
            translate3d(calc(var(--px,0) * -28px), calc(var(--py,0) * -18px), 0) scale(var(--z,1.08))}
.chapter::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,22,.62) 0%, rgba(8,16,22,0) 26%, rgba(8,16,22,0) 50%, rgba(8,16,22,.88) 100%)}
.ch-copy{position:relative;width:100%;padding-bottom:clamp(40px,7vh,84px)}
.ch-copy .eyebrow{margin-bottom:18px}
.ch-copy h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.02;color:#fff;
  font-size:clamp(36px,5.2vw,72px);max-width:19ch;text-wrap:balance;text-shadow:0 2px 40px rgba(4,10,15,.6)}
.ch-copy p{margin-top:18px;max-width:48ch;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:rgba(236,239,250,.82);text-shadow:0 1px 20px rgba(4,10,15,.8)}
.ch-hint,.ch-credit{position:absolute;font:600 10.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ch-hint{right:28px;bottom:28px;padding:9px 14px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(11,22,29,.55)}
.ch-credit{right:28px;top:24px;color:rgba(255,255,255,.42);letter-spacing:.08em}
@media (hover:none),(pointer:coarse){.ch-hint{display:none}.chapter{cursor:auto}}
@media (max-width:760px){.chapter{height:78vh;min-height:480px}.ch-credit{right:16px;top:14px}}

/* closing call on the tree photo */
.cta-night{background:
  linear-gradient(180deg, rgba(13,33,47,.62), rgba(40,91,128,.20) 50%, rgba(9,22,31,.86)),
  url("img/tree-2560.jpg") 50% 45% / cover no-repeat!important;
  border:1px solid rgba(255,255,255,.12)!important;min-height:480px;display:flex;flex-direction:column;justify-content:center}

/* violet grade: a soft glow over every photo chapter */
.chapter::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(85% 65% at 50% 28%, rgba(110,184,237,.20), transparent 70%),linear-gradient(180deg, rgba(55,119,165,.10), rgba(22,57,82,.16));mix-blend-mode:screen}

@media (prefers-reduced-motion:reduce){
  .ch-img{transform:scale(1.04)!important}
  .ch-lens{display:none}
}