/* ═══════════════════════════════════════════════
   DUFAN — Fun Carnival Theme CSS
   Aesthetic: Carnival Maximalism
   Fonts: Fredoka One (display), Nunito (body)
═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:   #FF6B2B;
  --orange-l: #FF8F5E;
  --orange-d: #CC4A15;
  --yellow:   #FFD60A;
  --yellow-l: #FFE55A;
  --blue:     #00B4FF;
  --blue-l:   #5CD3FF;
  --green:    #22C55E;
  --green-l:  #6EE094;
  --pink:     #FF4785;
  --purple:   #9B5DE5;
  --dark:     #1E1040;
  --dark2:    #2D1B69;
  --cream:    #FFFBEF;
  --white:    #FFFFFF;
  --gray:     #F0EBD8;
  --muted:    #8B7355;
  --r-lg:     28px;
  --r-md:     18px;
  --r-sm:     12px;
  --shadow:   0 8px 32px rgba(30,16,64,.12);
  --shadow-lg:0 20px 60px rgba(30,16,64,.18);
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--dark);
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

/* CANVAS BG */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* HERO CANVAS */
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .15;
}
.s-hero > *:not(#hero-canvas) {
  position: relative; z-index: 1;
}

.page { position: relative; z-index: 10; }

/* ════════════════════════
   NAVBAR
════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 68px; padding: 0 40px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,251,239,.92);
  backdrop-filter: blur(24px);
  border-bottom: 1.5px solid rgba(255,107,43,.1);
  box-shadow: 0 2px 20px rgba(30,16,64,.07);
  transition: background .3s, box-shadow .3s;
}
.navbar.scrolled {
  background: rgba(255,251,239,.98);
  box-shadow: 0 4px 28px rgba(30,16,64,.12);
}

/* Brand */
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo-icon {
  font-size: 28px;
  animation: bounce 2.5s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.nav-logo-text {
  font-family: 'Fredoka One', cursive;
  font-size: 22px; letter-spacing: 2px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Center links */
.nav-links {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto;
}
.nav-link {
  padding: 8px 16px;
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--muted);
  border-radius: 10px; text-decoration: none;
  transition: color .2s, background .2s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%; right: 50%;
  height: 2px; border-radius: 1px;
  background: var(--orange);
  transition: left .25s, right .25s;
}
.nav-link:hover { color: var(--orange); background: rgba(255,107,43,.07); }
.nav-link:hover::after { left: 16px; right: 16px; }
.nav-link.active { color: var(--orange); }
.nav-link.active::after { left: 16px; right: 16px; }

/* Right side buttons */
.nav-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.nav-btn-ghost {
  padding: 8px 18px;
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--orange);
  border-radius: 10px; text-decoration: none;
  transition: background .2s;
}
.nav-btn-ghost:hover { background: rgba(255,107,43,.08); }

.nav-btn {
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: white; border: none; border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 14px; cursor: pointer;
  transition: all .25s;
  box-shadow: 0 3px 14px rgba(255,107,43,.3);
  text-decoration: none; white-space: nowrap;
}
.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(255,107,43,.42);
}

/* Hamburger — three lines */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: 8px; transition: background .2s;
  margin-left: 8px;
}
.nav-hamburger:hover { background: rgba(255,107,43,.08); }
.nav-hamburger span {
  display: block; height: 2.5px; border-radius: 2px;
  background: var(--dark);
  transition: transform .3s, opacity .3s, width .3s;
}
.nav-hamburger span:nth-child(2) { width: 75%; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ════════════════════════
   BUTTONS
════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 36px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: white; border: none; border-radius: 50px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 16px; letter-spacing: .3px;
  cursor: pointer; text-decoration: none;
  transition: all .3s;
  box-shadow: 0 6px 28px rgba(255,107,43,.4), 0 0 0 3px rgba(255,107,43,.1);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 40px rgba(255,107,43,.5);
}
.btn-primary.btn-white {
  background: white; color: var(--orange);
  box-shadow: 0 6px 28px rgba(0,0,0,.2);
}
.btn-primary.btn-white:hover { box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.btn-primary.btn-lg { font-size: 18px; padding: 18px 42px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 34px;
  background: white; color: var(--orange);
  border: 2.5px solid var(--orange); border-radius: 50px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 16px; cursor: pointer; text-decoration: none;
  transition: all .25s;
}
.btn-secondary:hover {
  background: rgba(255,107,43,.06);
  transform: translateY(-2px);
}
.btn-secondary.btn-lg { font-size: 18px; padding: 17px 40px; }

/* ════════════════════════
   SECTION COMMONS
════════════════════════ */
.sec-header { text-align: center; margin-bottom: 56px; }
.sec-tag {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(255,107,43,.1);
  color: var(--orange);
  border-radius: 50px;
  font-family: 'Space Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  margin-bottom: 16px;
}
.sec-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15; color: var(--dark);
  margin-bottom: 14px;
}
.sec-sub {
  font-size: 17px; color: var(--muted);
  line-height: 1.7; max-width: 560px;
  margin: 0 auto;
}
.highlight-text {
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* WAVE DIVIDERS */
.wave-top, .wave-bottom {
  width: 100%; overflow: hidden; line-height: 0;
  margin: 0;
}
.wave-top svg, .wave-bottom svg {
  display: block; width: 100%; height: 80px;
}

/* ════════════════════════
   HERO
════════════════════════ */
.s-hero {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 130px 40px 0;
  text-align: center;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFF8E8 0%, #FFFBEF 100%);
}

/* Hero decorative elements — removed */
.hero-deco { display: none; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--yellow), var(--orange-l));
  color: var(--dark); border-radius: 50px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 14px; margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(255,214,10,.4);
  animation: fadeUp .5s ease both;
}

.hero-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(42px, 8vw, 76px);
  line-height: 1.1; color: var(--dark);
  margin-bottom: 20px;
  animation: fadeUp .6s .1s ease both;
}
.hero-title--accent {
  background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 50%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { from { background-position: 0% } to { background-position: 200% } }

.hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600; color: var(--muted);
  line-height: 1.65; max-width: 600px;
  margin: 0 auto 40px;
  animation: fadeUp .6s .2s ease both;
}

.hero-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
  animation: fadeUp .6s .3s ease both;
}

.hero-scroll-hint {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  animation: fadeUp .6s .6s ease both;
}
.hero-scroll-arrow {
  font-size: 24px; color: var(--orange);
  animation: bounce 1.5s ease-in-out infinite;
}

/* ════════════════════════
   STATS BAR
════════════════════════ */
.stats-bar {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: white;
  border-top: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  position: relative; z-index: 10;
}
.stat-item {
  flex: 1; min-width: 160px;
  padding: 28px 24px; text-align: center;
  border-right: 2px dashed rgba(255,107,43,.2);
  transition: background .2s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,107,43,.04); }

.stat-icon { font-size: 28px; margin-bottom: 6px; }
.stat-n {
  font-family: 'Fredoka One', cursive;
  font-size: 32px; color: var(--orange);
  line-height: 1;
}
.stat-l {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .3px; margin-top: 4px;
}

/* ════════════════════════
   ATTRACTIONS
════════════════════════ */
.s-attractions {
  background: linear-gradient(180deg, #FF6B2B 0%, #FF4785 100%);
  padding: 0 0;
  position: relative;
}
.s-attractions .wave-top svg path { fill: var(--cream); }
.s-attractions .wave-bottom svg path { fill: var(--cream); }

.s-attractions .sec-header { padding: 0 40px; }
.s-attractions .sec-tag {
  background: rgba(255,255,255,.2); color: white;
}
.s-attractions .sec-title { color: white; }
.s-attractions .sec-sub { color: rgba(255,255,255,.85); }

.attractions-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; max-width: 1100px;
  margin: 0 auto; padding: 0 40px 60px;
}

.attr-card {
  background: white;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all .3s;
  display: flex; flex-direction: column;
}
.attr-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 28px 72px rgba(30,16,64,.25); }

.attr-card-img {
  font-size: 72px;
  padding: 36px;
  background: linear-gradient(135deg, rgba(255,107,43,.08), rgba(255,71,133,.06));
  text-align: center;
  border-bottom: 2px dashed rgba(0,0,0,.06);
}
.attr-card-body {
  padding: 24px; flex: 1;
  display: flex; flex-direction: column;
}
.attr-card-tag {
  display: inline-block; padding: 4px 12px;
  background: rgba(255,107,43,.1); color: var(--tc,var(--orange));
  border-radius: 50px; font-family: 'Space Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  margin-bottom: 12px;
}
.attr-card-title {
  font-family: 'Fredoka One', cursive;
  font-size: 22px; color: var(--dark);
  margin-bottom: 10px; line-height: 1.2;
}
.attr-card-desc {
  font-size: 14px; color: var(--muted);
  line-height: 1.65; margin-bottom: 16px; flex: 1;
}
.attr-card-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}
.attr-card-list span {
  padding: 4px 10px;
  background: var(--gray); border-radius: 50px;
  font-size: 12px; font-weight: 600; color: var(--dark);
}
.attr-cta {
  font-weight: 800; font-size: 14px;
  color: var(--ac, var(--orange));
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: gap .2s;
}
.attr-cta:hover { gap: 6px; }

/* ════════════════════════
   EVENTS
════════════════════════ */
.s-events {
  padding: 100px 40px;
  background: var(--cream);
}

.events-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 16px; max-width: 1100px; margin: 0 auto;
}

.event-card {
  background: white; border-radius: var(--r-lg);
  padding: 28px 24px; position: relative;
  border-top: 5px solid var(--ev, var(--orange));
  box-shadow: var(--shadow);
  transition: all .3s;
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.event-card-emoji { font-size: 44px; margin-bottom: 14px; }
.event-card-badge {
  position: absolute; top: -12px; right: 16px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: white; border-radius: 50px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; font-weight: 700;
}
.event-card-title {
  font-family: 'Fredoka One', cursive;
  font-size: 20px; color: var(--dark);
  margin-bottom: 8px;
}
.event-card-desc {
  font-size: 13px; color: var(--muted);
  line-height: 1.6; margin-bottom: 14px;
}
.event-card-date {
  font-size: 12px; font-weight: 700; color: var(--ev, var(--orange));
}

/* ════════════════════════
   SHOW & ENTERTAINMENT
════════════════════════ */
.s-show {
  background: linear-gradient(135deg, #FFF0E0 0%, #FFE5F5 100%);
}
.show-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; max-width: 1100px;
  margin: 0 auto; padding: 0 40px 60px;
  align-items: center;
}
.s-show .sec-tag { background: rgba(255,107,43,.12); }

.show-list { margin: 24px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.show-item {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 15px; color: var(--dark);
}
.show-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}

.show-visual { display: flex; flex-direction: column; gap: 14px; }
.show-card-big {
  background: white; border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex; align-items: center; gap: 20px;
  box-shadow: var(--shadow-lg);
  border-left: 5px solid var(--orange);
}
.show-card-emoji { font-size: 52px; }
.show-card-name {
  font-family: 'Fredoka One', cursive;
  font-size: 20px; color: var(--dark);
  margin-bottom: 6px;
}
.show-card-time, .show-card-loc {
  font-size: 13px; color: var(--muted); font-weight: 600;
}

.show-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.show-card-small {
  background: white; border-radius: var(--r-md);
  padding: 16px 18px;
  border-top: 4px solid var(--scs, var(--blue));
  box-shadow: var(--shadow);
  font-weight: 700; font-size: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.show-card-small div:last-child { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ════════════════════════
   TICKETS
════════════════════════ */
.s-tickets {
  padding: 100px 40px;
  background: var(--cream);
}

.tickets-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 16px; max-width: 1160px; margin: 0 auto;
}

.ticket-card {
  background: white; border-radius: var(--r-lg);
  padding: 28px 24px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
  border-top: 5px solid var(--tc, var(--orange));
  transition: all .3s;
  display: flex; flex-direction: column;
}
.ticket-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ticket-card.featured {
  background: linear-gradient(180deg, #fff8f5 0%, white 40%);
  box-shadow: 0 0 0 3px var(--orange), var(--shadow-lg);
  transform: scale(1.02);
}
.ticket-card.featured:hover { transform: scale(1.02) translateY(-6px); }

.ticket-popular {
  position: absolute; top: -2px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: white; border-radius: 0 0 12px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.ticket-ribbon {
  position: absolute; top: 14px; right: 14px;
  font-size: 20px;
}
.ticket-icon { font-size: 44px; margin-bottom: 14px; }
.ticket-name {
  font-family: 'Fredoka One', cursive;
  font-size: 22px; color: var(--dark);
  margin-bottom: 4px;
}
.ticket-age { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 16px; }

.ticket-price-wrap { margin-bottom: 16px; }
.ticket-price-orig {
  font-size: 14px; color: var(--muted);
  text-decoration: line-through; margin-bottom: 2px;
}
.ticket-price {
  font-family: 'Fredoka One', cursive;
  font-size: 28px; color: var(--tc, var(--orange));
  line-height: 1;
}
.ticket-price-unit { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.ticket-save {
  display: inline-block; padding: 3px 10px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: white; border-radius: 50px;
  font-size: 11px; font-weight: 800;
  margin-top: 6px;
}
.ticket-divider { height: 2px; background: var(--gray); border-radius: 1px; margin: 0 0 16px; }
.ticket-feats { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ticket-feat { font-size: 13px; font-weight: 600; color: var(--dark); }

.ticket-cta {
  margin-top: 20px; width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: white; border: none; border-radius: var(--r-sm);
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 14px; cursor: pointer; transition: all .25s;
  box-shadow: 0 4px 20px rgba(255,107,43,.3);
}
.ticket-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,43,.4); }
.ticket-cta-outline {
  margin-top: 20px; width: 100%; padding: 13px;
  background: white; color: var(--tc, var(--orange));
  border: 2.5px solid var(--tc, var(--orange));
  border-radius: var(--r-sm);
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 14px; cursor: pointer; transition: all .2s;
}
.ticket-cta-outline:hover { background: rgba(255,107,43,.06); }
.ticket-note {
  text-align: center; margin-top: 28px;
  font-family: 'Space Mono', monospace;
  font-size: 11px; color: var(--muted);
}

/* ════════════════════════
   MEMBERSHIP
════════════════════════ */
.s-membership {
  padding: 100px 40px;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
  position: relative; overflow: hidden;
}
.s-membership::before {
  content: '🎢🎡🎠🎪🎭🎉';
  position: absolute; font-size: 120px; opacity: .04;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  white-space: nowrap; letter-spacing: 20px;
  pointer-events: none;
}
.membership-inner { text-align: center; position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.membership-badge {
  display: inline-block; padding: 8px 20px;
  background: rgba(255,214,10,.15); color: var(--yellow);
  border: 1.5px solid rgba(255,214,10,.3); border-radius: 50px;
  font-family: 'Space Mono', monospace;
  font-size: 12px; font-weight: 700;
  margin-bottom: 24px;
}
.membership-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(32px, 5vw, 52px);
  color: white; margin-bottom: 16px; line-height: 1.15;
}
.membership-sub {
  font-size: 16px; color: rgba(255,255,255,.65);
  line-height: 1.7; margin-bottom: 36px;
}
.membership-perks {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-bottom: 40px;
}
.perk {
  padding: 10px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  font-size: 14px; font-weight: 700; color: white;
}

/* ════════════════════════
   CTA SECTION
════════════════════════ */
.s-cta {
  padding: 48px 40px 100px;
  background: linear-gradient(135deg, #FFF8E8, #FFE5F5);
  text-align: center; position: relative; overflow: hidden;
}
.cta-deco1 { position: absolute; font-size: 80px; top: 10%; left: 5%; opacity: .15; pointer-events: none; animation: floatRand 5s ease-in-out infinite; }
.cta-deco2 { position: absolute; font-size: 80px; bottom: 10%; right: 5%; opacity: .15; pointer-events: none; animation: floatRand 6s ease-in-out infinite reverse; }

.cta-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
.cta-badge {
  display: inline-block; padding: 8px 20px;
  background: rgba(255,107,43,.12); color: var(--orange);
  border-radius: 50px; font-family: 'Space Mono', monospace;
  font-size: 12px; font-weight: 700; margin-bottom: 20px;
}
.cta-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(36px, 6vw, 60px);
  color: var(--dark); margin-bottom: 16px; line-height: 1.1;
}
.cta-sub { font-size: 17px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

/* ════════════════════════
   FOOTER
════════════════════════ */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,.65);
}

.footer-top {
  display: flex; gap: 64px; flex-wrap: wrap;
  padding: 64px 60px 52px;
  align-items: flex-start;
}

/* Brand column */
.footer-brand-col { flex: 0 0 280px; }
.footer-logo {
  font-family: 'Fredoka One', cursive; font-size: 28px;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 10px;
}
.footer-tagline {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.45);
  margin-bottom: 24px;
}
.footer-info { display: flex; flex-direction: column; gap: 8px; }
.footer-info-item {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.4);
  display: flex; align-items: flex-start; gap: 6px;
  line-height: 1.5;
}

/* Link columns */
.footer-links {
  display: flex; gap: 48px; flex: 1; flex-wrap: wrap;
  padding-top: 4px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.footer-col-title {
  font-family: 'Fredoka One', cursive; font-size: 16px;
  color: white; margin-bottom: 4px;
}
.footer-col a {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
  display: flex; align-items: center; gap: 6px;
}
.footer-col a:hover {
  color: var(--orange-l);
  padding-left: 4px;
}

/* Divider */
.footer-divider {
  height: 1px;
  margin: 0 60px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 20%, rgba(255,255,255,.1) 80%, transparent);
}

/* Bottom bar */
.footer-bottom {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  padding: 20px 60px 28px; gap: 16px;
}
.footer-copy {
  font-size: 12px; color: rgba(255,255,255,.28);
  font-family: 'Space Mono', monospace;
}

/* Social buttons */
.footer-socials { display: flex; gap: 10px; }
.footer-social-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: all .25s;
}
.footer-social-btn svg { width: 16px; height: 16px; }
.footer-social-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255,107,43,.35);
}

/* ════════════════════════
   ANIMATIONS & REVEAL
════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; transform: translateY(32px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Letter Pop Animation ── */
.hero-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.6) rotate(-8deg);
  animation: letterPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes letterPop {
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* ── Wave animated SVG dividers ── */
.wave-top svg, .wave-bottom svg { animation: waveSway 6s ease-in-out infinite alternate; }
@keyframes waveSway {
  0%   { transform: scaleX(1)   translateX(0); }
  100% { transform: scaleX(1.04) translateX(-1%); }
}

/* ── Emoji bounce on hover (attraction/event cards) ── */
.attr-card:hover .attr-card-img,
.event-card:hover .event-card-emoji,
.ticket-card:hover .ticket-icon {
  animation: emojiPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes emojiPop {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.35) rotate(-10deg); }
  70%  { transform: scale(0.92) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Stat number count-up pulse ── */
.stat-n.counting { animation: countPulse .12s ease-in-out; }
@keyframes countPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.15); color: var(--pink); }
}

/* ── Confetti burst overlay (JS-driven) ── */
.confetti-piece {
  position: fixed;
  width: 10px; height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confettifall var(--dur, 1s) ease-out forwards;
}
@keyframes confettifall {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.5); }
}

/* ── Nav logo wiggle on hover ── */
.nav-brand:hover .nav-logo-icon { animation: wiggle .4s ease; }
@keyframes wiggle {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-15deg) scale(1.2); }
  75%     { transform: rotate(15deg) scale(1.2); }
}

/* ── Ticket card shake on hover (featured) ── */
.ticket-card.featured:hover {
  animation: featuredPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes featuredPop {
  0%   { transform: scale(1.02); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1.02) translateY(-6px); }
}

/* ── Membership perks stagger entrance ── */
.perk {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.s-membership .reveal.visible ~ * .perk,
.membership-inner.visible .perk { opacity: 1; transform: scale(1); }


/* ════════════════════════
   HERO TILES
════════════════════════ */
.hero-tiles {
  width: 100%;
  display: flex;
  gap: 14px;
  padding: 48px 44px 0;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.htile {
  flex: 1;
  height: 210px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  transition: transform .35s cubic-bezier(.34,1.2,.64,1), box-shadow .35s ease;
}
.htile:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 24px 56px rgba(0,0,0,.32);
  z-index: 2;
}

/* Photo background — CSS art simulating tinted photos */
.htile-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.htile:hover .htile-photo { transform: scale(1.06); }

/* Attractions — roller coaster silhouette art */
.htile-photo--attractions {
  background-image: url('../img/tile-attractions.jpg');
  background-size: cover; background-position: center;
}
.htile-photo--tickets {
  background-image: url('../img/tile-tickets.jpg');
  background-size: cover; background-position: center;
}
.htile-photo--map {
  background-image: url('../img/tile-map.png');
  background-size: cover; background-position: center;
}

/* Color overlay on top of photo */
.htile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--ov1) 0%, var(--ov2) 100%);
  opacity: .72;
  transition: opacity .3s;
  mix-blend-mode: multiply;
}
.htile:hover .htile-overlay { opacity: .82; }

/* Vignette for depth */
.htile::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

/* Content */
.htile-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  color: white;
  text-align: center;
}

.htile-icon {
  width: 64px; height: 64px;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.4));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.htile:hover .htile-icon { transform: scale(1.15) translateY(-3px); }

.htile-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 2.5px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
}

.htile-title {
  font-family: 'Fredoka One', cursive;
  font-size: 24px;
  color: white;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* Bottom gradient for title readability */
.htile::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ════════════════════════
   PHOTO GALLERY BENTO
════════════════════════ */
.s-gallery {
  padding: 48px 48px 80px;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

/* subtle dot texture on dark bg */
.s-gallery::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.gallery-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative; z-index: 1;
}
.s-gallery .sec-tag  { background: rgba(255,107,43,.18); color: var(--orange-l); }
.s-gallery .sec-title { color: white; }
.s-gallery .sec-sub   { color: rgba(255,255,255,.55); }

/* ── Bento grid ── */
.gallery-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 300px 220px;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; z-index: 1;
}

/* ── Base gitem ── */
.gitem {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.34,1.2,.64,1), box-shadow .4s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.gitem:hover {
  transform: scale(1.025) translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  z-index: 2;
}

/* Grid placement */
.gitem--big  { grid-column: span 5; grid-row: span 2; }
.gitem--tall { grid-column: span 3; grid-row: span 2; }
.gitem--med  { grid-column: span 4; grid-row: span 1; }
.gitem--wide { grid-column: span 7; grid-row: span 1; }
.gitem--sm   { grid-column: span 2; grid-row: span 1; }

/* ── Photo backgrounds (CSS art, swap with real images later) ── */
.gitem-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .55s ease;
}
.gitem:hover .gitem-photo { transform: scale(1.07); }

/* Halilintar — deep night + track silhouette */
.gitem-photo--halilintar {
  background-image: url('../img/gallery-halilintar.jpg');
  background-size: cover; background-position: center;
}
.gitem-photo--arung {
  background-image: url('../img/gallery-arung.jpg');
  background-size: cover; background-position: center top;
}
.gitem-photo--bianglala {
  background-image: url('../img/gallery-bianglala.jpg');
  background-size: cover; background-position: center;
}
.gitem-photo--zoo {
  background-image: url('../img/gallery-tornado.jpg');
  background-size: cover; background-position: center;
}
.gitem-photo--istana {
  background-image: url('../img/gallery-istana.jpg');
  background-size: cover; background-position: center;
}
.gitem-photo--kicir {
  background-image: url('../img/gallery-kicir.jpg');
  background-size: cover; background-position: center;
}
.gitem-photo--bombom {
  background-image: url('../img/gallery-bombom.jpg');
  background-size: cover; background-position: center;
}

/* ── Color gradient overlay ── */
.gitem-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--gc1) 0%, var(--gc2) 100%);
  opacity: .62;
  transition: opacity .35s;
  mix-blend-mode: multiply;
}
.gitem:hover .gitem-overlay { opacity: .72; }

/* ── Vignette ── */
.gitem::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* ── Bottom gradient for text ── */
.gitem::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 65%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 100%);
}

/* ── Text content ── */
.gitem-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 5px;
}

.gitem-tag {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 2px; font-weight: 700;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
}

.gitem-name {
  font-family: 'Fredoka One', cursive;
  font-size: 22px; color: white; line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.gitem--big .gitem-name  { font-size: 32px; }
.gitem--wide .gitem-name { font-size: 26px; }

.gitem-desc {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  max-width: 340px;
  margin-top: 2px;
}

/* ── Gallery footer ── */
.gallery-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 28px;
  font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,.45);
  position: relative; z-index: 1;
}

.gallery-more-btn {
  padding: 10px 24px;
  background: rgba(255,107,43,.15);
  border: 1.5px solid rgba(255,107,43,.4);
  color: var(--orange-l); border-radius: 50px;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 14px; text-decoration: none;
  transition: all .25s;
}
.gallery-more-btn:hover {
  background: rgba(255,107,43,.28);
  border-color: var(--orange);
  color: white;
  transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .gallery-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 240px 200px 180px;
  }
  .gitem--big  { grid-column: span 4; grid-row: span 2; }
  .gitem--tall { grid-column: span 2; grid-row: span 2; }
  .gitem--med  { grid-column: span 3; }
  .gitem--wide { grid-column: span 4; }
  .gitem--sm   { grid-column: span 2; }
}

@media (max-width: 640px) {
  .s-gallery { padding: 70px 20px 60px; }
  .gallery-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 160px);
    gap: 10px;
  }
  .gitem--big  { grid-column: span 2; grid-row: span 1; }
  .gitem--tall { grid-column: span 1; grid-row: span 2; }
  .gitem--med  { grid-column: span 1; }
  .gitem--wide { grid-column: span 2; }
  .gitem--sm   { grid-column: span 1; }
  .gitem--big .gitem-name { font-size: 24px; }
}

/* ════════════════════════
   WAVE DIVIDERS
════════════════════════ */
.wave-divider {
  display: block;
  line-height: 0;
  overflow: hidden;
  margin: 0; padding: 0;
  position: relative;
  z-index: 5;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 120px;
}

/* Hero → Gallery: top of gallery = dark, wave fills gap */
.wave-divider--hero-to-gallery {
  margin-bottom: -2px; /* seal any sub-pixel gap */
}

/* Gallery → CTA: top of CTA = warm cream */
.wave-divider--gallery-to-cta {
  margin-bottom: -2px;
}

/* Slow sway on waves */
.wave-divider svg path:first-of-type {
  animation: waveSway 7s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
.wave-divider svg path:last-of-type {
  animation: waveSway 9s ease-in-out infinite alternate-reverse;
  transform-origin: center bottom;
}
@keyframes waveSway {
  0%   { d: path("M0,60 C180,110 360,20 540,70 C720,120 900,10 1080,60 C1260,110 1380,40 1440,55 L1440,120 L0,120 Z"); }
  100% { d: path("M0,50 C180,100 400,15 560,65 C740,115 920,5 1100,55 C1280,105 1390,35 1440,50 L1440,120 L0,120 Z"); }
}

/* ════════════════════════
   SCROLLBAR
════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--orange-l); border-radius: 3px; }

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width: 1024px) {
  .attractions-grid { grid-template-columns: 1fr 1fr; }
  .events-grid { grid-template-columns: 1fr 1fr; }
  .tickets-grid { grid-template-columns: 1fr 1fr; }
  .show-inner { grid-template-columns: 1fr; gap: 40px; }
  .show-visual { flex-direction: row; flex-wrap: wrap; }
  .show-card-big { flex: 1; min-width: 260px; }
}

@media (max-width: 768px) {
  .navbar { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-btn-ghost { display: none; }
  .nav-right { gap: 4px; }
  .nav-hamburger { display: flex; }
  .nav-links.nav-mobile-open {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(255,251,239,.98);
    padding: 16px 20px 24px; gap: 4px;
    backdrop-filter: blur(24px);
    border-bottom: 1.5px solid rgba(255,107,43,.12);
    box-shadow: 0 12px 32px rgba(30,16,64,.1);
    z-index: 499;
  }
  .nav-links.nav-mobile-open .nav-link { padding: 12px 16px; font-size: 15px; }
  .s-hero { padding: 100px 0 0; }
  .hero-tiles { padding: 28px 16px 0; gap: 10px; }
  .htile { height: 160px; border-radius: 20px; }
  .htile-icon { width: 48px; height: 48px; }
  .htile-title { font-size: 18px; }
  .htile-label { font-size: 9px; }
  .hero-deco { display: none; }
  .hero-cta-row { flex-direction: column; align-items: stretch; padding: 0 24px; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .s-gallery { padding: 40px 20px 60px; }
  .s-cta { padding: 36px 24px 80px; }
  .footer-top { padding: 44px 24px 36px; flex-direction: column; gap: 36px; }
  .footer-brand-col { flex: 0 0 auto; }
  .footer-links { gap: 28px; }
  .footer-divider { margin: 0 24px; }
  .footer-bottom { padding: 18px 24px 24px; flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 520px) {
  .nav-btn span { display: none; }
  .footer-links { flex-direction: column; }
}