:root {
      --bg: #0b0b0c;
      --text: #f2f2f2;
      --muted: rgba(255, 255, 255, .6);

      --radius: 150px;
      /* flashlight radius */
      --soft: 70px;
      /* edge softness */
    }

    body {
      margin: 0;
      height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow: hidden;

      --x: 50%;
      --y: 50%;
    }

    /* Visible content always on top */
    .ui {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 10;
      pointer-events: none;
      padding: 24px;
      text-align: center;
      user-select: none;
    }

    .main-text {
      font-size: 2.2rem;
      font-weight: 650;
      letter-spacing: .2px;
      pointer-events: auto;
    }

    .sub-text {
      margin-top: .55rem;
      font-size: .95rem;
      color: var(--muted);
      pointer-events: auto;
    }

    #eye {
      cursor: pointer;
      display: inline-block;
      transform: translateY(1px);
      transition: transform .15s ease, filter .15s ease;
      pointer-events: auto;
    }

    #eye:hover {
      transform: translateY(0) scale(1.06);
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, .25));
    }

    /* Dark overlay to sell flashlight brightness */
    .dark-overlay {
      position: fixed;
      inset: 0;
      z-index: 1;
      background: radial-gradient(circle 300px at var(--x) var(--y),
          rgba(255, 255, 255, .06),
          rgba(0, 0, 0, .92) 55%,
          rgba(0, 0, 0, .98) 100%);
      opacity: 0;
      transition: opacity 350ms ease;
      pointer-events: none;
    }

    /* Secret layer revealed only within beam */
    .secret-layer {
      position: fixed;
      inset: 0;
      z-index: 5;
      /* above overlay, below UI */
      pointer-events: none;
      opacity: 0;
      transition: opacity 350ms ease;

      -webkit-mask-image: radial-gradient(circle var(--radius) at var(--x) var(--y),
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 1) calc(100% - var(--soft)),
          rgba(0, 0, 0, 0) 100%);
      mask-image: radial-gradient(circle var(--radius) at var(--x) var(--y),
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 1) calc(100% - var(--soft)),
          rgba(0, 0, 0, 0) 100%);
    }

    .fragment {
      position: absolute;
      max-width: 320px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .9);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
      backdrop-filter: blur(6px);
      font-size: .98rem;
      line-height: 1.35;
      letter-spacing: .2px;
    }

    .fragment small {
      display: block;
      margin-top: 6px;
      color: rgba(255, 255, 255, .7);
      font-size: .85rem;
    }

    .scribble {
      transform: rotate(-1.5deg);
    }

    .whisper {
      opacity: .9;
    }

    .glitchy {
      text-shadow: 0 0 12px rgba(255, 255, 255, .25);
    }

    /* Flashlight mode */
    body.flashlight-on {
      cursor: none;
    }

    body.flashlight-on .secret-layer,
    body.flashlight-on .dark-overlay {
      opacity: 1;
    }

    .hint {
      margin-top: 14px;
      font-size: .85rem;
      color: rgba(255, 255, 255, .38);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 350ms ease, transform 350ms ease;
    }

    body.flashlight-on .hint {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width:600px) {
      :root {
        --radius: 120px;
        --soft: 60px;
      }

      .main-text {
        font-size: 1.8rem;
      }
    }

    /* Hidden input to reliably capture typing */
    #keytrap {
      position: fixed;
      left: -9999px;
      top: -9999px;
      opacity: 0;
    }

    /* =========================
       DOORWAY TRANSITION OVERLAY
       ========================= */
    .doorway-overlay {
      position: fixed;
      inset: 0;
      z-index: 999;
      pointer-events: none;
      /* becomes clickable later */
      opacity: 0;
      transition: opacity 180ms ease;
      display: grid;
      place-items: center;
      background: #000;
      /* important: prevents seeing underlying page through “door” area */
    }

    .doorway-overlay.show {
      opacity: 1;
    }

    .doorway-overlay .stone {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1200px 700px at 50% 45%, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.96) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, rgba(0, 0, 0, 0) 1px 5px);
      filter: contrast(1.05) saturate(0.9);
    }

    .doorway-overlay .wash {
      position: absolute;
      inset: 0;
      opacity: 0;
      background: radial-gradient(650px 520px at 50% 50%, rgba(255, 230, 190, 0.65), rgba(0, 0, 0, 0) 70%);
      z-index: 4;
      pointer-events: none;
    }

    .doorway-overlay svg {
      width: min(520px, 78vw);
      height: auto;
      z-index: 3;
      overflow: visible;
    }

    /* Door outline draws in (slower) */
    .door-outline {
      fill: none;
      stroke: rgba(255, 210, 120, 0.92);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;

      stroke-dasharray: 1400;
      stroke-dashoffset: 1400;
      filter:
        drop-shadow(0 0 10px rgba(255, 200, 120, 0.25)) drop-shadow(0 0 22px rgba(255, 170, 90, 0.18));
      opacity: 0;
    }

    .doorway-overlay.show .door-outline {
      opacity: 1;
      animation: doorDraw 1500ms ease forwards;
      /* slowed */
    }

    @keyframes doorDraw {
      to {
        stroke-dashoffset: 0;
      }
    }

    /* Inner “portal” light (NOT a window to page) */
    .inner-glow {
      opacity: 0;
      filter: blur(0.5px);
    }

    .doorway-overlay.show .inner-glow {
      opacity: 1;
      animation: glowIn 950ms ease 550ms forwards, glowPulse 1250ms ease-in-out 1500ms infinite;
    }

    @keyframes glowIn {
      from {
        opacity: 0;
      }

      to {
        opacity: .95;
      }
    }

    @keyframes glowPulse {

      0%,
      100% {
        opacity: .75;
      }

      50% {
        opacity: 1;
      }
    }

    /* Door halves (cover the portal), then open (slower) */
    .door-half {
      fill: rgba(0, 0, 0, 0.95);
      opacity: 1;
    }

    .doorway-overlay.show .door-left {
      transform-box: fill-box;
      transform-origin: right center;
      animation: openLeft 1050ms cubic-bezier(.2, .9, .2, 1) 1850ms forwards;
    }

    .doorway-overlay.show .door-right {
      transform-box: fill-box;
      transform-origin: left center;
      animation: openRight 1050ms cubic-bezier(.2, .9, .2, 1) 1850ms forwards;
    }

    @keyframes openLeft {
      to {
        transform: scaleX(0);
        opacity: .2;
      }
    }

    @keyframes openRight {
      to {
        transform: scaleX(0);
        opacity: .2;
      }
    }

    /* Click-to-enter mode */
    body.awaiting-enter {
      cursor: auto !important;
      /* bring cursor back */
    }

    body.awaiting-enter .doorway-overlay {
      pointer-events: auto;
      cursor: pointer;
    }

    /* Entering the doorway: zoom + full white out */
    .doorway-overlay.entering svg {
      animation: enterZoom 900ms ease forwards;
    }

    @keyframes enterZoom {
      to {
        transform: scale(1.35);
      }
    }

    .doorway-overlay.entering .wash {
      animation: washToWhite 900ms ease forwards;
    }

    @keyframes washToWhite {
      0% {
        opacity: 0;
      }

      35% {
        opacity: 1;
      }

      100% {
        opacity: 1;
        background: radial-gradient(1200px 900px at 50% 50%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
      }
    }

    /* A gentle prompt under the door once it opens */
    .enter-hint {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      color: rgba(255, 255, 255, .75);
      font-size: .95rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: 0;
      pointer-events: none;
      text-shadow: 0 0 18px rgba(255, 210, 140, .18);
    }

    body.awaiting-enter .enter-hint {
      opacity: 1;
      transition: opacity 500ms ease;
    }