/* ============================================================
   RAMALAN AI 100 TAHUN — sci-fi mobile-first stylesheet
   ============================================================ */

:root {
  --bg: #05010f;
  --bg2: #0f0c29;
  --text: #eef2ff;
  --muted: #9aa6c8;

  --cyan: #00e5ff;
  --orange: #ff6b35;
  --red: #ff2e5f;
  --green: #00ff88;
  --blue: #4d7cff;
  --violet: #b44dff;
  --teal: #2dd4bf;
  --gold: #ffd166;
  --white: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- accent utilities ---------- */
.t-cyan   { color: var(--cyan);   text-shadow: 0 0 12px var(--cyan); }
.t-orange { color: var(--orange); text-shadow: 0 0 12px var(--orange); }
.t-red    { color: var(--red);    text-shadow: 0 0 12px var(--red); }
.t-green  { color: var(--green);  text-shadow: 0 0 12px var(--green); }
.t-blue   { color: var(--blue);   text-shadow: 0 0 12px var(--blue); }
.t-violet { color: var(--violet); text-shadow: 0 0 12px var(--violet); }
.t-teal   { color: var(--teal);   text-shadow: 0 0 12px var(--teal); }
.t-gold   { color: var(--gold);   text-shadow: 0 0 12px var(--gold); }
.t-white  { color: #fff;          text-shadow: 0 0 12px rgba(255,255,255,.7); }

/* ============================================================
   STARS CANVAS
   ============================================================ */
#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem clamp(1.25rem, 5vw, 3rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, .12), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(180, 77, 255, .15), transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 55%, #1a0033 100%);
  overflow: hidden;
}

.hero::before { /* perspective grid */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 229, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(600px) rotateX(55deg) scale(2) translateY(30%);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
}

.hero-inner { position: relative; z-index: 2; }

.badge {
  display: inline-block;
  font-size: clamp(.7rem, 2.6vw, .85rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, .4);
  border-radius: 999px;
  padding: .4rem 1.1rem;
  margin-bottom: clamp(1.4rem, 5vh, 2.4rem);
  box-shadow: 0 0 18px rgba(0, 229, 255, .25);
}

h1 {
  font-size: clamp(2.6rem, 13vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: 1rem;
}

/* glitch effect */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: var(--cyan);
  transform: translate(-2px, 0);
  animation: glitch-a 3s infinite steps(1);
}
.glitch::after {
  color: var(--violet);
  transform: translate(2px, 0);
  animation: glitch-b 3s infinite steps(1);
}
@keyframes glitch-a {
  0%, 92%, 100% { clip-path: inset(0 0 100% 0); }
  4%  { clip-path: inset(20% 0 50% 0); }
  8%  { clip-path: inset(60% 0 10% 0); }
  12% { clip-path: inset(0 0 100% 0); }
}
@keyframes glitch-b {
  0%, 90%, 100% { clip-path: inset(100% 0 0 0); }
  6%  { clip-path: inset(40% 0 30% 0); }
  14% { clip-path: inset(80% 0 0 0); }
}

.hero-sub {
  font-size: clamp(1rem, 4.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1rem;
}

.hero-note {
  max-width: 30rem;
  margin: 0 auto 2rem;
  font-size: clamp(.85rem, 3.4vw, 1rem);
  color: var(--muted);
}

.btn-cta {
  display: inline-block;
  text-decoration: none;
  color: var(--bg);
  font-weight: 800;
  letter-spacing: .03em;
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  padding: .9rem 2.2rem;
  border-radius: 999px;
  box-shadow: 0 0 30px rgba(0, 229, 255, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:active { transform: scale(.96); }

.scroll-hint {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  z-index: 2;
}
.chevron {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  opacity: 0;
  animation: bounce 1.8s infinite;
}
.chevron:nth-child(2) { animation-delay: .2s; }
.chevron:nth-child(3) { animation-delay: .4s; }
@keyframes bounce {
  0%   { opacity: 0; transform: rotate(45deg) translate(-3px, -3px); }
  50%  { opacity: .9; }
  100% { opacity: 0; transform: rotate(45deg) translate(3px, 3px); }
}

/* ============================================================
   ERA SECTIONS
   ============================================================ */
main { position: relative; z-index: 1; }

.era {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 4.5rem clamp(1.25rem, 6vw, 3.5rem) 5.5rem;
  overflow: hidden;
  background: var(--bg);
}

.era::before { /* subtle tint by accent */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
}

.era[data-accent="cyan"]   { background: linear-gradient(175deg, #05010f, #052033 70%, #04070f); }
.era[data-accent="orange"] { background: linear-gradient(175deg, #05010f, #2a1408 70%, #04070f); }
.era[data-accent="red"]    { background: linear-gradient(175deg, #05010f, #2a0a16 70%, #04070f); }
.era[data-accent="green"]  { background: linear-gradient(175deg, #05010f, #062a1a 70%, #04070f); }
.era[data-accent="blue"]   { background: linear-gradient(175deg, #05010f, #0a1440 70%, #04070f); }
.era[data-accent="violet"] { background: linear-gradient(175deg, #05010f, #1c0a2a 70%, #04070f); }
.era[data-accent="teal"]   { background: linear-gradient(175deg, #05010f, #06302e 70%, #04070f); }
.era[data-accent="gold"]   { background: linear-gradient(175deg, #05010f, #2a2308 70%, #04070f); }
.era[data-accent="pure"]   { background: linear-gradient(175deg, #05010f, #0f0c29 60%, #170106); }

/* decorative ring per section */
.era::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  border: 2px solid;
  opacity: .18;
  top: 15%;
  right: -14rem;
}
.era[data-accent="cyan"]::after   { border-color: var(--cyan);   box-shadow: 0 0 40px var(--cyan); }
.era[data-accent="orange"]::after { border-color: var(--orange); box-shadow: 0 0 40px var(--orange); }
.era[data-accent="red"]::after    { border-color: var(--red);    box-shadow: 0 0 40px var(--red); }
.era[data-accent="green"]::after  { border-color: var(--green);  box-shadow: 0 0 40px var(--green); }
.era[data-accent="blue"]::after   { border-color: var(--blue);   box-shadow: 0 0 40px var(--blue); }
.era[data-accent="violet"]::after { border-color: var(--violet); box-shadow: 0 0 40px var(--violet); }
.era[data-accent="teal"]::after   { border-color: var(--teal);   box-shadow: 0 0 40px var(--teal); }
.era[data-accent="gold"]::after   { border-color: var(--gold);   box-shadow: 0 0 40px var(--gold); }
.era[data-accent="pure"]::after   { border-color: var(--white);  box-shadow: 0 0 40px rgba(255,255,255,.4); }

.era-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(10rem, 30vh, 15rem);
  margin-bottom: .5rem;
}

.era-body { position: relative; z-index: 1; }

.era-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .4rem;
}
.era-num {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 900;
  letter-spacing: .1em;
}
.era-year {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

.era-title {
  font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  letter-spacing: .02em;
  margin-bottom: .4rem;
  line-height: 1.15;
}
.era-sub {
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .9rem;
}
.era-text {
  font-size: clamp(.98rem, 3.9vw, 1.12rem);
  color: var(--text);
  max-width: 40rem;
}

/* ============================================================
   SVG ART (pure CSS) — each accent cycles
   ============================================================ */
.art {
  display: block;
  width: clamp(9rem, 34vw, 13rem);
  height: clamp(9rem, 34vw, 13rem);
  position: relative;
}
.art::before {  /* glow halo */
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 65%);
  opacity: .22;
  filter: blur(8px);
}

/* --- car --- */
.era[data-accent="cyan"] .art-car { color: var(--cyan); }
.art-car::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(8% 55%, 28% 32%, 68% 28%, 88% 50%, 94% 74%, 0 74%);
  background: linear-gradient(160deg, #1b2a4a, #080d1c);
  border: 2px solid currentColor;
  box-shadow: inset 0 0 18px currentColor;
}
.art-car::before {
  background: radial-gradient(circle, #fff 0%, transparent 8%),
              radial-gradient(circle, #fff 0%, transparent 8%);
  background-size: 30% 30%;
  background-position: 25% 68%, 72% 68%;
  background-repeat: no-repeat;
  opacity: 1;
}

/* --- robot --- */
.era[data-accent="orange"] .art-robot { color: var(--orange); }
.art-robot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(currentColor 0 0) no-repeat 12% 70% / 18% 34%,   /* arm left */
    linear-gradient(currentColor 0 0) no-repeat 70% 70% / 18% 34%,   /* arm right */
    linear-gradient(currentColor 0 0) no-repeat 34% 8% / 32% 34%,    /* head */
    linear-gradient(currentColor 0 0) no-repeat 26% 46% / 48% 48%;   /* body */
  opacity: .85;
}

/* --- VS --- */
.era[data-accent="red"] .art-vs { color: var(--red); }
.art-vs::after {
  content: "VS";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3.5rem, 16vw, 6rem);
  font-weight: 900;
  color: var(--red);
  text-shadow: 0 0 30px var(--red);
  letter-spacing: .05em;
  border: 2px solid rgba(255, 46, 95, .4);
  border-radius: 50%;
}

/* --- plus (collaboration) --- */
.era[data-accent="green"] .art-plus { color: var(--green); }
.art-plus::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 900;
  color: var(--green);
  text-shadow: 0 0 30px var(--green);
}

/* --- city --- */
.era[data-accent="blue"] .art-city { color: var(--blue); }
.art-city::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--blue) 0 0) no-repeat 6% 62% / 14% 30%,
    linear-gradient(var(--blue) 0 0) no-repeat 26% 48% / 14% 44%,
    linear-gradient(var(--blue) 0 0) no-repeat 46% 66% / 14% 26%,
    linear-gradient(var(--blue) 0 0) no-repeat 62% 40% / 12% 52%,
    linear-gradient(var(--blue) 0 0) no-repeat 79% 58% / 14% 34%;
  opacity: .9;
  border-bottom: 2px solid var(--blue);
}

/* --- quantum (atom orbit) --- */
.era[data-accent="violet"] .art-quantum { color: var(--violet); }
.art-quantum::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: 0 0 20px currentColor, 0 0 20px currentColor inset;
}
.art-quantum::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 24px currentColor;
}

/* --- brain --- */
.era[data-accent="teal"] .art-brain { color: var(--teal); }
.art-brain::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 88% 22%, 94% 58%, 60% 100%, 40% 100%, 6% 58%, 12% 22%);
  background: linear-gradient(180deg, #0b3d3a, #071c1b);
  border: 2px solid currentColor;
  box-shadow: 0 0 20px currentColor;
}

/* --- globe --- */
.era[data-accent="gold"] .art-globe { color: var(--gold); }
.art-globe::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 3px solid currentColor;
  box-shadow: 0 0 24px currentColor;
  background:
    radial-gradient(circle at 30% 30%, transparent 58%, currentColor 60% 62%, transparent 64%) no-repeat,
    radial-gradient(circle at 70% 70%, transparent 58%, currentColor 60% 62%, transparent 64%) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14%, currentColor 15% 16%) no-repeat;
  background-size: 100% 100%;
  opacity: .9;
}

/* --- seed / mirror (epilog) --- */
.era[data-accent="pure"] .art-seed { color: #fff; }
.art-seed::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 61% 35%, 100% 35%, 68% 57%, 79% 100%, 50% 72%, 21% 100%, 32% 57%, 0 35%, 39% 35%);
  background: linear-gradient(160deg, #f0f4ff, #8aa0c8);
  box-shadow: 0 0 30px rgba(255,255,255,.5);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.era.era-hidden .era-visual,
.era.era-hidden .era-head,
.era.era-hidden .era-title,
.era.era-hidden .era-sub,
.era.era-hidden .era-text,
.era.era-hidden .btn-ghost {
  opacity: 0;
  transform: translateY(28px);
}
.era .era-visual,
.era .era-head,
.era .era-title,
.era .era-sub {
  transition: opacity .7s ease, transform .7s ease;
}
.era .era-text,
.era .era-visual {
  transition-delay: .12s;
}
.era.era-ready .era-head,
.era.era-ready .era-title,
.era.era-ready .era-sub,
.era.era-ready .era-text,
.era.era-ready .btn-ghost {
  opacity: 1;
  transform: none;
}

/* ============================================================
   ERA NAV (sticky bottom dots)
   ============================================================ */
.era-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: linear-gradient(to top, rgba(5, 1, 15, .92), rgba(5, 1, 15, 0));
  padding: 1.6rem 1rem .8rem;
  pointer-events: none;
}
.era-nav-track {
  display: flex;
  justify-content: center;
  gap: clamp(.55rem, 2.6vw, .8rem);
  pointer-events: auto;
}
.nav-dot {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 7vw, 2.1rem);
  height: clamp(1.7rem, 7vw, 2.1rem);
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(.55rem, 2.4vw, .7rem);
  font-weight: 700;
  transition: all .25s ease;
  background: rgba(5, 1, 15, .55);
}
.nav-dot span { pointer-events: none; }
.nav-dot.active {
  border-color: #fff;
  color: #05010f;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.55);
  transform: scale(1.12);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem clamp(1.25rem, 6vw, 3rem) 6.5rem;
  color: var(--muted);
  font-size: clamp(.75rem, 3vw, .85rem);
  letter-spacing: .05em;
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--bg);
}

.btn-ghost {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .7rem 1.6rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  transition: all .2s ease;
}
.btn-ghost:active { background: rgba(255,255,255,.12); transform: scale(.97); }

/* ============================================================
   RESPONSIVE — larger screens
   ============================================================ */
@media (min-width: 720px) {
  .era {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 6vw, 4rem);
    padding: 4rem clamp(3rem, 10vw, 8rem);
  }
  .era-visual {
    order: 2;
    width: clamp(16rem, 34vw, 24rem);
    height: auto;
    min-height: 60vh;
    flex-shrink: 0;
  }
  .art {
    width: clamp(13rem, 26vw, 19rem);
    height: clamp(13rem, 26vw, 19rem);
  }
  .era-body { order: 1; max-width: 46rem; }
  .era-text { max-width: none; }
}

@media (min-width: 1024px) {
  .era-sub { font-size: 1.25rem; }
  .era-text { font-size: 1.15rem; }
  h1 { font-size: 6rem; }
}