/* ================= Animasi & transisi (hanya transform/opacity → ringan) ================= */

/* ---- Intro ---- */
#intro { display: none; }
.has-intro body { overflow: hidden; animation: introUnlock 0s 6s forwards; }
.has-intro #intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; background: #050505; overflow: hidden;
  transition: opacity .6s ease, transform .7s cubic-bezier(.4,0,.2,1);
  animation: introFail .4s 6s forwards; /* pengaman bila JS gagal dimuat: intro hilang sendiri setelah 6 detik */
}
#intro.leaving { opacity: 0; transform: scale(1.08); pointer-events: none; }
.intro-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60vmax 60vmax at 50% 45%, rgba(232,20,28,.38), transparent 62%);
  animation: glowPulse 3.2s ease-in-out infinite;
}
.intro-inner { position: relative; z-index: 1; width: min(560px, 88vw); text-align: center; }
.intro-logo {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 26px rgba(232,20,28,.55));
  animation: introLogo 1.2s cubic-bezier(.2,.9,.2,1) both, floaty 5s 1.2s ease-in-out infinite;
}
.intro-tag {
  display: block; width: min(400px, 82%); height: auto; margin: 18px auto 20px;
  animation: fadeUp .8s .55s cubic-bezier(.2,.8,.2,1) both;
}
.intro-bar { height: 3px; width: min(260px, 70%); margin: 0 auto 26px; background: #222; border-radius: 3px; overflow: hidden; animation: fadeIn .4s .5s both; }
.intro-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #ff7a7a); transform-origin: left; animation: bar .8s .1s cubic-bezier(.4,0,.2,1) both; }
.intro-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s, transform .5s; min-height: 108px; }
#intro.ready .intro-actions { opacity: 1; transform: none; pointer-events: auto; }
#intro.ready #introEnter { animation: glow 2s ease-in-out infinite; min-width: 200px; }
.intro-skip { background: none; border: 0; color: #9a9a9a; font: 500 .9rem var(--font); padding: 10px 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.intro-skip:hover { color: #fff; }

/* ---- Bar progres navigasi ---- */
#topbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--red), #ff7a7a); z-index: 900; opacity: 0; pointer-events: none; }
#topbar.run { opacity: 1; width: 75%; transition: width 6s cubic-bezier(.1,.6,.2,1); }
#topbar.done { opacity: 0; width: 100%; transition: width .2s ease, opacity .4s .2s ease; }

/* ---- Transisi halaman ---- */
#app { transition: opacity .16s ease, transform .16s ease; }
#app.page-leave { opacity: 0; transform: translateY(10px); }
#app.page-enter { animation: pageIn .45s cubic-bezier(.2,.8,.2,1); }

/* ---- Muncul saat scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), transform .65s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Beranda ---- */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 30%, rgba(232,20,28,.30), transparent 70%);
  animation: glowPulse 5s ease-in-out infinite;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-logo { animation: introLogo 1s .1s cubic-bezier(.2,.9,.2,1) both, floaty 6s 1.2s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(232,20,28,.35)); }
.hero .btn-primary { animation: glow 2.6s ease-in-out infinite; }
.countdown div { transition: transform .2s ease, border-color .2s; }
.countdown div:hover { transform: translateY(-3px); border-color: var(--red); }
.g3 .card, .g4 .card, .g2 .card { transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.g3 .card:hover, .g4 .card:hover { border-color: rgba(232,20,28,.55); box-shadow: 0 10px 30px -14px rgba(232,20,28,.45); }
.btn { transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.nav a { transition: background .15s, color .15s; }
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(0,0,0,.9); background: rgba(10,10,10,.97); }

/* ---- Formulir ---- */
.step.now { animation: stepIn .35s cubic-bezier(.2,.8,.2,1); }
.stepper li::before { transition: background .25s, border-color .25s, transform .25s; }
.stepper li.now::before { transform: scale(1.12); }
.field.invalid input, .field.invalid select, .field.invalid textarea { animation: shake .35s; }
.radio-cards label { transition: border-color .15s, background .15s, transform .15s; }
.radio-cards label:active { transform: scale(.97); }

/* ---- Tombol musik (piringan hitam berputar) ---- */
.music {
  position: fixed; z-index: 70; left: 18px; bottom: 18px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid #333; background: #101010; padding: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.9); transition: transform .2s, border-color .2s;
}
.music[hidden] { display: none; }
.music:hover { transform: scale(1.06); border-color: var(--red); }
.music .disc {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: repeating-radial-gradient(circle at center, #1b1b1b 0 2px, #0a0a0a 2px 4px);
  box-shadow: inset 0 0 0 1px #2c2c2c;
}
.music .disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 25%, rgba(255,255,255,.12) 30%, transparent 35% 75%, rgba(255,255,255,.1) 80%, transparent 85%); }
.music .disc i { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px #0a0a0a; position: relative; z-index: 1; }
.music.playing .disc { animation: spin 2.6s linear infinite; }
.music.playing { border-color: var(--red); box-shadow: 0 0 0 0 rgba(232,20,28,.5), 0 8px 24px -8px rgba(0,0,0,.9); animation: ring 2.4s ease-out infinite; }
.music:not(.playing)::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: #888; transform: translate(-50%,-50%) rotate(-45deg); z-index: 2; border-radius: 2px; box-shadow: 0 0 0 1px #101010;
}

/* ---- Keyframes ---- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glowPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes introLogo { from { opacity: 0; transform: scale(.65) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(232,20,28,.55); } 50% { box-shadow: 0 0 0 12px rgba(232,20,28,0); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(232,20,28,.55), 0 8px 24px -8px rgba(0,0,0,.9); } 100% { box-shadow: 0 0 0 14px rgba(232,20,28,0), 0 8px 24px -8px rgba(0,0,0,.9); } }
@keyframes introFail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes introUnlock { to { overflow: auto; } }

/* ---- Hormati "kurangi gerakan" ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Latar bergerak saat scroll (beranda) ---- */
#bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
.has-bgfx #bgfx { display: block; }
#bgfx .bgs {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; opacity: 0; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%);
}
#bgfx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.15) 100%); }
.has-bgfx main, .has-bgfx .site-footer { position: relative; z-index: 1; }
.has-bgfx .hero { background: radial-gradient(900px 420px at 50% -10%, rgba(232,20,28,.28), transparent 70%); }
.has-bgfx .section.alt { background: rgba(18,18,18,.78); }
.has-bgfx .site-footer { background: rgba(18,18,18,.9); }
@media (max-width: 760px) { #bgfx .bgs { right: -18%; } #bgfx::after { background: rgba(10,10,10,.62); } }
@media (prefers-reduced-motion: reduce) { #bgfx .bgs { transition: none; } }
#bgfx .bgs.cut { top: auto; bottom: 0; height: 86%; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 760px) { #bgfx .bgs.cut { right: -55%; height: 70%; } }

/* Intro Vol. 2: logo lengkap (PNG/WebP transparan) — lebih besar dari logo lama */
.intro-inner:has(.intro-art) { width: min(860px, 94vw); }
.intro-art { width: 100%; max-height: 62vh; object-fit: contain; margin: 0 auto 18px;
  filter: drop-shadow(0 0 30px rgba(232,20,28,.5)) drop-shadow(0 10px 30px rgba(0,0,0,.7)); }
@media (max-width: 760px) { .intro-inner:has(.intro-art) { width: 96vw; } .intro-art { max-height: 46vh; margin-bottom: 12px; } }