:root {
      --cyan: #00eaff;
      --pink: #ff2bd6;
      --yellow: #ffe600;
      --green: #79ff00;
      --violet: #7c35ff;
      --ink: #030104;
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --ease-soft: cubic-bezier(.22, .75, .24, 1);
      --ease-spring: cubic-bezier(.2, 1.18, .32, 1);
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow: hidden;
      background: #020104;
      color: #fff;
      font-family: "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    }

    body {
      background:
        radial-gradient(circle at 18% 18%, rgba(0, 234, 255, .12), transparent 24rem),
        radial-gradient(circle at 82% 72%, rgba(255, 43, 214, .13), transparent 26rem),
        radial-gradient(circle at 50% 46%, rgba(124, 53, 255, .1), transparent 35rem),
        #020104;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: -12%;
      pointer-events: none;
    }

    body::before {
      opacity: .62;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(0,234,255,.65) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,43,214,.52) 0 1px, transparent 1.6px);
      background-size: 117px 113px, 181px 173px, 239px 229px;
      background-position: 0 0, 35px 80px, 120px 20px;
      animation: starDrift 34s linear infinite;
    }

    body::after {
      inset: 0;
      opacity: .42;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, transparent 0 49.9%, rgba(255,255,255,.018) 50%, transparent 50.1%);
      mix-blend-mode: screen;
    }

    @keyframes starDrift {
      to { transform: translate3d(70px, 45px, 0) rotate(.4deg); }
    }

    button { font: inherit; }

    .splash {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle, rgba(0,234,255,.16), transparent 18rem),
        radial-gradient(circle at 50% 55%, rgba(255,43,214,.09), transparent 23rem),
        #020104;
      transition: opacity .52s ease, visibility .52s ease;
    }

    .splash.is-gone {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .splash-mark {
      width: clamp(112px, 20vw, 210px);
      height: auto;
      object-fit: contain;
      filter:
        drop-shadow(0 0 7px rgba(255,255,255,.7))
        drop-shadow(0 0 18px rgba(0,234,255,.65))
        drop-shadow(0 0 34px rgba(255,43,214,.52));
      animation: splashPulse 1.18s ease-in-out infinite alternate;
    }

    .splash-ring,
    .splash-ring::after {
      position: absolute;
      content: "";
      width: clamp(156px, 29vw, 286px);
      aspect-ratio: 1;
      border-radius: 50%;
      border: 1px solid rgba(0,234,255,.65);
      box-shadow: 0 0 18px rgba(0,234,255,.7), inset 0 0 16px rgba(255,43,214,.44);
      animation: ring 1.75s var(--ease-out) infinite;
    }

    .splash-ring::after {
      inset: 14%;
      width: auto;
      border-color: rgba(255,43,214,.58);
      animation-delay: .38s;
    }

    .splash-copy {
      position: absolute;
      top: calc(50% + clamp(105px, 18vw, 168px));
      letter-spacing: .36em;
      padding-left: .36em;
      font-size: clamp(.65rem, 1.7vw, .9rem);
      color: rgba(255,255,255,.72);
      text-transform: uppercase;
    }

    @keyframes splashPulse {
      from { transform: scale(.95) rotate(-1.2deg); }
      to { transform: scale(1.045) rotate(1.2deg); }
    }

    @keyframes ring {
      0% { transform: scale(.58); opacity: 0; }
      32% { opacity: 1; }
      100% { transform: scale(1.3); opacity: 0; }
    }

    .scene {
      position: fixed;
      inset: 0;
      z-index: 5;
      display: grid;
      place-items: center;
      perspective: 1650px;
      opacity: 0;
      transform: scale(.985);
      transition: opacity .62s ease, transform .62s var(--ease-out);
    }

    .scene.is-ready {
      opacity: 1;
      transform: scale(1);
    }

    .ambient-title {
      position: fixed;
      left: 50%;
      top: max(17px, env(safe-area-inset-top));
      transform: translateX(-50%);
      z-index: 3;
      color: rgba(255,255,255,.46);
      font-size: clamp(.61rem, 1.1vw, .78rem);
      letter-spacing: .33em;
      padding-left: .33em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: opacity .45s ease;
    }

    .scene.is-opening .ambient-title,
    .scene.is-interactive .ambient-title { opacity: 0; }

    /* CLOSED ENVELOPE */
    .envelope-wrap {
      position: relative;
      z-index: 30;
      width: min(780px, 90vw);
      aspect-ratio: 1.7;
      cursor: pointer;
      transform-style: preserve-3d;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      transition:
        opacity .62s ease,
        transform 1.05s var(--ease-out),
        filter .72s ease;
    }

    .envelope-wrap:focus-visible {
      filter: drop-shadow(0 0 .35rem white) drop-shadow(0 0 1.15rem var(--cyan));
    }

    .envelope-wrap::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -9%;
      height: 18%;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(0,0,0,.94), transparent 70%);
      filter: blur(12px);
      z-index: -3;
      transition: opacity .55s ease;
    }

    .envelope {
      position: absolute;
      inset: 0;
      border-radius: clamp(16px, 2.8vw, 30px);
      background:
        linear-gradient(145deg, rgba(255,255,255,.08), transparent 37%),
        linear-gradient(315deg, rgba(255,43,214,.07), transparent 46%),
        #09050f;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow:
        0 27px 78px rgba(0,0,0,.78),
        0 0 3px rgba(255,255,255,.78),
        0 0 15px rgba(0,234,255,.62),
        0 0 31px rgba(255,43,214,.28),
        inset 0 0 42px rgba(0,0,0,.72);
      transform-style: preserve-3d;
      overflow: visible;
    }

    .envelope::before {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(90deg, var(--cyan), var(--green), var(--yellow), var(--pink), var(--cyan));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .77;
      pointer-events: none;
      z-index: 40;
    }

    .envelope-paper {
      position: absolute;
      z-index: 2;
      left: 11.5%;
      right: 11.5%;
      top: 13%;
      height: 69%;
      border-radius: 16px 16px 7px 7px;
      background:
        linear-gradient(130deg, rgba(255,255,255,.12), transparent 34%),
        linear-gradient(315deg, rgba(0,234,255,.06), transparent 45%),
        #110817;
      box-shadow: 0 0 22px rgba(0,234,255,.22);
    }

    .flap {
      position: absolute;
      z-index: 16;
      inset: 0 0 37% 0;
      transform-origin: top center;
      transform: rotateX(0deg);
      transition: transform .9s var(--ease-out);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      background:
        linear-gradient(180deg, rgba(255,255,255,.09), transparent 44%),
        linear-gradient(135deg, #150a1d, #07030c 70%);
      border-radius: clamp(16px, 2.8vw, 30px) clamp(16px, 2.8vw, 30px) 0 0;
      backface-visibility: visible;
      box-shadow: inset 0 1px rgba(255,255,255,.13);
    }

    .flap::after {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: inherit;
      background: linear-gradient(100deg, transparent 20%, rgba(0,234,255,.19), transparent 49%, rgba(255,43,214,.22), transparent 77%);
      mix-blend-mode: screen;
    }

    .front-left,
    .front-right,
    .front-bottom {
      position: absolute;
      z-index: 20;
      inset: 0;
      pointer-events: none;
    }

    .front-left {
      clip-path: polygon(0 0, 50% 54%, 0 100%);
      background: linear-gradient(90deg, #09050f, #160b1d);
    }

    .front-right {
      clip-path: polygon(100% 0, 50% 54%, 100% 100%);
      background: linear-gradient(270deg, #08040d, #150a1c);
    }

    .front-bottom {
      clip-path: polygon(0 100%, 50% 53%, 100% 100%);
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent),
        #0e0714;
    }

    .printed-logo {
      position: absolute;
      z-index: 23;
      left: 50%;
      top: 7.2%;
      width: min(39%, 300px);
      height: auto;
      transform: translateX(-50%) rotate(-.6deg);
      object-fit: contain;
      opacity: .92;
      filter:
        saturate(.96)
        contrast(1.03)
        drop-shadow(0 0 4px rgba(255,150,0,.25));
      transition: opacity .28s ease, transform .48s ease;
      pointer-events: none;
    }

    .recipient {
      position: absolute;
      z-index: 24;
      left: 10%;
      right: 10%;
      top: 62%;
      text-align: center;
      transition: opacity .32s ease, transform .45s ease;
      pointer-events: none;
    }

    .recipient-kicker {
      display: block;
      margin-bottom: .46rem;
      color: var(--cyan);
      font-size: clamp(.61rem, 1.35vw, .82rem);
      letter-spacing: .38em;
      padding-left: .38em;
      text-transform: uppercase;
      text-shadow: 0 0 11px rgba(0,234,255,.7);
    }

    .recipient-name {
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-style: italic;
      font-weight: 600;
      font-size: clamp(1.36rem, 4.2vw, 3.18rem);
      line-height: 1.02;
      background: linear-gradient(90deg, var(--cyan), #fff 24%, var(--yellow) 53%, var(--pink) 82%, var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 9px rgba(255,43,214,.5));
      overflow-wrap: anywhere;
      max-height: 2.15em;
      overflow: hidden;
    }

    .open-prompt {
      position: absolute;
      z-index: 24;
      left: 50%;
      bottom: 7.2%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: .62rem;
      color: rgba(255,255,255,.73);
      font-size: clamp(.63rem, 1.42vw, .88rem);
      letter-spacing: .23em;
      padding-left: .23em;
      text-transform: uppercase;
      white-space: nowrap;
      animation: promptPulse 1.35s ease-in-out infinite alternate;
      transition: opacity .24s ease, transform .4s ease;
      pointer-events: none;
    }

    .open-prompt::before,
    .open-prompt::after {
      content: "✦";
      color: var(--yellow);
      text-shadow: 0 0 10px var(--yellow);
    }

    @keyframes promptPulse {
      to { opacity: .5; transform: translateX(-50%) translateY(3px); }
    }

    /* THE REAL FLYER: it rises as one intact sheet, then settles */
    .invitation-stage {
      position: fixed;
      z-index: 12;
      left: 50%;
      top: 50%;
      width: min(465px, 78vw, calc(75vh * .7064));
      aspect-ratio: 1054 / 1492;
      opacity: 0;
      pointer-events: none;
      transform-style: preserve-3d;
      transform:
        translate(-50%, -4%)
        scale(.43)
        rotateX(12deg)
        rotateZ(-1.2deg);
      filter: blur(.15px);
      transition:
        opacity .32s ease,
        transform 1.08s var(--ease-soft),
        filter .55s ease;
    }

    .card-3d {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      transition: transform .82s var(--ease-out);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      filter:
        drop-shadow(0 30px 42px rgba(0,0,0,.84))
        drop-shadow(0 0 13px rgba(0,234,255,.3));
      outline: none;
    }

    .card-3d:focus-visible {
      filter:
        drop-shadow(0 0 3px #fff)
        drop-shadow(0 0 16px rgba(0,234,255,.72))
        drop-shadow(0 30px 42px rgba(0,0,0,.84));
    }

    .card-3d::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      border-radius: 17px;
      pointer-events: none;
      background:
        linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.14) 44%, transparent 52% 100%);
      transform: translateX(-130%);
      opacity: 0;
    }

    .scene.is-presenting .card-3d::after {
      opacity: 1;
      animation: sheen .82s ease .2s both;
    }

    @keyframes sheen {
      to { transform: translateX(130%); opacity: 0; }
    }

    .card-3d.is-turning { pointer-events: none; }

    .card-face {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 16px;
      backface-visibility: hidden;
      background: #000;
      border: 1px solid rgba(255,255,255,.19);
      box-shadow:
        0 0 0 1px rgba(0,234,255,.2),
        0 0 24px rgba(255,43,214,.18);
    }

    .card-face.front {
      z-index: 2;
      opacity: 1;
    }

    .card-face.back {
      z-index: 1;
      opacity: 0;
    }

    .card-3d.show-back .card-face.front {
      z-index: 1;
      opacity: 0;
    }

    .card-3d.show-back .card-face.back {
      z-index: 2;
      opacity: 1;
    }

    .card-face img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      user-select: none;
      -webkit-user-drag: none;
    }

    .scene.is-opening .flap { transform: rotateX(178deg); }

    .scene.is-opening .printed-logo,
    .scene.is-opening .recipient,
    .scene.is-opening .open-prompt {
      opacity: 0;
      transform: translate(-50%, 9px) scale(.98);
    }

    .scene.is-opening .recipient {
      transform: translateY(9px) scale(.98);
    }

    .scene.is-extracting .invitation-stage {
      opacity: 1;
      transform:
        translate(-50%, -38%)
        scale(.48)
        rotateX(6deg)
        rotateZ(-.55deg);
      filter: blur(0);
    }

    .scene.is-clearing .envelope-wrap {
      opacity: 0;
      transform: translateY(34vh) scale(.82) rotateX(11deg);
      filter: blur(5px);
      pointer-events: none;
    }

    .scene.is-clearing .envelope-wrap::after { opacity: 0; }

    .scene.is-clearing .invitation-stage {
      opacity: 1;
      z-index: 36;
      transform:
        translate(-50%, -50%)
        scale(.75)
        rotateX(2deg)
        rotateZ(.2deg);
    }

    .scene.is-presenting .invitation-stage {
      opacity: 1;
      z-index: 36;
      transform:
        translate(-50%, -50%)
        scale(1.035)
        rotateX(0deg)
        rotateZ(0deg);
    }

    .scene.is-interactive .invitation-stage {
      opacity: 1;
      z-index: 36;
      transform:
        translate(-50%, -50%)
        scale(1)
        rotateX(0deg)
        rotateZ(0deg);
      pointer-events: auto;
    }

    .controls {
      position: fixed;
      z-index: 55;
      right: max(18px, env(safe-area-inset-right));
      top: 50%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transform: translateY(-50%) translateX(24px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .42s ease, transform .42s var(--ease-out);
    }

    .scene.is-interactive .controls {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
      pointer-events: auto;
    }

    .control-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 124px;
      border: 1px solid rgba(255,255,255,.23);
      border-radius: 999px;
      padding: .76rem 1rem;
      color: #fff;
      background: rgba(8,4,13,.84);
      backdrop-filter: blur(13px);
      box-shadow:
        0 0 14px rgba(0,234,255,.24),
        inset 0 0 12px rgba(255,43,214,.07);
      cursor: pointer;
      text-decoration: none;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .7rem;
      transition: transform .18s ease, border-color .18s ease;
    }

    .control-button:hover { transform: translateY(-1px); }

    .control-button.primary {
      border-color: rgba(255,43,214,.7);
      box-shadow:
        0 0 18px rgba(255,43,214,.44),
        inset 0 0 16px rgba(255,43,214,.11);
    }

    .card-side-label {
      position: fixed;
      z-index: 54;
      left: max(18px, env(safe-area-inset-left));
      top: 50%;
      max-width: 12rem;
      transform: translateY(-50%) translateX(-20px);
      opacity: 0;
      color: rgba(255,255,255,.54);
      font-size: .65rem;
      line-height: 1.6;
      letter-spacing: .16em;
      text-transform: uppercase;
      transition: opacity .42s ease, transform .42s var(--ease-out);
      pointer-events: none;
    }

    .card-side-label strong {
      display: block;
      margin-bottom: .34rem;
      color: var(--cyan);
      font-size: .72rem;
      letter-spacing: .2em;
      text-shadow: 0 0 10px rgba(0,234,255,.6);
    }

    .scene.is-interactive .card-side-label {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    @media (max-width: 1040px) {
      .card-side-label { display: none; }
      .controls {
        top: auto;
        left: 50%;
        right: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        transform: translateX(-50%) translateY(20px);
      }
      .scene.is-interactive .controls {
        transform: translateX(-50%) translateY(0);
      }
      .invitation-stage {
        width: min(445px, 77vw, calc(72vh * .7064));
        top: 47.5%;
      }
    }

    @media (max-width: 620px) {
      .ambient-title { display: none; }
      .envelope-wrap { width: 94vw; }
      .printed-logo { width: 41%; top: 7%; }
      .recipient { left: 6%; right: 6%; top: 61.5%; }
      .recipient-name { font-size: clamp(1.18rem, 6.2vw, 2.05rem); }
      .open-prompt { bottom: 6.2%; font-size: .58rem; gap: .4rem; }
      .invitation-stage {
        width: min(88vw, calc(72vh * .7064));
        top: 46.5%;
      }
      .controls {
        width: calc(100% - 18px);
        justify-content: center;
        gap: 8px;
      }
      .control-button {
        min-width: 0;
        padding: .69rem .82rem;
        font-size: .63rem;
      }
    }

    @media (max-height: 650px) and (orientation: landscape) {
      .envelope-wrap { width: min(680px, 78vw); }
      .invitation-stage {
        width: min(350px, calc(72vh * .7064));
        top: 46%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
      .splash { display: none; }
      .scene { opacity: 1; transform: none; }
    }


.zoom-open { overscroll-behavior: none; }

.zoom-viewer {
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

.zoom-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.zoom-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(45, 12, 68, .44), transparent 52%),
    rgba(1, 0, 3, .94);
  backdrop-filter: blur(14px);
}

.zoom-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}

.zoom-canvas img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: min(92vw, calc(92vh * .7064));
  max-height: 92vh;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    0 36px 80px rgba(0,0,0,.88),
    0 0 26px rgba(0,234,255,.28),
    0 0 38px rgba(255,43,214,.17);
  user-select: none;
  -webkit-user-drag: none;
}

.zoom-canvas img.is-zoomed { cursor: grab; }
.zoom-canvas:active img.is-zoomed { cursor: grabbing; }

.zoom-toolbar {
  position: absolute;
  z-index: 3;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(0,234,255,.34);
  border-radius: 999px;
  background: rgba(7,3,12,.78);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 22px rgba(0,234,255,.16), inset 0 0 18px rgba(255,43,214,.08);
}

.zoom-tool {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: #fff;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.zoom-tool:hover,
.zoom-tool:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 13px rgba(0,234,255,.38);
  outline: none;
}

.zoom-reset {
  min-width: 70px;
  color: var(--yellow);
  font-size: .7rem;
  letter-spacing: .08em;
}

.zoom-close {
  border-color: rgba(255,43,214,.55);
  color: var(--pink);
}

.zoom-help {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: .68rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  background: rgba(5,2,9,.72);
  backdrop-filter: blur(12px);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(.58rem, 1.4vw, .72rem);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .zoom-canvas img {
    max-width: 95vw;
    max-height: 86vh;
  }
  .zoom-toolbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .zoom-tool {
    min-width: 38px;
    height: 38px;
  }
  .zoom-help {
    bottom: max(12px, env(safe-area-inset-bottom));
    font-size: .52rem;
    letter-spacing: .08em;
  }
}

.event-website-cta {
  position: fixed;
  z-index: 56;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translate(-50%, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-width: min(420px, calc(100vw - 32px));
  padding: .94rem 1.35rem;
  border: 1px solid rgba(0,234,255,.82);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, rgba(0,234,255,.14), rgba(255,43,214,.2));
  box-shadow: 0 0 21px rgba(0,234,255,.35), 0 0 32px rgba(255,43,214,.2), inset 0 0 18px rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: clamp(.72rem, 1.4vw, .88rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease, transform .42s var(--ease-out), box-shadow .18s ease;
}
.event-website-cta::after { content: "→"; color: var(--yellow); font-size: 1.1em; }
.event-website-cta:hover,
.event-website-cta:focus-visible { box-shadow: 0 0 28px rgba(0,234,255,.55), 0 0 42px rgba(255,43,214,.32); }
.scene.is-interactive .event-website-cta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

@media (min-width: 1041px) {
  .event-website-cta { bottom: 25px; }
  .controls { top: 43%; }
}
@media (max-width: 1040px) {
  .controls { bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px)); }
  .event-website-cta { bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  .event-website-cta { min-width: calc(100vw - 20px); padding: .82rem .9rem; font-size: .64rem; letter-spacing: .09em; }
  .controls { bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)); }
}