:root {
  --paper: #eceae3;
  --blood: #9f0d14;
  --line: rgba(255, 255, 255, .44);
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
body { overflow: hidden; color: #fff; font-family: var(--serif); cursor: none; }
button, a { color: inherit; font: inherit; cursor: none; -webkit-tap-highlight-color: transparent; }

.scene {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 520px;
  isolation: isolate;
  overflow: hidden;
  background: #000;
  cursor: none;
}

.background-image {
  position: absolute;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background: #000;
  filter: grayscale(1) contrast(2.35) brightness(.54);
  opacity: .92;
}
.background-image::before,
.background-image::after { content: ""; position: absolute; background-image: var(--scene-image, url("assets/background.svg")); background-position: center; background-repeat: no-repeat; }
.background-image::before { inset: -6%; background-size: cover; filter: blur(24px) brightness(.72); opacity: .72; transform: scale(1.08); }
.background-image::after { inset: 0; background-size: cover; background-position: var(--scene-position, center); }

.ink-wash {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 58% at 82% 42%, #000 10%, transparent 76%),
    radial-gradient(ellipse 38% 35% at 40% 5%, #000 10%, transparent 88%),
    linear-gradient(90deg, transparent 0 38%, rgba(0,0,0,.28) 58%, #000 100%);
}

.halftone {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .63;
  background-image: radial-gradient(circle, rgba(0,0,0,.96) 1.15px, transparent 1.25px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.scratches {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .11;
  background:
    repeating-linear-gradient(93deg, transparent 0 11vw, rgba(255,255,255,.4) 11.02vw, transparent 11.08vw),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.focus-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  border: 0;
  opacity: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(0);
  pointer-events: none;
  transition: opacity .45s ease, backdrop-filter .45s ease;
}
.scene.card-open .focus-overlay { opacity: 1; backdrop-filter: blur(14px); pointer-events: auto; }

.corner-nav {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-right { display: flex; gap: 8px; }

.wire-button {
  min-height: 27px;
  padding: 3px 12px;
  border: 1px dotted rgba(255,255,255,.43);
  border-radius: 0;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.55);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .02em;
  cursor: none;
  backdrop-filter: blur(3px);
}
.wire-button:hover, .wire-button:focus-visible { color: #000; background: #fff; outline: none; }

.wordmark {
  position: absolute;
  top: 14%;
  left: 50%;
  z-index: 12;
  width: 300px;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: wordFloat 5s ease-in-out infinite;
  transition: opacity .35s, filter .35s;
}
.wordmark h1 { margin: 0; color: #f4f0e8; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(72px, 9vw, 142px); font-weight: 400; letter-spacing: -.08em; line-height: .72; text-shadow: 0 4px 3px #000, 0 0 26px rgba(255,255,255,.24); transform: rotate(-7deg); }
.wordmark h1 span { color: #a70b16; }
.wordmark p { margin: 24px 0 0; color: rgba(255,255,255,.46); font-size: 9px; font-style: italic; letter-spacing: .22em; text-transform: uppercase; }
.sparkle { position: absolute; color: #fff; text-shadow: 0 0 10px #fff; animation: twinkle 1.8s ease-in-out infinite alternate; }
.sparkle-a { top: -34px; left: 24px; font-size: 25px; }
.sparkle-b { top: 12px; right: 10px; font-size: 18px; animation-delay: -.6s; }
.sparkle-c { right: 62px; bottom: -20px; font-size: 29px; animation-delay: -1.1s; }
.scene.card-open .wordmark { opacity: .1; filter: blur(5px); }
@keyframes wordFloat { 50% { transform: translate(-50%, calc(-50% - 9px)) rotate(.8deg); } }
@keyframes twinkle { from { opacity: .25; transform: scale(.65) rotate(0); } to { opacity: 1; transform: scale(1.15) rotate(35deg); } }

.card-field { position: absolute; inset: 45px 0 48px; pointer-events: none; }

.profile-card {
  position: absolute;
  z-index: 20;
  left: var(--x);
  top: var(--y);
  width: clamp(128px, 12.5vw, 188px);
  color: #080808;
  background: transparent;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  cursor: none;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  transition: left .7s cubic-bezier(.2,.78,.2,1), top .7s cubic-bezier(.2,.78,.2,1), width .7s cubic-bezier(.2,.78,.2,1), opacity .35s, filter .35s;
}
.card-inner { position: relative; padding: 7px 7px 16px; background: var(--paper); box-shadow: 15px 20px 0 rgba(0,0,0,.52); transform: rotate(var(--rotation)); animation: cardHover 4.2s ease-in-out infinite; animation-delay: var(--float-delay); transform-style: preserve-3d; }
.profile-card:nth-child(even) { color: #f1f1ed; }
.profile-card:nth-child(even) .card-inner { background: #090909; border: 1px solid rgba(255,255,255,.8); }
.profile-card.is-dragging { z-index: 100; filter: brightness(1.08); transition: none; }
.profile-card.is-dragging .card-inner { animation-play-state: paused; box-shadow: 25px 31px 0 rgba(0,0,0,.6); }
.profile-card.is-open { left: 50% !important; top: 50% !important; z-index: 100; width: clamp(245px, 23vw, 350px); }
.profile-card.is-open .card-inner { animation: openSpin .7s cubic-bezier(.2,.78,.2,1) forwards; }
.scene.card-open .profile-card:not(.is-open) { opacity: .1; filter: blur(3px); pointer-events: none; }
@keyframes cardHover {
  0%,100% { transform: rotate(var(--rotation)) translate3d(0, 0, 0); }
  30% { transform: rotate(calc(var(--rotation) + .8deg)) translate3d(4px, -9px, 0); }
  65% { transform: rotate(calc(var(--rotation) - .6deg)) translate3d(-3px, -5px, 0); }
}
@keyframes openSpin { 0% { transform: rotate(var(--rotation)) rotateY(0) scale(.78); } 50% { transform: rotate(0) rotateY(180deg) scale(.92); } 100% { transform: rotate(0) rotateY(360deg) scale(1); } }
.card-photo { position: relative; width: 100%; aspect-ratio: var(--photo-ratio, .84); overflow: hidden; background: #050505; }
.card-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: grayscale(1) contrast(2.35) brightness(.62); pointer-events: none; }
.card-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(145deg, rgba(159,13,20,.2), transparent 42%, rgba(0,0,0,.42)); mix-blend-mode: color-burn; }
.card-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: .52; pointer-events: none; background: radial-gradient(circle, #000 1px, transparent 1.2px); background-size: 3px 3px; mix-blend-mode: multiply; }
.card-title { display: block; margin-top: 11px; overflow: hidden; font-size: clamp(13px, 1.35vw, 19px); font-style: italic; font-weight: 700; letter-spacing: .04em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.card-subtitle { display: block; margin-top: 3px; opacity: .65; font-size: 8px; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.card-index { position: absolute; top: 9px; right: 11px; z-index: 2; color: #fff; font-size: 9px; text-shadow: 0 1px 5px #000; }

.card-socials {
  position: absolute;
  top: 50%;
  left: calc(100% + 25px);
  display: grid;
  width: 108px;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-10px, -50%);
  transition: opacity .25s ease, transform .3s ease;
}
.card-socials::before { content: "profiles"; margin-bottom: 2px; color: rgba(255,255,255,.5); font-size: 9px; font-style: italic; letter-spacing: .1em; text-align: center; }
.card-socials a { display: block; padding: 7px 9px; border: 1px dotted rgba(255,255,255,.48); color: #fff; background: rgba(0,0,0,.72); font-size: 11px; letter-spacing: .05em; text-align: center; text-decoration: none; text-transform: lowercase; }
.card-socials a:hover, .card-socials a:focus-visible { color: #000; background: #fff; outline: none; }
.profile-card.is-open .card-socials { opacity: 1; pointer-events: auto; transform: translate(0, -50%); transition-delay: .5s; }

.help {
  position: absolute;
  right: 18px;
  bottom: 55px;
  z-index: 40;
  display: grid;
  gap: 3px;
  color: rgba(255,255,255,.38);
  font-size: 9px;
  font-style: italic;
  letter-spacing: .06em;
  text-align: right;
  transition: opacity .3s;
}
.help.hidden { opacity: 0; }

.bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 7px 18px 7px 9%;
  border-top: 1px solid rgba(255,255,255,.15);
}
.bottom-bar p { display: flex; align-items: center; gap: 7px; margin: 0; color: rgba(255,255,255,.38); font-size: 9px; font-style: italic; letter-spacing: .08em; }
.bottom-bar p i { width: 5px; height: 5px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 7px var(--blood); }
.music-controls { display: flex; align-items: center; gap: 7px; }

.now-playing {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: min(42vw, 280px);
  min-height: 27px;
  padding: 5px 10px;
  overflow: hidden;
  border: 1px dotted rgba(255,255,255,.4);
  opacity: .72;
  color: #fff;
  background: rgba(0,0,0,.7);
  font-size: 11px;
  font-style: italic;
  letter-spacing: .04em;
  transition: opacity .25s ease, transform .25s ease;
}
.now-playing:hover { opacity: 1; transform: translateY(-2px); }
.now-playing span { flex: 0 0 auto; opacity: .55; }
.now-playing strong { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.toast { position: fixed; left: 50%; bottom: 58px; z-index: 200; padding: 6px 12px; border: 1px dotted #888; opacity: 0; color: #fff; background: #000; font-size: 11px; font-style: italic; transform: translate(-50%, 8px); transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.plus-cursor { position: fixed; left: 0; top: 0; z-index: 1000; width: 25px; height: 25px; pointer-events: none; transform: translate(-50%,-50%); mix-blend-mode: difference; }
.plus-cursor::before, .plus-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; box-shadow: 0 0 5px #fff; transform: translate(-50%,-50%); }
.plus-cursor::before { width: 21px; height: 1px; }
.plus-cursor::after { width: 1px; height: 21px; }

@media (max-width: 720px) {
  .corner-nav { right: 8px; }
  .nav-right { gap: 4px; }
  .wire-button { min-height: 25px; padding: 2px 8px; font-size: 11px; }
  #resetButton { display: none; }
  .wordmark { top: 15%; }
  .profile-card { width: clamp(80px, 23vw, 112px); }
  .profile-card.is-open { width: min(62vw, 280px); }
  .card-socials { top: calc(100% + 16px); left: 50%; width: min(78vw, 280px); grid-template-columns: repeat(3, 1fr); transform: translate(-50%, -8px); }
  .card-socials::before { display: none; }
  .profile-card.is-open .card-socials { transform: translate(-50%, 0); }
  .help { display: none; }
  .bottom-bar { padding-left: 10px; }
  .music-controls { gap: 4px; }
}

@media (pointer: coarse) { body, button, a, .scene, .profile-card { cursor: auto; } .plus-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }