/* =============================================
   TOAST — style.css
   Clean, well-organized stylesheet
   ============================================= */

/* --- Jersey 10 loaded via Google Fonts CDN in HTML; Super Mindset is local --- */
@font-face {
  font-family: 'Super Mindset';
  src: url('assets/fonts/super-mindset.ttf') format('truetype');
  font-display: swap;
}

/* ======================
   CSS Variables
   ====================== */
:root {
  --font-jersey: 'Jersey 10', sans-serif;
  --font-display: 'Super Mindset', 'Jersey 10', sans-serif;

  /* ===== TOAST OS · warm Frutiger-Aero palette ===== */
  --page-bg: #f3e7cf;          /* cream dasar */
  --ink: #2a1d0e;              /* teks tinta coklat */
  --text-yellow: #fff1cf;      /* dipakai loader CRT */
  --strip-bg: #2a1a0d;

  /* chrome (title bar window) */
  --shell-top: #ffffff;  --shell-mid: #e6cfa6;  --shell-btm: #b98a4f;
  --chrome-top: #ffffff; --chrome-mid: #efd9b0; --chrome-btm: #cf9f5e;

  /* glossy jelly button (golden toast) — dipetakan ke token tombol lama */
  --btn-top: #ffe9c0; --btn-mid: #f0b24e; --btn-btm: #c97e2e; --btn-shadow: #8a5320;

  /* toast signature accents */
  --toast: #f0b24e;  --toast-deep: #b5641f;
  --crust-amber: #e0892f;      /* eks --led-green */
  --accent-gold: #f4c659;      /* eks --accent-lime */
  --glow-amber: 0 0 12px rgba(244, 198, 89, 0.6);

  /* toasted-plastic casing (skeuomorphic hardware sidebars) */
  --case-top:  #5a3d1f;      /* lit upper face */
  --case-btm:  #2e1e0d;      /* shaded lower face */
  --case-hi:   #8a6233;      /* bevel highlight (top/left edge) */
  --case-lo:   #1a0f04;      /* bevel shadow (bottom/right edge) */
  --screen-recess: #120a02;  /* deep inset behind image "screens" */

  /* frosted glass (window / dock / taskbar) */
  --glass-bg: rgba(255, 250, 240, 0.55);
  --glass-strong: rgba(255, 250, 240, 0.74);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 18px 40px rgba(74, 45, 16, 0.22), 0 4px 12px rgba(74, 45, 16, 0.14);

  /* --- Panel = kartu konten warm (eks gradien emas; kartu di dalam window) --- */
  --panel-gold: linear-gradient(180deg, #fffaef 0%, #f3e1c0 100%);

  /* --- Groove gelap (track scrollbar/slider) --- */
  --groove-dark:
    repeating-linear-gradient(90deg, #00000026 0 1px, #0000 1px 3px),
    linear-gradient(#6f441a 0%, #3a230d 100%);
}

/* ======================
   Reset & Base
   ====================== */
*, :before, :after {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
}

body {
  background: #000;
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip; /* clip (not hidden) so it doesn't break GSAP ScrollTrigger pinning */
  font-family: Arial, Helvetica, sans-serif;
}

/* ======================
   Shared 3D Components
   ====================== */
.shell-3d {
  background: linear-gradient(180deg, var(--shell-top) 0%, var(--shell-mid) 50%, var(--shell-btm) 100%);
  font-family: var(--font-jersey);
  border: 3px solid #000;
  border-radius: 8px;
  position: relative;
  box-shadow: inset 2px 2px #ffffff59, inset -2px -2px #2a2a2a, 8px 8px #000, 12px 12px 24px #0006;
}

/* Glossy jelly button (golden toast) */
.btn-3d {
  font-family: var(--font-jersey);
  color: #4a2410;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 52%, var(--btn-btm) 100%);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(138, 83, 32, 0.4);
  border: 1px solid var(--btn-shadow);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 18px;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.btn-3d::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.btn-3d:hover {
  filter: brightness(1.08);
}

.btn-3d:active {
  background: linear-gradient(180deg, var(--btn-btm), var(--btn-mid), var(--btn-top));
  filter: none;
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 4px #00000080, 0 0 #000;
}

.btn-3d.is-pressed {
  background: linear-gradient(180deg, var(--btn-btm), var(--btn-mid), var(--btn-top));
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 4px #00000080;
}

/* Pill media utility classes */
.pill-media-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.pill-media-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pill-video-zoom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.5);
  transform-origin: center center;
}

/* ======================
   Metal Gleam Animation
   ====================== */
.metal-gleam {
  display: none; /* Removed scanning laser effect */
}

@keyframes metal-sweep {
  0% { left: -30%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

/* ======================
   Bevel Divider
   ====================== */
/* Title bar window (OS) */
.bevel-divider {
  color: var(--ink);
  font-family: var(--font-jersey);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, var(--chrome-top) 0%, var(--chrome-mid) 55%, var(--chrome-btm) 100%);
  border: none;
  border-bottom: 1px solid rgba(120, 80, 30, 0.35);
  margin: 0;
  padding: 9px 16px 9px 66px;   /* ruang utk traffic-light dots */
  font-size: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ======================
   Custom Scrollbar
   ====================== */
::-webkit-scrollbar {
  width: 14px;
  height: 0;
}

::-webkit-scrollbar-track {
  background: var(--groove-dark);
  border-left: 1px solid #000;
}

::-webkit-scrollbar-thumb {
  background: var(--panel-gold);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff9, inset 0 -1px #00000080;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  background: 0 0;
}

/* ======================
   Metal Slider (Volume)
   ====================== */
.metal-slider {
  appearance: none;
  cursor: pointer;
  background: var(--groove-dark);
  border: 1px solid #000;
  border-radius: 2px;
  outline: none;
  height: 10px;
}

.metal-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: grab;
  background: var(--panel-gold);
  border: 1px solid #000;
  border-radius: 2px;
  width: 10px;
  height: 16px;
  box-shadow: inset 0 1px #fff9, inset 0 -1px #00000080;
}

.metal-slider::-moz-range-thumb {
  cursor: grab;
  background: var(--panel-gold);
  border: 1px solid #000;
  border-radius: 2px;
  width: 10px;
  height: 16px;
}

.metal-slider::-moz-range-track {
  background: 0 0;
}

/* ======================
   Layout
   ====================== */
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}



/* --- Animated text logo (center banner) --- */
.banner-title {
  font-family: var(--font-display);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff6e2;
}

/* Per-letter: --sz (size) & --rot (base rotation) set randomly by script.js */
.banner-title .ltr,
.cpu-callout h3 .ltr,
.meme-title .ltr {
  display: inline-block;
  font-size: var(--sz, 64px);
  transform: rotate(var(--rot, 0deg));
  margin-left: -5px; /* sedikit bertumpukan */
}

.banner-title .ltr-inner,
.cpu-callout h3 .ltr-inner,
.meme-title .ltr-inner {
  display: inline-block;
  -webkit-text-stroke: 2px #4a2d10;
  text-shadow:
    0 2px 0 #b07636,
    0 4px 0 #8a531f,
    0 6px 0 #6f441a,
    0 8px 0 #4a2d10,
    0 12px 14px rgba(0, 0, 0, 0.35);
  transform-origin: center bottom;
  color: #fff6e2;
  font-family: var(--font-display);
}

.cpu-callout h3 .ltr-inner {
  -webkit-text-stroke: 0.5px #4a2d10;
}

.banner-title .ltr-inner {
  animation: letter-wobble 1.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes letter-wobble {
  0%, 100% { transform: rotate(-6deg) scale(1)    translateY(0); }
  25%      { transform: rotate(6deg)  scale(1.07) translateY(-5px); }
  50%      { transform: rotate(-3deg) scale(0.95) translateY(0); }
  75%      { transform: rotate(4deg)  scale(1.03) translateY(-2px); }
}

/* --- Main 3-Column Layout --- */
.main-layout {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebars --- */
aside.sidebar {
  width: 265px;
  flex-shrink: 0;
  align-self: stretch;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  /* Masking fadeout atas dan bawah: ditebalkan di atas (15%), fade out di bawah (85%-100%) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  align-items: center;
  justify-content: center;
  gap: 26px;
  /* opaque matte toasted-plastic casing */
  background: linear-gradient(180deg, var(--case-top) 0%, var(--case-btm) 100%);
  position: relative;
  overflow: hidden;
}

.sidebar-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.noise-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.15;
}

/* chunky plastic bevel: lit top/left lip, deep bottom/right shadow, inner depth + outer drop */
aside.sidebar.left {
  border-right: 2px solid var(--case-lo);
  box-shadow:
    inset 3px 3px 0 var(--case-hi),
    inset -4px -5px 0 var(--case-lo),
    inset 0 0 24px rgba(0, 0, 0, 0.45),
    2px 0 8px rgba(0, 0, 0, 0.4);
}

aside.sidebar.right {
  border-left: 2px solid var(--case-lo);
  box-shadow:
    inset 3px 3px 0 var(--case-hi),
    inset -4px -5px 0 var(--case-lo),
    inset 0 0 24px rgba(0, 0, 0, 0.45),
    -2px 0 8px rgba(0, 0, 0, 0.4);
}


/* --- Center Content --- */
main.content-area {
  flex: 1 1 0%;
  min-width: 0;
  padding: 24px 16px 48px;
  background: transparent;
}

.content-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.content-section {
  opacity: 1;
  transition: opacity 0.6s;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-jersey);
}

/* ======================
   Hero Video
   ====================== */
.hero {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  box-sizing: border-box;

  /* Masking fade out at the bottom */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

.hero .banner-title {
  margin-top: 8px;
}

.hero-video-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.hero-video {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  display: block;
}

/* ======================
   Lore Section
   ====================== */
.lore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* --- 3D Skeuomorphic Monitor --- */
.monitor-frame {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.monitor-bezel {
  width: 100%;
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1a1a1a 70%, #0d0d0d 100%);
  border-radius: 12px;
  padding: 18px 18px 28px;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.8);
  position: relative;
  border: 1px solid #000;
}

.monitor-screen {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8),
    inset 0 0 4px rgba(0,0,0,1),
    0 0 2px rgba(255,255,255,0.05);
  border: 2px solid #111;
}

.monitor-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.monitor-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 30%,
    transparent 50%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: 4px;
}

.monitor-led {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #4eff4e, #1a8c1a);
  box-shadow: 0 0 6px #4eff4e, 0 0 12px rgba(78,255,78,0.4);
  animation: led-pulse 2s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #4eff4e, 0 0 12px rgba(78,255,78,0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 3px #4eff4e, 0 0 6px rgba(78,255,78,0.2); }
}

.monitor-stand-neck {
  width: 40px;
  height: 28px;
  background: linear-gradient(90deg, #2a2a2a, #444, #2a2a2a);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.5);
}

.monitor-stand-base {
  width: 120px;
  height: 12px;
  background: linear-gradient(180deg, #3a3a3a, #1a1a1a);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}

.lore-card {
  background: var(--panel-gold);
  border: 2px solid rgb(0, 0, 0);
  box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px inset, rgba(0, 0, 0, 0.4) 0px -1px 0px inset, rgb(0, 0, 0) 2px 2px 0px;
  padding: 14px;
  color: rgb(0, 0, 0);
  border-radius: 16px;
}

.lore-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0px, var(--glow-amber);
}

.lore-card ul {
  margin: 0;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.5;
  list-style: disc;
  text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px;
}

.lore-card-body {
  position: relative;
}

.lore-float-img {
  display: block;
  shape-outside: margin-box;
}

.lore-float-right {
  float: right;
  width: 70px;
  height: auto;
  margin-left: 8px;
  margin-top: 18px;
}

.lore-float-right-sm {
  float: right;
  width: 75px;
  height: auto;
  margin-left: 8px;
  margin-top: 4px;
}

.lore-bottom-img {
  display: block;
  width: 100%;
  max-height: 100px;
  object-fit: contain;
  margin-top: 12px;
}

/* ======================
   PFP Generator
   ====================== */
.pfp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.pfp-preview-container {
  background: var(--panel-gold);
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 6px;
  max-width: 260px;
}

.pfp-preview-box {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgb(0, 0, 0);
  overflow: hidden;
}

.pfp-preview-box img,
.pfp-preview-box canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pfp-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pfp-tabs {
  display: flex;
  gap: 6px;
}

.pfp-tab-btn {
  flex: 1 1 0%;
}

.pfp-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 6px;
}

.pfp-option-btn {
  aspect-ratio: 1 / 1;
  background-color: rgb(0, 0, 0);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px solid rgb(68, 68, 68);
  cursor: pointer;
}

.pfp-option-btn.active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 1px var(--accent-gold), var(--glow-amber);
}

.pfp-actions {
  display: flex;
  gap: 8px;
}

.pfp-action-btn {
  flex: 1 1 0%;
}

/* ======================
   Memes Gallery
   ====================== */
.memes-container {
  background: var(--panel-gold);
  border: 2px solid rgb(0, 0, 0);
  box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px inset, rgba(0, 0, 0, 0.4) 0px -1px 0px inset, rgb(0, 0, 0) 2px 2px 0px;
  padding: 12px;
}

.memes-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  gap: 5px;
}

.meme-item {
  background: var(--panel-gold);
  border: 2px solid rgb(0, 0, 0);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.meme-item img,
.meme-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ======================
   3D Meme Toaster Section
   ====================== */
.toaster-container {
  /* No card wrapper — the 3D book floats directly on the page background */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.toaster-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: none;
  border: none;
}

#toaster-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;   /* chunky PS2-style upscale */
}

.toaster-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
  transition: opacity 0.5s ease;
}

.toaster-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.toaster-loader span {
  font-family: var(--font-jersey);
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--text-yellow);
  text-shadow: 0 0 12px rgba(232, 180, 85, 0.6);
  animation: toaster-pulse 1.5s ease-in-out infinite;
}

@keyframes toaster-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Toaster fallback poster */
.toaster-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ======================
   Audio Player Box
   ====================== */
.audio-player-box {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 50;
  background: var(--panel-gold);
  border: 2px solid #000;
  box-shadow: inset 1px 1px #ffffffb3, inset -1px -1px #0006, 2px 2px #000;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-btn {
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 50%, var(--btn-btm) 100%);
  border: 2px solid #000;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--btn-shadow), 1px 1px 0 #000;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.audio-btn:active {
  background: linear-gradient(180deg, var(--btn-btm), var(--btn-mid), var(--btn-top));
  box-shadow: inset 2px 2px 4px #00000080;
  transform: translate(1px, 1px);
}

/* ======================
   Intro Overlay
   ====================== */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-display);
  transition: opacity 0.5s ease;
}

#intro-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-label {
  position: absolute;
  top: 32px;
  color: #888;
  font-size: 14px;
  letter-spacing: 6px;
  text-transform: uppercase;
  animation: intro-pulse 2s ease-in-out infinite;
  z-index: 3;
}

/* 3D toaster canvas as the intro-screen background (behind the character) */
.toaster-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

@keyframes intro-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

#intro-anim {
  max-width: 420px;
  max-height: 420px;
  width: 60vmin;
  height: auto;
  object-fit: contain;
  display: block;
  position: absolute;
  bottom: 10vh;
  z-index: 2;
}

.intro-enter-btn {
  position: absolute;
  bottom: 10vh;
  z-index: 10;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  padding: 12px 40px;
  letter-spacing: 4px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.intro-enter-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.hidden-bottom {
  opacity: 0 !important;
  transform: translateY(100vh) !important;
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.anim-slide-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ======================
   Preloader Overlay
   ====================== */
#preloader-overlay {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader-overlay.preloader-hidden {
  display: none;
}

/* --- Global Helpers --- */
.smoke-canvas {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

.hidden {
  display: none !important;
}

#preloader-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preloader-skip-btn {
  position: absolute;
  bottom: 40px;
  right: 40px;
  padding: 12px 24px;
  font-size: 24px;
  z-index: 9999;
}

/* ======================
   CA Banner
   ====================== */
.ca-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.86) 0%, rgba(236, 221, 194, 0.8) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-top: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 -8px 24px rgba(74, 45, 16, 0.18);
  padding: 10px 20px;
  font-family: var(--font-jersey);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.ca-banner-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.ca-banner-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ca-label {
  color: var(--toast-deep);
  font-size: 20px;
  letter-spacing: 2px;
  text-shadow: var(--glow-amber);
  flex-shrink: 0;
}

.ca-address {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 1px;
  word-break: break-all;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  user-select: all;
  cursor: text;
}

.ca-copy-btn {
  flex-shrink: 0;
  font-size: 14px;
  padding: 6px 16px;
  letter-spacing: 2px;
}

.ca-copy-btn.copied {
  background: linear-gradient(180deg, var(--btn-btm), var(--btn-mid), var(--btn-top));
  color: var(--crust-amber);
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 4px #00000080;
}

/* --- Corner GIFs --- */
.corner-gif {
  position: fixed;
  bottom: 0;
  z-index: 50;
  width: 250px;
  height: auto;
  pointer-events: none;
}
.corner-left {
  left: 0;
}
.corner-right {
  right: 0;
}

/* =====================================================
   TOAST OS — Frutiger-Aero glass layer
   ===================================================== */

/* Window frame: tiap section konten jadi jendela kaca */
.os-window {
  position: relative;
  margin: 0;
  border-radius: 16px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.os-window > .bevel-divider:first-child {
  border-radius: 15px 15px 0 0;
}
/* isi window (selain title bar) diberi padding dari tepi kaca */
.os-window > :not(.bevel-divider) {
  padding: 16px;
}

/* Traffic-light window controls + sheen di title bar */
.bevel-divider::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 12px;
  background:
    radial-gradient(circle at 6px 6px, #b5531f 0 5px, transparent 6px),
    radial-gradient(circle at 23px 6px, #e0892f 0 5px, transparent 6px),
    radial-gradient(circle at 40px 6px, #f4c659 0 5px, transparent 6px);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
}
.bevel-divider::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ===== Sidebar → toasted-plastic hardware casing ===== */
/* video dimatikan: tertutup plastik opaque (hapus elemen di HTML utk stop decode) */
.sidebar-bg-video {
  display: none;
}
/* sheen tipis di permukaan atas plastik */
aside.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 220, 160, 0.10) 0%, rgba(255, 220, 160, 0) 100%);
}
/* cooling vents / ribbed grip greeble di area kosong bawah */
aside.sidebar::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 48px;
  z-index: 1;
  pointer-events: none;
  border-radius: 6px;
  background: repeating-linear-gradient(
    180deg,
    var(--case-lo) 0 3px,
    var(--case-hi) 3px 4px,
    transparent 4px 9px
  );
  opacity: 0.5;
}

/* Audio widget → chip kaca */
.audio-player-box {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(74, 45, 16, 0.2);
  border-radius: 12px;
}

/* Window lift + title bar interaktif */
.os-window {
  transition: box-shadow 0.25s ease;
}
.os-window:hover {
  box-shadow: 0 24px 50px rgba(74, 45, 16, 0.28), 0 6px 14px rgba(74, 45, 16, 0.16);
}
.bevel-divider:hover::before {
  filter: drop-shadow(0 0 4px rgba(224, 137, 47, 0.85)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
}

/* Taskbar start button (tampil saat CA aktif) */
.os-start {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-jersey);
  font-size: 18px;
  letter-spacing: 1px;
  color: #4a2410;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 52%, var(--btn-btm) 100%);
  border: 1px solid var(--btn-shadow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 8px rgba(138, 83, 32, 0.4);
}


/* ======================
   Hero Section
   ====================== */
.hero {
  position: relative;
  width: 100%;
  min-height: 110vh; /* Ditinggikan agar section bawah tidak menutupi karakter hero */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000; /* Hitam solid, karena fadeout sekarang dilakukan oleh main-layout */
  padding-bottom: 10vh; /* Memberi ruang agar konten tidak terpotong */
  overflow: hidden;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.6; /* Slightly dimmed so character and text remain legible */
  pointer-events: none;
}

.banner-title {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 18rem); /* Dibesarkan */
  line-height: 1;
  text-align: center;
  margin-top: 5vh;
  margin-bottom: -15vh; /* Overlap dengan karakter sekitar 20% */
  color: var(--text-yellow); /* Diubah agar terlihat jelas di background hitam */
  text-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
  z-index: 1; /* Di atas video background */
  pointer-events: none;
}

.hero-video-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2; /* Di depan judul text */
}

.hero-video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

/* ======================
   CPU Architecture Animation
   ====================== */
.cpu-architecture-container {
  grid-column: 1 / -1; /* Memaksa elemen untuk memenuhi seluruh baris grid */
  width: 100%;
  max-width: 1000px;
  margin: 48px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Moved to components/cpu-architecture.css */




/* ======================
   Sidebar instruments (LCD readout / LED trust panel / doneness dial)
   ====================== */
.lcd-display {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 12px 14px;
  border: 2px solid var(--case-lo);
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1a0f02 0%, var(--screen-recess) 100%);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 0 var(--case-hi);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-jersey);
}
.lcd-row { display: flex; align-items: baseline; justify-content: space-between; }
.lcd-label { font-size: 15px; letter-spacing: 2px; color: #b07f3c; }
.lcd-val {
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(244, 198, 89, 0.7);
}
.lcd-val.up   { color: #ffd36b; }
.lcd-val.down { color: #d07a2c; }

.led-panel {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 11px 13px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.42));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 var(--case-hi);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.led-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jersey);
  font-size: 17px;
  letter-spacing: 1.5px;
  color: #ecd6aa;
}
.led-dot {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3a2913;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
}
.led-dot.on {
  background: radial-gradient(circle at 35% 30%, #ffe9a8 0%, var(--crust-amber) 70%);
  box-shadow:
    0 0 8px 1px rgba(224, 137, 47, 0.85),
    inset 0 0 2px rgba(255, 255, 255, 0.8);
  animation: led-pulse 2.4s ease-in-out infinite;
}
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.doneness-dial {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.dial-knob {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 38% 32%, #6b4a24 0%, #241708 72%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.18),
    inset 0 -5px 9px rgba(0, 0, 0, 0.65),
    0 5px 9px rgba(0, 0, 0, 0.5);
}
.dial-knob::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.55;
  background: repeating-conic-gradient(var(--case-hi) 0deg 4deg, var(--case-lo) 4deg 8deg);
}
.dial-knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--accent-gold);
  box-shadow: 0 0 8px rgba(244, 198, 89, 0.8);
}
.dial-scale {
  width: 92px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-jersey);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #b07f3c;
}

/* ======================
   Sidebar nameplate title + button deck (keypad)
   ====================== */
.sidebar-title {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: var(--font-jersey);
  font-size: 28px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #e0bd7e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 -1px 1px rgba(0, 0, 0, 0.75);
  padding: 2px 0 12px;
  border-bottom: 2px solid var(--case-lo);
  box-shadow: 0 1px 0 var(--case-hi);
}

/* social/trading keys grouped as a recessed device keypad */
.button-deck {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #241708 0%, #150c03 100%);
  box-shadow:
    inset 0 3px 9px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(0, 0, 0, 0.6),
    0 1px 0 var(--case-hi);
}

/* ======================
   Reusable compact social button (.social-btn)
   Drop-in: <a class="social-btn">LABEL</a> — one class, reused on every social/trading link.
   ====================== */
.social-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.social-icon-mask {
  width: 22px;
  height: 22px;
  background-color: #4a2410; /* Matches the text color of the button */
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  flex-shrink: 0;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-jersey);
  font-size: 19px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a2410;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #ffe7b8 0%, #f0b24e 52%, #c97e2e 100%);
  /* compact chunky key: short extrusion + cast shadow */
  box-shadow:
    0 4px 0 var(--btn-shadow),
    0 6px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(110, 67, 29, 0.35);
  position: relative;
  overflow: hidden;
  transition: filter 0.1s ease;
}
.social-btn::before {            /* gloss */
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.social-btn:hover { filter: brightness(1.06); }
.social-btn:active {
  transform: translateY(3px);
  filter: brightness(0.96);
  box-shadow:
    0 1px 0 var(--btn-shadow),
    0 2px 4px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 3px rgba(110, 67, 29, 0.3);
}

/* Disabled / Coming Soon state for social buttons */
.social-btn-disabled {
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.5) brightness(0.75);
  opacity: 0.6;
  box-shadow:
    0 2px 0 var(--btn-shadow),
    0 3px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 3px rgba(110, 67, 29, 0.2);
}
.social-btn-disabled span {
  font-size: 14px;
  letter-spacing: 2.5px;
  animation: coming-soon-pulse 2.4s ease-in-out infinite;
}
.social-btn-disabled .social-icon,
.social-btn-disabled .social-icon-mask {
  opacity: 0.35;
}

/* CA Banner "COMING SOON" state */
.ca-coming-soon {
  color: var(--crust-amber);
  font-size: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: coming-soon-pulse 2.4s ease-in-out infinite;
  user-select: none;
  cursor: default;
}

@keyframes coming-soon-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* tighten the keypad tray for the compact keys */
.button-deck { gap: 11px; padding: 14px 12px; }

/* ======================
   CPU "grow to full" scroll effect — dimming backdrop
   ====================== */
#cpu-scroll-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(20, 12, 4, 0.55) 0%, rgba(8, 5, 2, 0.96) 70%);
}

/* CPU pin wrapper: holds the grid-row slot so GSAP can pin the inner block */
.cpu-pin {
  grid-column: 1 / -1;
  width: 100%;
}

/* ======================
   Lore — full-width per-section scrollytelling
   ====================== */
.lore {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 45;   /* lore-3 section scrolls over the persistent fixed CPU (z-index 40) */
}
.lore-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-start;   /* content sits higher up, not vertically centered */
  padding: 8vh 7vw;
  overflow: hidden;
}
.lore-section:nth-child(odd) {
  background: radial-gradient(120% 80% at 18% 50%, rgba(244, 198, 89, 0.06), transparent 60%);
}
.lore-section:nth-child(even) {
  background: radial-gradient(120% 80% at 82% 50%, rgba(224, 137, 47, 0.07), transparent 60%);
}
.lore-section-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;        /* centered (the remaining lore beats) */
  text-align: center;
}
.lore-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(78px, 17vw, 210px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(244, 198, 89, 0.22);
  margin-bottom: -0.08em;
  pointer-events: none;
}
.lore-heading {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: clamp(38px, 6.5vw, 88px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), var(--glow-amber);
}
.lore-points {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-jersey);
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: 1.6;
  color: #f3e7cf;
}
.lore-points li {
  margin: 0 0 10px;
  opacity: 0.92;
}
@media (max-width: 720px) {
  .lore-section { min-height: 64vh; padding: 7vh 8vw; }
  .lore-section:nth-child(even) .lore-section-inner { text-align: left; }
}

/* CPU as its own full-width section (pins + grows to full on scroll) */
.cpu-section {
  position: relative;
  height: 200vh;   /* scroll room for the grow + lore reveals */
}
.cpu-sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
/* CPU is a centered overlay that grows then PERSISTS (driven by cpu-scroll.js) */
.cpu-section .cpu-architecture-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1000px, 92vw);
  max-width: none;
  aspect-ratio: 2 / 1;
  margin: 0;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
}

/* CPU section callouts — lore beats sliding in from the sides during the pin.
   Plain text: no card, no glow, no number (only a dark shadow for legibility). */
.cpu-callout {
  position: absolute;
  z-index: 62;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  width: min(40vw, 460px);
}
.cpu-callout h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff6e2;
  -webkit-text-stroke: 2px #4a2d10;
  text-shadow:
    0 2px 0 #b07636,
    0 4px 0 #8a531f,
    0 6px 0 #6f441a,
    0 8px 0 #4a2d10,
    0 12px 14px rgba(0, 0, 0, 0.35);
  transform-origin: center bottom;
}
.cpu-callout ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-jersey);
  font-size: clamp(17px, 1.9vw, 24px);
  line-height: 1.5;
  color: #f3e7cf;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.92);
}
.cpu-callout li { margin: 0 0 7px; }
.cpu-callout-right { top: 16%; right: 4vw; text-align: right; }
.cpu-callout-left  { top: 50%; left: 4vw;  text-align: left; }