/* =========================================================================
   DISCO GROOVE — the 2026 groovy-disco party trend
   Signature idea: you switch the party on. A dark room, a mirror ball; tap and
   the ball spins, the lights sweep and the 70s sunset stripes glow. A light-up
   dance floor sits in the middle of the page.
   Type: Shrikhand (groovy display) · Outfit (text)
   ========================================================================= */
@font-face { font-family: "Shrikhand"; src: url("../fonts/disco/shrikhand-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/disco/outfit-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/disco/outfit-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #2a1240; --paper: #3a1a55; --ink: #fff1e0; --muted: #d4bfd8; --line: rgba(255, 241, 224, .16);
  --accent: #ff8a3d; --accent-ink: #2a1240; --c1: #ff4f81; --c2: #ff8a3d; --c3: #ffc93c; --c4: #7b4fd6;
  --display: "Shrikhand", "Cooper Black", Georgia, serif; --text: "Outfit", system-ui, sans-serif;
  --radius: 22px; --maxw: 600px;
}
body { background: var(--bg); color: var(--ink); }

/* ---------- Mirror ball ---------- */
.dz-ball { display: block; width: 120px; height: 120px; border-radius: 50%; position: relative; overflow: hidden;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.2) 22%, transparent 40%),
              radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%),
              repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 12px),
              repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 12px),
              conic-gradient(from 0deg, #d8dbe6, #8d93a6, #f5f6fa, #a3a8b8, #e6e8ef, #7c8296, #d8dbe6);
  background-size: auto, auto, 24px 100%, 100% 12px, auto; box-shadow: 0 0 40px -6px color-mix(in srgb, var(--c3) 60%, transparent); animation: ball-spin 5s linear infinite; }
@keyframes ball-spin { to { background-position: 0 0, 0 0, 120px 0, 0 0, 0 0; } }
.dz-string { display: block; width: 2px; height: 70px; margin: 0 auto; background: linear-gradient(var(--muted), transparent 140%); }
.dz-hang { display: flex; flex-direction: column; align-items: center; }

/* ---------- Intro: switch on the lights ---------- */
.dz-intro { --intro-ms: 1700; background: #0b0710; color: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 0; transition: opacity .7s ease 1s, visibility 0s linear 1.7s; }
.dz-intro .dz-ball { filter: brightness(.35); transition: filter .5s; }
.dz-beams { position: absolute; inset: -30%; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from 0deg at 50% 22%, transparent 0 8deg, color-mix(in srgb, var(--c1) 45%, transparent) 10deg 14deg, transparent 16deg 60deg, color-mix(in srgb, var(--c3) 45%, transparent) 62deg 66deg, transparent 68deg 130deg, color-mix(in srgb, var(--c4) 50%, transparent) 132deg 136deg, transparent 138deg 200deg, color-mix(in srgb, var(--c2) 45%, transparent) 202deg 206deg, transparent 208deg 280deg, color-mix(in srgb, var(--c1) 40%, transparent) 282deg 286deg, transparent 288deg); }
.dz-for { margin: 26px 0 0; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #bfb3c8; }
.dz-title { font-family: var(--display); font-size: clamp(2.2rem, 11vw, 3.6rem); line-height: 1.05; margin: 10px 20px 26px; text-align: center; color: #6c6274; transition: color .4s, text-shadow .4s; }
.dz-switch { position: relative; min-height: 52px; padding: 12px 26px; border: 2px solid #6c6274; border-radius: 999px; background: transparent; color: #e9e1ee; font: 700 .95rem var(--text); letter-spacing: .06em; cursor: pointer; animation: seal-breathe 2.4s ease-in-out infinite; }
.is-opening .dz-intro .dz-ball { filter: none; }
.is-opening .dz-beams { opacity: 1; animation: beams 2.4s linear infinite; }
@keyframes beams { to { transform: rotate(360deg); } }
.is-opening .dz-title { color: var(--c3); text-shadow: 3px 3px 0 var(--c1), 6px 6px 0 var(--c4); }
.is-opening .dz-switch { opacity: 0; transition: opacity .3s; }

/* ---------- Headings ---------- */
.t-disco .sh-k { color: var(--c3); letter-spacing: .24em; font-weight: 700; }
.t-disco .sh-t { font-family: var(--display); color: var(--ink); text-shadow: 3px 3px 0 var(--c1); letter-spacing: .01em; }

/* ---------- Hero: sunset arch ---------- */
.t-disco .s-hero { position: relative; overflow: hidden; padding: 0 20px 230px; align-content: start; min-height: 100svh; }
.dz-hero-ball { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.dz-hero-ball .dz-string { height: 40px; }
.dz-hero-ball .dz-ball { width: 92px; height: 92px; }
.t-disco .hero-in { position: relative; z-index: 1; }
.t-disco .hero-guest { font-weight: 700; color: var(--c3); }
.t-disco .hero-k { font-weight: 700; letter-spacing: .26em; text-transform: uppercase; font-size: .78rem; color: var(--muted); }
.t-disco .hero-t { font-family: var(--display); font-size: clamp(3rem, 15vw, 5.6rem); line-height: .98; color: var(--c3); text-shadow: 3px 3px 0 var(--c1), 6px 6px 0 var(--c4); overflow-wrap: anywhere; }
.dz-big { font-family: var(--display); font-size: clamp(5rem, 30vw, 9rem); line-height: .9; margin: 4px 0 0; color: transparent; -webkit-text-stroke: 2px var(--c2); }
.t-disco .hero-line { max-width: 20em; margin: 14px auto 12px; color: var(--muted); }
.t-disco .hero-date { font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; margin-bottom: 0; }
.t-disco .hero-place { color: var(--muted); }
.t-disco .hero-cta { background: var(--c3); color: var(--bg); font-weight: 700; font-size: 1rem; box-shadow: 4px 4px 0 var(--c1); }
.dz-arch { position: absolute; left: 50%; bottom: -260px; width: 560px; height: 520px; margin-left: -280px; border-radius: 50%; max-width: none !important;
  background: radial-gradient(circle, var(--bg) 0 30%, var(--c4) 30% 40%, var(--c1) 40% 50%, var(--c2) 50% 60%, var(--c3) 60% 70%, transparent 70%); }

/* ---------- Dance floor ---------- */
.dz-floor { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-width: 360px !important; margin: 0 auto 20px; perspective: 400px; transform: rotateX(28deg); }
.dz-floor span { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--paper) 80%, #000); transition: background-color .4s, box-shadow .4s; }
.dz-floor span:nth-child(4n+1).on { background: var(--c1); box-shadow: 0 0 14px var(--c1); }
.dz-floor span:nth-child(4n+2).on { background: var(--c2); box-shadow: 0 0 14px var(--c2); }
.dz-floor span:nth-child(4n+3).on { background: var(--c3); box-shadow: 0 0 14px var(--c3); }
.dz-floor span:nth-child(4n+4).on { background: var(--c4); box-shadow: 0 0 14px var(--c4); }
.dz-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dz-chips li { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--c2); font-weight: 700; font-size: .9rem; }
.dz-note { text-align: center; color: var(--muted); margin-top: 14px; }

/* ---------- Other sections ---------- */
.t-disco .s:nth-of-type(even):not(.s-hero) { background: color-mix(in srgb, var(--paper) 55%, var(--bg)); }
.t-disco .cd-u { background: var(--paper); border-radius: 18px; padding: 14px 0 10px; box-shadow: 0 4px 0 var(--c1); }
.t-disco .cd-u:nth-child(2) { box-shadow: 0 4px 0 var(--c2); } .t-disco .cd-u:nth-child(3) { box-shadow: 0 4px 0 var(--c3); } .t-disco .cd-u:nth-child(4) { box-shadow: 0 4px 0 var(--c4); }
.t-disco .cd-u b { font-family: var(--display); color: var(--ink); }
.t-disco .btn-line { border-width: 2px; border-color: var(--c3); color: var(--c3); font-weight: 700; }
.t-disco .btn-line:hover { background: var(--c3); color: var(--bg); }
.t-disco .tl-i { border-color: var(--line); }
.t-disco .tl-time { color: var(--c3); font-weight: 700; }
.t-disco .tl-title { font-weight: 700; font-size: 1.05rem; }
.t-disco .tl-text, .t-disco .vn-a, .t-disco .vn-note, .t-disco .dr-note { color: var(--muted); }
.t-disco .vn-c { background: var(--paper); border: 0; border-radius: 22px; box-shadow: 6px 6px 0 var(--c4); }
.t-disco .vn-l { color: var(--c3); font-weight: 700; }
.t-disco .vn-n { font-family: var(--display); }
.t-disco .sw-dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--line); }
.t-disco .faq summary { font-weight: 700; }
.t-disco .rs, .t-disco .rs-done { background: var(--paper); border: 0; border-radius: 26px; box-shadow: 6px 6px 0 var(--c1); }
.t-disco .rs { --bg: color-mix(in srgb, var(--paper) 70%, #000); }
.t-disco .f-l { color: var(--muted); }
.t-disco .rs-btn { background: var(--c3); color: #2a1240; font-weight: 700; font-size: 1.05rem; }
.t-disco .rs-done-t { font-family: var(--display); color: var(--c3); }
.t-disco .rs-done .btn-line { color: var(--ink); border-color: var(--ink); }
.t-disco .cl-line { font-family: var(--display); color: var(--c3); text-shadow: 3px 3px 0 var(--c1); font-size: 2rem; }
.t-disco .cl-sign { font-weight: 700; color: var(--ink); }
.t-disco .cl-tag { color: var(--c2); }

/* ---------- mirror-tile cover & dance-floor gallery ---------- */
.ds-mirror { margin: 0 auto; max-width: 480px; padding: 14px; border-radius: calc(var(--radius) + 10px);
  background: conic-gradient(from 20deg, #fff 0 4%, #b9b2c9 9%, #fff 14%, #8c84a3 22%, #e8e4f0 30%, #fff 36%, #9a92b0 46%, #fff 55%, #c9c3d8 66%, #fff 74%, #8c84a3 84%, #fff 100%);
  -webkit-mask: none; position: relative; box-shadow: 0 0 40px -6px color-mix(in srgb, var(--c3) 60%, transparent); }
.ds-mirror::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(42,18,64,.35) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(42,18,64,.35) 0 1px, transparent 1px 12px); }
.ds-mirror::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 45%, transparent 55%); background-size: 260% 100%; animation: ds-glint 5s linear infinite; mix-blend-mode: overlay; }
@keyframes ds-glint { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.ds-mimg { border-radius: var(--radius); background: var(--paper); z-index: 1; }
.ds-floor { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 6px; padding: 6px; border-radius: 14px; background: #14081f; box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 20px 40px -20px #000; }
.ds-tile { margin: 0; position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1; }
.ds-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; animation: ds-lit 3.3s calc(var(--d) * .3s) infinite; }
.ds-tile.c0::after { background: var(--c1); } .ds-tile.c1::after { background: var(--c2); } .ds-tile.c2::after { background: var(--c3); } .ds-tile.c3::after { background: var(--c4); }
@keyframes ds-lit { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .45; } }
.ds-timg { position: absolute; inset: 0; background: var(--paper); }
.ds-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 6px 5px; font: 600 .7rem/1.2 var(--text); text-align: center; color: #fff; background: linear-gradient(transparent, rgba(20,8,31,.85)); }
.ds-tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) { .ds-tile::after, .ds-mirror::after { animation: none; } }