/* ==========================================================================
   NORD.LIVING — home.css  (homepage only)
   The gate: a full-screen carousel of real photos and renders across the three
   ranges, and the three doors into them. Every slide arrives "from the air":
   it drops in from high and blurred through a pass of mist, then drifts like a
   drone for as long as it is on screen. Driven by assets/js/home.js.
   ========================================================================== */

.page-home { background: var(--nl-charred-wood); }
.page-home main { background-color: var(--bg); }
/* :where() keeps this at element specificity, so sections that carry their own
   dark surface (.valuestrip, .why, .ctaband, .contact) keep it. With a class in
   the selector this rule used to win and left their light text on a light page. */
:where(.page-home) section { background-color: var(--bg); }

/* nav sits transparent over the dark gate, light ink until it goes solid */
.page-home .nav:not(.scrolled) .nav__links a { color: var(--nl-fog); }
.page-home .nav:not(.scrolled) .nav__links a:hover { color: var(--nl-sandstone); }
.page-home .nav:not(.scrolled) .nav__logo-img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
.page-home .nav:not(.scrolled) .nav__cta .btn--primary { background: var(--nl-fog); color: var(--nl-charred-wood); }
.page-home .nav:not(.scrolled) .nav__cta .btn--primary:hover { background: var(--nl-sandstone); }

/* ---------- frame ---------- */
.gate {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #1c1b1c;
  color: var(--nl-fog);
  isolation: isolate;
}

/* ---------- slides ---------- */
.gate__stage {
  position: absolute; inset: -3%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 1.2s var(--ease-premium);
  will-change: transform;
}
.gate__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  overflow: hidden;
}
.gate__slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  will-change: transform, filter;
}
.gate__slide.is-active,
.gate__slide.is-leaving { visibility: visible; }
.gate__slide.is-active  { opacity: 1; z-index: 2; }
.gate__slide.is-leaving { z-index: 1; }

/* Arrival from the air: the frame drops from high (scaled, blurred, slightly
   banked) through a widening iris of clear sky, then keeps drifting. */
.gate__slide.is-active img {
  animation:
    gate-descend 2.2s cubic-bezier(.16,.84,.26,1) both,
    gate-drift var(--drift, 9s) linear 2.2s both;
}
.gate__slide.is-active { animation: gate-iris 1.9s cubic-bezier(.3,.7,.2,1) both; }

/* The one leaving keeps flying forward past the camera and dissolves */
.gate__slide.is-leaving img { animation: gate-flypast 1.6s cubic-bezier(.55,0,.35,1) both; }
.gate__slide.is-leaving { animation: gate-fadeout 1.6s ease-in both; }

@keyframes gate-descend {
  0%   { transform: scale(1.55) rotate(var(--bank, -2deg)) translate3d(var(--fx, 0%), var(--fy, -4%), 0); filter: blur(14px) saturate(.6) brightness(1.25); }
  55%  { filter: blur(2px) saturate(.95) brightness(1.05); }
  100% { transform: scale(1.12) rotate(0) translate3d(0,0,0); filter: blur(0) saturate(1) brightness(1); }
}
@keyframes gate-drift {
  from { transform: scale(1.12) translate3d(0,0,0); }
  to   { transform: scale(1.02) translate3d(var(--dx, -1.5%), var(--dy, 1%), 0); }
}
@keyframes gate-iris {
  0%   { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); opacity: 1; }
  100% { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); opacity: 1; }
}
@keyframes gate-flypast {
  from { transform: scale(1.02); filter: blur(0) brightness(1); }
  to   { transform: scale(1.45); filter: blur(10px) brightness(1.3); }
}
@keyframes gate-fadeout { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- mist: a canvas of soft cloud that sweeps through on each change ---------- */
.gate__mist {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.gate__mist.is-passing { animation: mist-pass 2s cubic-bezier(.3,.6,.3,1) both; }
.gate__mist.is-passing.alt { animation-name: mist-pass-alt; }
.gate.is-intro .gate__mist { animation: mist-lift 2.6s cubic-bezier(.4,0,.2,1) both; }
@keyframes mist-pass {
  0%   { opacity: 0;   transform: scale(1.7) translate3d(8%, -6%, 0); }
  30%  { opacity: .9; }
  100% { opacity: 0;   transform: scale(1) translate3d(-6%, 4%, 0); }
}
@keyframes mist-pass-alt {
  0%   { opacity: 0;   transform: scale(1.7) translate3d(-8%, -4%, 0) scaleX(-1); }
  30%  { opacity: .9; }
  100% { opacity: 0;   transform: scale(1) translate3d(6%, 5%, 0) scaleX(-1); }
}
@keyframes mist-lift {
  0%   { opacity: 1;  transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.2) translate3d(0, -8%, 0); }
}

.gate__shade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,19,20,.55) 0%, rgba(20,19,20,0) 22%),
    linear-gradient(0deg, rgba(20,19,20,.88) 0%, rgba(20,19,20,.35) 34%, rgba(20,19,20,0) 58%),
    linear-gradient(90deg, rgba(20,19,20,.55) 0%, rgba(20,19,20,.2) 45%, rgba(20,19,20,0) 70%);
}

/* ---------- copy ---------- */
.gate__copy {
  position: absolute; left: 0; right: 0; z-index: 5;
  bottom: calc(210px + 7vh);
  pointer-events: none;
}
.gate__eyebrow {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500;
  color: var(--nl-sandstone); margin-bottom: 22px;
}
.gate__eyebrow span { display: inline-flex; align-items: center; gap: 14px; }
.gate__eyebrow span:first-child::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.gate__eyebrow span + span::before { content: "·"; margin-right: 8px; }
.gate__title {
  font-size: clamp(44px, 7.4vw, 118px);
  font-weight: 600; line-height: .98; letter-spacing: -.02em;
  color: var(--nl-fog);
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.gate__title em { font-weight: 300; font-style: italic; color: var(--nl-sandstone); }
.gate__line { display: block; overflow: hidden; padding-bottom: .06em; }
.gate__line > * { display: inline-block; }
.gate__sub {
  margin-top: 22px; max-width: 34ch;
  font-size: clamp(16px, 1.35vw, 19px); font-weight: 300; line-height: 1.55;
  color: rgba(241,241,236,.86);
}

/* ---------- caption + controls ---------- */
.gate__meta {
  position: absolute; left: 0; right: 0; z-index: 6;
  bottom: calc(150px + 3vh);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.gate__caption { display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
.gate__kind {
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--nl-sandstone);
  display: inline-flex; align-items: center; gap: 10px;
}
.gate__kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nl-moss); box-shadow: 0 0 0 4px rgba(147,148,116,.25); }
.gate__kind.is-real::before { background: #d9b26b; box-shadow: 0 0 0 4px rgba(217,178,107,.25); }
.gate__place { font-size: 15px; font-weight: 300; color: rgba(241,241,236,.92); }
.gate__caption.is-swapping > * { animation: gate-caption .9s var(--ease-premium) both; }
.gate__caption.is-swapping > *:nth-child(2) { animation-delay: .08s; }
@keyframes gate-caption { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.gate__ctrl { display: flex; align-items: center; gap: 10px; }
.gate__count { font-size: 12px; letter-spacing: .2em; margin-right: 10px; color: rgba(241,241,236,.7); font-variant-numeric: tabular-nums; }
.gate__count b { color: var(--nl-fog); font-weight: 600; }
.gate__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(241,241,236,.35);
  color: var(--nl-fog); font-size: 17px;
  display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(20,19,20,.18);
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base) var(--ease-premium);
}
.gate__arrow:hover { background: var(--nl-fog); color: var(--nl-charred-wood); border-color: var(--nl-fog); transform: scale(1.06); }
.gate__arrow:focus-visible, .door:focus-visible { outline: 2px solid var(--nl-sandstone); outline-offset: 3px; }

/* ---------- the three doors ---------- */
.gate__doors {
  position: absolute; left: 0; right: 0; z-index: 6;
  bottom: calc(28px + 2vh);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.door {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 20px 22px 22px;
  border-radius: 4px;
  border: 1px solid rgba(241,241,236,.22);
  background: rgba(28,27,28,.32);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--nl-fog);
  transition: background .5s var(--ease-premium), border-color .5s, transform .6s var(--ease-premium), box-shadow .6s;
}
.door::before {
  /* a light sweep across the glass when the door takes the stage */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(241,241,236,.16) 50%, transparent 70%);
  transform: translateX(-120%);
}
.door.is-live::before { animation: door-sweep 1.4s var(--ease-premium); }
@keyframes door-sweep { to { transform: translateX(120%); } }
.door:hover, .door.is-live {
  background: rgba(241,241,236,.14);
  border-color: rgba(241,241,236,.55);
}
.door:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.door__num { font-size: 12px; letter-spacing: .22em; color: var(--nl-sandstone); align-self: start; padding-top: 5px; }
.door__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.door__title { font-size: clamp(19px, 1.7vw, 25px); font-weight: 600; letter-spacing: -.005em; line-height: 1.1; }
.door__line { font-size: 13px; font-weight: 300; color: rgba(241,241,236,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.door__go {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  border: 1px solid rgba(241,241,236,.35);
  transition: background .4s, color .4s, transform .5s var(--ease-premium);
}
.door:hover .door__go, .door.is-live .door__go { background: var(--nl-fog); color: var(--nl-charred-wood); border-color: var(--nl-fog); }
.door:hover .door__go { transform: translateX(4px) rotate(-45deg); }
.door__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(241,241,236,.12); }
.door__bar i { display: block; height: 100%; width: 0; background: var(--nl-sandstone); }
.door.is-live .door__bar i { animation: door-fill var(--slide-ms, 6500ms) linear both; }
.gate.is-paused .door.is-live .door__bar i { animation-play-state: paused; }
@keyframes door-fill { to { width: 100%; } }

/* ---------- scroll cue ---------- */
.gate__down {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--nav-h) + 18px);
  display: none;
}

/* ---------- entrance choreography (first load) ---------- */
.gate:not(.is-ready) .gate__slide.is-active { animation: none; clip-path: none; }
.gate:not(.is-ready) .gate__slide.is-active img { animation: none; transform: scale(1.12); }
.gate.is-ready .gate__line > * { animation: gate-rise 1.3s cubic-bezier(.2,.8,.2,1) both; }
.gate.is-ready .gate__line:nth-child(2) > * { animation-delay: .15s; }
.gate.is-ready .gate__eyebrow { animation: gate-fade 1.2s .1s var(--ease-premium) both; }
.gate.is-ready .gate__sub { animation: gate-fade 1.2s .45s var(--ease-premium) both; }
.gate.is-ready .gate__meta { animation: gate-fade 1.2s .7s var(--ease-premium) both; }
.gate.is-ready .door { animation: door-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
.gate.is-ready .door:nth-child(1) { animation-delay: .55s; }
.gate.is-ready .door:nth-child(2) { animation-delay: .68s; }
.gate.is-ready .door:nth-child(3) { animation-delay: .81s; }
@keyframes gate-rise { from { transform: translateY(110%) skewY(4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gate-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes door-in { from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- the dive: clicked door → full-screen image → next page ---------- */
.gate-dive {
  position: fixed; z-index: 9999; pointer-events: none;
  overflow: hidden; border-radius: 4px;
  transition: inset .85s cubic-bezier(.7,0,.2,1), border-radius .85s;
}
.gate-dive img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.1s cubic-bezier(.7,0,.2,1), filter 1.1s; }
.gate-dive.is-open { border-radius: 0; }
.gate-dive.is-open img { transform: scale(1.5); filter: blur(6px) brightness(1.2); }
.gate-dive::after {
  content: attr(data-title);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(40px, 7vw, 110px); font-weight: 600; letter-spacing: -.02em; color: var(--nl-fog);
  text-shadow: 0 10px 50px rgba(0,0,0,.45);
  opacity: 0; transform: scale(.9); transition: opacity .6s .25s, transform .9s .25s var(--ease-premium);
}
.gate-dive.is-open::after { opacity: 1; transform: none; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .gate { min-height: 700px; }
  .gate__copy { bottom: auto; top: calc(var(--nav-h) + 8vh); }
  .gate__title { font-size: clamp(40px, 11vw, 64px); }
  .gate__sub { font-size: 15px; max-width: 30ch; }
  .gate__eyebrow { font-size: 10px; gap: 10px; }
  .gate__eyebrow span + span { display: none; }
  .gate__meta { bottom: 336px; }
  .gate__ctrl { display: none; }
  .gate__count { display: none; }
  .gate__doors { grid-template-columns: 1fr; gap: 8px; bottom: 92px; }
  .door { padding: 12px 14px 14px; gap: 12px; }
  .door__go { width: 32px; height: 32px; font-size: 14px; }
  .door__title { font-size: 18px; }
  .door__line { font-size: 12px; }
  .door:hover { transform: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .gate__sub { display: none; }
}

/* ---------- reduced motion: plain cross-fades, no flight ---------- */
@media (prefers-reduced-motion: reduce) {
  .gate__slide.is-active, .gate__slide.is-leaving,
  .gate__slide.is-active img, .gate__slide.is-leaving img { animation: none !important; clip-path: none !important; filter: none !important; transform: none !important; }
  .gate__slide { transition: opacity .8s ease; }
  .gate__slide.is-leaving { opacity: 0; }
  .gate__stage { transform: none !important; }
  .gate__mist { display: none; }
  .gate.is-ready .gate__line > *, .gate.is-ready .door, .gate.is-ready .gate__eyebrow,
  .gate.is-ready .gate__sub, .gate.is-ready .gate__meta { animation: none; }
}