/* ============================================================
   ZONEOUT BALI — AWWWARDS-TIER MOTION & CRAFT LAYER
   Layer: assets/awwwards.css (non-destructive over index.html)
   DNA: Ethereal Glass / OLED black · Editorial scale · Fluid physics
   Guardrails: transform+opacity only · blur on fixed layers only
   ============================================================ */

/* ---------- 0. Pre-paint JS gate (no flash, no static-forever) ---------- */
/* :not(.active) keeps the gate from out-ranking the page's own .reveal.active rule */
.js .reveal:not(.active) { opacity: 0; }

/* ---------- 1. Tokens: motion, scale, tension ---------- */
:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 0.35s;
  --d-base: 0.7s;
  --d-slow: 1.1s;

  --shell-outer: rgba(255, 255, 255, 0.035);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-hi: rgba(255, 255, 255, 0.22);
  --inner-light: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  --r-xl: 2rem;
  --r-lg: 1.5rem;
}

/* ---------- 2. Editorial type scale (macro-whitespace) ---------- */
.hero-nexum-title {
  font-size: clamp(2.75rem, 7.4vw, 6.1rem) !important;
  font-weight: 500 !important;
  line-height: 0.97 !important;
  letter-spacing: -0.045em !important;
}
@media (min-width: 1024px) {
  .hero-nexum-title { font-size: clamp(3.6rem, 6.4vw, 6.1rem) !important; }
}
h2 { /* section headlines: wide, 2-line iron rule */
  font-size: clamp(1.95rem, 4.4vw, 3.75rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.038em !important;
  font-weight: 500 !important;
}
.section { padding: clamp(5.5rem, 11vw, 10.5rem) 0; }
.section[style*="padding-top: 0"] { padding-top: 0 !important; }
.section-header { margin-bottom: clamp(3rem, 6vw, 5.5rem); }

/* Eyebrow tags: microscopic, tracked */
.zenox-badge, .bento-num, .sim-tag-float, .gallery-tag {
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

/* ---------- 3. Double-Bezel: machined hardware read ---------- */
.sim-card, .price-card, .bento-card, .nexum-glass-card, .location-card, .gallery-item {
  box-shadow:
    var(--inner-light),
    0 1px 0 0 rgba(255, 255, 255, 0.03),
    0 24px 60px -24px rgba(0, 0, 0, 0.85);
}
.sim-card, .price-card, .bento-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 42%, rgba(255,255,255,0.01) 100%) !important;
  border-color: var(--hairline) !important;
}
/* Concentric inner core radius for media inside cards */
.sim-img-wrap, .bento-media { border-radius: calc(var(--radius-lg) - 0.6rem) !important; }

/* ---------- 4. Fluid Island Nav (detached after scroll) ---------- */
.nav {
  transition: transform var(--d-base) var(--ease-quart),
              background var(--d-base) var(--ease-quart),
              backdrop-filter var(--d-base) var(--ease-quart),
              border-color var(--d-base) var(--ease-quart),
              max-width var(--d-base) var(--ease-quart),
              border-radius var(--d-base) var(--ease-quart),
              padding var(--d-base) var(--ease-quart) !important;
}
.nav.island {
  max-width: 1080px;
  margin: 0.75rem auto 0;
  border-radius: 9999px;
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.9), var(--inner-light);
  padding-inline: 1.25rem;
}

/* Magnetic nav links: internal kinetic tension */
.nav-links a {
  position: relative;
  transition: color var(--d-fast) var(--ease-quart), transform var(--d-fast) var(--ease-quart);
  will-change: transform;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease-quart);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Island CTA: button-in-button trailing icon */
.btn-primary, .beam-shimmer-btn, .promo-claim-btn {
  transition: transform var(--d-fast) var(--ease-quart), box-shadow var(--d-fast) var(--ease-quart),
              background var(--d-fast) var(--ease-quart) !important;
}
.btn-primary:active, .beam-shimmer-btn:active, .promo-claim-btn:active { transform: scale(0.975); }
.btn-primary:hover, .beam-shimmer-btn:hover {
  box-shadow: 0 14px 40px -12px rgba(0, 240, 255, 0.4), var(--inner-light) !important;
}

/* ---------- 5. Cursor spotlight (desktop pointer:fine only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .bento-card, .sim-card, .price-card, .gallery-item, .nexum-glass-card {
    position: relative;
    --mx: 50%;
    --my: 50%;
  }
  .bento-card::after, .sim-card::after, .price-card::after,
  .gallery-item::after, .nexum-glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-quart);
    background: radial-gradient(
      340px circle at var(--mx) var(--my),
      rgba(187, 221, 255, 0.13),
      transparent 62%
    );
  }
  .bento-card:hover::after, .sim-card:hover::after, .price-card:hover::after,
  .gallery-item:hover::after, .nexum-glass-card:hover::after { opacity: 1; }
}

/* ---------- 6. Hero: cinematic entrance stack ---------- */
.hero-nexum-video { will-change: transform; }
.hero-nexum-container { z-index: 12; }
#heroScrollCue {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  opacity: 0;
}
#heroScrollCue .cue-rail {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0));
  position: relative;
  overflow: hidden;
}
#heroScrollCue .cue-rail::after {
  content: "";
  position: absolute;
  top: -46px; left: 0;
  width: 100%; height: 46px;
  background: linear-gradient(to bottom, transparent, #00f0ff);
  animation: cueFall 2.4s var(--ease-soft) infinite;
}
#heroScrollCue .cue-text {
  font-family: "DM Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
@keyframes cueFall {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translateY(92px); opacity: 0; }
}
@media (max-width: 767px) { #heroScrollCue { display: none; } }

/* Hero glass cards: Z-axis cascade */
.hero-nexum-right .nexum-glass-card {
  transition: transform var(--d-base) var(--ease-quart), border-color var(--d-base) var(--ease-quart);
}
.hero-nexum-right .nexum-glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.26);
}

/* ---------- 7. Preloader: ZoneOut portal mark motion graphic ---------- */
#zoPreloader {
  position: fixed;
  inset: 0;
  z-index: 1000700;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#zoPreloader .pl-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  will-change: transform, opacity, filter;
}
#zoPreloader .pl-logo {
  width: min(300px, 64vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 22px rgba(0, 240, 255, 0.4));
  will-change: transform, filter, clip-path;
}
/* CRT scanline that prints the logo in */
#zoPreloader .pl-scan {
  position: absolute;
  left: -4%;
  width: 108%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,240,255,0) 0%, rgba(0,240,255,0.9) 30%,
    rgba(200,255,49,0.95) 70%, rgba(200,255,49,0) 100%);
  box-shadow: 0 0 14px rgba(0,240,255,0.8), 0 0 30px rgba(200,255,49,0.4);
  opacity: 0;
  pointer-events: none;
}
#zoPreloader .pl-word {
  font-family: "Geist", "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  letter-spacing: 0.02em;
  color: #fff;
  overflow: hidden;
  line-height: 1;
}
#zoPreloader .pl-word span {
  display: inline-block;
  will-change: transform, opacity;
}
#zoPreloader .pl-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  opacity: 0; /* timeline reveals */
}
#zoPreloader .pl-pct {
  font-family: "Silkscreen", "DM Mono", monospace;
  font-size: 0.72rem;
  color: var(--cyan, #00f0ff);
  min-width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.55);
}
#zoPreloader.is-done { pointer-events: none; }
.no-js #zoPreloader { display: none; }

/* ---------- 8. Fixed film grain + aurora (systemic layers only) ---------- */
#zoGrain {
  position: fixed;
  inset: 0;
  z-index: 1000600;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
#zoAurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(46rem 30rem at 78% 6%, rgba(187, 221, 255, 0.09), transparent 65%),
    radial-gradient(38rem 26rem at 8% 42%, rgba(0, 240, 255, 0.055), transparent 68%),
    radial-gradient(34rem 24rem at 62% 88%, rgba(200, 255, 49, 0.035), transparent 70%);
}

/* ---------- 9. Marquee: velocity-reactive ribbon ---------- */
.marquee-track { will-change: transform, filter; }
.marquee-container { isolation: isolate; }

/* ---------- 10. Metrics: tabular numerals, no layout shift ---------- */
.metric-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 11. Mask-reveal helper for headlines ---------- */
.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: block; will-change: transform; }

/* ---------- 12. Reduced motion: honor preference, keep content visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; }
  #zoPreloader { display: none !important; }
  #heroScrollCue { display: none !important; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 13. Mobile collapse: kill heavy effects < 768px ---------- */
@media (max-width: 767px) {
  .nav.island { max-width: none; margin: 0; border-radius: 0; }
  #zoAurora { opacity: 0.34; }
}

/* ---------- 14. Gapless bento (no dead cells) ---------- */
.bento-grid {
  grid-auto-flow: dense;
  grid-auto-rows: minmax(0, auto);
  align-items: stretch;
}
.bento-card { min-height: 0; }
@media (min-width: 1024px) {
  .bento-card.col-8 { grid-column: span 8; }
  .bento-card.col-4 { grid-column: span 4; }
  .bento-card.col-6 { grid-column: span 6; }
}

/* ---------- 15. Filter bar: sliding high-contrast pill ---------- */
.filter-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
  box-shadow: var(--inner-light);
}
.filter-btn {
  border-radius: 9999px !important;
  transition: color var(--d-fast) var(--ease-quart),
              background var(--d-fast) var(--ease-quart),
              transform var(--d-fast) var(--ease-quart) !important;
}
.filter-btn.active {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 6px 22px -8px rgba(255, 255, 255, 0.5);
}
.filter-btn:active { transform: scale(0.97); }

/* Stadium capsule only when pills fit one row; wrapped rows break the arc.
   Tablet: soft rect. Phone: detached 2-col grid — cleaner, tap-friendly. */
@media (max-width: 1023px) {
  .filter-bar { border-radius: 1.4rem; }
}
@media (max-width: 639px) {
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .filter-btn {
    padding: 0.85rem 1rem;
    text-align: center;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
  }
}

/* ---------- 16. Micro: focus ring, selection, scrollbar ---------- */
:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: rgba(0, 240, 255, 0.28); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- 17. Island buttons: nested trailing-icon physics ---------- */
.action-beam-wa, .action-glass-pass, .btn-sim-action, .promo-claim-btn, .lightbox-close {
  transition: transform var(--d-fast) var(--ease-quart),
              box-shadow var(--d-fast) var(--ease-quart),
              background var(--d-fast) var(--ease-quart),
              border-color var(--d-fast) var(--ease-quart) !important;
}
.action-beam-wa:active, .action-glass-pass:active,
.btn-sim-action:active, .promo-claim-btn:active { transform: scale(0.975); }
.btn-sim-action svg, .action-beam-wa svg {
  transition: transform var(--d-fast) var(--ease-quart);
}
.btn-sim-action:hover svg { transform: translate(3px, -1px); }

/* ---------- 18. FAQ: fluid grid-rows accordion ---------- */
.faq-item {
  transition: border-color var(--d-base) var(--ease-quart),
              background var(--d-base) var(--ease-quart);
}
.faq-trigger { transition: color var(--d-fast) var(--ease-quart); }
.faq-icon { transition: transform var(--d-base) var(--ease-quart), color var(--d-fast) var(--ease-quart); }
.faq-item.open .faq-icon { transform: rotate(135deg); }

/* ---------- 19. Gallery overlay: kinetic reveal ---------- */
.gallery-overlay {
  transition: opacity var(--d-base) var(--ease-quart),
              transform var(--d-base) var(--ease-quart) !important;
}
.gallery-item:hover .gallery-overlay { transform: translateY(-4px); }
.gallery-item img { transition: transform 1.1s var(--ease-quart), filter var(--d-base) var(--ease-quart); }

/* ---------- 20. Lenis wiring ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 21. Nav responsive repair ----------
   Upstream bug (verified 375→1440px): .nav-links needs 1143px total but
   breakpoint swaps to drawer only at ≤768px → 834–1200px range clips links,
   and ≤390px pushes .menu-btn off-screen (right=428 > vw). */
@media (max-width: 1279px) {
  .nav-links { display: none !important; }
  .menu-btn { display: block !important; }
}
@media (max-width: 480px) {
  /* logo 140 + CTA 160 + btn 44 exceeds 390vw shell → drop CTA (drawer has WA CTA too) */
  .nav-actions .btn-pill.btn-primary { display: none !important; }
  .nav-logo img { width: 120px; }
}

/* ---------- 22. Mobile hero collision repair ----------
   Upstream: .hero-nexum is 100vh + justify-content:flex-end; on phones the
   stacked content (badge+title+form+2 glass cards) is taller than the viewport,
   so it overflows UPWARD under the fixed nav → headline collides with the
   120px nav logo (verified: title y=-24 vs logo y=18..138). Fix: let the hero
   grow with content and anchor it below the nav instead of bottom-pinning. */
@media (max-width: 767px) {
  .hero-nexum {
    height: auto;
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: calc(200px + env(safe-area-inset-top, 0px)); /* clear 140px logo nav (~177px) */
  }
}
@media (max-width: 480px) {
  .hero-nexum {
    padding-top: calc(178px + env(safe-area-inset-top, 0px)); /* 120px logo nav (~157px) */
  }
}

/* ---------- 23. Top-up matrix: credit-numeral-first redesign ----------
   Old: 4 identical inline-styled boxes, hierarchy by text color only.
   New: Silkscreen arcade numerals as the hero, tier as technical label,
   pay line demoted, Tier 04 breaks the grid (inverted + MAX badge). */
.topup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}
.topup-card {
  position: relative;
  padding: 1.5rem 1.25rem 1.35rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--hairline);
  box-shadow: var(--inner-light);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-quart),
              border-color var(--d-base) var(--ease-quart) !important;
}
.topup-card:hover { transform: translateY(-4px); border-color: rgba(0, 240, 255, 0.35) !important; }
.topup-tier {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}
.topup-credit {
  font-family: 'Silkscreen', var(--font-display, sans-serif);
  font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 0 28px rgba(0, 240, 255, 0.35);
}
.topup-credit-sub {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--cyan);
  margin-top: 0.35rem;
}
.topup-pay {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.topup-bonus {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--cyan);
  white-space: nowrap;
}
/* Tier 04: the one that breaks the pattern */
.topup-max {
  background: linear-gradient(160deg, rgba(200, 255, 49, 0.14), rgba(0, 240, 255, 0.07) 55%, rgba(255, 255, 255, 0.02));
  border-color: rgba(200, 255, 49, 0.45) !important;
  box-shadow: var(--inner-light);
}
.topup-max .topup-credit { text-shadow: 0 0 30px rgba(200, 255, 49, 0.5); }
.topup-max .topup-credit-sub { color: var(--lime); }
.topup-max .topup-bonus { color: var(--lime); }
.topup-max-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: #0a0a0c;
  background: var(--lime, #c8ff31);
  padding: 0.28rem 0.55rem;
  border-radius: 9999px;
  font-weight: 700;
}
.topup-value {
  margin-top: 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.topup-value-hero {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--lime);
  font-weight: 700;
}
@media (max-width: 1023px) and (min-width: 640px) {
  .topup-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .topup-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .topup-card { padding: 1.15rem 1rem 1.1rem; }
  .topup-card.topup-max { grid-column: 1 / -1; }
  .topup-credit { font-size: 1.65rem; }
  .topup-max .topup-credit { font-size: 2.3rem; }
  .topup-pay { flex-direction: column; gap: 0.15rem; }
  .topup-value { display: none; }
  .topup-value-hero { display: block; }
}


/* ---------- 24. Promo cards: copy polish + check top-align ---------- */
.price-features li { align-items: flex-start; }
.price-features li svg { flex-shrink: 0; margin-top: 0.22em; }