/* The Living Threshold 2030: simplified signature response and crossing layer. */
.lt2030-threshold{
  --lt2030-state-a:#1d241d;
  --lt2030-state-b:#111914;
  --lt2030-state-light:rgba(208,183,127,.22);
  --lt2030-state-accent:#d0b77f;
}
.lt2030-threshold::before{
  transition:background 700ms ease,filter 700ms ease,opacity 500ms ease;
}
.lt2030-threshold[data-lt2030-state="river"]{
  --lt2030-state-a:#2f5a61;
  --lt2030-state-b:#10262a;
  --lt2030-state-light:rgba(154,218,224,.24);
  --lt2030-state-accent:#9ad4d9;
}
.lt2030-threshold[data-lt2030-state="forest"]{
  --lt2030-state-a:#405b45;
  --lt2030-state-b:#15241b;
  --lt2030-state-light:rgba(178,206,157,.22);
  --lt2030-state-accent:#bed7a6;
}
.lt2030-threshold[data-lt2030-state="quiet"]{
  --lt2030-state-a:#30312d;
  --lt2030-state-b:#111311;
  --lt2030-state-light:rgba(226,218,199,.15);
  --lt2030-state-accent:#ded7c7;
}
.lt2030-threshold[data-lt2030-state="sky"]{
  --lt2030-state-a:#4d7185;
  --lt2030-state-b:#15232d;
  --lt2030-state-light:rgba(190,220,236,.24);
  --lt2030-state-accent:#c2dce8;
}
.lt2030-threshold[data-lt2030-state]::before{
  background:
    radial-gradient(circle at 72% 28%,var(--lt2030-state-light),transparent 22rem),
    radial-gradient(circle at 18% 86%,rgba(82,107,109,.25),transparent 27rem),
    linear-gradient(135deg,var(--lt2030-state-b),var(--lt2030-state-a) 58%,var(--lt2030-state-b));
}
.lt2030-threshold[data-lt2030-state="quiet"]::after{
  opacity:.22;
}
.lt2030-threshold[data-lt2030-state="sky"]::after{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 44%),
    linear-gradient(0deg,rgba(194,220,232,.12),transparent 30%);
}
.lt2030-threshold[data-lt2030-state="river"]::after{
  background-image:repeating-radial-gradient(ellipse at 72% 82%,transparent 0 24px,rgba(204,238,241,.07) 25px 26px,transparent 27px 52px);
}
.lt2030-threshold[data-lt2030-state="forest"]::after{
  background-image:
    linear-gradient(82deg,transparent 0 16%,rgba(212,229,196,.045) 16.2% 17%,transparent 17.2% 39%,rgba(212,229,196,.035) 39.2% 40%,transparent 40.2%),
    radial-gradient(circle at 55% 115%,rgba(0,0,0,.34),transparent 48%);
}
.lt2030-threshold[data-lt2030-state] .breathing-mirror{
  color:var(--lt2030-state-accent);
}
.lt2030-threshold[data-lt2030-state] .breathing-mirror::before,
.lt2030-threshold[data-lt2030-state] .breathing-mirror::after{
  border-color:color-mix(in srgb,var(--lt2030-state-accent) 54%,transparent);
  transition:inset 650ms ease,border-radius 650ms ease,border-color 500ms ease,opacity 500ms ease,transform 650ms ease;
}
.lt2030-threshold[data-lt2030-state="river"] .breathing-mirror::before{
  inset:20% 5%;
  border-radius:50%;
  transform:scaleY(.55);
}
.lt2030-threshold[data-lt2030-state="river"] .breathing-mirror::after{
  inset:4% -4%;
  transform:scaleY(.72);
}
.lt2030-threshold[data-lt2030-state="forest"] .breathing-mirror::before{
  inset:13% 17% 5%;
  border-radius:48% 52% 42% 58%;
  transform:rotate(8deg);
}
.lt2030-threshold[data-lt2030-state="forest"] .breathing-mirror::after{
  inset:3% 8% 0;
  border-radius:54% 46% 58% 42%;
  transform:rotate(-7deg);
}
.lt2030-threshold[data-lt2030-state="quiet"] .breathing-mirror::before{
  inset:23%;
  opacity:.55;
}
.lt2030-threshold[data-lt2030-state="quiet"] .breathing-mirror::after{
  inset:8%;
  opacity:.25;
}
.lt2030-threshold[data-lt2030-state="sky"] .breathing-mirror::before{
  inset:28% 0 8%;
  border-radius:50% 50% 18% 18%;
  transform:scaleX(1.08);
}
.lt2030-threshold[data-lt2030-state="sky"] .breathing-mirror::after{
  inset:2% -8% 30%;
  border-radius:50%;
  opacity:.36;
}
.lt2030-threshold.lt2030-answering .breathing-mirror svg{
  animation:lt2030MirrorAnswer 720ms cubic-bezier(.2,.7,.2,1) both;
}
.lt2030-threshold .arrival-mirror>p{
  min-height:2.6em;
  max-width:28ch;
  margin:.85rem auto 0;
  color:#d9d3c8;
  font-size:.86rem;
  line-height:1.45;
  letter-spacing:.04em;
  text-transform:none;
  transition:color 400ms ease,opacity 300ms ease;
}
.lt2030-threshold[data-lt2030-state] .arrival-mirror>p{
  color:var(--lt2030-state-accent);
}
.lt2030-response{
  position:relative;
  overflow:hidden;
  transition:border-color 400ms ease,background 400ms ease,box-shadow 400ms ease;
}
.lt2030-threshold[data-lt2030-state] .lt2030-response{
  border-color:color-mix(in srgb,var(--lt2030-state-accent) 48%,transparent);
  background:linear-gradient(145deg,rgba(5,8,6,.58),rgba(20,25,20,.76));
  box-shadow:0 18px 48px rgba(0,0,0,.17),inset 3px 0 0 color-mix(in srgb,var(--lt2030-state-accent) 72%,transparent);
}
.lt2030-threshold[data-lt2030-state] .lt2030-selection{
  color:var(--lt2030-state-accent)!important;
}
.lt2030-threshold[data-lt2030-state] .arrival-choice[aria-pressed="true"]{
  border-color:var(--lt2030-state-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--lt2030-state-accent) 18%,transparent);
}
.lt2030-threshold[data-atmosphere="quiet"] .nature-motion-layer{
  opacity:0;
}
.lt2030-crossing{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:1.25rem;
  background:#111914;
  color:#f5efe4;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms ease,visibility 180ms ease;
}
.lt2030-crossing[hidden]{display:none}
.lt2030-crossing.is-active{
  opacity:1;
  visibility:visible;
}
.lt2030-crossing::before,
.lt2030-crossing::after{
  content:"";
  position:absolute;
  border:1px solid color-mix(in srgb,var(--lt2030-cross-accent,#d0b77f) 52%,transparent);
  border-radius:50%;
  width:min(58vw,420px);
  aspect-ratio:1;
  animation:lt2030CrossingBreath 1.8s ease-in-out infinite alternate;
}
.lt2030-crossing::after{
  width:min(76vw,560px);
  opacity:.36;
  animation-delay:-.9s;
}
.lt2030-crossing[data-room="river"]{--lt2030-cross-accent:#9ad4d9;background:radial-gradient(circle at 50% 70%,rgba(73,136,144,.35),transparent 45%),#10262a}
.lt2030-crossing[data-room="forest"]{--lt2030-cross-accent:#bed7a6;background:radial-gradient(circle at 50% 78%,rgba(91,126,73,.32),transparent 48%),#15241b}
.lt2030-crossing[data-room="quiet"]{--lt2030-cross-accent:#ded7c7;background:radial-gradient(circle,rgba(215,209,194,.12),transparent 42%),#111311}
.lt2030-crossing[data-room="fire"]{--lt2030-cross-accent:#f0b071;background:radial-gradient(circle at 50% 82%,rgba(190,83,38,.38),transparent 44%),#281713}
.lt2030-crossing[data-room="sky"]{--lt2030-cross-accent:#c2dce8;background:linear-gradient(180deg,#213b4b,#15232d 66%,#10171c)}
.lt2030-crossing-content{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:.6rem;
  text-align:center;
}
.lt2030-crossing-mark{
  width:58px;
  height:58px;
  border:1px solid var(--lt2030-cross-accent,#d0b77f);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--lt2030-cross-accent,#d0b77f);
  font-size:1.5rem;
}
.lt2030-crossing-title{
  font-family:var(--serif);
  font-size:clamp(1.55rem,4vw,2.5rem);
  font-weight:500;
}
.lt2030-crossing-note{
  max-width:34ch;
  color:rgba(255,255,255,.76);
}
@keyframes lt2030MirrorAnswer{
  0%{transform:scale(.94);opacity:.7}
  46%{transform:scale(1.08);opacity:1;filter:drop-shadow(0 0 42px color-mix(in srgb,var(--lt2030-state-accent) 42%,transparent))}
  100%{transform:scale(1);opacity:1}
}
@keyframes lt2030CrossingBreath{
  from{transform:scale(.88);opacity:.18}
  to{transform:scale(1.04);opacity:.55}
}
html.lt2030-simple-layout .lt2030-threshold::before{
  background:linear-gradient(135deg,#111914,#1d241d 56%,#111512)!important;
}
html.lt2030-contrast-increased .lt2030-threshold[data-lt2030-state] .lt2030-response{
  border-color:#fff;
  background:#000;
  box-shadow:inset 4px 0 0 #fff;
}
html.lt2030-contrast-increased .lt2030-crossing{
  background:#000!important;
  color:#fff;
}
html.lt2030-motion-reduced .lt2030-threshold::before,
html.lt2030-motion-reduced .lt2030-threshold .breathing-mirror::before,
html.lt2030-motion-reduced .lt2030-threshold .breathing-mirror::after,
html.lt2030-motion-reduced .lt2030-crossing,
html.lt2030-motion-reduced .lt2030-crossing::before,
html.lt2030-motion-reduced .lt2030-crossing::after,
html.lt2030-motion-none .lt2030-threshold::before,
html.lt2030-motion-none .lt2030-threshold .breathing-mirror::before,
html.lt2030-motion-none .lt2030-threshold .breathing-mirror::after,
html.lt2030-motion-none .lt2030-crossing,
html.lt2030-motion-none .lt2030-crossing::before,
html.lt2030-motion-none .lt2030-crossing::after{
  animation:none!important;
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  .lt2030-threshold::before,
  .lt2030-threshold .breathing-mirror::before,
  .lt2030-threshold .breathing-mirror::after,
  .lt2030-threshold.lt2030-answering .breathing-mirror svg,
  .lt2030-crossing,
  .lt2030-crossing::before,
  .lt2030-crossing::after{animation:none!important;transition:none!important}
}
@media(max-width:960px){
  .lt2030-threshold .arrival-mirror>p{display:none}
}
@media(max-width:620px){
  .lt2030-threshold[data-lt2030-state]::before{background-position:center}
  .lt2030-crossing::before{width:min(74vw,320px)}
  .lt2030-crossing::after{width:min(92vw,410px)}
}
/* The mirror is decorative and must never cover an arrival control on touch screens. */
.lt2030-threshold .arrival-mirror{pointer-events:none}