@font-face {
  font-family: "Telly Display";
  src: url("/telly-room-v1/assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #f0ecdf;
  --ink: #050507;
  --cyan: #55e7ee;
  --magenta: #ef397d;
  --gold: #efd45d;
  --acid: #e9ff57;
  --violet: #7a5cff;
  --edge: rgba(240, 236, 223, 0.24);
  --field-x: 50%;
  --field-y: 50%;
  --portal-width: 1px;
  --portal-opacity: 0.18;
  --portal-label-opacity: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
}

html {
  overflow: hidden;
}

body {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a,
button {
  color: inherit;
}

button {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 1rem;
  left: 50%;
  padding: 0.7rem 0.9rem;
  translate: -50% -180%;
  border: 1px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: translate 160ms ease;
}

.skip-link:focus {
  translate: -50% 0;
}

#field,
.field-wash,
.rupture {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#field {
  z-index: 0;
  display: block;
}

.field-wash {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--field-x) var(--field-y), rgba(85, 231, 238, 0.08), transparent 8%),
    radial-gradient(circle at 18% 86%, rgba(239, 57, 125, 0.06), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(122, 92, 255, 0.05), transparent 30%);
  mix-blend-mode: screen;
  transition: opacity 800ms ease;
}

.field-wash::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.13;
  background:
    repeating-linear-gradient(93deg, transparent 0 3px, rgba(240, 236, 223, 0.04) 3px 4px),
    repeating-linear-gradient(7deg, transparent 0 5px, rgba(240, 236, 223, 0.025) 5px 6px);
  mix-blend-mode: soft-light;
}

.identity {
  position: fixed;
  z-index: 8;
  top: clamp(1.1rem, 3vw, 2.5rem);
  left: clamp(1.1rem, 3vw, 2.75rem);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: min(34rem, 66vw);
  pointer-events: none;
  transition: opacity 500ms ease;
}

.identity__index {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(240, 236, 223, 0.3);
  border-radius: 50%;
  color: rgba(240, 236, 223, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.identity__text {
  min-width: 0;
}

.identity__role {
  max-width: 31rem;
  margin: 0.16rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  color: rgba(240, 236, 223, 0.48);
  font-size: clamp(0.48rem, 0.56vw, 0.61rem);
  line-height: 1.45;
  letter-spacing: 0.095em;
}

.identity__instagram {
  display: grid;
  width: 2.75rem;
  min-width: 44px;
  height: 2.75rem;
  min-height: 44px;
  margin-top: 0.22rem;
  margin-left: -0.8rem;
  place-items: center;
  color: rgba(240, 236, 223, 0.5);
  pointer-events: auto;
  transition: color 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.identity__instagram:hover,
.identity__instagram:focus-visible {
  color: var(--magenta);
  transform: rotate(-7deg) scale(1.06);
}

.identity__instagram-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.identity__instagram-dot {
  fill: currentColor;
  stroke: none;
}

.telly-nav {
  position: fixed;
  z-index: 14;
  top: max(0.5rem, env(safe-area-inset-top));
  left: 50%;
  width: 8.4rem;
  height: 4.9rem;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 420ms ease;
}

.telly-return {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(240, 236, 223, 0.9);
  text-decoration: none;
  pointer-events: auto;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.telly-return::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 0.2rem;
  content: "";
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 1.2rem rgba(85, 231, 238, 0.72), 0 0 2.4rem rgba(239, 57, 125, 0.36);
  opacity: 0.42;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.telly-return__rings {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.telly-return__ring {
  --ring-duration: 7s;
  --ring-tilt: 0deg;
  --ring-delay: 0ms;
  position: absolute;
  inset: 0.62rem 0.95rem;
  display: block;
  border: 1px solid currentColor;
  border-radius: 46% 54% 63% 37% / 58% 39% 61% 42%;
  opacity: 0.34;
  transform: rotate(var(--ring-tilt));
  animation: telly-ring-idle var(--ring-duration) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.telly-return__ring--one {
  --ring-duration: 6.8s;
  --ring-tilt: -13deg;
  --ring-delay: 0ms;
  inset: 0.72rem 1.08rem 0.64rem;
  color: var(--cyan);
}

.telly-return__ring--two {
  --ring-duration: 9.4s;
  --ring-tilt: 18deg;
  --ring-delay: 70ms;
  inset: 0.52rem 0.78rem 0.78rem;
  color: var(--magenta);
  opacity: 0.28;
}

.telly-return__ring--three {
  --ring-duration: 12.6s;
  --ring-tilt: -4deg;
  --ring-delay: 140ms;
  inset: 0.9rem 1.28rem 0.42rem;
  border-style: dashed;
  color: var(--paper);
  opacity: 0.22;
}

.telly-return__label {
  position: relative;
  z-index: 1;
  margin-top: -0.08rem;
  font-family: "Telly Display", Cormorant, Georgia, serif;
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-shadow: 0 0 1.4rem rgba(5, 5, 7, 0.86);
  transition: color 240ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.telly-return:hover .telly-return__label,
.telly-return:focus-visible .telly-return__label {
  color: #fff;
  transform: rotate(-3deg) scale(1.08);
}

.telly-return:hover::after,
.telly-return:focus-visible::after {
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(1.8);
}

.telly-return:hover .telly-return__ring,
.telly-return:focus-visible .telly-return__ring {
  opacity: 0.68;
  animation-play-state: paused;
}

@keyframes telly-ring-idle {
  0% { transform: rotate(var(--ring-tilt)) scale(0.9, 0.96); }
  48% { transform: rotate(calc(var(--ring-tilt) + 9deg)) scale(1.04, 0.9); }
  100% { transform: rotate(calc(var(--ring-tilt) - 6deg)) scale(0.94, 1.06); }
}

@keyframes telly-ring-release {
  0% { opacity: 0.72; transform: rotate(var(--ring-tilt)) scale(0.94); }
  42% { opacity: 0.86; }
  100% { opacity: 0; transform: rotate(calc(var(--ring-tilt) + 36deg)) scale(18); }
}

@keyframes telly-label-release {
  0%, 36% { opacity: 1; transform: rotate(-3deg) scale(1.08); }
  100% { opacity: 0; transform: rotate(4deg) scale(0.72); }
}

.sound-toggle {
  position: fixed;
  z-index: 12;
  top: clamp(1.1rem, 3vw, 2.5rem);
  right: clamp(1.1rem, 3vw, 2.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border: 0;
  background: transparent;
  color: rgba(240, 236, 223, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

.sound-toggle i {
  display: block;
  width: 1.8rem;
  height: 1px;
  overflow: hidden;
  background: rgba(240, 236, 223, 0.3);
}

.sound-toggle i::after {
  display: block;
  width: 42%;
  height: 100%;
  content: "";
  background: var(--cyan);
  transform: translateX(-110%);
  transition: transform 400ms ease;
}

[data-sound="on"] .sound-toggle i::after {
  transform: translateX(0);
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  color: var(--paper);
}

.sound-toggle:focus-visible,
.identity__instagram:focus-visible,
.telly-return:focus-visible,
.portal:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 5px;
}

.encounter {
  position: fixed;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  touch-action: none;
  transition: opacity 420ms ease;
}

.wordmark {
  position: absolute;
  z-index: 3;
  inset-inline: 7vw;
  top: 50%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: rgba(240, 236, 223, 0.14);
  font-size: clamp(2rem, 9.8vw, 10rem);
  font-weight: 300;
  line-height: 0.75;
  letter-spacing: -0.08em;
  pointer-events: none;
  transform: translateY(-50%);
}

.wordmark span {
  display: block;
  min-width: 0.52em;
  text-align: center;
  transform-origin: center;
  transition:
    color 700ms ease,
    opacity 700ms ease,
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 700ms ease;
}

.wordmark span:nth-child(1) { transform: translate(-4vw, -19vh) rotate(-18deg); }
.wordmark span:nth-child(2) { transform: translate(-7vw, 15vh) rotate(8deg); }
.wordmark span:nth-child(3) { transform: translate(3vw, -8vh) rotate(21deg); }
.wordmark span:nth-child(4) { transform: translate(-2vw, 20vh) rotate(-5deg); }
.wordmark span:nth-child(5) { transform: translate(4vw, -18vh) rotate(13deg); }
.wordmark span:nth-child(6) { transform: translate(7vw, 8vh) rotate(-14deg); }
.wordmark span:nth-child(7) { transform: translate(-1vw, -4vh) rotate(11deg); }
.wordmark span:nth-child(8) { transform: translate(5vw, 18vh) rotate(-20deg); }

[data-phase="detected"] .wordmark {
  color: rgba(240, 236, 223, 0.22);
}

[data-phase="detected"] .wordmark span:nth-child(odd) {
  color: rgba(85, 231, 238, 0.34);
}

[data-phase="consequence"] .wordmark span {
  opacity: 0.68;
  filter: blur(0.2px);
}

[data-phase="consequence"] .wordmark span:nth-child(3n + 1) {
  color: rgba(239, 57, 125, 0.58);
}

[data-phase="rupture"] .wordmark span:nth-child(even) {
  opacity: 0.05;
  transform: translateY(32vh) skewX(-24deg);
}

[data-phase="rupture"] .wordmark span:nth-child(odd) {
  color: rgba(233, 255, 87, 0.74);
  transform: translateY(-18vh) skewX(16deg);
}

[data-phase="threshold"] .wordmark {
  inset-inline: 12vw;
  color: rgba(240, 236, 223, 0.9);
}

[data-phase="threshold"] .wordmark span {
  opacity: 1;
  filter: none;
  transform: translate(0, 0) rotate(0);
}

[data-phase="portal"] .wordmark span,
[data-phase="crossing"] .wordmark span {
  opacity: 0;
  transform: translateY(var(--exit-y, -32vh)) scaleY(1.8);
}

[data-phase="portal"] .wordmark span:nth-child(even),
[data-phase="crossing"] .wordmark span:nth-child(even) {
  --exit-y: 32vh;
}

.invitation {
  position: absolute;
  z-index: 5;
  bottom: clamp(5.2rem, 11vh, 8rem);
  left: 50%;
  margin: 0;
  color: rgba(240, 236, 223, 0.52);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.56rem, 0.72vw, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 600ms ease, letter-spacing 900ms ease;
  white-space: nowrap;
}

[data-phase="detected"] .invitation {
  letter-spacing: 0.32em;
}

[data-phase="consequence"] .invitation,
[data-phase="rupture"] .invitation,
[data-phase="threshold"] .invitation,
[data-phase="portal"] .invitation,
[data-phase="crossing"] .invitation {
  opacity: 0;
}

.rupture {
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 0.65rem;
  pointer-events: none;
  opacity: 0;
}

.rupture span {
  display: block;
  height: clamp(2px, 0.42vh, 5px);
  background: var(--acid);
  transform: translateX(-110%);
}

.rupture span:nth-child(2) {
  width: 72%;
  margin-left: auto;
  background: var(--magenta);
  transform: translateX(140%);
}

.rupture span:nth-child(3) {
  width: 42%;
  margin-left: 18%;
  background: var(--cyan);
}

[data-phase="rupture"] .rupture {
  opacity: 0.82;
}

[data-phase="rupture"] .rupture span {
  animation: cut-through 1100ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

[data-phase="rupture"] .rupture span:nth-child(2) {
  animation-delay: 90ms;
}

[data-phase="rupture"] .rupture span:nth-child(3) {
  animation-delay: 180ms;
}

@keyframes cut-through {
  48% { transform: translateX(0); }
  55% { transform: translateX(0); }
  100% { transform: translateX(118%); }
}

.portal {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  display: grid;
  width: var(--portal-width);
  height: min(64svh, 38rem);
  place-items: center;
  overflow: hidden;
  border: 0;
  background: rgba(240, 236, 223, var(--portal-opacity));
  color: var(--ink);
  text-decoration: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 1500ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 900ms ease,
    box-shadow 1200ms ease,
    transform 900ms ease;
}

.portal__edge {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: var(--paper);
  box-shadow:
    0 0 18px rgba(85, 231, 238, 0.7),
    0 0 52px rgba(239, 57, 125, 0.28);
}

.portal__label {
  position: relative;
  display: grid;
  width: min(80%, 36rem);
  grid-template-columns: 1fr auto;
  align-items: end;
  opacity: var(--portal-label-opacity);
  transform: translateY(1.2rem);
  transition: opacity 500ms ease 650ms, transform 700ms ease 650ms;
}

.portal__label small {
  grid-column: 1 / -1;
  padding-bottom: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.58rem, 0.72vw, 0.72rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.portal__label strong {
  font-size: clamp(2.1rem, 6.8vw, 6.8rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.075em;
}

.portal__label i {
  padding-left: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.9rem, 1.4vw, 1.4rem);
  font-style: normal;
}

[data-phase="portal"] {
  --portal-width: min(72vw, 58rem);
  --portal-opacity: 0.97;
  --portal-label-opacity: 1;
}

[data-phase="portal"] .portal {
  pointer-events: auto;
  box-shadow:
    -22px 0 80px rgba(85, 231, 238, 0.11),
    22px 0 90px rgba(239, 57, 125, 0.12);
}

[data-phase="portal"] .portal__label {
  transform: translateY(0);
}

[data-phase="portal"] .portal:hover,
[data-phase="portal"] .portal:focus-visible {
  background: #ffffff;
  transform: translate(-50%, -50%) scale(1.015);
}

[data-phase="crossing"] {
  --portal-width: 102vw;
  --portal-opacity: 1;
  --portal-label-opacity: 0;
}

[data-phase="crossing"] .portal {
  pointer-events: none;
  transform: translate(-50%, -50%) scaleY(1.8);
}

[data-phase="crossing"] .identity,
[data-phase="crossing"] .telly-nav,
[data-phase="crossing"] .sound-toggle,
[data-phase="crossing"] .credit-spine,
[data-phase="crossing"] .field-wash {
  opacity: 0;
}

[data-returning="telly"] .telly-nav {
  pointer-events: none;
}

[data-returning="telly"] .telly-return {
  outline: 0;
}

[data-returning="telly"] .telly-return .telly-return__ring {
  animation: telly-ring-release 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--ring-delay) both;
  animation-play-state: running;
}

[data-returning="telly"] .telly-return__label {
  animation: telly-label-release 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-returning="telly"] .telly-return::after {
  animation: telly-field-release 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-returning="telly"] .identity,
[data-returning="telly"] .encounter,
[data-returning="telly"] .sound-toggle,
[data-returning="telly"] .credit-spine,
[data-returning="telly"] .field-wash,
[data-returning="telly"] .rupture {
  opacity: 0;
}

@keyframes telly-field-release {
  0% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); }
  58% { opacity: 0.18; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(900); }
}

.credit-spine {
  position: fixed;
  z-index: 8;
  right: clamp(1.1rem, 3vw, 2.75rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  left: clamp(1.1rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  color: rgba(240, 236, 223, 0.34);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.43rem, 0.5vw, 0.55rem);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.credit-spine span:nth-child(2) {
  text-align: center;
}

.credit-spine span:last-child {
  text-align: right;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 720px) {
  .identity {
    top: max(4.65rem, calc(env(safe-area-inset-top) + 4rem));
    gap: 0.62rem;
    max-width: calc(100vw - 6.2rem);
  }

  .identity__index {
    width: 1.75rem;
    height: 1.75rem;
  }

  .telly-nav {
    top: max(0.25rem, env(safe-area-inset-top));
    width: 7.5rem;
    height: 4.55rem;
  }

  .telly-return__label {
    font-size: 1.45rem;
  }

  .identity__role {
    max-width: 13.5rem;
    margin-top: 0.02rem;
    font-size: 0.56rem;
  }

  .identity__instagram {
    margin-top: 0.08rem;
    margin-left: -0.65rem;
  }

  .wordmark {
    inset-inline: 5vw;
    font-size: clamp(2rem, 13vw, 4.5rem);
  }

  [data-phase="threshold"] .wordmark {
    inset-inline: 6vw;
  }

  [data-phase="portal"] {
    --portal-width: calc(100vw - 2.2rem);
  }

  .portal {
    height: min(58svh, 31rem);
  }

  .portal__label {
    width: 80%;
  }

  .portal__label strong {
    font-size: clamp(2.3rem, 13.5vw, 4rem);
  }

  .credit-spine {
    grid-template-columns: 1fr;
    gap: 0.16rem;
    font-size: 0.54rem;
  }

  .credit-spine span:nth-child(2),
  .credit-spine span:last-child {
    text-align: left;
  }

  .invitation {
    bottom: 6.7rem;
  }
}

@media (max-height: 560px) {
  .credit-spine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .credit-spine span:nth-child(2) {
    text-align: center;
  }

  .credit-spine span:last-child {
    text-align: right;
  }

  .portal {
    height: calc(100svh - 6.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .field-wash::after {
    opacity: 0.08;
  }
}