@property --sway { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

:root {
  --u: calc(100cqw / 740);           /* 1 unit = 1px of the original 740px poster */
  --white: #fff;
  --tape: rgba(26, 6, 74, .86);
  /* layout knobs (poster units). Desktop values = your current design; phones override below */
  --fit: .554;        /* big-text width as a fraction of stage width */
  --lo: 176;          /* label distance from centre */
  --lfs: 21;          /* label font size */
  --th: 40;           /* tape thickness */
  --hfs: 24;          /* @handle font size */
  --sfs: 23;          /* website font size */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; max-width: 100%; overflow: hidden; overflow: clip; overscroll-behavior: none; }
body { min-height: 100vh; min-height: 100dvh; }
body {
  position: relative;
  overflow: hidden; overflow: clip;
  display: grid;
  place-items: center;
  font-family: "Barlow", sans-serif;
  color: var(--white);
  background:
    radial-gradient(circle at 100% 0%, #9340d6 0%, rgba(147,64,214,0) 38%),
    linear-gradient(180deg, #6a00c4 0%, #4a0fa0 38%, #2c0a68 72%, #1d0650 100%);
}

/* Animated glow drifting behind everything */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(168,85,247,.45), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(99,36,200,.5), transparent 40%);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(-4%, -3%) scale(1); }
  to   { transform: translate(5%, 4%) scale(1.15); }
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100vw; z-index: 0; pointer-events: none; }

.stage {
  container-type: inline-size;
  position: relative; z-index: 1;
  width: min(100vw, 100vh, 900px);
  aspect-ratio: 1;
  overflow: visible;
  --mx: 0; --my: 0;                 /* pointer parallax, set by script.js */
}

/* Handle + website */
.handle, .site {
  position: absolute; left: 50%;
  color: var(--white); text-decoration: none; white-space: nowrap;
  font-weight: 600; letter-spacing: .02em;
  opacity: 0;
  animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards;
  transition: letter-spacing .3s ease, text-shadow .3s ease;
}
.handle { top: calc(50% + var(--u) * -286); font-size: calc(var(--u) * var(--hfs)); animation-delay: 1.6s;
  transform: translate(calc(-50% + var(--mx) * var(--u) * -6), calc(var(--my) * var(--u) * -6)); }
.site   { top: calc(50% + var(--u) * 256); font-size: calc(var(--u) * var(--sfs)); animation-delay: 1.9s;
  transform: translate(calc(-50% + var(--mx) * var(--u) * -6), calc(var(--my) * var(--u) * -6)); }
.handle:hover, .site:hover { letter-spacing: .08em; text-shadow: 0 0 18px rgba(255,255,255,.8); }
a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
@keyframes rise { from { opacity: 0; margin-top: calc(var(--u) * 18); } to { opacity: 1; margin-top: 0; } }

/* Big background text */
.big { position: absolute; inset: 0; font-weight: inherit; pointer-events: none; transform: translate(calc(var(--mx) * var(--u) * 10), calc(var(--my) * var(--u) * 10)); }
.line {
  position: absolute; left: calc(50cqw - var(--fit) * 50cqw);
  display: inline-block; white-space: nowrap; line-height: 1;
  font-family: "Barlow Condensed", sans-serif;
  transform-origin: left top;
}
.line-top    { top: calc(50% + var(--u) * -185); font-size: calc(var(--u) * 155); font-weight: 700; }
.line-bottom { top: calc(50% + var(--u) * -39); font-size: calc(var(--u) * 255); font-weight: 300;
  animation: glow 3.2s ease-in-out 3s infinite; }

/* Letters drop in one by one once fitted */
.ch { display: inline-block; opacity: 0; }
.fitted .line-top .ch {
  animation: drop .8s cubic-bezier(.2,.9,.2,1) calc(var(--i) * 70ms + 200ms) forwards;
}
.fitted .line-bottom .ch {
  animation: bloom 1s cubic-bezier(.2,.9,.2,1) calc(var(--i) * 130ms + 800ms) forwards;
}
@keyframes drop {
  from { opacity: 0; transform: translateY(-45%) rotate(-8deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes bloom {
  from { opacity: 0; transform: translateY(25%) scale(.85); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes glow {
  0%, 100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { text-shadow: 0 0 calc(var(--u) * 28) rgba(255,255,255,.55); }
}

/* Crossing tapes */
.tape {
  position: absolute; left: 50%; top: calc(50% + var(--u) * 7);
  width: 300cqw; height: calc(var(--u) * var(--th));
  background: var(--tape);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.35);
  overflow: hidden;
  --angle: 0deg;
  transform: translate(calc(-50% + var(--mx) * var(--u) * 4), calc(-50% + var(--my) * var(--u) * 4)) rotate(calc(var(--angle) + var(--sway)));
  animation: sweep 1s cubic-bezier(.2,.8,.2,1) both, sway 6s ease-in-out 1s infinite alternate;
}
.tape-a { --angle: 13deg; }
.tape-b { --angle: -12deg; animation-delay: .15s, 1.15s; }
@keyframes sweep {
  from { transform: translate(-50%, -50%) rotate(calc(var(--angle) + var(--sway))) scaleX(0); }
  to   { transform: translate(calc(-50% + var(--mx) * var(--u) * 4), calc(-50% + var(--my) * var(--u) * 4)) rotate(calc(var(--angle) + var(--sway))) scaleX(1); }
}
@keyframes sway { from { --sway: -.7deg; } to { --sway: .7deg; } }

/* Light streak running along each tape */
.tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-100%) skewX(-20deg);
  animation: shine 4.5s ease-in-out 2s infinite;
}
.tape-b::after { animation-delay: 3.4s; }
@keyframes shine { 0% { left: 0; } 60%, 100% { left: 110%; } }

.label {
  position: absolute; top: 50%;
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: calc(var(--u) * var(--lfs)); letter-spacing: .01em; white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: pulse 2.4s ease-in-out 2s infinite;
}
.l1 { left: calc(50% - var(--u) * var(--lo)); }
.l2 { left: calc(50% + var(--u) * var(--lo)); animation-delay: 2.6s; }
@keyframes pulse {
  0%, 100% { opacity: 1; letter-spacing: .01em; }
  50%      { opacity: .7; letter-spacing: .05em; }
}

/* ---------- Phones & narrow portrait screens ---------- */
@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --fit: .86;
    --lo: 150;
    --lfs: 19;
    --th: 44;
    --hfs: 27;
    --sfs: 25;
  }
  .stage {
    /* sized by width, but capped by height so nothing runs off the top/bottom */
    --u: min(calc(100cqw / 480), calc(100vh / 640));
    --u: min(calc(100cqw / 480), calc(100svh / 640));
    width: 100%;
    height: 100vh; height: 100svh;
    aspect-ratio: auto;
  }
  .handle, .site { max-width: 94vw; }
}
@media (max-width: 360px) and (orientation: portrait) {
  :root { --lfs: 17; --lo: 146; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ch, .handle, .site { opacity: 1; }
}