:root {
  --merge-duration: 2.4s;
  --smooth: cubic-bezier(.16, 1, .3, 1);
  --object-size: clamp(100px, 16vw, 240px);
  --edge: clamp(12px, 2vw, 28px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; }
button, a { font: inherit; }

.experience {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}


.edge-quote {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  max-width: min(72vw, 920px);
  padding: 8px 12px;
  pointer-events: none;
  font-size: clamp(13px, 1.45vw, 22px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #ff3b00;
  text-shadow:
    0 0 4px #fff700,
    0 0 10px #ff9d00,
    2px 2px 0 #000;
  mix-blend-mode: multiply;
  will-change: transform, filter, color;
  animation:
    edgeBounce 10s linear infinite,
    edgeFire .34s steps(2, end) infinite;
}

.edge-quote:hover {
  animation-duration: 3.2s, .16s;
  filter: saturate(1.8) contrast(1.35);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 3px 4px);
  animation: noiseMove .12s steps(2) infinite;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  background: #fff;
  mix-blend-mode: difference;
}

.flash.active { animation: flashBurst .7s steps(2); }

.background-chaos {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease 1.1s;
}

.experience.revealed .background-chaos { opacity: .18; }

.bg {
  position: absolute;
  width: clamp(70px, 12vw, 170px);
  height: auto;
  object-fit: contain;
  filter: saturate(1.35) contrast(1.08);
  transform-origin: center;
}
.bg-one { left: 4%; top: 18%; animation: driftA 4.2s ease-in-out infinite alternate; }
.bg-two { right: 6%; top: 10%; animation: driftB 5.1s ease-in-out infinite alternate; }
.bg-three { left: 10%; bottom: 8%; animation: spinWarp 7s linear infinite; }
.bg-four { right: 12%; bottom: 9%; animation: driftA 4.8s ease-in-out infinite alternate-reverse; }
.bg-five { left: 46%; top: 4%; animation: driftB 3.8s ease-in-out infinite alternate; }
.bg-six { right: 38%; bottom: 3%; animation: spinWarp 8.5s linear infinite reverse; }

.launch {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  transform: translate(-50%, -50%);
  text-transform: none;
}

.launch span {
  display: block;
  font-size: clamp(34px, 8vw, 110px);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.04em;
  transition: transform .18s steps(2), filter .18s steps(2);
}

.launch small {
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 900;
  letter-spacing: .23em;
  animation: pulseText .8s steps(2) infinite;
}

.launch:hover span,
.launch:focus-visible span {
  color: transparent;
  background: linear-gradient(180deg, #fff700 0%, #ffad00 42%, #ff3b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 -8px 12px rgba(255,225,0,.8)) drop-shadow(0 10px 16px rgba(255,60,0,.5));
  animation: textWarp .28s steps(2) infinite;
}

.experience.started .launch {
  pointer-events: none;
  animation: launchCollapse 1s var(--smooth) forwards;
}

.corner-stage { position: fixed; inset: 0; z-index: 25; pointer-events: none; }

.corner {
  position: absolute;
  width: var(--object-size);
  max-height: 32vh;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center;
  will-change: left, top, right, bottom, transform, opacity, filter;
}

.corner-hoop { left: var(--edge); bottom: var(--edge); }
.corner-crocodile { left: var(--edge); top: var(--edge); }
.corner-ball { right: var(--edge); top: var(--edge); }
.corner-jesus { right: var(--edge); bottom: var(--edge); }

.distortable {
  transition: filter .18s steps(2), transform .18s steps(2);
}

.distortable:hover,
.distortable:focus-visible {
  z-index: 100;
  filter: saturate(1.7) contrast(1.45) brightness(1.08);
  animation: imageWarp .34s steps(2) infinite;
}

.experience.started .corner {
  animation-duration: var(--merge-duration);
  animation-timing-function: var(--smooth);
  animation-fill-mode: forwards;
  pointer-events: none;
}

.experience.started .corner-hoop { animation-name: mergeHoop; }
.experience.started .corner-crocodile { animation-name: mergeCrocodile; }
.experience.started .corner-ball { animation-name: mergeBall; }
.experience.started .corner-jesus { animation-name: mergeJesus; }

.reveal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.explosion {
  position: absolute;
  width: min(58vw, 720px);
  max-height: 72vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(.05) rotate(-18deg);
  pointer-events: none;
}

.pfp-stage {
  position: absolute;
  width: min(70vw, 920px);
  max-width: 92vw;
  max-height: 72vh;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.pfp {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  box-shadow: 12px 12px 0 #000;
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), filter .22s ease, box-shadow .22s ease;
  will-change: transform, filter;
}

.experience.revealed .pfp:hover {
  transform: scale(1.12, .88) rotate(-2deg) skewX(-4deg);
  filter: contrast(1.22) saturate(1.3);
  box-shadow: 20px 16px 0 #000;
  animation: pfpHoverWarp .42s steps(2, end) infinite alternate;
}

.impact-ring {
  position: absolute;
  width: 22vmin;
  aspect-ratio: 1;
  border: 6px solid #000;
  opacity: 0;
  transform: scale(.1);
}

.experience.impact .explosion {
  animation: explosionIn 1.45s var(--smooth) forwards;
}
.experience.impact .impact-ring {
  animation: ringOut 1.2s var(--smooth) forwards;
}
.experience.revealed .pfp-stage {
  animation: pfpIn 1.65s var(--smooth) forwards;
  pointer-events: auto;
}
.experience.revealed .explosion { pointer-events: auto; }

.navbar {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  width: min(94vw, 900px);
  opacity: 0;
  transform: translate(-50%, -30px);
  pointer-events: none;
}

.experience.revealed .navbar {
  animation: navIn .9s var(--smooth) .35s forwards;
  pointer-events: auto;
}

.nav-item {
  border: 0;
  border-bottom: 3px solid #000;
  border-radius: 0;
  padding: 8px 2px 5px;
  background: transparent;
  color: #000;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s steps(2), background .16s steps(2), color .16s steps(2);
}

.nav-item:hover,
.nav-item:focus-visible {
  background: #000;
  color: #fff;
  transform: scaleX(1.18) scaleY(.78) skewX(-8deg);
}


@keyframes edgeBounce {
  0% { transform: translate(1.5vw, 1.5vh) rotate(-1deg); }
  24% { transform: translate(calc(100vw - min(72vw, 920px) - 1.5vw), 1.5vh) rotate(1deg); }
  49% { transform: translate(calc(100vw - min(72vw, 920px) - 1.5vw), calc(100vh - 64px)) rotate(-1deg); }
  74% { transform: translate(1.5vw, calc(100vh - 64px)) rotate(1deg); }
  100% { transform: translate(1.5vw, 1.5vh) rotate(-1deg); }
}
@keyframes edgeFire {
  0% { color: #ff2a00; text-shadow: 0 0 3px #fff700, 0 0 10px #ff6a00, 2px 2px 0 #000; transform-origin: left center; }
  50% { color: #ff9d00; text-shadow: 0 0 5px #fff, 0 0 14px #fff700, -2px 2px 0 #ff3b00; }
  100% { color: #fff700; text-shadow: 0 0 4px #ff3b00, 0 0 12px #ff9d00, 2px -2px 0 #000; }
}

@keyframes mergeHoop {
  0% { left: var(--edge); bottom: var(--edge); transform: rotate(0) scale(1); opacity: 1; }
  72% { left: 50%; bottom: 50%; transform: translate(-50%, 50%) rotate(210deg) scale(.7, 1.2); opacity: 1; }
  100% { left: 50%; bottom: 50%; transform: translate(-50%, 50%) rotate(270deg) scale(.06, 1.8); opacity: 0; }
}
@keyframes mergeCrocodile {
  0% { left: var(--edge); top: var(--edge); transform: rotate(0) scale(1); opacity: 1; }
  72% { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-190deg) scale(1.15, .72); opacity: 1; }
  100% { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-250deg) scale(1.8, .05); opacity: 0; }
}
@keyframes mergeBall {
  0% { right: var(--edge); top: var(--edge); transform: rotate(0) scale(1); opacity: 1; }
  72% { right: 50%; top: 50%; transform: translate(50%, -50%) rotate(540deg) scale(.9); opacity: 1; }
  100% { right: 50%; top: 50%; transform: translate(50%, -50%) rotate(720deg) scale(.04, 1.6); opacity: 0; }
}
@keyframes mergeJesus {
  0% { right: var(--edge); bottom: var(--edge); transform: rotate(0) scale(1); opacity: 1; }
  72% { right: 50%; bottom: 50%; transform: translate(50%, 50%) rotate(165deg) scale(.72, 1.16); opacity: 1; }
  100% { right: 50%; bottom: 50%; transform: translate(50%, 50%) rotate(220deg) scale(1.7, .05); opacity: 0; }
}

@keyframes explosionIn {
  0% { opacity: 0; transform: scale(.05) rotate(-18deg); filter: blur(10px) saturate(2); }
  20% { opacity: 1; }
  62% { opacity: 1; transform: scale(1.08) rotate(4deg); filter: blur(0) saturate(1.25); }
  100% { opacity: .85; transform: scale(.96) rotate(0); filter: none; }
}

@keyframes pfpIn {
  0% { opacity: 0; transform: scale(0) rotate(-8deg); filter: blur(18px) contrast(1.8); }
  38% { opacity: 1; transform: scale(.28, 1.15) rotate(4deg); filter: blur(4px) contrast(1.4); }
  72% { opacity: 1; transform: scale(1.04, .94) rotate(-1deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: none; }
}

@keyframes pfpHoverWarp {
  0% { transform: scale(1.08, .92) rotate(-1deg) skewX(-3deg); }
  100% { transform: scale(.94, 1.12) rotate(2deg) skewX(5deg); }
}

@keyframes navIn { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes launchCollapse { to { opacity: 0; transform: translate(-50%, -50%) scale(.02, 2.2) rotate(10deg); filter: blur(14px); } }
@keyframes ringOut { 0% { opacity: 0; transform: scale(.1); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(7) rotate(25deg); } }
@keyframes flashBurst { 0%,100% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: .08; } 38% { opacity: .8; } 52% { opacity: 0; } }
@keyframes pulseText { 0%,100% { opacity: .3; transform: scaleX(.8); } 50% { opacity: 1; transform: scaleX(1.12); } }
@keyframes textWarp { 0%,100% { transform: scale(1); } 33% { transform: scaleX(1.12) scaleY(.82) skewX(-5deg); } 66% { transform: scaleX(.9) scaleY(1.14) skewX(5deg); } }
@keyframes imageWarp { 0%,100% { transform: scale(1); } 25% { transform: scaleX(1.2) scaleY(.78) rotate(-2deg); } 50% { transform: scaleX(.84) scaleY(1.2) rotate(2deg); } 75% { transform: scaleX(1.1) scaleY(.9) skewX(-8deg); } }
@keyframes driftA { from { transform: translate(-18px,-10px) rotate(-12deg) scale(.9,1.15); } to { transform: translate(26px,20px) rotate(15deg) scale(1.15,.85); } }
@keyframes driftB { from { transform: translate(20px,-20px) rotate(10deg) scale(1.15,.8); } to { transform: translate(-26px,22px) rotate(-16deg) scale(.82,1.2); } }
@keyframes spinWarp { from { transform: rotate(0) scale(.8,1.2); } 50% { transform: rotate(180deg) scale(1.25,.72); } to { transform: rotate(360deg) scale(.8,1.2); } }
@keyframes noiseMove { from { transform: translateY(0); } to { transform: translateY(4px); } }

@media (max-width: 700px) {
  :root { --object-size: clamp(84px, 27vw, 140px); }
  .pfp-stage { width: 88vw; max-height: 66vh; }
  .pfp { max-height: 66vh; box-shadow: 7px 7px 0 #000; }
  .explosion { width: 90vw; }
  .navbar { top: 10px; gap: 12px; flex-wrap: wrap; }
  .nav-item { font-size: 13px; }
}

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