/* ─── tannillami · taro × audi × pink ─── */

:root {
  --plum: #0d070f;
  --plum-soft: #1a0f1e;
  --pink: #ff4fa3;
  --pink-soft: #ff9cc9;
  --lilac: #a98cc4;
  --gold: #d9b05e;
  --chrome: #e9e5f2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Manrope", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 79, 163, 0.12), transparent),
    radial-gradient(ellipse 40% 30% at 15% 60%, rgba(217, 176, 94, 0.05), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(169, 140, 196, 0.08), transparent),
    var(--plum);
  color: var(--chrome);
  overflow-x: hidden;
}

/* floating stars */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stars span {
  position: absolute;
  color: var(--gold);
  opacity: 0.35;
  animation: twinkle 4s ease-in-out infinite;
}
.stars span:nth-child(1)  { top: 8%;  left: 12%; font-size: 14px; animation-delay: 0s; }
.stars span:nth-child(2)  { top: 15%; left: 78%; font-size: 10px; animation-delay: 0.6s; }
.stars span:nth-child(3)  { top: 32%; left: 90%; font-size: 16px; animation-delay: 1.2s; }
.stars span:nth-child(4)  { top: 45%; left: 6%;  font-size: 11px; animation-delay: 1.8s; }
.stars span:nth-child(5)  { top: 58%; left: 85%; font-size: 13px; animation-delay: 2.4s; }
.stars span:nth-child(6)  { top: 70%; left: 15%; font-size: 15px; animation-delay: 3s; }
.stars span:nth-child(7)  { top: 82%; left: 70%; font-size: 10px; animation-delay: 0.9s; }
.stars span:nth-child(8)  { top: 25%; left: 40%; font-size: 12px; animation-delay: 1.5s; }
.stars span:nth-child(9)  { top: 90%; left: 35%; font-size: 14px; animation-delay: 2.1s; }
.stars span:nth-child(10) { top: 5%;  left: 55%; font-size: 11px; animation-delay: 2.7s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%      { opacity: 0.6;  transform: scale(1.1); }
}

/* ─── hero ─── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 1.4rem;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: lowercase;
  color: var(--gold);
}

.name {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 0.95;
  color: var(--chrome);
  text-shadow: 0 0 60px rgba(255, 79, 163, 0.45);
}
.name-accent {
  color: var(--pink);
  text-shadow: 0 0 40px rgba(255, 79, 163, 0.7);
}

.tagline {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--lilac);
  font-weight: 500;
}

.cta {
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--plum);
  background: var(--pink);
  text-decoration: none;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  margin-top: 0.8rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 30px rgba(255, 79, 163, 0.4);
}
.cta:hover,
.cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 50px rgba(255, 79, 163, 0.65);
}
.cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── deck ─── */
.deck-section {
  position: relative;
  z-index: 1;
  padding: 6rem 1.5rem 5rem;
  text-align: center;
}

.deck-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--chrome);
}
.deck-sub {
  margin-top: 0.6rem;
  color: var(--lilac);
}

.deck {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  align-items: flex-start;
}

.card {
  width: 250px;
  height: 380px;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  padding: 0;
  perspective: 1000px;
}
.card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 6px;
  border-radius: 20px;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-style: preserve-3d;
}
.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(240, 196, 106, 0.5);
  border-radius: 16px;
  padding: 1.4rem 1.2rem 1.6rem;
  background: linear-gradient(160deg, var(--plum-soft), var(--plum));
  box-shadow: inset 0 0 0 4px var(--plum), inset 0 0 0 5px rgba(240, 196, 106, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.card-front {
  transform-origin: center;
}
.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #2a1a3d, #1a0f1e);
  box-shadow: inset 0 0 0 4px var(--plum), inset 0 0 0 5px var(--pink),
              0 0 60px rgba(255, 79, 163, 0.3);
}

.card:hover .card-front {
  box-shadow: inset 0 0 0 4px var(--plum), inset 0 0 0 5px var(--gold),
              0 20px 50px rgba(255, 79, 163, 0.25), 0 0 40px rgba(240, 196, 106, 0.3);
}

.card-desc-preview {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  margin-top: auto;
  text-transform: uppercase;
  opacity: 0.7;
}

.card-back-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.card-back-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--chrome);
  font-weight: 500;
}
.card-back-hint {
  font-size: 0.8rem;
  color: var(--pink);
  text-align: center;
  margin-top: auto;
  animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.card-numeral {
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}

.card-art {
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.card-art--audi   { background: linear-gradient(135deg, #2b1a38, #47204f); color: var(--chrome); letter-spacing: -6px; }
.card-art--star   { background: linear-gradient(135deg, #47204f, #6b2a6e); color: var(--gold); font-size: 3rem; }
.card-art--squish { background: linear-gradient(135deg, #ff4fa3, #ff9cc9); color: rgba(255,255,255,0.85); font-size: 3.4rem; }
.card-art--song   { background: linear-gradient(135deg, #241230, #3d1c52); color: var(--pink); font-size: 2.6rem; }
.card-art--night  { background: linear-gradient(160deg, #0a0612 60%, #2a1a3d); color: var(--gold); font-size: 2.8rem; text-shadow: 0 0 25px rgba(217, 176, 94, 0.6); }

.card-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--pink-soft);
  margin-top: auto;
}

.card-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--lilac);
}

/* ─── reading ─── */
.reading {
  position: relative;
  z-index: 1;
  padding: 5rem 1.5rem;
  text-align: center;
}
.reading-text {
  font-family: "Unbounded", sans-serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 4vw, 2.2rem);
  line-height: 1.5;
  color: var(--chrome);
}
.reading-text em {
  font-style: normal;
  color: var(--pink);
  text-shadow: 0 0 30px rgba(255, 79, 163, 0.6);
}

/* ─── footer ─── */
.footer {
  position: relative;
  z-index: 1;
  padding: 3rem 1.5rem 3.5rem;
  text-align: center;
  border-top: 1px solid rgba(201, 160, 232, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.tiktok {
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--pink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.tiktok:hover, .tiktok:focus-visible { color: var(--pink-soft); }
.tiktok:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.footer-note {
  font-size: 0.75rem;
  color: rgba(201, 160, 232, 0.5);
}

/* ─── grain overlay ─── */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.8s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ─── cursor glow (injected by js) ─── */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 500px; height: 500px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 163, 0.07), transparent 65%);
}

/* ─── hero load-in sequence ─── */
.hero .eyebrow  { animation: rise 0.9s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero .name     { animation: rise 1.1s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero .tagline  { animation: rise 0.9s 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero .cta      { animation: rise 0.9s 1s   cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.name-accent {
  background: linear-gradient(100deg, var(--pink) 40%, var(--pink-soft) 50%, var(--pink) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: foil-name 5s ease-in-out infinite;
}
@keyframes foil-name {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0 0; }
}

/* ─── scroll reveals ─── */
.reveal, .card, .polaroid {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible, .card.visible, .polaroid.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── SoundCloud tracks ─── */
.tracks {
  position: relative;
  z-index: 1;
  padding: 5rem 1.5rem;
  text-align: center;
}
.tracks-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: var(--chrome);
}
.tracks-sub {
  margin-top: 0.6rem;
  color: var(--lilac);
}
.tracks-list {
  margin-top: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tracks-list.loading {
  min-height: 200px;
  display: grid;
  place-items: center;
  color: var(--lilac);
  font-size: 0.9rem;
}

.track-row {
  display: flex;
  gap: 1rem;
  padding: 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(240, 196, 106, 0.3);
  background: linear-gradient(160deg, var(--plum-soft), var(--plum));
  transition: all 0.3s ease;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  width: 100%;
}

.track-row:hover,
.track-row:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 79, 163, 0.2), inset 0 0 0 5px rgba(240, 196, 106, 0.15);
  transform: translateY(-2px);
}

.track-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.track-art {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--pink), var(--lilac));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  overflow: hidden;
}

.track-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.track-title {
  font-weight: 600;
  color: var(--chrome);
  margin: 0;
  line-height: 1.3;
}

.track-artist {
  font-size: 0.85rem;
  color: var(--lilac);
  margin: 0;
}

.track-link-icon {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.track-row:hover .track-link-icon {
  opacity: 1;
}

.tracks-list.shimmer .track-row {
  animation: shimmer 2s ease-in-out infinite;
  background: linear-gradient(160deg, rgba(212, 176, 94, 0.05), var(--plum));
}

/* ─── track embed modal ─── */
.track-embed-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.track-embed-modal.active {
  display: flex;
}

.track-embed-content {
  background: linear-gradient(160deg, var(--plum-soft), var(--plum));
  border: 1px solid rgba(240, 196, 106, 0.4);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.track-embed-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: var(--pink);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 101;
}

.track-embed-close:hover {
  color: var(--pink-soft);
}

.track-embed-content iframe {
  max-width: 100%;
  margin-top: 1rem;
}

/* ─── foil shine sweep on cards ─── */
.card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(240, 220, 160, 0.14) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
  border-radius: 16px;
}
.card:hover .card-front::after {
  animation: foil-sweep 0.9s ease forwards;
}
@keyframes foil-sweep {
  to { transform: translateX(120%); }
}

/* ─── photos / polaroids ─── */
.photos {
  position: relative;
  z-index: 1;
  padding: 5rem 1.5rem;
  text-align: center;
}
.photos-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
}
.photos-sub {
  margin-top: 0.6rem;
  color: var(--lilac);
}
.polaroids {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
}
.polaroid {
  width: 210px;
  background: #f3eee6;
  padding: 0.7rem 0.7rem 1rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  transition: opacity 0.8s cubic-bezier(0.2,0.8,0.2,1), transform 0.8s cubic-bezier(0.2,0.8,0.2,1), rotate 0.3s ease;
}
.polaroid:nth-child(1) { rotate: -3deg; }
.polaroid:nth-child(2) { rotate: 2deg; }
.polaroid:nth-child(3) { rotate: -2deg; }
.polaroid:nth-child(4) { rotate: 3deg; }
.polaroid:hover { rotate: 0deg; }

.polaroid-img {
  height: 200px;
  background: linear-gradient(160deg, #1a0f1e, #2a1a3d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: rgba(255, 156, 201, 0.5);
  position: relative;
  overflow: hidden;
}
.shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 79, 163, 0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer {
  to { transform: translateX(100%); }
}
.polaroid figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: #4a3d52;
}

/* ─── responsive & motion ─── */
@media (max-width: 600px) {
  .deck { gap: 1.4rem; }
  .card { width: min(240px, 100%); height: 350px; }
  .card-art { height: 80px; }
  .card-back-text { font-size: 0.85rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .stars span, .grain, .name-accent, .shimmer::before,
  .hero .eyebrow, .hero .name, .hero .tagline, .hero .cta { animation: none; }
  .card-frame, .cta { transition: none; }
  .reveal, .card, .polaroid { opacity: 1; transform: none; transition: none; }
  .card-inner { transition: none; }
  .card-back-hint { animation: none; opacity: 0.7; }
}