/* ------------------------------------------------------------------
   KARAOKEAPPRO — save the date
   Palette taken straight from the card artwork.
------------------------------------------------------------------ */

:root {
  --red:    #ff0006;
  --blue:   #0074c1;
  --green:  #16ac31;
  --yellow: #ffdb00;

  --ink:   #0b0a12;
  --paper: #fff;

  /* 321.30564 / 500, the viewBox ratio every card SVG uses */
  --card-ratio: 0.642611;
  --card-w: min(clamp(44px, 7.4vw, 126px), 30vh);
  --card-h: calc(var(--card-w) / var(--card-ratio));

  --card-radius: calc(var(--card-w) * 0.0728);
  --overlap:     calc(var(--card-w) * -0.03);
  --arc:         calc(var(--card-h) * 0.085);
  --lift:        calc(var(--card-h) * 0.07);

  --deal-ms: 620ms;
  --deal-step: 55ms;
  --flip-ms: 700ms;

  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-flip: cubic-bezier(.5, .05, .2, 1);
}

/* Phones: the word breaks into KARAOKE / APPRO, so the cards can grow. */
@media (max-width: 800px) {
  :root { --card-w: min(clamp(34px, 12.5vw, 92px), 17vh); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Vignette over the ambient glow, under the content. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%,
              rgba(0,0,0,0) 28%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.72) 100%);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- *
 * Ambient club lighting
 * ---------------------------------------------------------------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
  animation: drift 30s ease-in-out infinite alternate;
}

.blob--red {
  top: -28vmax; left: -18vmax;
  background: radial-gradient(closest-side, rgba(255,0,6,.42), rgba(255,0,6,0) 70%);
  animation-duration: 27s;
}
.blob--blue {
  top: -24vmax; right: -22vmax;
  background: radial-gradient(closest-side, rgba(0,116,193,.46), rgba(0,116,193,0) 70%);
  animation-duration: 33s;
  animation-delay: -8s;
}
.blob--green {
  bottom: -30vmax; left: -14vmax;
  background: radial-gradient(closest-side, rgba(22,172,49,.34), rgba(22,172,49,0) 70%);
  animation-duration: 38s;
  animation-delay: -16s;
}
.blob--yellow {
  bottom: -32vmax; right: -16vmax;
  background: radial-gradient(closest-side, rgba(255,219,0,.30), rgba(255,219,0,0) 70%);
  animation-duration: 24s;
  animation-delay: -4s;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, 4vmax, 0) scale(1.18); }
}

/* ---------------------------------------------------------------- *
 * Page
 * ---------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 3.4vh, 2.4rem);
  padding: clamp(1.5rem, 5vh, 3rem) 1rem;
  text-align: center;
}

.kicker {
  margin: .95em 0 0;
  font-size: clamp(.68rem, 1.5vw, 1rem);
  font-weight: 800;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--yellow);
  text-indent: .21em; /* offset half the trailing letter-space */
}

.meta { animation: rise .7s var(--ease-out) .35s both; }

.date {
  margin: 0;
  font-size: clamp(1.3rem, 4.4vw, 2.9rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-wrap: balance;
  text-shadow: 0 .05em 0 rgba(0,0,0,.55), 0 .22em .5em rgba(0,0,0,.55);
}
.date b { color: var(--yellow); }

.fallback {
  margin: 0;
  font-size: clamp(2rem, 9vw, 5rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--yellow);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- *
 * The logo — a hand of cards
 * ---------------------------------------------------------------- */

.logo {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--card-h) * .1) 0;
  padding: calc(var(--arc) * .4) 0 var(--arc);
}

@media (max-width: 800px) {
  .logo { flex-direction: column; }
}

.word {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  height: var(--card-h);
  margin-inline: var(--overlap);
  perspective: 1400px;
}

/* Nothing moves until the card art has decoded. */
.logo:not(.is-ready) .slot { opacity: 0; }

.logo.is-ready .slot {
  animation: deal var(--deal-ms) var(--ease-out) backwards;
  animation-delay: calc(var(--i) * var(--deal-step));
}

.slot:focus-within,
.slot.is-flipped { z-index: 5; }

@keyframes deal {
  from { opacity: 0; transform: translate3d(-42vw, 22vh, 0) rotate(-34deg) scale(.86); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* Layer 2: where the card sits in the fan. */
.tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  rotate: var(--rot, 0deg);
  translate: 0 calc(var(--dyf, 0) * var(--arc));
  transition: translate .35s var(--ease-out),
              scale .35s var(--ease-out),
              rotate .35s var(--ease-out);
}

.slot.is-flipped .tilt {
  translate: 0 calc(var(--dyf, 0) * var(--arc) - var(--lift));
  scale: 1.06;
}

/* Pointer devices only — a :hover lift sticks after a tap on touchscreens. */
@media (hover: hover) and (pointer: fine) {
  .slot:hover { z-index: 5; }
  .slot:hover .tilt {
    translate: 0 calc(var(--dyf, 0) * var(--arc) - var(--lift));
    scale: 1.06;
  }
}

/* Layer 3: the flip. */
.card {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;          /* preserve-3d is ignored on a clipping box */
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) var(--ease-flip);
  -webkit-tap-highlight-color: transparent;
}

.slot.is-flipped .card { transform: rotateY(180deg); }

.card:focus-visible { outline: none; }
.card:focus-visible .face {
  box-shadow: 0 0 0 3px var(--yellow),
              0 calc(var(--card-w) * .06) calc(var(--card-w) * .14) rgba(0,0,0,.5);
}

.face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--card-radius);
  background: var(--paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 calc(var(--card-w) * .06) calc(var(--card-w) * .14) rgba(0,0,0,.5),
              0 0 0 1px rgba(0,0,0,.35);
  user-select: none;
  -webkit-user-drag: none;
}

.face--front { transform: rotateY(0deg); }
.face--back  { transform: rotateY(180deg); }

/* ---------------------------------------------------------------- *
 * Reduced motion
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .logo.is-ready .slot {
    animation: fade .35s ease backwards;
    animation-delay: calc(var(--i) * 18ms);
  }
  .tilt { transition-duration: .12s; }
  .card { transition-duration: .12s; }
  .meta { animation-duration: .3s; }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}