/* ============================================================
   Saintekfest 2026 — Motion & Glass layer
   Prinsip:
   - Gerakan harus punya fungsi: masuk (entrance), umpan balik (hover/klik),
     perubahan kondisi (scroll, angka naik). Tidak ada loop dekoratif.
   - Kaca (glass) hanya untuk permukaan yang melayang di atas konten:
     nav, panel, modal, kartu utama. Blur sedang, border tipis, bayangan
     netral. Tanpa glow berwarna, tanpa teks gradient.
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);   /* expo-out: cepat lalu tenang */
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --glass-blur: 14px;
  --glass-sat: 130%;
  --glass-edge: rgba(255,255,255,.10);
  --glass-hi:   rgba(255,255,255,.07);
}

/* ---------- GLASS (halus) ---------- */
.glass, .glass-amber, .nav.scrolled .nav-inner, .nav-dropdown, .nav-drawer,
.btn-ghost, .lomba-card, .cta-bar, .empty-note, .tentang-card, .tentang-photo,
.oprec-banner, .pengumuman-row, .modal-box, .modal-opt, .stats, .footer,
.tier, .paket, .why, .ben, .cta, .bcard,
.glass-surface{
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.nav.scrolled .nav-inner, .modal-box{
  --glass-blur: 20px;
}
/* Drawer menu mobile: nyaris solid + blur kuat supaya menu terbaca jelas */
.nav-drawer{ -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); background:rgba(4,8,18,.96); }
.modal-overlay{ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
/* tepi atas yang menangkap cahaya — satu-satunya "kilau", statis */
.glass, .lomba-card, .tentang-card, .modal-box, .cta-bar, .oprec-banner, .pengumuman-row,
.tier, .paket, .why, .ben, .bcard, .glass-surface{
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -12px rgba(0,0,0,.35);
}

/* ---------- LATAR AMBIEN (opt-in: body.ambient) ---------- */
/* Dua bidang cahaya besar & sangat redup, bergeser sangat lambat, plus grain
   halus supaya kaca punya sesuatu untuk dibiaskan. Bukan orb warna-warni. */
body.ambient::before{
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 42% at 82% 8%,  rgba(240,165,0,.11), transparent 70%),
    radial-gradient(52% 46% at 8% 92%,  rgba(40,110,200,.12), transparent 70%);
}
body.ambient::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference){

  /* ---------- MASUK HALAMAN ---------- */
  @keyframes sfPageIn{ from{opacity:0} to{opacity:1} }
  body{ animation: sfPageIn .5s var(--ease-out) both; }

  @keyframes sfRise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
  @keyframes sfFocus{ from{opacity:0; transform:translateY(10px) scale(.96); filter:blur(6px)} to{opacity:1; transform:none; filter:none} }

  .fade-up{ animation: sfRise .8s var(--ease-out) both; }
  .hero-logo{ animation: sfFocus 1s var(--ease-out) .05s both; }   /* sekali, tidak loop */
  .d1{ animation-delay:.12s } .d2{ animation-delay:.22s } .d3{ animation-delay:.32s } .d4{ animation-delay:.42s }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal, .reveal-left, .reveal-right, .reveal-scale{
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  }
  .reveal{ transform: translateY(26px) }
  .reveal-left{ transform: translateX(-26px) }
  .reveal-right{ transform: translateX(26px) }
  .reveal-scale{ transform: translateY(18px) scale(.97) }

  /* Garis kecil di atas judul section memanjang saat terlihat */
  .section-eyebrow::before{ transition: width .9s var(--ease-out) .1s; }

  /* ---------- UMPAN BALIK ---------- */
  .lomba-card, .tier, .paket, .why, .ben, .bcard, .pengumuman-row, .tentang-card{
    transition: opacity .8s var(--ease-out), transform .45s var(--ease-out), border-color .3s ease, box-shadow .45s var(--ease-out), background-color .3s ease;
  }
  .lomba-card:hover, .tier:hover, .paket:hover, .bcard:hover, .pengumuman-row:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 22px 40px -18px rgba(0,0,0,.55);
  }

  .btn-primary, .btn-ghost, .btn-oprec, .btn-oprec-alt, .btn-juklak, .nav-cta{
    transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .btn-primary:hover, .nav-cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.5); }
  .btn-ghost:hover, .btn-oprec-alt:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.3); background-color: rgba(255,255,255,.08); }
  .btn-primary:active, .btn-ghost:active, .btn-oprec:active, .nav-cta:active{ transform: translateY(0) scale(.97); transition-duration:.08s; }
  .btn-primary i, .btn-ghost i{ transition: transform .35s var(--ease-out); }
  .btn-primary:hover i, .btn-ghost:hover i{ transform: translateX(2px); }

  /* Nav: pill kaca memanjang/menyempit mulus saat scroll */
  .nav-inner{ transition: max-width .55s var(--ease-out), height .45s var(--ease-out), background-color .4s ease, border-color .4s ease, border-radius .45s var(--ease-out), box-shadow .4s ease, padding .4s ease; }

  /* ---------- MODAL ---------- */
  @keyframes sfOverlay{ from{opacity:0} to{opacity:1} }
  @keyframes sfSheet{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
  .modal-overlay{ animation: sfOverlay .25s ease both; }
  .modal-box{ animation: sfSheet .45s var(--ease-out) both; }

  /* ---------- DAFTAR / GRID: item muncul berurutan ---------- */
  .sf-stagger{ animation: sfRise .6s var(--ease-out) both; }

  /* ---------- TIMELINE: titik aktif memberi tanda satu kali ---------- */
  @keyframes sfPing{ from{box-shadow:0 0 0 0 rgba(74,222,128,.45)} to{box-shadow:0 0 0 10px rgba(74,222,128,0)} }
  .tl-dot.active{ animation: sfPing 1.4s ease-out 2; }   /* hanya 2x lalu diam */

  /* ---------- ANGKA ---------- */
  .stat-val{ font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce){
  body, .fade-up, .hero-logo, .sf-stagger{ animation:none !important; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* ============================================================
   HERO — lapisan "blueprint": lingkar presisi, skala derajat, koordinat
   ============================================================ */
.hero-logo-wrap{ position:relative; }
.hero-logo-wrap .hero-logo-fade{ position:relative; z-index:1; }
.hero-rings{
  position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  width:min(1500px,190vw); height:auto; aspect-ratio:1;
  transform:translate(-50%, calc(-50% + var(--py,0px)));
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent 98%);
          mask-image:radial-gradient(closest-side,#000 38%,transparent 98%);
}
.hero-rings .rc{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:1; vector-effect:non-scaling-stroke; }
.hero-rings .c2{ stroke:rgba(240,165,0,.45); }
.hero-rings .c4{ stroke:rgba(255,255,255,.12); }
.hero-rings .c5{ stroke:rgba(255,255,255,.05); }
.hero-rings .cross line{ stroke:rgba(255,255,255,.07); stroke-width:1; vector-effect:non-scaling-stroke; }
.hero-rings .tk{ stroke:rgba(255,255,255,.22); stroke-width:1; vector-effect:non-scaling-stroke; }
.hero-rings .tk.major{ stroke:rgba(240,165,0,.8); }
.hero-rings .lbl text{ fill:rgba(255,255,255,.3); font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }

.hero-coord{
  position:absolute; bottom:28px; z-index:1;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em;
  color:rgba(255,255,255,.38); text-transform:uppercase;
}
.hero-coord.l{ left:32px } .hero-coord.r{ right:32px }
@media (max-width:767px){ .hero-coord{ display:none } }

.hero-facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  width:min(820px,100%); margin-top:8px;
}
.fact{
  display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:14px 18px; border-radius:14px;
  background:rgba(12,24,50,.45); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 10px 30px -14px rgba(0,0,0,.5);
  transition:transform .45s var(--ease-out), border-color .3s ease;
}
.fact:hover{ transform:translateY(-3px); border-color:rgba(240,165,0,.45); }
.fact-k{ font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
.fact-v{ font-size:14px; font-weight:700; color:#fff; letter-spacing:-.01em; }
@media (max-width:640px){ .hero-facts{ grid-template-columns:1fr } }

/* Judul: kata naik dari balik garis (masking), 2026 berupa outline */
.hero-title .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.04em .02em .1em; margin:-.04em -.02em -.1em; }
.hero-title .w > span{ display:inline-block; }
.hero-title .outline{
  color:transparent; letter-spacing:-.025em;
  -webkit-text-stroke:clamp(1.5px,.22vw,3px) #fff;
}

@media (prefers-reduced-motion: no-preference){
  @keyframes sfMask{ from{ transform:translateY(108%) } to{ transform:none } }
  .hero-title .w > span{ animation:sfMask 1.1s var(--ease-out) calc(.15s + var(--i,0) * .12s) both; }

  /* lingkar digambar satu kali, lalu diam */
  @keyframes sfDraw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
  @keyframes sfFade{ from{ opacity:0 } to{ opacity:1 } }
  .hero-rings .rc:not(.c2){ stroke-dasharray:1; animation:sfDraw 2.2s var(--ease-out) both; }
  .hero-rings .c1{ animation-delay:.1s } .hero-rings .c3{ animation-delay:.35s }
  .hero-rings .c4{ animation-delay:.6s }  .hero-rings .c5{ animation-delay:.85s }
  .hero-rings .c2, .hero-rings .ticks, .hero-rings .cross, .hero-rings .lbl{ animation:sfFade 1.6s ease .7s both; }
  .hero-coord{ animation:sfFade 1.2s ease 1.2s both; }
}
@media (prefers-reduced-motion: reduce){
  .hero-title .w > span{ animation:none !important; transform:none !important; }
}

/* Mobile: judul ditumpuk dua baris supaya tidak terpotong */
@media (max-width:640px){
  .hero-title{ white-space:normal; font-size:clamp(44px,16vw,96px); line-height:.95; }
  .hero-title .w{ display:block; }
}


/* ============================================================
   LATAR HIDUP — gerak sangat pelan, hanya transform (ringan di HP)
   ============================================================ */
/* medan biru sebagai lapisan kedua (html), amber tetap di body::before */
html:has(body.ambient)::before{
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 40% at 50% 55%, rgba(40,110,200,.10), transparent 70%);
}
@media (prefers-reduced-motion: no-preference){
  @keyframes sfDriftA{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(-5%,4%,0) scale(1.12) } }
  @keyframes sfDriftB{ from{ transform:translate3d(-4%,3%,0) scale(1.05) } to{ transform:translate3d(6%,-5%,0) scale(.94) } }
  body.ambient::before{ animation:sfDriftA 38s ease-in-out infinite alternate; will-change:transform; }
  html:has(body.ambient)::before{ animation:sfDriftB 52s ease-in-out infinite alternate; will-change:transform; }

  /* Skala derajat berputar seperti piringan instrumen: 3 menit per putaran */
  @keyframes sfSpin{ to{ transform:rotate(360deg) } }
  .hero-rings .ticks, .hero-rings .c2{ transform-box:view-box; transform-origin:50% 50%; }
  .hero-rings .ticks{ animation:sfFade 1.6s ease .7s both, sfSpin 180s linear 2.3s infinite; }
  .hero-rings .c2{ animation:sfFade 1.6s ease .7s both, sfSpin 120s linear 2.3s infinite reverse; }
}


/* ============================================================
   DETAIL EDITORIAL — penomoran section, penggaris, timeline berbasis data,
   transisi antar halaman, wordmark footer
   ============================================================ */
::selection{ background:var(--amber,#f0a500); color:#0a1224; }
html{ scrollbar-width:thin; scrollbar-color:#2a3957 transparent; }
:focus-visible{ outline:2px solid var(--amber,#f0a500); outline-offset:3px; border-radius:6px; }

/* Transisi antar halaman native (Chrome/Edge/Safari baru): cross-fade tanpa menunda klik */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; animation-timing-function:var(--ease-out); }

/* Penomoran section: LOMBA … / 01 */
body{ counter-reset:sec; }
.section-eyebrow{ counter-increment:sec; display:flex; align-items:center; gap:10px; }
.section-eyebrow::after{
  content:'/ 0' counter(sec);
  margin-left:auto; padding-left:12px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; color:rgba(255,255,255,.3);
}
.section-eyebrow{ max-width:100%; }

/* Penggaris tipis di tepi atas section — motif blueprint yang sama dengan hero */
.section, .timeline-section, .dok-section{ position:relative; }
.section::before, .timeline-section::before, .dok-section::before{
  content:''; position:absolute; top:0; left:24px; right:24px; height:7px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 12px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%); mask-image:linear-gradient(90deg,#000,transparent 70%);
}

/* Kartu lomba: bar aksen memanjang dari kiri saat hover */
.lomba-card-accent{ transform:scaleX(.18); transform-origin:left; transition:transform .7s var(--ease-out); }
.lomba-card:hover .lomba-card-accent{ transform:scaleX(1); }
.lomba-icon-wrap{ transition:transform .5s var(--ease-out); }
.lomba-card:hover .lomba-icon-wrap{ transform:translateY(-2px) scale(1.06); }

/* Nav: tautan section yang sedang dibaca */
.nav-link.active{ color:#fff; }
.nav-link.active::after{ width:100%; }

/* Timeline: garis koneksi sekarang digambar sebagai SVG per-segmen oleh
   drawTimelineConnectors() di index.html — SENGAJA mengikuti posisi titik
   yang sebenarnya (termasuk saat jadwal >4 item lanjut baris baru).
   .tl-track::after versi lama DIHAPUS karena itu satu garis lurus penuh
   yang tidak tahu soal grid/baris, jadi nimpa di atas titik & bentrok
   dengan garis baru. Jangan ditambahkan lagi. */

/* Dokumentasi: foto dibuka dengan wipe dari atas, bukan sekadar fade */
.dok-item{ clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease-out), opacity .4s ease !important; }
.dok-item.loaded{ clip-path:inset(0 0 0 0); }
.dok-item img{ transition:transform 1.2s var(--ease-out); }
.dok-item:hover img{ transform:scale(1.04); }

/* Footer: wordmark besar yang memudar ke bawah */
.footer{ overflow:hidden; }
.footer-mark{
  order:-1; align-self:stretch; text-align:center; user-select:none;
  font-weight:900; letter-spacing:-.05em; line-height:.8; white-space:nowrap;
  font-size:clamp(48px,15.5vw,230px); margin:-6px 0 6px;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14);
  -webkit-mask-image:linear-gradient(#000 20%,transparent 95%); mask-image:linear-gradient(#000 20%,transparent 95%);
}
@media (prefers-reduced-motion: reduce){
  .dok-item{ clip-path:none; }
  .tl-track::after{ transition:none; }
  .lomba-card-accent{ transform:none; }
}


/* ============================================================
   FORM PENDAFTARAN — transisi langkah, validasi, centang sukses
   ============================================================ */
#progress-fill{ transition-property:width; transition-duration:.8s !important; transition-timing-function:var(--ease-out) !important; }
.upload-box{ transition:border-color .25s ease, background-color .25s ease, transform .25s var(--ease-out); }
.upload-box:hover{ border-color:#fbbf24; background-color:#fffbeb; }
.upload-box:active{ transform:scale(.99); }

.sf-check{ overflow:visible; }
.sf-check-c, .sf-check-t{ stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.sf-check-c{ stroke-width:2; opacity:.35; }

@media (prefers-reduced-motion: no-preference){
  @keyframes sfStepFwd{ from{ opacity:0; transform:translateX(28px) } to{ opacity:1; transform:none } }
  @keyframes sfStepBack{ from{ opacity:0; transform:translateX(-28px) } to{ opacity:1; transform:none } }
  .sf-step-fwd{ animation:sfStepFwd .55s var(--ease-out) both; }
  .sf-step-back{ animation:sfStepBack .55s var(--ease-out) both; }

  @keyframes sfPop{ 0%{ transform:scale(.6) } 60%{ transform:scale(1.18) } 100%{ transform:scale(1) } }
  .sf-pop{ animation:sfPop .5s var(--ease-out); }

  @keyframes sfErrIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
  .sf-err-in{ animation:sfErrIn .4s var(--ease-out) both; }

  @keyframes sfDrawC{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
  .sf-check-c, .sf-check-t{ stroke-dasharray:1; stroke-dashoffset:1; animation:sfDrawC .9s var(--ease-out) .15s forwards; }
  .sf-check-t{ animation-delay:.55s; animation-duration:.55s; }
}
@media (prefers-reduced-motion: reduce){
  .sf-check-c, .sf-check-t{ stroke-dashoffset:0; }
}