/* GemaCitra x Blackstone Fest — website. Tokens from _build/assets/brand.css + kit palette. */
@font-face { font-family: "TAN Jambore"; src: url("../assets/fonts/TANJambore.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fjalla One"; src: url("../assets/fonts/FjallaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; src: url("../assets/fonts/Poppins-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  --orange: #ff8e25; --orange-light: #fea046; --peach: #ffa04a; --cream: #f6f3e0; --cream-2: #e9ddbf;
  --brown: #2b0a01; --brown-2: #541d00; --magenta: #e933ab; --pink: #f190d5; --pink-checker: #f291a2;
  --red: #ff6740; --rose: #d3465b; --green: #008b53; --lime: #bfe348; --mustard: #ecbe5c; --black: #1d1d1d;
  --display: "TAN Jambore", "Fjalla One", sans-serif;
  --condensed: "Fjalla One", sans-serif;
  --body: "Poppins", system-ui, sans-serif;
  --line: 3px solid var(--brown);
  --shadow: 4px 4px 0 var(--brown);
  --radius: 22px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--orange); color: var(--brown); font: 700 15px/1.5 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Display text: TAN Jambore only when every glyph exists (see site.js fit()), else Fjalla One. */
.jb { font-family: "TAN Jambore", "Fjalla One", sans-serif !important; letter-spacing: .01em; }
.fj { font-family: var(--condensed) !important; letter-spacing: .02em; }
.outline {
  color: var(--cream); -webkit-text-stroke: .14em var(--brown); paint-order: stroke fill;
  text-shadow: .05em .06em 0 var(--brown); word-spacing: .12em;
}

/* ---------- Background swirl used behind sections ---------- */
.swirl { background: var(--orange) url("../assets/bg_waves.svg") center top / 100% auto repeat-y; }

/* =================================================================== HERO */
.hero { position: relative; display: grid; place-items: start center; overflow: hidden;
  background: var(--orange) url("../assets/bg_waves.svg") center / cover;  }
.stage {
  position: relative; width: min(100vw, 520px); aspect-ratio: 9 / 19.5;
  container-type: inline-size; isolation: isolate;
}
.stage > * { position: absolute; }
.stage img { user-select: none; -webkit-user-drag: none; }
.h-sun { width: 112cqw; left: -6cqw; top: -58cqw; z-index: 0; }
.h-sun img { width: 100%; animation: sunRise 1.4s cubic-bezier(.22,1,.36,1) .1s both, spin 90s linear 1.5s infinite; }
.h-logos { top: 13cqw; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1.5cqw; z-index: 5;
  animation: fadeUp .9s cubic-bezier(.22,1,.36,1) 2.3s both; }
.h-logos img:first-child { width: 30cqw; } .h-logos img:last-child { width: 19cqw; }
.h-logos span { font: 7cqw/1 var(--condensed); color: var(--brown); margin-top: -1cqw; }
.h-title1 { width: 90cqw; left: 5cqw; top: 30cqw; z-index: 6; animation: rise 1.1s cubic-bezier(.22,1,.36,1) 1.7s both, wipe 1s ease-in-out 1.7s both; }
.h-arch { width: 70cqw; left: 15cqw; top: 51cqw; aspect-ratio: 413.1 / 530.7; z-index: 2; transform-origin: 50% 100%;
  animation: archGrow 1.1s cubic-bezier(.22,1,.36,1) .6s both; }
.h-arch .photo { position: absolute; inset: 0; background: center 40% / cover no-repeat;
  -webkit-mask: url("../assets/arch_window_mask.svg") center / 100% 100% no-repeat; mask: url("../assets/arch_window_mask.svg") center / 100% 100% no-repeat;
  animation: halftone 1.4s ease-out .95s both; }
.h-arch .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-title2 { width: 72cqw; left: 14cqw; top: 131cqw; z-index: 8; animation: rise 1.1s cubic-bezier(.22,1,.36,1) 2.75s both, wipe 1s ease-in-out 2.75s both; }
.h-blob { width: 62cqw; top: 112cqw; z-index: 1; }
.h-blob img { animation: fadeUp 1s ease-out .75s both; }
.h-blob.l { left: -38cqw; } .h-blob.r { right: -38cqw; transform: scaleX(-1); }
.h-stem { width: 16cqw; top: 54cqw; z-index: 3; transform-origin: 50% 100%; }
.h-stem.l { left: -3cqw; } .h-stem.r { right: -3cqw; transform: scaleX(-1); }
.h-stem img { animation: bloom 1s cubic-bezier(.22,1,.36,1) 1s both, sway 4s ease-in-out 2s infinite alternate; transform-origin: 50% 100%; }
.h-stem.r img { animation-delay: 1.1s, 2.4s; }
.h-daisy { z-index: 7; }
.h-daisy img { animation: bloom .9s cubic-bezier(.22,1,.36,1) 1.4s both, spinSlow 8s ease-in-out 2.4s infinite alternate; }
.d1 { width: 22cqw; left: -7cqw; top: 132cqw; } .d2 { width: 16cqw; left: 1cqw; top: 112cqw; }
.d3 { width: 22cqw; right: -7cqw; top: 132cqw; } .d4 { width: 16cqw; right: 1cqw; top: 112cqw; }
.d5 { width: 22cqw; left: -6cqw; top: 200cqw; } .d6 { width: 24cqw; left: 38cqw; top: 211cqw; } .d7 { width: 22cqw; right: -6cqw; top: 200cqw; }
.d2 img, .d4 img, .d6 img { animation-delay: 1.55s, 2.8s; }
.h-floor { left: 0; width: 100%; top: 176cqw; height: 42cqw; z-index: 1; object-fit: cover; object-position: top;
  transform-origin: 50% 0; animation: floorIn 1.6s cubic-bezier(.22,1,.36,1) both; }
.h-bee { width: 9cqw; z-index: 8; }
.h-bee img { animation: fadeIn .6s ease-out 2.1s both, hover 3s ease-in-out 2.1s infinite; }
.b1 { left: 9cqw; top: 19cqw; } .b2 { right: 7cqw; top: 12cqw; } .b3 { left: 3cqw; top: 100cqw; } .b4 { right: 3cqw; top: 98cqw; }
.b2 img, .b4 img { animation-delay: 2.3s, 2.7s; animation-direction: normal, reverse; }
.h-spark { width: 3.6cqw; z-index: 8; }
.h-spark img { animation: twinkle 2s ease-in-out 2.2s infinite; }
.s1 { left: 8cqw; top: 12cqw; } .s2 { right: 18cqw; top: 29cqw; } .s3 { left: 22cqw; top: 66cqw; }
.s4 { right: 4cqw; top: 150cqw; } .s5 { left: 4cqw; top: 153cqw; } .s6 { left: 90cqw; top: 170cqw; }
.s2 img { animation-delay: 2.7s; } .s3 img { animation-delay: 3.1s; } .s4 img { animation-delay: 2.5s; } .s5 img { animation-delay: 3.3s; } .s6 img { animation-delay: 2.9s; }

.h-date { left: 50%; top: 165cqw; z-index: 9; translate: -50% 0; white-space: nowrap;
  background: var(--magenta); color: var(--cream); border-radius: 99px; padding: .9cqw 4.5cqw .5cqw;
  font-size: 6.4cqw; line-height: 1.15; box-shadow: 0 0 0 .6cqw var(--cream); margin: 0;
  animation: pillIn .8s cubic-bezier(.22,1,.36,1) 3.5s both, kick 2s ease-out 4.6s infinite; }
.h-pills { left: 2cqw; right: 2cqw; top: 177cqw; z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8cqw 1.4cqw; }
.h-pills span { background: var(--cream); color: var(--brown); border: .5cqw solid var(--brown); border-radius: 99px; padding: .3cqw 1.9cqw 0;
  font-size: 4.1cqw; line-height: 1.25; box-shadow: .5cqw .5cqw 0 var(--brown); animation: pillIn .7s cubic-bezier(.22,1,.36,1) both; }
.h-scroll { left: 50%; bottom: 3cqw; translate: -50% 0; z-index: 10; text-decoration: none;
  background: var(--lime); border: var(--line); border-radius: 99px; padding: 1.2cqw 4cqw; font: 4cqw/1.2 var(--condensed);
  box-shadow: var(--shadow); animation: fadeIn .6s 4.6s both, bob 1.6s ease-in-out 5s infinite; }

/* ============================================================ STICKY NAV */
.nav { position: sticky; top: 0; z-index: 50; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  background: color-mix(in srgb, var(--orange) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: var(--line); border-bottom: var(--line); scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; text-decoration: none; font: 16px/1 var(--condensed); letter-spacing: .03em; padding: 9px 14px 8px;
  background: var(--cream); border: var(--line); border-radius: 99px; transition: background .2s, color .2s, transform .2s; }
.nav a.on { background: var(--magenta); color: var(--cream); transform: translateY(-1px); }
.nav a.cta { background: var(--lime); }

/* ============================================================== SECTIONS */
main { overflow: hidden; }
.sec { position: relative; padding: 56px 16px 64px; max-width: 640px; margin: 0 auto; scroll-margin-top: 58px; }
.sec-wrap { position: relative; }
.sec-wrap:first-child::before { display: none; }
.sec-wrap:first-child .sec { padding-top: 30px; }
.sec-wrap:nth-child(even) { background: color-mix(in srgb, var(--orange-light) 70%, var(--orange)); }
.sec-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 22px;
  background: radial-gradient(circle at 12px -4px, var(--brown) 13px, transparent 14px) 0 0 / 24px 22px repeat-x; opacity: .9; }
.sec-head { text-align: center; margin-bottom: 22px; }
.kicker { display: inline-block; background: var(--magenta); color: var(--cream); font: 14px/1 var(--condensed); letter-spacing: .08em;
  padding: 7px 14px 6px; border-radius: 99px; border: var(--line); }
.sec-title { margin: 12px 0 6px; font-size: clamp(40px, 13vw, 64px); line-height: .95; font-weight: 400; }
.sec-intro { margin: 0 auto; max-width: 34em; font-size: 14px; color: var(--brown-2); }
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco.spark { width: 22px; animation: twinkle 2.4s ease-in-out infinite; }
.deco.bee { width: 42px; animation: hover 3.4s ease-in-out infinite; }
.sec > *:not(.deco) { position: relative; z-index: 1; }

.card { background: var(--cream); border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pill { display: inline-block; border-radius: 99px; border: 2.5px solid var(--brown); padding: 4px 12px 3px; font: 14px/1.2 var(--condensed); letter-spacing: .03em; }
.pill.mag { background: var(--magenta); color: var(--cream); }
.pill.peach { background: var(--peach); color: var(--brown); }
.pill.lime { background: var(--lime); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px 10px;
  border-radius: 99px; border: var(--line); background: var(--magenta); color: var(--cream); text-decoration: none;
  font: 22px/1 var(--condensed); letter-spacing: .03em; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--brown); }
.btn.alt { background: var(--cream); color: var(--brown); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- Event ---- */
.zoomable { cursor: zoom-in; overflow: hidden; padding: 0; }
.zoomable img { width: 100%; }
.zoom-hint { display: block; text-align: center; font: 13px var(--condensed); padding: 8px; border-top: var(--line); background: var(--peach); }
.days { display: flex; gap: 8px; margin: 26px 0 14px; }
.days button { flex: 1; border: var(--line); border-radius: 16px; background: var(--cream); padding: 8px 4px 6px; cursor: pointer;
  font: 13px/1.1 var(--condensed); box-shadow: 3px 3px 0 var(--brown); transition: transform .15s, background .2s; }
.days button b { display: block; font: 22px/1 var(--display); font-weight: 400; margin-bottom: 2px; }
.days button[aria-selected="true"] { background: var(--magenta); color: var(--cream); transform: translateY(-2px); }
.timeline { list-style: none; margin: 0; padding: 18px 16px 18px 18px; }
.timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 2px dashed color-mix(in srgb, var(--brown) 30%, transparent); }
.timeline li:last-child { border-bottom: 0; }
.timeline .t { font: 17px/1.15 var(--condensed); color: var(--magenta); }
.timeline .i { font-size: 15px; line-height: 1.35; }
.timeline .note { display: block; font-size: 12px; color: var(--brown-2); opacity: .8; }
.timeline ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--brown-2); }
.timeline li.hi { background: color-mix(in srgb, var(--pink) 35%, var(--cream)); margin: 4px -10px; padding: 12px 10px; border-radius: 14px; border: 2px solid var(--brown); }
.timeline li.hi .i { font-family: var(--condensed); font-size: 19px; letter-spacing: .02em; }
.tba-card { text-align: center; padding: 30px 18px; }
.tba-card .big { font-size: clamp(30px, 10vw, 46px); line-height: 1; margin: 6px 0 10px; font-weight: 400; }
.tba-card p { margin: 0; color: var(--brown-2); }

/* ---- Live Performance ---- */
.night { margin-top: 26px; }
.night h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 400; }
.night h3::after { content: ""; flex: 1; height: 3px; background: var(--brown); border-radius: 3px; }
.artists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.artist { padding: 10px 10px 14px; text-align: center; }
.artist .win { position: relative; aspect-ratio: 413 / 530; border-radius: 999px 999px 10px 10px; overflow: hidden; background: var(--brown);
  border: var(--line); box-shadow: inset 0 0 0 5px var(--cream); }
.artist .win img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) contrast(1.05); transition: transform .6s; }
.artist:hover .win img { transform: scale(1.05); }
.artist .name { margin: 10px 0 6px; font-size: clamp(16px, 5vw, 21px); line-height: 1.08; font-weight: 400; overflow-wrap: anywhere; }
.artist .when { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.artist .when .pill { font-size: 12px; padding: 3px 8px 2px; }
.artist .note { font-size: 11.5px; color: var(--brown-2); margin-top: 6px; line-height: 1.3; }
.artist.mystery .win { display: grid; place-items: center; background: var(--brown) url("../assets/stage_photo.jpg") center / cover; }
.artist.mystery .win::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--brown) 70%, transparent); }
.artist.mystery .q { position: relative; font: 92px/1 var(--display); color: var(--cream); -webkit-text-stroke: 6px var(--magenta); paint-order: stroke fill;
  animation: qpulse 2.4s ease-in-out infinite; }
.artist.mystery .win::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: shimmer 3s ease-in-out infinite; }
.artist.mystery { animation: float 4s ease-in-out infinite; }
.artist.mystery:nth-child(2) { animation-delay: -1s; } .artist.mystery:nth-child(3) { animation-delay: -2s; } .artist.mystery:nth-child(4) { animation-delay: -3s; }
.artist.mystery .name { color: var(--magenta); }

/* ---- Aktiviti ---- */
.carousel { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; padding: 6px 16px 18px; margin: 0 -16px;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel::-webkit-scrollbar { display: none; }
.act { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; overflow: hidden; display: flex; flex-direction: column; }
.act .ph { aspect-ratio: 4 / 3; background: var(--brown); position: relative; overflow: hidden; border-bottom: var(--line); }
.act .ph img { width: 100%; height: 100%; object-fit: cover; }
.act .ph.art { background: var(--orange) url("../assets/bg_waves.svg") center / cover; display: grid; place-items: center; }
.act .ph.art img { width: 46%; height: auto; object-fit: contain; animation: spinSlow 6s ease-in-out infinite alternate; }
.act .num { position: absolute; top: 10px; left: 10px; background: var(--cream); border: var(--line); border-radius: 99px; font: 15px/1 var(--condensed); padding: 6px 10px 5px; }
.act .body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.act h3 { margin: 0; font-size: 28px; line-height: 1; font-weight: 400; }
.act p { margin: 0; font-size: 14px; color: var(--brown-2); }
.act .when { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 9px; border: 2px solid var(--brown); background: var(--cream); transition: width .25s, background .25s; }
.dots i.on { width: 24px; background: var(--magenta); }
.drift { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.drift .pill { animation: float 3.6s ease-in-out infinite; }
.drift .pill:nth-child(odd) { animation-delay: -1.4s; } .drift .pill:nth-child(3n) { animation-delay: -2.4s; }

/* ---- Vendor ---- */
.map { position: relative; padding: 0; overflow: hidden; }
.map .canvas { position: relative; }
.map .canvas img { width: 100%; }
.pin { position: absolute; translate: -50% -100%; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px 15px 15px 3px;
  rotate: -45deg; background: var(--magenta); border: 2.5px solid var(--brown); display: grid; place-items: center; cursor: pointer; transition: scale .2s, background .2s; }
.pin span { rotate: 45deg; color: var(--cream); font: 12px/1 var(--condensed); }
.pin.fnb { background: var(--red); } .pin.non { background: var(--green); }
.pin.hl { scale: 1.45; background: var(--lime); z-index: 3; animation: ping 1s ease-out 2; }
.pin.hl span { color: var(--brown); }
.legend { display: flex; gap: 12px; justify-content: center; padding: 8px; border-top: var(--line); background: var(--peach); font: 13px var(--condensed); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brown); vertical-align: -1px; margin-right: 4px; }
.dir-tools { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 12px; }
.search { width: 100%; padding: 13px 16px; border: var(--line); border-radius: 99px; background: var(--cream); font-size: 16px; }
.chips { display: flex; gap: 8px; }
.chips button { border: var(--line); border-radius: 99px; background: var(--cream); padding: 7px 14px 6px; font: 15px var(--condensed); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--brown); color: var(--cream); }
.dir { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dir li button { width: 100%; text-align: left; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; cursor: pointer; }
.dir .lot { width: 48px; height: 48px; border-radius: 14px; border: var(--line); display: grid; place-items: center; font: 17px var(--condensed); background: var(--peach); }
.dir .vn { font-size: 15px; line-height: 1.2; } .dir .vd { display: block; font-size: 12px; color: var(--brown-2); opacity: .85; }
.dir .empty { text-align: center; padding: 18px; }
.cta-card { text-align: center; padding: 26px 18px 30px; margin-top: 22px; position: relative; overflow: hidden; }
.cta-card h3 { margin: 0 0 6px; font-size: 32px; line-height: 1; font-weight: 400; }
.cta-card p { margin: 0 0 18px; color: var(--brown-2); }
.cta-card .spk { position: absolute; width: 64px; bottom: -8px; animation: thump .5s ease-out infinite; transform-origin: 50% 100%; opacity: .9; }
.cta-card .spk.l { left: -10px; } .cta-card .spk.r { right: -10px; transform: scaleX(-1); animation-name: thumpR; }

/* ---- Footer ---- */
footer { position: relative; background: var(--pink-checker); border-top: var(--line); padding: 34px 16px 40px; text-align: center; overflow: hidden; }
footer::before { content: ""; position: absolute; inset: 0; background: url("../assets/checker_floor.svg") center top / 160% auto no-repeat; opacity: .35; }
footer > * { position: relative; }
footer .logos { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 14px; }
footer .logos img { height: 64px; width: auto; }
footer .big { font-size: 32px; font-weight: 400; margin: 0 0 6px; }
footer p { margin: 4px 0; }
footer .soc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
footer small { display: block; margin-top: 16px; opacity: .7; font-size: 11px; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(43, 10, 1, .92); display: none; }
.lightbox.open { display: block; }
.lightbox .lb-scroll { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; touch-action: pan-x pan-y pinch-zoom; }
.lightbox img { max-width: none; width: 100vw; height: auto; }
.lightbox.zoomed img { width: 220vw; }
.lightbox .x { position: fixed; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: var(--line); background: var(--cream); font: 26px/1 var(--condensed); cursor: pointer; z-index: 2; }
.lightbox .zt { position: fixed; bottom: 16px; left: 50%; translate: -50% 0; z-index: 2; }

/* ---- Scroll reveal ---- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ============================================================ KEYFRAMES */
@keyframes sunRise { from { transform: translateY(-14cqw) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes spinSlow { from { rotate: -8deg; } to { rotate: 8deg; } }
@keyframes rise { from { transform: translateY(5cqw) scale(.96); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes archGrow { from { transform: scaleY(.2) scaleX(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes halftone { from { filter: contrast(4) brightness(.2) blur(6px); opacity: 0; } to { filter: none; opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(6cqw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bloom { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes floorIn { from { transform: perspective(60cqw) rotateX(18deg) translateY(3cqw); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes thump { 0% { transform: scale(1.04, .97); } 40%, 100% { transform: none; } }
@keyframes thumpR { 0% { transform: scaleX(-1.04) scaleY(.97); } 40%, 100% { transform: scaleX(-1); } }
@keyframes hover { 0%, 100% { translate: 0 0; rotate: -6deg; } 25% { translate: 1.4cqw -1.2cqw; } 50% { translate: 0 -2cqw; rotate: 6deg; } 75% { translate: -1.4cqw -1cqw; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(25deg); opacity: .6; } }
@keyframes pillIn { from { transform: translateY(4cqw) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kick { 0%, 6% { scale: 1.035; } 18%, 100% { scale: 1; } }
@keyframes bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -1.4cqw; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes qpulse { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.1) rotate(4deg); } }
@keyframes shimmer { 0% { background-position: -150% 0; } 60%, 100% { background-position: 250% 0; } }
@keyframes ping { 50% { box-shadow: 0 0 0 10px rgba(191, 227, 72, .5); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ========================================================== FORM (daftar) */
.page-head { position: relative; text-align: center; padding: 18px 16px 30px; overflow: hidden; background: var(--orange) url("../assets/bg_waves.svg") center / cover; border-bottom: var(--line); }
.page-head .back { position: absolute; left: 12px; top: 12px; text-decoration: none; font: 15px var(--condensed); background: var(--cream); border: var(--line); border-radius: 99px; padding: 6px 12px 5px; }
.page-head .logos { display: flex; justify-content: center; gap: 8px; align-items: center; margin: 34px 0 8px; }
.page-head .logos img { height: 48px; width: auto; }
.page-head h1 { margin: 6px 0 4px; font-size: clamp(42px, 14vw, 66px); line-height: .95; font-weight: 400; }
.page-head .sun { position: absolute; width: 420px; left: 50%; top: -300px; translate: -50% 0; z-index: 0; opacity: .9; animation: spin 90s linear infinite; }
.page-head > *:not(.sun) { position: relative; z-index: 1; }
.page-head > .back { position: absolute; }
.notice { display: flex; gap: 12px; align-items: flex-start; background: var(--lime); padding: 14px 16px; margin: 0 0 18px; }
.notice .ic { font: 26px/1 var(--display); }
.form { max-width: 560px; margin: 0 auto; padding: 22px 16px 60px; }
.field { padding: 16px; margin-bottom: 14px; }
.field > label, .field > legend, .field .lbl { display: block; font: 18px/1.2 var(--condensed); letter-spacing: .02em; margin-bottom: 8px; }
.field .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--magenta); color: var(--cream); font-size: 14px; margin-right: 6px; vertical-align: 2px; }
.field .hint { display: block; font-size: 12px; color: var(--brown-2); opacity: .85; margin-top: 6px; font-family: var(--body); }
fieldset.field { border: var(--line); min-width: 0; }
fieldset.field legend { float: left; width: 100%; padding: 0; }
fieldset.field legend + * { clear: both; }
.input { width: 100%; padding: 13px 14px; border: 2.5px solid var(--brown); border-radius: 14px; background: #fff; font-size: 16px; font-family: var(--body); }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; box-shadow: 0 0 0 3px var(--magenta); }
.input[aria-invalid="true"] { border-color: #c4122f; background: #fff3f3; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 14px 8px 12px; border: var(--line); border-radius: 16px; background: #fff; font: 19px/1.1 var(--condensed); cursor: pointer; transition: background .2s, transform .15s; }
.seg span small { display: block; font: 11px var(--body); opacity: .75; margin-top: 3px; }
.seg input:checked + span { background: var(--magenta); color: var(--cream); transform: translateY(-2px); box-shadow: 3px 3px 0 var(--brown); }
.seg input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 3px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; padding: 6px 0; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--magenta); }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photos .ph { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 2.5px solid var(--brown); background: #fff; animation: pillIn .35s cubic-bezier(.22,1,.36,1); }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; }
.photos .ph button { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--brown); background: var(--cream); font: 18px/1 var(--condensed); cursor: pointer; }
.photos .add { aspect-ratio: 1; border-radius: 14px; border: 2.5px dashed var(--brown); background: color-mix(in srgb, var(--peach) 40%, #fff); display: grid; place-items: center; text-align: center; font: 15px/1.15 var(--condensed); cursor: pointer; padding: 6px; }
.photos .add b { display: block; font-size: 30px; line-height: 1; }
.err { color: #b0102b; font-size: 13px; margin-top: 6px; display: none; }
.err.show { display: block; }
.form-error { background: #ffe1e1; border: var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; display: none; }
.form-error.show { display: block; }
.submit { width: 100%; font-size: 26px; min-height: 60px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { text-align: center; padding: 30px 18px; }
.done .big { font-size: 46px; line-height: 1; margin: 10px 0; font-weight: 400; }
.done img { width: 90px; margin: 0 auto; animation: bloom .9s cubic-bezier(.22,1,.36,1) both, spinSlow 4s 1s ease-in-out infinite alternate; }
[hidden] { display: none !important; }