/* Progressive 3D enhancement for the OG Threshold site. The static page remains the fallback. */
.hero::before,
.gate,
.gate-line,
.living-scene-stage,
.scene-door-button,
.scene-unlock-prompt,
.scene-unlock-path,
.scene-unlock-target,
.scene-commit-button,
.scene-warning {
  display: none !important;
}

#threshold-portal-root {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

#threshold-portal-root canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  touch-action: pan-y !important;
  transition: opacity 900ms ease;
}

.is-portal-ready #threshold-portal-root canvas {
  opacity: 0.9;
}

#threshold-portal-root::before,
#threshold-portal-root::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transition: opacity 600ms ease, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 800ms ease;
}

#threshold-portal-root::before {
  width: min(29vw, 310px);
  height: min(53vh, 520px);
  border: 1px solid rgba(244, 241, 234, 0.23);
  border-radius: 50% 50% 2px 2px / 18% 18% 2px 2px;
  background: radial-gradient(ellipse at 50% 62%, rgba(143, 183, 255, 0.07), transparent 38%);
  box-shadow:
    0 0 0 12px rgba(244, 241, 234, 0.018),
    0 0 0 13px rgba(244, 241, 234, 0.075),
    0 0 60px rgba(143, 183, 255, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.46);
  transform: translate(-50%, -48%);
  opacity: 0.68;
  animation: portalFallbackBreathe 6.5s ease-in-out infinite;
}

#threshold-portal-root::after {
  z-index: 4;
  width: 1px;
  height: min(66vh, 630px);
  background: linear-gradient(transparent, rgba(244, 241, 234, 0.18), #f4f1ea, rgba(143, 183, 255, 0.2), transparent);
  box-shadow: 0 0 28px rgba(143, 183, 255, 0.16);
  transform: translate(-50%, -50%) scaleY(0.8);
  opacity: 0.52;
}

@keyframes portalFallbackBreathe {
  50% { transform: translate(-50%, -49%) scale(1.025); filter: brightness(1.18); }
}

.hero .center {
  z-index: 3;
}

.hero .sigils {
  z-index: 2;
}

.portal-button {
  isolation: isolate;
  background: rgba(11, 11, 11, 0.54) !important;
  backdrop-filter: blur(10px);
}

.portal-button::before {
  inset: 9px !important;
  border-radius: 50% !important;
  border-color: rgba(244, 241, 234, 0.34) !important;
  transform: none !important;
}

.portal-button::after {
  display: none !important;
}

.portal-trigger-core {
  position: relative;
  z-index: 2;
  display: block;
  width: 1px;
  height: 17px;
  background: rgba(244, 241, 234, 0.9);
  box-shadow: 0 0 12px rgba(244, 241, 234, 0.74), 0 0 25px rgba(143, 183, 255, 0.22);
  animation: portalCoreLure 2.6s ease-in-out infinite;
}

@media (max-width: 600px) {
  .hero .portal-button {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
}

@keyframes portalCoreLure {
  50% { height: 6px; opacity: 0.6; }
}

.hero::after {
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms ease, opacity 700ms ease;
}

.hero .mark,
.hero #threshold-title,
.hero .line,
.hero .small,
.hero .portal-button,
.hero .portal-hint,
.hero .hero-audio-button,
.hero .sigils,
.header,
.status-rail {
  transition:
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 700ms ease,
    filter 700ms ease !important;
}

.is-portal-opening .hero::after,
.is-portal-crossing-css .hero::after {
  transform: scale(1.15);
  filter: grayscale(1) contrast(1.3) brightness(0.72) blur(1px);
}

.is-portal-opening #threshold-portal-root,
.is-portal-crossing #threshold-portal-root,
.is-portal-crossing-css #threshold-portal-root {
  filter: brightness(1.38);
}

.is-portal-crossing #threshold-portal-root::before,
.is-portal-crossing-css #threshold-portal-root::before {
  transform: translate(-50%, -48%) scale(5.8);
  opacity: 0;
}

.is-portal-crossing #threshold-portal-root::after,
.is-portal-crossing-css #threshold-portal-root::after {
  transform: translate(-50%, -50%) scaleX(1800) scaleY(1.5);
  opacity: 0.94;
  filter: brightness(2.1);
}

.is-portal-crossing .hero .mark,
.is-portal-crossing-css .hero .mark {
  transform: translateY(-115vh) scale(0.8) !important;
  opacity: 0 !important;
}

.is-portal-crossing .hero #threshold-title,
.is-portal-crossing-css .hero #threshold-title {
  transform: translateX(110vw) !important;
  opacity: 0 !important;
}

.is-portal-crossing .hero .line,
.is-portal-crossing-css .hero .line {
  transform: translateX(-110vw) !important;
  opacity: 0 !important;
}

.is-portal-crossing .hero .small,
.is-portal-crossing .hero .portal-button,
.is-portal-crossing .hero .portal-hint,
.is-portal-crossing .hero .hero-audio-button,
.is-portal-crossing .hero .sigils,
.is-portal-crossing .header,
.is-portal-crossing .status-rail,
.is-portal-crossing-css .hero .small,
.is-portal-crossing-css .hero .portal-button,
.is-portal-crossing-css .hero .portal-hint,
.is-portal-crossing-css .hero .hero-audio-button,
.is-portal-crossing-css .hero .sigils {
  opacity: 0 !important;
  transform: scale(0.72) !important;
}

/* Contained living-site demonstration */
.contained-living-section {
  position: relative;
  z-index: 2;
  padding: clamp(100px, 15vw, 210px) clamp(20px, 7vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 50%, rgba(143, 183, 255, 0.07), transparent 27rem),
    var(--void);
}

.contained-living-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 241, 234, 0.035) 1px, transparent 1px);
  background-size: 72px 100%;
  opacity: 0.12;
  mask-image: linear-gradient(90deg, transparent, black 38%, black 86%, transparent);
}

.contained-living-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  align-items: center;
  gap: clamp(46px, 8vw, 130px);
  width: min(100%, 1360px);
  margin: 0 auto;
}

.contained-living-copy h2 {
  max-width: 560px;
  margin: 20px 0 24px;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.contained-living-copy > p:not(.section-kicker) {
  max-width: 460px;
  margin: 0;
  color: rgba(244, 241, 234, 0.58);
  font-size: clamp(0.92rem, 1.1vw, 1.06rem);
  line-height: 1.72;
}

.contained-living-toggle {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  min-height: 44px;
  margin-top: 30px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.28);
  color: var(--bone);
  background: transparent;
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.contained-living-toggle i {
  font-style: normal;
  font-size: 1rem;
  transition: transform 260ms ease;
}

.contained-living-toggle[aria-pressed="true"] i {
  transform: rotate(135deg);
}

.contained-living-window {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: polygon(6% 0, 94% 0, 100% 10%, 100% 90%, 94% 100%, 6% 100%, 0 90%, 0 10%);
  background: #090909;
  box-shadow: 0 55px 130px rgba(0, 0, 0, 0.56);
  transform: perspective(1200px) rotateY(-2deg);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contained-living-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(244, 241, 234, 0.18);
  background: radial-gradient(circle at 50% 50%, transparent, rgba(11, 11, 11, 0.54) 84%);
}

.contained-living-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1) contrast(1.18) brightness(0.44) blur(1px);
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 700ms ease, filter 900ms ease, transform 7s linear;
}

.contained-living-main {
  opacity: 1;
}

.contained-living-section.is-awake .contained-living-main {
  filter: grayscale(0.65) contrast(1.08) brightness(0.74);
  transform: scale(1.14);
}

.contained-living-section.is-branch-playing .contained-living-main {
  opacity: 0;
}

.contained-living-section.is-branch-playing .contained-living-branch {
  opacity: 1;
  filter: grayscale(0.5) contrast(1.06) brightness(0.78);
}

.contained-living-section.is-awake .contained-living-window {
  transform: perspective(1200px) rotateY(0) scale(1.018);
}

.contained-living-chrome {
  position: absolute;
  z-index: 5;
  inset: 22px 26px auto;
  display: flex;
  justify-content: space-between;
  color: rgba(244, 241, 234, 0.54);
  font-family: var(--display);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.contained-living-choice {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 69%;
  min-width: 120px;
  min-height: 44px;
  border: 1px solid rgba(244, 241, 234, 0.32);
  color: var(--bone);
  background: rgba(11, 11, 11, 0.58);
  font-family: var(--display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 450ms ease, transform 550ms ease, visibility 450ms ease;
}

.contained-living-section.is-choice-ready .contained-living-choice {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Preserve the OG portfolio; add only a small amount of spatial response. */
.portfolio-piece {
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, background 260ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-piece:hover {
    transform: translateY(-5px) perspective(1200px) rotateX(0.7deg);
  }
}

/* Shared cross-page threshold. */
.threshold-page-transition {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  color: #0b0b0b;
  background: var(--bone, #f4f1ea);
  clip-path: inset(50% 0 50%);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 560ms cubic-bezier(0.7, 0, 0.2, 1), visibility 560ms;
}

.threshold-page-transition img {
  width: 84px;
}

.threshold-page-transition span {
  position: absolute;
  bottom: 9vh;
  font-family: var(--display, sans-serif);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.is-page-crossing .threshold-page-transition {
  clip-path: inset(0);
  visibility: visible;
}

@media (max-width: 700px) {
  #threshold-portal-root::before {
    width: 52vw;
    height: 48vh;
    transform: translate(-50%, -46%);
  }

  #threshold-portal-root::after {
    height: 58vh;
  }

  .is-portal-ready #threshold-portal-root canvas {
    opacity: 0.82;
  }

  .contained-living-section {
    padding: 110px 18px 130px;
  }

  .contained-living-shell {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .contained-living-copy h2 {
    font-size: clamp(3.15rem, 15vw, 5.2rem);
  }

  .contained-living-window {
    aspect-ratio: 4 / 5;
    transform: none;
  }

  .contained-living-section.is-awake .contained-living-window {
    transform: scale(1.01);
  }

  .contained-living-chrome {
    inset: 18px 18px auto;
  }

  .threshold-page-transition img {
    width: 70px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    padding: 46px 16px 16px;
  }

  .hero .center {
    transform: translateY(-28px) scale(0.52);
    transform-origin: center center;
  }

  #threshold-portal-root::before {
    width: 190px;
    height: 310px;
  }

  #threshold-portal-root::after {
    height: 340px;
  }

  .hero-audio-button {
    left: 22px;
    top: 50%;
  }

  .hero .portal-button {
    width: 86px;
    height: 86px;
    min-width: 86px;
    min-height: 86px;
    margin-top: -8px;
  }

  .portal-hint {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #threshold-portal-root canvas {
    display: none !important;
  }

  #threshold-portal-root::before {
    animation: none;
  }

  .hero .mark,
  .hero #threshold-title,
  .hero .line,
  .hero .small,
  .hero .portal-button,
  .hero .portal-hint,
  .hero .hero-audio-button,
  .hero .sigils,
  .header,
  .status-rail {
    transition-duration: 1ms !important;
  }

  .contained-living-video {
    transition: opacity 1ms, filter 1ms;
  }
}