:root {
  --ink: #241f32;
  --muted: #817c91;
  --lavender: #a694ef;
  --blue: #9bdcff;
  --pink: #f5acd5;
  --tear: 0;
  --mx: 50%;
  --my: 35%;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 42% at 52% 57%, rgba(177,153,255,.14), transparent 72%),
    radial-gradient(ellipse 30% 35% at 43% 50%, rgba(131,215,255,.13), transparent 72%),
    radial-gradient(ellipse 28% 28% at 60% 42%, rgba(255,174,222,.09), transparent 76%);
}

.experience { min-height: 100svh; padding: 32px clamp(18px, 4vw, 60px) 36px; position: relative; display: flex; flex-direction: column; }
.birthday-header { text-align: center; position: relative; z-index: 4; isolation: isolate; }
.header-logo { position: absolute; z-index: -1; width: clamp(120px, 17vw, 190px); height: clamp(90px, 12vw, 142px); left: 50%; top: 50%; object-fit: contain; transform: translate(-50%,-49%); opacity: .075; pointer-events: none; }
.eyebrow { position: relative; z-index: 1; margin: 0 0 8px; color: #9a91ae; letter-spacing: .28em; font-size: .72rem; }
h1 { position: relative; z-index: 1; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5vw, 3.65rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; }

.music-player {
  position: absolute; z-index: 10; top: 26px; right: clamp(18px, 4vw, 60px);
  width: min(310px, calc(100vw - 36px)); min-height: 52px; padding: 9px 11px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px 54px; gap: 8px; align-items: center;
  background: rgba(255,255,255,.72); border: 1px solid rgba(132,115,176,.14); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(81,65,120,.08); backdrop-filter: blur(18px);
}
.icon-button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #f6f3ff; color: #625978; cursor: pointer; display: grid; place-items: center; }
.play-icon { font-size: .68rem; transform: translateX(1px); }
.track-info { min-width: 0; }
.track-line { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.audio-mark { color: var(--lavender); font-size: .8rem; }
.track-name { overflow: hidden; text-overflow: ellipsis; font-size: .73rem; font-weight: 600; }
.player-state { color: #9992a4; font-size: .62rem; }
.progress-track { height: 2px; background: #e9e6ef; border-radius: 9px; margin-top: 6px; overflow: hidden; }
.progress-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--lavender), var(--pink)); }
.volume { width: 54px; height: 2px; accent-color: #9283d9; cursor: pointer; }

.stage { flex: 1; min-height: 530px; display: grid; place-items: center; position: relative; perspective: 1300px; }
.pack-wrap { display: grid; justify-items: center; gap: 20px; transition: opacity .6s, transform .8s cubic-bezier(.22,1,.36,1), filter .6s; }
.pack-wrap.opened { opacity: 0; transform: scale(.72) translateY(50px); filter: blur(10px); pointer-events: none; }
.pack {
  --rx: 0deg; --ry: 0deg; --shift-x: 0px; --shift-y: 0px;
  position: relative; width: clamp(224px, 27vw, 292px); aspect-ratio: .68;
  border-radius: 0; overflow: visible; cursor: grab; touch-action: none;
  transform-style: preserve-3d; transform: translate3d(var(--shift-x), var(--shift-y), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease-out, box-shadow .25s ease;
  background: transparent;
  box-shadow: 0 28px 60px rgba(77,62,124,.2);
}
.pack:focus-visible { outline: 3px solid rgba(135,117,220,.45); outline-offset: 6px; }
.pack.dragging { cursor: grabbing; transition: none; box-shadow: 0 32px 80px rgba(111,80,176,.3); }
.pack::before { content: none; }
.pack-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; clip-path: inset(calc(var(--tear) * 58px) 0 0 0); user-select: none; pointer-events: none; }
.pack-art { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,.65); border-radius: inherit; }
.pack-kicker { font-size: .58rem; letter-spacing: .27em; color: #5f5771; }
.pack-monogram { width: 92px; height: 92px; margin: 21px 0 12px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: white; font: italic 3.8rem/1 Georgia, serif; text-shadow: 0 2px 20px rgba(74,52,122,.3); box-shadow: inset 0 0 28px rgba(255,255,255,.4), 0 0 35px rgba(255,255,255,.35); }
.pack-title { font: 400 1.4rem/1.05 Georgia, serif; letter-spacing: -.03em; color: #3c334f; }
.pack-edition { margin-top: 15px; font-size: .66rem; letter-spacing: .12em; color: #71677e; }
.foil, .pack-glare { position: absolute; inset: -35%; z-index: 3; clip-path: inset(20.59%); pointer-events: none; }
.foil { background: conic-gradient(from 180deg at var(--mx) var(--my), transparent 0 7%, rgba(108,226,255,.3) 17%, rgba(198,122,255,.28) 31%, rgba(255,151,205,.25) 44%, transparent 58% 76%, rgba(255,255,255,.45) 89%, transparent); mix-blend-mode: color-dodge; filter: saturate(1.25); transform: rotate(8deg); }
.pack-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,.18) 14%, transparent 34%); mix-blend-mode: overlay; }
.inside-glow { position: absolute; z-index: 0; left: 5%; right: 5%; top: 10px; height: 70px; opacity: calc(var(--tear) * 1); background: radial-gradient(ellipse, white 0, #cdf3ff 27%, #d8bfff 48%, transparent 72%); filter: blur(8px); }
.tear-zone { position: absolute; inset: 0 0 auto; height: 74px; z-index: 6; }
.tear-piece { position: absolute; inset: 0; background: url('./assets/pack.png') top center / 100% auto no-repeat; clip-path: polygon(0 0,100% 0,100% 78%,94% 83%,87% 75%,78% 84%,69% 77%,59% 87%,50% 77%,40% 85%,31% 76%,21% 84%,11% 75%,0 84%); transform-origin: 8% 50%; transform: translate(calc(var(--tear) * 150px), calc(var(--tear) * -38px)) rotate(calc(var(--tear) * -12deg)); filter: drop-shadow(0 10px 10px rgba(79,57,130,calc(var(--tear) * .25))); }
.tear-line { position: absolute; left: 3%; right: 3%; top: 57px; height: 4px; opacity: calc(var(--tear) * 1); background: linear-gradient(90deg, transparent, white 10%, #cab8fb 25%, white 43%, #b6edff 65%, white 88%, transparent); filter: drop-shadow(0 0 9px #d4c1ff); clip-path: polygon(0 50%,7% 5%,15% 70%,24% 20%,34% 85%,45% 10%,56% 75%,68% 5%,79% 90%,90% 18%,100% 55%,100% 100%,0 100%); }
.pack-instruction { margin: 0; color: var(--muted); font-size: .78rem; letter-spacing: .03em; transition: opacity .25s; }
.dragging + .pack-instruction { opacity: .5; }

.card-reveal { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; opacity: 0; pointer-events: none; }
.card-reveal.visible { opacity: 1; pointer-events: auto; }
.reveal-label, .choose-note { color: #7e768d; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.reveal-label { margin: 0 0 25px; opacity: 0; transform: translateY(10px); }
.visible .reveal-label { animation: fadeUp .8s .35s forwards; }
.cards { width: min(940px, 91vw); display: flex; justify-content: center; gap: clamp(16px, 3.2vw, 42px); perspective: 1400px; }
.holo-card { --cx: 50%; --cy: 50%; --crx: 0deg; --cry: 0deg; width: min(26vw, 255px); aspect-ratio: .724; opacity: 0; transform: translateY(80px) scale(.82) rotate(var(--start-rotation)); text-decoration: none; transform-style: preserve-3d; transition: transform .18s ease-out, filter .3s ease, opacity .6s; }
.visible .holo-card { animation: deal 1s cubic-bezier(.22,1,.36,1) forwards; }
.visible .card-one { --start-rotation: -5deg; animation-delay: .2s; }
.visible .card-two { --start-rotation: 0deg; animation-delay: .08s; }
.visible .card-three { --start-rotation: 5deg; animation-delay: .32s; }
.card-surface { --shift-x: 0px; --shift-y: 0px; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; background: transparent; box-shadow: 0 24px 50px rgba(71,57,103,.18); transform: translate3d(var(--shift-x), var(--shift-y), 0) rotateX(var(--crx)) rotateY(var(--cry)); transition: transform .15s ease-out, box-shadow .25s ease; }
.holo-card:hover { z-index: 5; filter: brightness(1.04); }
.holo-card:hover .card-surface { transform: translate3d(var(--shift-x), calc(var(--shift-y) - 10px), 0) rotateX(var(--crx)) rotateY(var(--cry)) scale(1.035); box-shadow: 0 36px 70px rgba(71,57,103,.25), 0 0 25px rgba(165,219,255,.24); }
.cards:has(.holo-card:hover) .holo-card:not(:hover) { filter: saturate(.75) opacity(.72); }
.card-surface img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; user-select: none; }
.card-fallback { position: absolute; inset: 12px; display: grid; place-content: center; gap: 18px; text-align: center; border: 1px solid rgba(255,255,255,.75); border-radius: 11px; color: #514763; }
.card-fallback span { font: italic 4.5rem/1 Georgia, serif; color: rgba(255,255,255,.92); text-shadow: 0 3px 20px rgba(92,68,138,.2); }
.card-fallback small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.card-rainbow, .card-shine, .card-texture { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; }
.card-rainbow { background: conic-gradient(from 210deg at var(--cx) var(--cy), transparent, rgba(77,211,255,.42), rgba(189,113,255,.3), rgba(255,115,196,.36), rgba(255,242,132,.24), transparent 70%); mix-blend-mode: color-dodge; opacity: .72; mask-image: linear-gradient(120deg,transparent 5%,#000 36%,#000 68%,transparent 96%); }
.card-shine { background: radial-gradient(circle at var(--cx) var(--cy), rgba(255,255,255,.95) 0, rgba(255,255,255,.35) 8%, transparent 27%); mix-blend-mode: soft-light; }
.card-texture { opacity: .36; background: repeating-linear-gradient(112deg,transparent 0 9px,rgba(255,255,255,.18) 10px,transparent 12px), linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); mix-blend-mode: overlay; }
.choose-note { margin: 24px 0 0; opacity: 0; }
.visible .choose-note { animation: fadeUp .8s 1s forwards; }
.secret-drawing-link {
  width: 34px; height: 34px; margin-top: 7px; display: grid; place-items: center;
  border-radius: 50%; color: #8879bc; opacity: 0; text-decoration: none; font-size: .98rem;
  text-shadow: 0 0 0 rgba(146,131,217,0); transform: translateY(8px) scale(.9);
  transition: color .25s ease, background .25s ease, transform .25s ease, text-shadow .25s ease;
}
.visible .secret-drawing-link { animation: secretAppear .8s 1.25s forwards; }
.secret-drawing-link:hover,.secret-drawing-link:focus-visible {
  color: #6855a5; background: rgba(225,218,249,.45); outline: 0;
  transform: translateY(-1px) scale(1.12) rotate(7deg); text-shadow: 0 0 14px rgba(146,131,217,.68);
}
.holo-card.selected { position: relative; z-index: 20; animation: selectCard .82s cubic-bezier(.22,1,.36,1) forwards !important; pointer-events: none; }
.page-transition { position: fixed; z-index: 100; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0 8%, #e8dcff 25%, rgba(255,255,255,.95) 65%); transform: scale(.2); }
.page-transition.active { animation: flash .75s .35s forwards; }

@keyframes deal { to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--start-rotation)); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes secretAppear { to { opacity: .72; transform: translateY(0) scale(1); } }
@keyframes selectCard { to { transform: translate(calc(50vw - var(--card-center-x)), calc(50vh - var(--card-center-y))) scale(1.35); filter: brightness(1.18) drop-shadow(0 0 28px rgba(180,143,255,.55)); } }
@keyframes flash { 0% { opacity: 0; transform: scale(.2); } 45%,100% { opacity: 1; transform: scale(1.5); } }

@media (max-width: 820px) {
  .experience { padding-top: 25px; }
  .music-player { position: relative; top: auto; right: auto; align-self: center; margin-top: 18px; }
  .stage { min-height: 560px; }
  .cards { gap: 10px; }
  .holo-card { width: min(29vw, 210px); }
}
@media (max-width: 560px) {
  h1 { font-size: 2.25rem; }
  .stage { min-height: 540px; }
  .pack { width: 226px; }
  .reveal-label { margin-bottom: 18px; }
  .cards { width: 100%; max-width: 96vw; gap: 7px; align-items: center; }
  .holo-card { width: calc((100% - 14px) / 3); }
  .card-surface { border-radius: 10px; }
  .card-fallback { inset: 6px; border-radius: 7px; }
  .card-fallback span { font-size: 2.8rem; }
  .card-fallback small { font-size: .48rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pack, .card-surface { transform: none !important; }
}