/* Animatable exit aperture and specular sweep; unsupported browsers keep the
   opacity fade and a static highlight. */
@property --entry-aperture {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --entry-sheen {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 150%;
}
#entry-experience[hidden] {
  display: none !important;
}
#entry-experience {
  --es-entry-mark-size: min(45vw, 26rem);
  --es-entry-ink-height: 0.63;
  --es-entry-ink-offset: 0.016;
  --es-entry-fade-seconds: 1.4;
  --es-entry-particle-fps: 60;
  --entry-film: conic-gradient(
    from 200deg,
    color-mix(in oklab, var(--es-taste) 55%, transparent),
    color-mix(in oklab, var(--es-smell) 55%, transparent),
    color-mix(in oklab, var(--es-view) 55%, transparent),
    color-mix(in oklab, var(--es-move) 55%, transparent),
    color-mix(in oklab, var(--es-hear) 55%, transparent),
    color-mix(in oklab, var(--es-touch) 55%, transparent),
    color-mix(in oklab, var(--es-taste) 55%, transparent)
  );
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    calc(var(--es-entry-mark-size) * var(--es-entry-ink-height))
    auto auto;
  row-gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 1rem
    max(1rem, env(safe-area-inset-bottom));
  isolation: isolate;
  opacity: 1;
  transition:
    opacity calc(var(--es-entry-fade-seconds, 0.4) * 0.6s) ease-in
      calc(var(--es-entry-fade-seconds, 0.4) * 0.4s),
    --entry-aperture calc(var(--es-entry-fade-seconds, 0.4) * 1s)
      cubic-bezier(0.55, 0, 0.2, 1);
  overflow: hidden;
  /* Specimen light: a UV-lamp pool behind the mark, corona and abyss vignette. */
  background:
    radial-gradient(
      ellipse 46% 40% at 50% var(--es-entry-mark-center-y, 40%),
      color-mix(in oklab, var(--es-ground-lift) 70%, transparent),
      transparent 72%
    ),
    radial-gradient(
      ellipse 130% 95% at 50% var(--es-entry-mark-center-y, 40%),
      transparent 38%,
      color-mix(in oklab, var(--es-abyss) 92%, transparent) 100%
    ),
    color-mix(in srgb, var(--es-ground) 97%, transparent);
  color: var(--es-ink);
}
#entry-experience::before {
  content: "";
  grid-row: 1;
  width: var(--es-entry-mark-size);
  height: calc(var(--es-entry-mark-size) * var(--es-entry-ink-height));
  pointer-events: none;
}
.entry-sensory-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% var(--es-entry-mark-center-y, 40%);
  transition: transform calc(var(--es-entry-fade-seconds, 0.4) * 1s)
    cubic-bezier(0.5, 0, 0.2, 1);
}
.entry-mark {
  position: absolute;
  z-index: 1;
  width: var(--es-entry-mark-size);
  aspect-ratio: 1;
  left: 50%;
  top: var(--es-entry-mark-center-y);
  transform: translate(-50%, calc(-50% + var(--entry-float, 0px)))
    rotateX(var(--entry-tilt-x, 0deg)) rotateY(var(--entry-tilt-y, 0deg))
    rotate(var(--entry-spin, 0rad));
  perspective: 60rem;
  opacity: var(--es-entry-mark-opacity);
  animation: entry-brand-approach
    calc(var(--es-entry-approach-seconds, 3.8) * 1s)
    cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
/* Corona halo behind the profile. Pseudo-elements keep exactly three pieces. */
.entry-mark::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--es-glow-soft),
    var(--es-corona) 58%,
    transparent 100%
  );
  animation: entry-breathe calc(var(--es-dur-pulse, 4.2s)) var(--es-ease-breath)
    infinite alternate;
}
/* Presence point: the open profile's dot keeps a soft, breathing light. */
.entry-mark::after {
  content: "";
  position: absolute;
  left: 49.6%;
  top: 54.2%;
  width: 15%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--es-pore-hi) 70%, transparent),
    var(--es-glow) 42%,
    transparent 100%
  );
  opacity: calc(0.25 + var(--es-bloom-strength, 0.55));
  mix-blend-mode: screen;
  animation: entry-breathe calc(var(--es-dur-pulse, 4.2s)) var(--es-ease-breath)
    calc(var(--es-entry-approach-seconds, 3.8) * 1s) infinite alternate both;
}
.entry-particles,
.entry-particles-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entry-particles-back {
  z-index: 0;
}
.entry-particles {
  z-index: 2;
}
/* Fine film grain: ink-coloured specks through an alpha-noise mask, so it reads
   on both themes without a full-screen blend mode. */
.entry-sensory-field::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 3;
  pointer-events: none;
  opacity: calc(var(--es-grain-opacity, 0.05) * 2.4);
  background: var(--es-ink);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.9 0 0 0 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-size: 220px 220px;
  animation: entry-grain 0.9s steps(1, end) infinite;
}
.entry-exit:focus-visible {
  outline: none;
}
.entry-exit {
  appearance: none;
  position: absolute;
  right: max(1.5rem, env(safe-area-inset-right));
  top: max(1.5rem, env(safe-area-inset-top));
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--es-ink);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--es-dur-ui, 240ms) ease;
}
.entry-exit:hover {
  opacity: 1;
}
.entry-cross {
  font: 300 1.5rem/1 var(--es-font-body);
}
#entry-experience[data-keyboard="true"] .entry-exit:focus-visible {
  outline: 1px solid var(--es-muted);
  outline-offset: 0.2rem;
  border-radius: 50%;
}
body.entry-open
  :is(
    #overview,
    #telemetry,
    .es-telemetry,
    .wordmark,
    .brand-subtitle,
    .sequence-status
  ) {
  visibility: hidden !important;
  pointer-events: none;
}
@media (max-width: 600px) {
  #entry-experience {
    --es-entry-mark-size: 70vw;
  }
}

.entry-wordmark {
  position: relative;
  grid-row: 2;
  max-width: 100%;
  width: auto;
  margin: 0;
  color: var(--es-ink);
  font: var(--es-display-weight) clamp(1.6rem, 2.2vw, 2.4rem) / 1.1
    var(--es-font-display);
  letter-spacing: -0.055em;
  white-space: nowrap;
  animation: entry-wordmark-reveal 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both;
}
/* A 1px iris hairline draws outward beneath the settled wordmark. */
.entry-wordmark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: 3.4em;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--es-taste),
    var(--es-smell),
    var(--es-view),
    var(--es-move),
    var(--es-hear),
    var(--es-touch),
    transparent
  );
  opacity: 0.75;
  transform-origin: center;
  animation: entry-hairline 1.1s var(--es-ease-breath) 2.1s both;
}
.entry-descriptor {
  position: relative;
  grid-row: 3;
  margin: 0;
  color: var(--es-muted);
  font: 300 clamp(0.9rem, 1.1vw, 1.3rem) / 1.4 var(--es-font-body);
  letter-spacing: 0.02em;
  text-align: center;
  width: max-content;
  max-width: calc(100vw - 2rem);
  animation: entry-descriptor-reveal 900ms var(--es-ease-breath) 0.5s both;
}
.entry-descriptor[data-beat="1"] {
  animation: entry-descriptor-next 900ms var(--es-ease-breath) both;
}
.entry-wordmark,
.entry-descriptor {
  transition:
    translate calc(var(--es-entry-fade-seconds, 0.4) * 1s)
      cubic-bezier(0.5, 0, 0.2, 1),
    scale calc(var(--es-entry-fade-seconds, 0.4) * 1s)
      cubic-bezier(0.5, 0, 0.2, 1);
}
@media (max-height: 600px) {
  #entry-experience {
    --es-entry-mark-size: min(32vh, 10rem);
    row-gap: 0.65rem;
  }
  .entry-wordmark {
    font-size: clamp(1.25rem, 3vw, 1.8rem);
  }
  .entry-descriptor {
    font-size: var(--es-text-small);
  }
}
@keyframes entry-brand-approach {
  0% {
    transform: translate(-50%, calc(-50% + var(--entry-float, 0px)))
      rotateX(var(--entry-tilt-x, 0deg)) rotateY(var(--entry-tilt-y, 0deg))
      rotate(var(--entry-spin, 0rad)) scale(0.04);
    opacity: 0.1;
  }
  55% {
    transform: translate(-50%, calc(-50% + var(--entry-float, 0px)))
      rotateX(var(--entry-tilt-x, 0deg)) rotateY(var(--entry-tilt-y, 0deg))
      rotate(var(--entry-spin, 0rad)) scale(2.4);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, calc(-50% + var(--entry-float, 0px)))
      rotateX(var(--entry-tilt-x, 0deg)) rotateY(var(--entry-tilt-y, 0deg))
      rotate(var(--entry-spin, 0rad)) scale(0.8);
    opacity: var(--es-entry-mark-opacity);
  }
}
@keyframes entry-descriptor-reveal {
  0% {
    opacity: 0;
    filter: blur(6px);
    letter-spacing: 0.14em;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.02em;
  }
}
@keyframes entry-descriptor-next {
  0% {
    opacity: 0;
    filter: blur(6px);
    letter-spacing: 0.14em;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.02em;
  }
}
@keyframes entry-wordmark-reveal {
  0% {
    opacity: 0;
    filter: blur(10px);
    letter-spacing: 0.42em;
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: -0.055em;
  }
}
@keyframes entry-hairline {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.75;
  }
}
@keyframes entry-breathe {
  0% {
    opacity: 0.72;
    scale: 0.97;
  }
  100% {
    opacity: 1;
    scale: 1.03;
  }
}
@keyframes entry-grain {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-3%, 2%);
  }
  40% {
    transform: translate(2%, -3%);
  }
  60% {
    transform: translate(-4%, -1%);
  }
  80% {
    transform: translate(3%, 3%);
  }
}
/* Sustained slow frames: the field sheds grain and breathing halos. */
.entry-sensory-field[data-quality="lite"]::before {
  display: none;
}
.entry-sensory-field[data-quality="lite"] .entry-mark::before,
.entry-sensory-field[data-quality="lite"] .entry-mark::after {
  animation: none;
}

/* Pearlescent material: pore light to shadow, a thin-film iris sheen and a
   periodic pearl specular sweep. Only backgrounds animate; the assembly
   transforms and single SVG masks are unchanged. */
.entry-piece {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(
        112deg,
        transparent 40%,
        color-mix(in oklab, var(--es-pearl) 78%, transparent) 50%,
        transparent 60%
      )
      var(--entry-sheen) 0 / 280% 100% no-repeat,
    var(--entry-film),
    linear-gradient(
      158deg,
      var(--es-pore-hi) 0%,
      var(--es-pore) 44%,
      var(--es-pore-deep) 100%
    );
  background-blend-mode: normal, soft-light, normal;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  transform-origin: center;
  animation:
    entry-piece-assemble
      calc(var(--es-entry-approach-seconds, 3.8) * 1s - var(--piece-delay))
      cubic-bezier(0.18, 0.7, 0.25, 1) var(--piece-delay) both,
    entry-sheen 7s var(--es-ease-breath)
      calc(var(--es-entry-approach-seconds, 3.8) * 1s - 0.35s) infinite;
}
.entry-piece--0 {
  --piece-x: -18vw;
  --piece-y: -15vh;
  --piece-z: -600px;
  --piece-turn: -55deg;
  --piece-delay: 0s;
  mask-image: url("../brand/interface-piece-0.svg");
}
.entry-piece--1 {
  --piece-x: 20vw;
  --piece-y: 6vh;
  --piece-z: -300px;
  --piece-turn: 42deg;
  --piece-delay: 0.14s;
  mask-image: url("../brand/interface-piece-1.svg");
}
.entry-piece--2 {
  --piece-x: 3vw;
  --piece-y: 16vh;
  --piece-z: 220px;
  --piece-turn: 90deg;
  --piece-delay: 0.3s;
  mask-image: url("../brand/interface-piece-2.svg");
  /* A small pearl: specular point, pore body and deep rim on the dot itself. */
  background: radial-gradient(
    circle at 48.9% 52.8%,
    var(--es-pearl) 0,
    var(--es-pore-hi) 1.3%,
    var(--es-pore) 2.7%,
    var(--es-pore-deep) 4.1%
  );
}
@keyframes entry-piece-assemble {
  0% {
    opacity: 0;
    transform: translate3d(var(--piece-x), var(--piece-y), var(--piece-z))
      rotate(var(--piece-turn)) scale(0.18);
  }
  45% {
    opacity: 0.8;
    transform: translate3d(
        calc(var(--piece-x) * 0.18),
        calc(var(--piece-y) * 0.18),
        calc(var(--piece-z) * 0.12)
      )
      rotate(calc(var(--piece-turn) * 0.2)) scale(1.08);
  }
  76% {
    opacity: 1;
    transform: translate3d(
        calc(var(--piece-x) * 0.015),
        calc(var(--piece-y) * 0.015),
        0
      )
      rotate(calc(var(--piece-turn) * 0.02)) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}
@keyframes entry-sheen {
  0% {
    --entry-sheen: 150%;
  }
  24%,
  100% {
    --entry-sheen: -50%;
  }
}

/* The exit opens an aperture from the mark into the room beneath. The mask
   exists only while leaving and starts fully opaque, so nothing jumps. */
#entry-experience[data-phase="leaving"] {
  --entry-aperture: 190vmax;
  opacity: 0;
  pointer-events: none;
  mask-image: radial-gradient(
    circle at 50% var(--es-entry-mark-center-y, 40%),
    transparent calc(var(--entry-aperture) - 22vmax),
    var(--es-ground) var(--entry-aperture)
  );
}
#entry-experience[data-phase="leaving"] .entry-sensory-field {
  transform: scale(1.35);
}
#entry-experience[data-phase="leaving"] .entry-wordmark,
#entry-experience[data-phase="leaving"] .entry-descriptor {
  translate: 0 0.5rem;
  scale: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  #entry-experience {
    --es-entry-fade-seconds: 0.18;
    transition: opacity 0.18s ease;
  }
  #entry-experience[data-phase="leaving"] {
    --entry-aperture: 0px;
  }
  #entry-experience[data-phase="leaving"] .entry-sensory-field,
  #entry-experience[data-phase="leaving"] .entry-wordmark,
  #entry-experience[data-phase="leaving"] .entry-descriptor {
    transform: none;
    translate: none;
    scale: none;
  }
  .entry-mark {
    animation: none;
    transform: translate(-50%, calc(-50% + var(--entry-float, 0px)))
      rotate(var(--entry-spin, 0rad)) scale(0.8);
  }
  .entry-mark::before,
  .entry-mark::after,
  .entry-sensory-field::before,
  .entry-wordmark,
  .entry-wordmark::after,
  .entry-descriptor,
  .entry-descriptor[data-beat="1"] {
    animation: none;
  }
  .entry-piece {
    animation: none;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}