/* alive.css — gaya pendukung resep di alive.js. Muat setelah styles.css. */

/* ---------- preloader ---------- */
[data-alive="preloader"] {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink, #0a0a0a); color: var(--canvas, #f2efe9);
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.alive-pre__num {
  font-family: var(--font-body, Inter, sans-serif); font-size: clamp(2rem, 6vw, 5rem);
  letter-spacing: -0.03em; padding: .2em .4em; border: 1px solid currentColor;
}
html.is-loading { overflow: hidden; }

/* ---------- kinetic ---------- */
[data-alive="kinetic"] { position: relative; display: grid; place-items: center; min-height: 1.2em; }
.alive-kin__w {
  grid-area: 1 / 1; opacity: 0; will-change: transform, opacity, filter;
  font-size: clamp(3rem, 12vw, 11rem); line-height: .95; letter-spacing: -0.03em; text-transform: uppercase;
  text-align: center;
}
.alive-kin__w.is-on { opacity: 1; }

/* ---------- glitch ---------- */
[data-alive="glitch"] { position: relative; display: inline-block; }
[data-alive="glitch"].is-glitching::before,
[data-alive="glitch"].is-glitching::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
  color: inherit; background: inherit;
}
[data-alive="glitch"].is-glitching::before { left: 3px; color: #5ce1ff; animation: alive-gl-a .9s steps(1) both; clip-path: inset(0 0 60% 0); }
[data-alive="glitch"].is-glitching::after  { left: -3px; color: #ff5ca8; animation: alive-gl-b .9s steps(1) both; clip-path: inset(50% 0 0 0); }
@keyframes alive-gl-a {
  0%{clip-path:inset(10% 0 70% 0);transform:translate(-4px,0)} 20%{clip-path:inset(60% 0 10% 0);transform:translate(4px,-2px)}
  40%{clip-path:inset(30% 0 50% 0);transform:translate(-2px,2px)} 60%{clip-path:inset(80% 0 5% 0);transform:translate(3px,0)}
  80%{clip-path:inset(0 0 85% 0);transform:translate(-3px,1px)} 100%{clip-path:inset(0 0 0 0);transform:none;opacity:0}
}
@keyframes alive-gl-b {
  0%{clip-path:inset(70% 0 5% 0);transform:translate(4px,0)} 25%{clip-path:inset(5% 0 80% 0);transform:translate(-4px,2px)}
  50%{clip-path:inset(45% 0 35% 0);transform:translate(2px,-2px)} 75%{clip-path:inset(15% 0 60% 0);transform:translate(-3px,0)}
  100%{clip-path:inset(0 0 0 0);transform:none;opacity:0}
}

/* ---------- float ---------- */
[data-alive="float"] { position: relative; overflow: visible; }
[data-alive="float"] [data-depth] {
  position: absolute; pointer-events: none; will-change: transform; user-select: none;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
}
[data-alive="float"] video[data-depth] { background: transparent; }

/* ---------- card-tumble ---------- */
[data-alive="card-tumble"] { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
[data-alive="card-tumble"] .card {
  aspect-ratio: 3 / 4; background: #fff; color: #111; border-radius: 10px; padding: 1rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); will-change: transform; backface-visibility: hidden;
  font-size: .85rem; display: flex; align-items: flex-end;
}

/* ---------- grid-fly ---------- */
[data-alive="grid-fly"] { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
[data-alive="grid-fly"] img, [data-alive="grid-fly"] .tile { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; will-change: transform; }
@media (max-width: 720px) { [data-alive="grid-fly"] { grid-template-columns: repeat(3, 1fr); } }

/* ---------- hover-list ---------- */
[data-alive="hover-list"] { list-style: none; margin: 0; padding: 0; }
[data-alive="hover-list"] > li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 0; border-top: 1px solid currentColor; cursor: pointer;
  font-size: clamp(2rem, 6vw, 4.5rem); letter-spacing: -0.03em; line-height: 1;
  transition: opacity .3s, padding-left .3s;
}
[data-alive="hover-list"] > li:last-child { border-bottom: 1px solid currentColor; }
[data-alive="hover-list"] > li.is-dim { opacity: .3; }
[data-alive="hover-list"] > li:hover { padding-left: .4em; }
[data-alive="hover-list"] > li::after { content: "→"; font-size: .6em; }
.alive-hover__img {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: clamp(200px, 22vw, 340px); aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  opacity: 0; transform: translate(-50%, -50%) scale(.85); transform-origin: center;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.alive-hover__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- marquee ---------- */
[data-alive="marquee"] { overflow: hidden; white-space: nowrap; width: 100%; }
.alive-mq__track { display: inline-flex; will-change: transform; }
.alive-mq__track > span {
  padding-right: .35em; font-size: clamp(5rem, 18vw, 16rem); line-height: .9; text-transform: uppercase;
  letter-spacing: -0.03em; font-weight: 800;
}
[data-alive="marquee"].is-outline .alive-mq__track > span { color: transparent; -webkit-text-stroke: 2px currentColor; }

/* ---------- logo-reveal ---------- */
[data-alive="logo-reveal"] { display: inline-block; overflow: hidden; line-height: 1; perspective: 600px; }
.alive-lr__c { display: inline-block; will-change: transform; transform-origin: bottom center; }

/* ---------- lines ---------- */
.alive-line { display: block; overflow: hidden; }
.alive-line__in { display: block; will-change: transform; }

/* ---------- helpers untuk preset ---------- */
/* latar aurora (glitch-3d) — murni CSS */
.aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(80px); opacity: .55;
  background:
    radial-gradient(40% 40% at 30% 30%, #7c5cff 0%, transparent 70%),
    radial-gradient(35% 35% at 70% 40%, #ff5ca8 0%, transparent 70%),
    radial-gradient(45% 45% at 50% 80%, #5ce1ff 0%, transparent 70%);
  animation: alive-aurora 18s ease-in-out infinite alternate;
}
@keyframes alive-aurora { from { transform: rotate(0deg) scale(1); } to { transform: rotate(25deg) scale(1.15); } }

/* grid teknis (blueprint-tech) */
.grid-bg {
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hud { position: absolute; width: 18px; height: 18px; border: 1px solid currentColor; opacity: .6; }
.hud--tl { top: 1rem; left: 1rem; border-right: 0; border-bottom: 0; }
.hud--tr { top: 1rem; right: 1rem; border-left: 0; border-bottom: 0; }
.hud--bl { bottom: 1rem; left: 1rem; border-right: 0; border-top: 0; }
.hud--br { bottom: 1rem; right: 1rem; border-left: 0; border-top: 0; }

/* teks outline (brutalist-food) */
.outline { color: transparent; -webkit-text-stroke: 2px currentColor; }
.sticky-note { background: #fff6a8; color: #111; padding: 1rem 1.2rem; transform: rotate(-2.5deg); box-shadow: 0 12px 30px rgba(0,0,0,.35); max-width: 26ch; font-family: var(--font-body, Inter, sans-serif); }

/* video alpha (hasil prep-alpha.sh) */
.alpha-video { background: transparent; mix-blend-mode: normal; }
/* fallback tanpa alpha: video hitam-latar di atas section gelap */
.alpha-video--screen { mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  [data-alive="float"] [data-depth] { transform: none !important; }
}

/* ---------- three.js (three-scenes.js) ---------- */
[data-three] { position: relative; overflow: hidden; }
[data-three] > canvas { position: absolute; inset: 0; z-index: 0; }
[data-three] > *:not(canvas):not([data-fallback]) { position: relative; z-index: 1; }
[data-three] [data-fallback] { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
[data-three].three-fallback [data-fallback] { display: block; }
[data-three].three-fallback > canvas { display: none; }
@media (prefers-reduced-motion: reduce) { [data-three] [data-fallback] { display: block; } [data-three] > canvas { display: none; } }