.threshold {
  position: relative;
  z-index: 30;
  min-height: max(100svh, 48rem);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  background: var(--forest);
  color: var(--white);
}
.threshold__media,
.threshold__media img,
.threshold__veil,
.threshold__aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.threshold__media { z-index: -5; }
.threshold__beat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  opacity: 0;
  filter: saturate(.92) contrast(1.03) brightness(.8);
  /* Long, soft dissolve — the day passes like weather, not a slideshow. */
  transition: opacity 3.4s cubic-bezier(.42, .08, .18, 1);
}
/* The base plate (the meal) is the complete static hero: visible without
   JavaScript, under reduced motion, and whenever the loop is not running. */
.threshold__beat.is-base { opacity: 1; }
/* Arrival: the room settles into frame once, while the loop is not yet live.
   The .is-live latch (added by home.js when the loop starts) hands the base
   plate's transform back to the per-beat drift without a mid-flight snap. */
.motion-ready .threshold__beats:not(.is-live) .threshold__beat.is-base {
  animation: hero-arrive 3s var(--ease-out);
}
.threshold__beat.is-current {
  opacity: 1;
}
/* One continuous, shared drift: every plate starts hero-breathe at the same
   moment (the .is-live latch), so during every crossfade the outgoing and
   incoming images move in perfect sync and opacity is the only thing that
   changes. The old per-beat restarts snapped the scale at each handoff —
   that was the visible jump. */
.threshold__beats.is-live .threshold__beat {
  animation: hero-breathe 46s ease-in-out infinite alternate;
}
.threshold__beats.is-paused .threshold__beat { animation-play-state: paused; }

/* The day-phase marker: the hour the room is living through, bottom left,
   with a gold hairline that fills across the beat. No control attached. */
.day-phase {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  bottom: 1.6rem;
  display: grid;
  gap: .7rem;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(20, 12, 8, .6);
}
.day-phase__label { min-width: 24ch; transition: opacity .5s ease; }
.day-phase__track {
  position: relative;
  width: 9rem;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}
.day-phase__track i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(199, 161, 94, .55);
  transform: scaleX(0);
  transform-origin: left center;
}
html[data-energy="wild"] .threshold__beat {
  filter: saturate(1.04) contrast(1.08) brightness(.76);
}
.threshold__veil {
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(28, 19, 12, .84) 0%, rgba(32, 23, 15, .6) 36%, rgba(30, 21, 14, .2) 62%, rgba(22, 15, 10, .52) 100%),
    linear-gradient(180deg, rgba(22, 15, 10, .44), transparent 38%, rgba(18, 12, 8, .62));
}
/* Film grain: a whisper of fractal noise over the photograph, so the room
   reads as shot on stock rather than rendered. data: URIs are allowed by
   the CSP's img-src; the layer is inert and below every word. */
.threshold__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 180px 180px;
}
/* The print-room frame: a gold hairline inset from the viewport with small
   corner ticks, the luxury-monograph treatment. Decorative, above the
   picture and grain, below nothing that carries words. */
.threshold__frame {
  position: absolute;
  inset: clamp(.9rem, 1.8vw, 1.5rem);
  z-index: 4;
  border: 1px solid rgba(209, 172, 113, .55);
  pointer-events: none;
}
.threshold__frame i {
  position: absolute;
  width: .9rem;
  height: .9rem;
  border: 0 solid rgba(209, 172, 113, .95);
}
.threshold__frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.threshold__frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.threshold__frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.threshold__frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.threshold__aurora {
  z-index: -3;
  opacity: .68;
  background:
    radial-gradient(circle at var(--pointer-x, 70%) var(--pointer-y, 32%), rgba(211, 170, 98, .2), transparent 16rem),
    radial-gradient(circle at 75% 62%, rgba(202, 86, 68, .2), transparent 25rem),
    radial-gradient(circle at 52% 26%, rgba(120, 143, 112, .18), transparent 28rem);
  mix-blend-mode: screen;
  transition: opacity .8s ease;
}
html[data-energy="wild"] .threshold__aurora { opacity: 1; }

.threshold__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .82fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
  padding-top: clamp(7rem, 12vh, 10rem);
  padding-bottom: clamp(6rem, 10vh, 8rem);
}
.threshold__copy { max-width: 47rem; }
.threshold .eyebrow {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  color: rgba(255, 253, 248, .72);
}
.threshold .eyebrow span:last-child {
  padding-left: 1.1rem;
  border-left: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--han);
  letter-spacing: .3em;
}
.threshold h1 {
  margin: 0;
  max-width: 10ch;
  font-family: var(--serif);
  font-size: clamp(4.4rem, 9.5vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .8;
  text-wrap: balance;
}
.threshold h1 em {
  color: var(--coral-bright);
  font-weight: 400;
  text-shadow: 0 0 46px rgba(225, 96, 75, .15);
}
.threshold__deck {
  max-width: 39rem;
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  color: rgba(255, 253, 248, .82);
  font-family: var(--serif);
  font-size: clamp(1.22rem, 1.6vw, 1.55rem);
  line-height: 1.45;
}
.threshold__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.2rem;
}

.living-mark {
  --mark-x: 0px;
  --mark-y: 0px;
  --mark-turn: 0deg;
  position: relative;
  justify-self: center;
  width: min(31vw, 27rem);
  aspect-ratio: 3 / 5;
  margin: 0;
  transform: translate3d(var(--mark-x), var(--mark-y), 0) rotate(var(--mark-turn));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease-out);
}
.living-mark::after {
  content: "";
  position: absolute;
  inset: 10% -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 67%);
  filter: blur(18px);
}
.living-mark img {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .28));
  will-change: transform;
}
.living-mark__ghost { opacity: .12; transform: scale(1.11); filter: blur(1px) saturate(.3); }
.living-mark__dragon {
  clip-path: inset(0 0 46% 0);
  transform: translate3d(-.5rem, -.65rem, 24px) rotate(-1.8deg);
  animation: dragon-breathe 8.5s ease-in-out infinite;
}
.living-mark__phoenix {
  clip-path: inset(42% 0 0 0);
  transform: translate3d(.45rem, .7rem, 42px) rotate(1.6deg);
  animation: phoenix-breathe 7s ease-in-out infinite reverse;
}
html[data-energy="wild"] .living-mark__dragon { animation-duration: 5.8s; }
html[data-energy="wild"] .living-mark__phoenix { animation-duration: 4.8s; }

.living-mark__orbit {
  position: absolute;
  z-index: 1;
  inset: 12% -24%;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  transform: rotate(-16deg);
}
.living-mark__orbit::before,
.living-mark__orbit::after {
  content: "";
  position: absolute;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 20px rgba(199, 161, 94, .8);
}
.living-mark__orbit::before { top: 17%; left: 7%; }
.living-mark__orbit::after { right: 8%; bottom: 19%; background: var(--coral-bright); }
.living-mark__orbit--one { animation: orbit-turn 24s linear infinite; }
.living-mark__orbit--two { inset: 20% -12%; transform: rotate(32deg); opacity: .7; animation: orbit-turn 31s linear infinite reverse; }
.living-mark__orbit--three { inset: 28% 0; transform: rotate(67deg); opacity: .45; animation: orbit-turn 39s linear infinite; }
.living-mark__glow {
  position: absolute;
  z-index: 0;
  inset: 18% 3%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(119, 133, 109, .2), rgba(255, 255, 255, .08), rgba(200, 93, 77, .24), rgba(119, 133, 109, .2));
  filter: blur(28px);
  animation: glow-pulse 6s ease-in-out infinite;
}
.living-mark figcaption {
  position: absolute;
  z-index: 6;
  right: -2.5rem;
  bottom: 10%;
  display: grid;
  gap: .35rem;
  color: rgba(255, 255, 255, .67);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.threshold__coordinates {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: 1.6rem;
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, .42);
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scroll-cue {
  position: absolute;
  z-index: 5;
  bottom: 1.4rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .72);
  font-size: .53rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(20, 12, 8, .6);
  transform: translateX(-50%);
}
.scroll-cue i {
  position: relative;
  width: 1px;
  height: 2.7rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: translateY(-100%);
  animation: cue-drop 2.2s var(--ease-out) infinite;
}

.duality {
  position: relative;
  z-index: 31;
  height: 520vh;
  background: var(--black);
  color: var(--white);
}
.duality__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 42rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--forest);
}
.duality__half {
  position: absolute;
  z-index: -5;
  top: 0;
  bottom: 0;
  width: 58%;
  transition: background-color .8s ease;
}
.duality__half--sage {
  left: 0;
  background:
    radial-gradient(circle at 70% 40%, rgba(174, 190, 163, .2), transparent 30rem),
    linear-gradient(130deg, #203b2f, #10231a 72%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  transform: translate3d(var(--duality-left, -6vw), 0, 0);
}
.duality__half--coral {
  right: 0;
  background:
    radial-gradient(circle at 25% 58%, rgba(255, 180, 142, .16), transparent 28rem),
    linear-gradient(230deg, #8f3027, #311c19 76%);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  transform: translate3d(var(--duality-right, 6vw), 0, 0);
}
.duality__texture {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .22;
  background:
    repeating-linear-gradient(105deg, transparent 0 70px, rgba(255, 255, 255, .025) 71px 72px),
    radial-gradient(circle at 50% 50%, transparent 0 23rem, rgba(255, 255, 255, .08) 23.05rem 23.1rem, transparent 23.2rem);
  mix-blend-mode: screen;
}
.duality__header {
  position: absolute;
  z-index: 7;
  top: clamp(6rem, 12vh, 9rem);
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
}
.duality__header .section-number { color: rgba(255, 255, 255, .62); }
.duality__header > p:last-child {
  max-width: 22rem;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.45;
}
.duality__mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(24vw, 18rem);
  aspect-ratio: 3 / 5;
  transform: translate(-50%, -50%) rotate(var(--duality-turn, 0deg)) scale(var(--duality-scale, .88));
  opacity: .86;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35));
}
.duality__mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.duality__dragon {
  clip-path: inset(0 0 46% 0);
  transform: translate3d(var(--duality-dragon-x, -1.2rem), var(--duality-dragon-y, -1.6rem), 0);
}
.duality__phoenix {
  clip-path: inset(42% 0 0 0);
  transform: translate3d(var(--duality-phoenix-x, 1.2rem), var(--duality-phoenix-y, 1.6rem), 0);
}
.duality__pairs {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.duality-pair {
  position: absolute;
  width: min(88vw, 86rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 22vw) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  opacity: 0;
  transform: translateY(2.5rem) scale(.97);
  filter: blur(12px);
  transition: opacity .42s ease, transform .72s var(--ease-out), filter .55s ease;
}
.duality-pair.is-active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.duality-pair > span {
  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .85;
  white-space: nowrap;
}
.duality-pair > span:first-child { text-align: right; }
.duality-pair > span:nth-of-type(2) { color: #ff9a82; }
.duality-pair > i { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.62), rgba(255,255,255,.12)); }
.duality-pair > small {
  position: absolute;
  top: calc(100% + 1.3rem);
  left: 50%;
  font-family: var(--han);
  font-size: .78rem;
  letter-spacing: .35em;
  color: rgba(255, 255, 255, .48);
  transform: translateX(-50%);
}
.duality__counter {
  position: absolute;
  z-index: 7;
  right: var(--gutter);
  bottom: clamp(2rem, 5vh, 4rem);
  margin: 0;
  color: rgba(255, 255, 255, .45);
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .15em;
}
.duality__counter span { color: var(--white); font-size: 1.5rem; }

@keyframes hero-arrive { from { transform: scale(1.055); } to { transform: scale(1); } }
@keyframes hero-breathe {
  from { transform: scale(1) translate3d(.4%, -.3%, 0); }
  to { transform: scale(1.055) translate3d(-.5%, .4%, 0); }
}
@keyframes dragon-breathe {
  0%, 100% { transform: translate3d(-.5rem, -.65rem, 24px) rotate(-1.8deg); }
  50% { transform: translate3d(.15rem, -.1rem, 34px) rotate(.5deg); }
}
@keyframes phoenix-breathe {
  0%, 100% { transform: translate3d(.45rem, .7rem, 42px) rotate(1.6deg); }
  50% { transform: translate3d(-.18rem, .05rem, 48px) rotate(-.8deg); }
}
@keyframes orbit-turn { to { transform: rotate(344deg); } }
@keyframes glow-pulse { 0%,100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes cue-drop { 0% { transform: translateY(-105%); } 45%, 100% { transform: translateY(105%); } }