:root{
  --bg-hero:#601411;   /* fallback warna di balik bg.png */
  --text:#fff6fb;
  --muted:#d7c9d4;

  /* Rundown theme (dummy hijau – nanti bisa diganti gambar) */
  --rd-bg:#0e5a38;
}

/* ===== Global ===== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg-hero)}

/* ===== HERO / COVER ===== */
.cover{
  position:relative;
  width:100vw; height:100svh; min-height:480px;
  overflow:hidden;
  background: var(--bg-hero) url("bg.png") center center / cover no-repeat;
  isolation:isolate; will-change:background-position;
}
.hero-spot{
  position:absolute; inset:8%;
  background: radial-gradient(circle at 55% 35%, rgba(255,225,140,.18), transparent 65%);
  filter: blur(60px); pointer-events:none; will-change: transform, opacity;
}
.logo-top{
  position:absolute; top:2.6%; left:50%; transform:translate(-50%,0);
  width:min(12vw,130px); filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
  user-select:none; pointer-events:none; will-change:transform;
}
.title{
  position:absolute; left:50%; top:50%;
  --base:-52%; --ty:0px; --scale:1;
  transform: translate(-50%, var(--base)) translateY(var(--ty)) scale(var(--scale));
  transform-origin:center center; width:clamp(280px,72vw,860px);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.4));
  user-select:none; pointer-events:none; will-change: transform;
}
.nav-links{
  position:absolute; left:50%; top:calc(50% + 210px);
  transform:translateX(-50%); display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.pill{
  appearance:none; text-decoration:none; color:#fff;
  padding:10px 14px; border-radius:999px; font-weight:800; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.pill.alt{ border-color:#ffd88f; color:#ffd88f }
.scroll-hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  color:var(--muted); background:rgba(0,0,0,.15); font-weight:700; letter-spacing:.03em;
  backdrop-filter: blur(3px); cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.scroll-hint:hover{ transform:translateX(-50%) translateY(-2px); background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.55)}
.scroll-hint.hide{ opacity:0; pointer-events:none }

/* ===== ANIMASI MASUK ===== */
@keyframes riseInVar{0%{opacity:0;--scale:.98}60%{opacity:1;--scale:1.01}100%{opacity:1;--scale:1}}
@keyframes fadePop{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}
.enter{opacity:0}
.enter.in.logo-top{animation:fadePop .6s ease forwards}
.enter.in.title{animation:riseInVar .8s cubic-bezier(.2,.6,.2,1) forwards}
.enter.in.scroll-hint,.enter.in .pill{animation:fadePop .6s .15s ease forwards}

/* ===== FLOATING SUITS (♥ ♦ ♣ ♠) ===== */
.floaters{position:absolute; inset:0; pointer-events:none; z-index:3}
.suit{
  position:absolute; opacity:.18; font-size:28px;
  animation:drift 8s ease-in-out infinite; will-change:transform,opacity;
  text-shadow:0 4px 10px rgba(0,0,0,.35);
}
@keyframes drift{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(6deg)}100%{transform:translateY(0) rotate(0)}}

/* ===== RUNDOWN ===== */
.page-rundown{ background:var(--rd-bg) }
.subhead{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
  backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.15);
}
.subhead-title{ margin:0; font-size:clamp(16px,2.6vw,22px); font-weight:900 }
.section-rundown{
  position:relative; min-height:100vh; padding:40px 0 120px; color:#f6fff6;
  background: radial-gradient(1200px 800px at 60% -10%, rgba(255,255,255,.08), transparent 60%), var(--rd-bg);
  border-top: 1px solid rgba(255,255,255,.08);
}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.sr-heading{margin:14px 0 10px; font-weight:900; font-size:clamp(24px,3vw,40px); letter-spacing:.01em}
.rd-list{ list-style:none; margin:14px 0 4px; padding:0; border-left:2px solid rgba(255,255,255,.18) }
.rd-item{
  display:grid; grid-template-columns:110px 1fr; gap:12px; padding:10px 12px;
  border-bottom:1px dashed rgba(255,255,255,.18); align-items:center;
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease;
}
.rd-time{ font-weight:900; color:#fff3b4 } .rd-ttl{ font-weight:700 }
.reveal.in{ opacity:1; transform:none }

/* ===== PIN PARALLAX (di rundown) ===== */
/* ----- urutan layer: suits (0) < pins (1) < content (2) ----- */
.floaters{ position:absolute; inset:0; pointer-events:none; z-index:0 }

/* layer pin di belakang konten */
.pin-layer{ position:absolute; inset:0; pointer-events:none; z-index:1 }

/* konten rundown selalu di atas */
.section-rundown .wrap{ position:relative; z-index:2 }

/* pin */
.pin{
  --x:50%; --y:50%;              /* SEKARANG pakai % agar cover seluruh tinggi section */
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:clamp(56px, 7.5vw, 110px);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.35));
  animation: pinFloat 6s ease-in-out infinite;
  opacity:.92;
}
.pin.soft{ opacity:.88 }
.pin.tiny{ width:clamp(44px, 6vw, 90px) }

@keyframes pinFloat{
  0%   { transform: translate(-50%,-50%) translateY(0) rotate(-1.5deg) }
  50%  { transform: translate(-50%,-50%) translateY(-8px) rotate(1.5deg) }
  100% { transform: translate(-50%,-50%) translateY(0) rotate(-1.5deg) }
}

/* ===== Responsive tweaks ===== */
@media (max-width: 900px){
  .title{ width:clamp(260px,78vw,900px); }
}
@media (max-width: 768px){
  .logo-top{ width:84px; top:4% }
  .title{ width:clamp(240px,84vw,900px); }
  .rd-item{ grid-template-columns:92px 1fr }
}
@media (max-width: 480px){
  .logo-top{ width:72px; top:5% }
  .title{ width:clamp(220px,88vw,900px); }
  .rd-item{ grid-template-columns:80px 1fr }
}

/* Judul "Rundown — Domba Terbang" */
.rd-title{
  margin: 6px 0 18px;
  font-weight: 1000;
  letter-spacing: .01em;
  font-size: clamp(22px, 3.2vw, 34px);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Badge Day */
.day-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin: 6px 0 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(255,255,255,.16), rgba(255,255,255,.08)),
    rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 24px rgba(0,0,0,.25);
}
.day-badge .suit-ico{
  display:inline-block;
  width:26px; height:26px;
  border-radius:50%;
  font-size:14px; line-height:26px; text-align:center;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.25);
}

/* Varian Day 2 (sedikit warna berbeda) */
.day-badge.alt{
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(255,255,255,.14), rgba(255,255,255,.06)),
    rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.30);
}

/* pastikan urutan layer: suits(0) < pins(1) < konten(2) < footer(2) */
.floaters{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.pin-layer{ position:absolute; inset:0; pointer-events:none; z-index:1 }
.section-rundown .wrap{ position:relative; z-index:2 }

/* beri ruang ekstra di bawah rundown supaya pin masih kelihatan sebelum footer */
.section-rundown{ padding-bottom: 180px; }

/* footer di atas background saja */
/* ===== FOOTER ===== */
.footer{
  position:relative;
  text-align:center;
  padding:30px 10px;
  font-size:14px;
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  font-weight:500;
  letter-spacing:0.3px;
}
.footer p{
  margin:0;
  opacity:.8;
}