/* ================================================================
   VALENCE — style.css
   Tema: Hitam · Warna Dinamis · Glassmorphism · Neon UI
   Warna berubah otomatis setiap 6 detik
================================================================ */

/* ── CSS Variables ── */
:root {
  --primary:      #ff0033;
  --primary-b:    #ff3355;
  --primary-d:    #cc0022;
  --primary-dk:   #660011;
  --primary-rgb:  255,0,51;

  --black:        #000000;
  --black2:       #050508;
  --black3:       #0a0a10;
  --white:        #ffffff;
  --white-dim:    rgba(255,255,255,.75);
  --glass:        rgba(255,255,255,.04);
  --glass-border: rgba(var(--primary-rgb),.25);

  --glow-sm:  0 0 8px  var(--primary), 0 0 20px  rgba(var(--primary-rgb),.4);
  --glow-md:  0 0 15px var(--primary), 0 0 40px  rgba(var(--primary-rgb),.5);
  --glow-lg:  0 0 30px var(--primary), 0 0 80px  rgba(var(--primary-rgb),.6);
  --glow-xl:  0 0 60px var(--primary), 0 0 120px rgba(var(--primary-rgb),.5), 0 0 200px rgba(var(--primary-rgb),.3);

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
  --ease:         cubic-bezier(.22,1,.36,1);
  --ease-back:    cubic-bezier(.34,1.56,.64,1);

  /* Theme transition */
  --theme-dur: 1.2s;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { text-decoration: none; color: inherit; }
canvas { display: block; }

/* ── Theme transition on root ── */
:root {
  transition:
    --primary var(--theme-dur) ease,
    --primary-b var(--theme-dur) ease,
    --primary-d var(--theme-dur) ease;
}

/* ================================================================
   LOADING SCREEN
================================================================ */
.loading-screen {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 5000;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.loading-screen.hide { opacity: 0; pointer-events: none; transform: scale(1.05); }

#loadingCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.loading-content {
  position: relative; z-index: 10;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

.loading-logo {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800; letter-spacing: .08em;
  animation: logoPulse 2s ease-in-out infinite;
  opacity: 0; animation-delay: .3s; animation-fill-mode: forwards;
}
@keyframes logoPulse {
  0%   { opacity: 0; transform: scale(.9); }
  50%  { opacity: 1; text-shadow: var(--glow-lg); }
  100% { opacity: 1; transform: scale(1); }
}

.logo-v      { color: var(--primary); text-shadow: var(--glow-md); }
.logo-alence { color: var(--white); }

.loading-status {
  font-family: var(--font-body); font-size: .9rem;
  letter-spacing: .1em; color: rgba(255,255,255,.45); min-height: 1.2em;
}

.loading-bar-wrap {
  width: min(400px, 80vw); height: 3px;
  background: rgba(255,255,255,.08); border-radius: 99px;
  position: relative; overflow: visible;
}
.loading-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-d), var(--primary-b));
  border-radius: 99px; width: 0%;
  transition: width .1s linear; box-shadow: var(--glow-sm); position: relative;
}
.loading-bar::after {
  content: ''; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary);
}
.loading-percent {
  position: absolute; right: 0; top: -22px;
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--primary); letter-spacing: .1em;
}

/* ================================================================
   PORTAL DOOR — animasi memasuki gerbang modern
================================================================ */
.portal-door {
  position: fixed; inset: 0; z-index: 3500;
  pointer-events: none; overflow: hidden;
}
.portal-door.entering { pointer-events: all; }

#portalCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  opacity: 0; transition: opacity .4s;
}
.portal-door.entering #portalCanvas { opacity: 1; }

/* Left & Right panels */
.portal-panel {
  position: absolute; top: 0; height: 100%; width: 50%;
  background: var(--black2);
  z-index: 5;
  transition: transform .8s cubic-bezier(.7,0,.3,1);
}
.panel-left  { left: 0;  transform: translateX(-102%); }
.panel-right { right: 0; transform: translateX(102%); }

/* Panels slide IN (close) */
.portal-door.entering .panel-left  { transform: translateX(0); }
.portal-door.entering .panel-right { transform: translateX(0); }

/* Panels slide OUT (open) */
.portal-door.opening .panel-left  { transform: translateX(-102%); transition-delay: .55s; }
.portal-door.opening .panel-right { transform: translateX(102%);  transition-delay: .55s; }

/* Edge neon line on panels */
.panel-left::after, .panel-right::before {
  content: '';
  position: absolute; top: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  box-shadow: 0 0 12px var(--primary), 0 0 30px rgba(var(--primary-rgb),.5);
}
.panel-left::after  { right: 0; }
.panel-right::before { left: 0; }

/* HUD bars top/bottom */
.portal-hud-top, .portal-hud-bot {
  position: absolute; left: 0; width: 100%; height: 3px;
  z-index: 8;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: var(--glow-sm);
  transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.portal-hud-top { top: 0; }
.portal-hud-bot { bottom: 0; }
.portal-door.entering .portal-hud-top,
.portal-door.entering .portal-hud-bot { transform: scaleX(1); }

/* Core V Logo in center */
.portal-core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10;
  width: 260px; height: 260px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .5s var(--ease-back);
}
.portal-door.entering .portal-core {
  transform: translate(-50%, -50%) scale(1);
  transition-delay: .3s;
}
.portal-door.opening .portal-core {
  transform: translate(-50%, -50%) scale(1.4);
  transition: transform .5s var(--ease), opacity .3s;
  transition-delay: .4s;
  opacity: 0;
}

/* Rings around portal V */
.pcore-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(var(--primary-rgb),.35);
}
.pcore-ring-1 {
  width: 240px; height: 240px;
  border-color: rgba(var(--primary-rgb),.15);
  border-style: dashed;
  animation: pRing1 4s linear infinite;
}
.pcore-ring-2 {
  width: 190px; height: 190px;
  animation: pRing2 2.8s linear infinite reverse;
}
.pcore-ring-3 {
  width: 145px; height: 145px;
  border-color: rgba(var(--primary-rgb),.5);
  border-style: dotted;
  animation: pRing1 2s linear infinite;
}
.pcore-ring-4 {
  width: 96px; height: 96px;
  border-color: rgba(var(--primary-rgb),.7);
  animation: pRing2 1.5s linear infinite;
}
@keyframes pRing1 { to { transform: rotate(360deg); } }
@keyframes pRing2 { to { transform: rotate(-360deg); } }

.pcore-hex {
  position: absolute;
  width: 76px; height: 88px;
  background: rgba(var(--primary-rgb),.07);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  border: 1px solid rgba(var(--primary-rgb),.4);
  animation: hexP 2s ease-in-out infinite;
}
@keyframes hexP {
  0%,100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.pcore-v {
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 900;
  color: var(--primary);
  text-shadow: var(--glow-xl);
  position: relative; z-index: 5;
  letter-spacing: .05em;
  animation: pVPulse 1.2s ease-in-out infinite;
}
@keyframes pVPulse {
  0%,100% { text-shadow: var(--glow-lg); }
  50%      { text-shadow: var(--glow-xl); }
}

.pcore-scanline {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: rgba(var(--primary-rgb),.6);
  animation: pScan 1.5s linear infinite;
}
@keyframes pScan {
  from { top: 0; opacity: 1; }
  to   { top: 100%; opacity: 0; }
}

.pcore-glow {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb),.25) 0%, transparent 70%);
  animation: pVPulse 1.2s ease-in-out infinite;
}

/* ================================================================
   SHARED BACKGROUND LAYERS
================================================================ */
#bgCanvas, #menuCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}

.grid-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(var(--primary-rgb),.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb),.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridShift 20s linear infinite;
  pointer-events: none;
  transition: background-image var(--theme-dur) ease;
}
@keyframes gridShift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

.fog-layer {
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 2;
  border-radius: 50%; opacity: .35;
}
.fog-1 {
  background: radial-gradient(ellipse at 30% 70%, rgba(var(--primary-rgb),.18) 0%, transparent 60%);
  animation: fogDrift1 18s ease-in-out infinite alternate;
  transition: background var(--theme-dur) ease;
}
.fog-2 {
  background: radial-gradient(ellipse at 70% 30%, rgba(var(--primary-rgb),.12) 0%, transparent 60%);
  animation: fogDrift2 22s ease-in-out infinite alternate;
  transition: background var(--theme-dur) ease;
}
@keyframes fogDrift1 {
  from { transform: translate(-5%,-3%) scale(1); }
  to   { transform: translate(5%,3%) scale(1.1); }
}
@keyframes fogDrift2 {
  from { transform: translate(3%,5%) scale(1.05); }
  to   { transform: translate(-3%,-5%) scale(.95); }
}

.scan-line {
  position: absolute; left: 0; top: -2px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.6), transparent);
  animation: scanMove 4s linear infinite;
  z-index: 3; pointer-events: none;
  transition: background var(--theme-dur) ease;
}
@keyframes scanMove { from { top: -2px; } to { top: 100%; } }

/* ================================================================
   START PAGE
================================================================ */
.start-page {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 100;
  transition: opacity .8s var(--ease), transform 1.2s var(--ease);
}
.start-page.exit { opacity: 0; transform: scale(1.08); pointer-events: none; }
.start-page.hidden { display: none; }

.start-content {
  position: relative; z-index: 10; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 20px;
}

/* ── Main Logo ── */
.main-logo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 320px; height: 320px;
  animation: logoEntry .8s var(--ease-back) both; animation-delay: .2s;
}
@keyframes logoEntry {
  from { opacity: 0; transform: scale(.5) rotateX(30deg); }
  to   { opacity: 1; transform: scale(1) rotateX(0deg); }
}

.logo-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(var(--primary-rgb),.3);
  transition: border-color var(--theme-dur) ease;
}
.logo-ring-1 {
  width: 280px; height: 280px;
  border-color: rgba(var(--primary-rgb),.15); border-style: dashed;
  animation: ringRot1 8s linear infinite;
}
.logo-ring-2 {
  width: 220px; height: 220px;
  border-color: rgba(var(--primary-rgb),.25);
  animation: ringRot2 5s linear infinite reverse;
}
.logo-ring-3 {
  width: 160px; height: 160px;
  border-color: rgba(var(--primary-rgb),.4); border-style: dotted;
  animation: ringRot1 3s linear infinite;
}
@keyframes ringRot1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ringRot2 {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.03); }
  to   { transform: rotate(360deg) scale(1); }
}

.logo-hex {
  position: absolute;
  width: 100px; height: 115px;
  background: rgba(var(--primary-rgb),.06);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  border: 1px solid rgba(var(--primary-rgb),.3);
  animation: hexPulse 3s ease-in-out infinite;
  transition: background var(--theme-dur) ease;
}
@keyframes hexPulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.1); opacity: 1; box-shadow: var(--glow-md); }
}

.logo-text {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 900; letter-spacing: .2em;
  position: relative; z-index: 5; color: var(--white);
  text-shadow: var(--glow-xl);
  animation: textGlowPulse 2s ease-in-out infinite;
  user-select: none;
}

.logo-text::before, .logo-text::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%;
  font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  animation: logoGlitch 6s infinite;
}
.logo-text::before { color: #0ff; clip-path: polygon(0 20%,100% 20%,100% 40%,0 40%); opacity: .4; }
.logo-text::after  { color: var(--primary); clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); opacity: .4; }

@keyframes logoGlitch {
  0%,85%,100% { transform: translate(0); opacity: 0; }
  87% { transform: translate(-4px,2px); opacity: .5; }
  89% { transform: translate(4px,-2px); opacity: .5; }
  91% { transform: translate(0); opacity: 0; }
}
@keyframes textGlowPulse {
  0%,100% { text-shadow: var(--glow-lg); }
  50%      { text-shadow: var(--glow-xl); }
}

.start-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 500; letter-spacing: .15em; color: var(--white-dim);
  animation: fadeUp .7s var(--ease) both; animation-delay: .7s;
}
.start-subtitle .highlight {
  color: var(--primary); text-shadow: var(--glow-sm);
  transition: color var(--theme-dur) ease;
}

.start-tagline {
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .35em; color: rgba(255,255,255,.3);
  animation: fadeUp .7s var(--ease) both; animation-delay: .9s;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* START Button */
.start-btn {
  position: relative; background: transparent; border: none; cursor: pointer;
  margin-top: 12px;
  animation: fadeUp .7s var(--ease) both; animation-delay: 1.1s;
  transition: transform .3s var(--ease-back);
}
.start-btn:hover { transform: scale(1.06); }
.start-btn:active { transform: scale(.97); }

.btn-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 56px;
  background: rgba(var(--primary-rgb),.08);
  border: 1px solid rgba(var(--primary-rgb),.5);
  font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 700; letter-spacing: .35em; color: var(--white);
  border-radius: 4px; backdrop-filter: blur(10px);
  position: relative; z-index: 2;
  transition: background .3s, box-shadow .3s, border-color var(--theme-dur) ease;
}
.start-btn:hover .btn-inner {
  background: rgba(var(--primary-rgb),.18); box-shadow: var(--glow-md);
}
.btn-inner i { font-size: 1.3rem; color: var(--primary); transition: color var(--theme-dur) ease; }

.btn-glow {
  position: absolute; inset: -2px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  opacity: 0; transition: opacity .3s; box-shadow: var(--glow-lg);
}
.start-btn:hover .btn-glow { opacity: 1; }

.btn-border-anim { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; }
.btn-border-anim::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--primary) 60deg, transparent 120deg);
  animation: borderSpin 3s linear infinite; opacity: .5;
}
.btn-border-anim::after {
  content: ''; position: absolute; inset: 1px; border-radius: 3px; background: transparent;
}
@keyframes borderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.start-deco {
  display: flex; gap: 10px;
  animation: fadeUp .7s var(--ease) both; animation-delay: 1.3s;
}
.start-deco span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); box-shadow: var(--glow-sm);
  animation: dotPulse 1.5s ease-in-out infinite;
  transition: background var(--theme-dur) ease;
}
.start-deco span:nth-child(2) { animation-delay: .3s; }
.start-deco span:nth-child(3) { animation-delay: .6s; }
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.5); }
}

/* ================================================================
   MENU PAGE
================================================================ */
.menu-page {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; overflow-x: hidden;
  z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease); padding-bottom: 40px;
}
.menu-page.active { opacity: 1; pointer-events: all; }

.menu-page::-webkit-scrollbar { width: 4px; }
.menu-page::-webkit-scrollbar-track { background: transparent; }
.menu-page::-webkit-scrollbar-thumb { background: var(--primary-d); border-radius: 99px; }

/* ── Animated V Background ── */
.menu-v-bg {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}

.vbg-container {
  position: relative;
  width: min(90vw, 90vh); height: min(90vw, 90vh);
  display: flex; align-items: center; justify-content: center;
}

.vbg-ring {
  position: absolute; border-radius: 50%;
  border-style: solid;
}
.vbg-ring-1 {
  inset: 0;
  border: 1px solid rgba(var(--primary-rgb),.08);
  border-style: dashed;
  animation: vbgRot 30s linear infinite;
}
.vbg-ring-2 {
  inset: 6%;
  border: 1px solid rgba(var(--primary-rgb),.06);
  animation: vbgRot 22s linear infinite reverse;
}
.vbg-ring-3 {
  inset: 14%;
  border: 1px solid rgba(var(--primary-rgb),.10);
  border-style: dotted;
  animation: vbgRot 18s linear infinite;
}
.vbg-ring-4 {
  inset: 24%;
  border: 1px solid rgba(var(--primary-rgb),.12);
  animation: vbgRot 12s linear infinite reverse;
  border-style: dashed;
}
.vbg-ring-5 {
  inset: 36%;
  border: 2px solid rgba(var(--primary-rgb),.15);
  animation: vbgRot 8s linear infinite;
}

@keyframes vbgRot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Orbiting dots */
.vbg-orbit {
  position: absolute; inset: 0; border-radius: 50%;
}
.vbg-orbit-1 { animation: vbgRot 10s linear infinite; }
.vbg-orbit-2 { animation: vbgRot 16s linear infinite reverse; inset: 10%; }
.vbg-orbit-3 { animation: vbgRot 7s linear infinite; inset: 22%; }

.vbg-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--glow-sm);
  transition: background var(--theme-dur) ease;
}

/* Hex grid decoration */
.vbg-hex-grid {
  position: absolute;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  opacity: .4; transform: rotate(15deg);
}
.vbg-hex {
  width: 28px; height: 32px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: rgba(var(--primary-rgb),.15);
  animation: hexP 3s ease-in-out infinite;
  transition: background var(--theme-dur) ease;
}
.vbg-hex:nth-child(2) { animation-delay: .5s; }
.vbg-hex:nth-child(3) { animation-delay: 1s; }
.vbg-hex:nth-child(4) { animation-delay: 1.5s; }
.vbg-hex:nth-child(5) { animation-delay: 2s; }
.vbg-hex:nth-child(6) { animation-delay: 2.5s; }

/* The big V letter */
.vbg-letter {
  font-family: var(--font-display);
  font-size: clamp(18vw, 22vw, 320px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--primary-rgb),.18);
  letter-spacing: -.02em;
  position: relative; z-index: 2;
  animation: vLetterPulse 4s ease-in-out infinite;
  user-select: none;
  transition: -webkit-text-stroke-color var(--theme-dur) ease;
}
@keyframes vLetterPulse {
  0%,100% { opacity: .7; transform: scale(1); filter: blur(0px); }
  50%      { opacity: 1; transform: scale(1.02); filter: blur(.5px); 
             text-shadow: 0 0 80px rgba(var(--primary-rgb),.3); }
}

.vbg-glow {
  position: absolute; inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb),.08) 0%, transparent 70%);
  animation: vLetterPulse 4s ease-in-out infinite;
  transition: background var(--theme-dur) ease;
}

/* ── Menu Header ── */
.menu-header {
  position: relative; z-index: 10;
  text-align: center; padding: 50px 20px 20px;
  animation: fadeDown .7s var(--ease) both;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800; letter-spacing: .12em; cursor: pointer;
  transition: transform .3s var(--ease-back), text-shadow .3s;
}
.menu-logo:hover { transform: scale(1.05); text-shadow: var(--glow-lg); }

.menu-tagline {
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .4em; color: rgba(255,255,255,.3); margin-top: 8px;
}

/* ── Menu Grid ── */
.menu-grid {
  position: relative; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; padding: 30px 40px;
  width: 100%; max-width: 1200px;
}

/* ── Menu Card ── */
.menu-card {
  position: relative; min-height: 220px;
  border-radius: 8px; overflow: hidden; cursor: pointer; display: block;
  opacity: 0; transform: translateY(40px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s;
}
.menu-card.revealed { opacity: 1; transform: translateY(0); }
.menu-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(var(--primary-rgb),.3), var(--glow-md);
  z-index: 5;
}

.card-bg {
  position: absolute; inset: 0;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--primary-rgb),.25);
  border-radius: 8px;
  transition: background .3s, border-color .3s;
}
.menu-card:hover .card-bg {
  background: rgba(var(--primary-rgb),.07);
  border-color: rgba(var(--primary-rgb),.5);
}

.card-border-anim {
  position: absolute; inset: 0; border-radius: 8px;
  overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s;
}
.menu-card:hover .card-border-anim { opacity: 1; }
.card-border-anim::before {
  content: '';
  position: absolute; top: -100%; left: -50%;
  width: 200%; height: 300%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--primary-rgb),.6) 60deg, transparent 120deg);
  animation: cardBorderSpin 2s linear infinite;
}
.card-border-anim::after {
  content: ''; position: absolute; inset: 1px; border-radius: 7px; background: var(--black3);
}
@keyframes cardBorderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.card-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 8px; }

.card-inner {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  height: 100%; padding: 24px; gap: 6px;
}

.card-icon {
  position: absolute; top: 20px; right: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(var(--primary-rgb),.12);
  border: 1px solid rgba(var(--primary-rgb),.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--primary);
  transition: background .3s, box-shadow .3s, transform .3s var(--ease-back), color var(--theme-dur) ease;
}
.menu-card:hover .card-icon {
  background: rgba(var(--primary-rgb),.22);
  box-shadow: var(--glow-sm);
  transform: rotate(10deg) scale(1.1);
}

.card-num {
  font-family: var(--font-mono); font-size: .65rem;
  color: rgba(var(--primary-rgb),.6); letter-spacing: .2em;
  transition: color var(--theme-dur) ease;
}

.card-title {
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.8vw, 1.1rem);
  font-weight: 700; letter-spacing: .05em; color: var(--white);
  transition: color .3s, text-shadow .3s;
}
.menu-card:hover .card-title { color: var(--primary-b); text-shadow: var(--glow-sm); }

.card-desc {
  font-family: var(--font-body); font-size: .8rem;
  font-weight: 400; color: rgba(255,255,255,.45);
  line-height: 1.4; max-width: 220px;
}

.card-arrow {
  position: absolute; bottom: 20px; right: 20px;
  font-size: 1.2rem; color: rgba(255,255,255,.3);
  transition: color .3s, transform .3s var(--ease-back);
}
.menu-card:hover .card-arrow { color: var(--primary); transform: translate(4px,-4px); }

.card-glow {
  position: absolute; inset: 0; border-radius: 8px;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb),.15), transparent 70%);
  transition: opacity .3s, background var(--theme-dur) ease;
}
.menu-card:hover .card-glow { opacity: 1; }

/* Ripple */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(var(--primary-rgb),.35);
  transform: scale(0); animation: rippleAnim .6s linear;
  pointer-events: none; z-index: 20;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── Menu Footer ── */
.menu-footer {
  position: relative; z-index: 10;
  font-family: var(--font-mono); font-size: .65rem;
  letter-spacing: .2em; color: rgba(255,255,255,.2);
  display: flex; gap: 10px; align-items: center; padding-bottom: 20px;
}
.menu-footer .sep { color: var(--primary); transition: color var(--theme-dur) ease; }

/* ================================================================
   PAGE TRANSITION
================================================================ */
.page-transition {
  position: fixed; inset: 0; z-index: 4000;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.page-transition.active { opacity: 1; pointer-events: all; }

#transCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trans-text {
  font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .4em; color: rgba(var(--primary-rgb),.7);
  position: relative; z-index: 5;
  animation: transTextPulse .5s ease-in-out infinite alternate;
}
@keyframes transTextPulse {
  from { opacity: .4; }
  to   { opacity: 1; text-shadow: var(--glow-sm); }
}

/* ================================================================
   THEME INDICATOR
================================================================ */
.theme-indicator {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 500;
  display: flex; gap: 8px; align-items: center;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  padding: 8px 12px;
}

.theme-dot {
  width: 8px; height: 8px; border-radius: 50%;
  cursor: pointer;
  transition: transform .3s var(--ease-back), box-shadow .3s;
  opacity: .4;
}
.theme-dot[data-theme="0"] { background: #ff0033; }
.theme-dot[data-theme="1"] { background: #00d4ff; }
.theme-dot[data-theme="2"] { background: #00ff88; }
.theme-dot[data-theme="3"] { background: #ffcc00; }
.theme-dot[data-theme="4"] { background: #bb00ff; }

.theme-dot.active {
  transform: scale(1.6);
  opacity: 1;
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}

/* Flash overlay when theme changes */
.theme-flash {
  position: fixed; inset: 0; z-index: 4999;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb),.2) 0%, transparent 70%);
  transition: opacity .1s;
}
.theme-flash.flash { opacity: 1; transition: opacity .05s; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 14px; }
}
@media (max-width: 560px) {
  .menu-grid { grid-template-columns: 1fr; padding: 16px; }
  .main-logo { width: 240px; height: 240px; }
  .logo-ring-1 { width: 210px; height: 210px; }
  .logo-ring-2 { width: 165px; height: 165px; }
  .logo-ring-3 { width: 120px; height: 120px; }
  .btn-inner { padding: 16px 36px; font-size: .95rem; }
  .menu-card { min-height: 160px; }
  .card-title { font-size: .95rem; }
  .theme-indicator { bottom: 12px; right: 12px; }
  .vbg-letter { font-size: 28vw; }
}

.hidden { display: none !important; }

/* ── Footer Credit ── */
.footer-credit {
  color: rgba(255,255,255,.35);
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .1em;
}
.footer-credit strong {
  color: var(--primary);
  font-weight: 700;
  transition: color var(--theme-dur) ease;
}