/* ============================================================
   MAYER PUTRA — LUXURY COMMAND CENTER
   Design tokens + reset + global chrome
   ============================================================ */

:root {
  /* Canvas — obsidian/ink base */
  --bg-0: #050609;
  --bg-1: #0a0c12;
  --bg-2: #11141c;
  --bg-elev: rgba(255,255,255,0.025);

  /* Ink */
  --fg: #f5f6f8;
  --fg-dim: #c7cad1;
  --fg-mute: #7b8090;
  --fg-faint: rgba(245,246,248,0.42);
  --hairline: rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.16);

  /* Accent — neon cyan default (overridden per palette by JS) */
  --accent: #22d3ee;
  --accent-soft: #67e8f9;
  --accent-deep: #0891b2;
  --accent-glow: rgba(34,211,238,0.45);
  --accent-faint: rgba(34,211,238,0.08);

  /* Type */
  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-sans: 'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Grid */
  --grid-line: rgba(255,255,255,0.035);
  --grain-opacity: 0.05;
}

/* Light theme override (Tweak) */
:root[data-theme="light"] {
  --bg-0: #f7f7f5;
  --bg-1: #ededeb;
  --bg-2: #e2e2e0;
  --bg-elev: rgba(0,0,0,0.025);
  --fg: #0a0c12;
  --fg-dim: #2a2d36;
  --fg-mute: #6a6f7a;
  --fg-faint: rgba(10,12,18,0.4);
  --hairline: rgba(0,0,0,0.10);
  --hairline-strong: rgba(0,0,0,0.20);
  --grid-line: rgba(0,0,0,0.045);
}

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

html, body {
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
  position: relative;
}

@media (max-width: 900px), (pointer: coarse) {
  body { cursor: auto; }
  .cursor-light { display: none !important; }
}

::selection { background: var(--accent); color: var(--bg-0); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   BACKGROUND LAYERS — grid + grain + vignette
   ============================================================ */

.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* (grain overlay removed — it muddied the view) */
.bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--accent-faint), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,0,0,0.7), transparent 60%);
}

#neural-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100vw; height: 100vh;
}

/* ============================================================
   CURSOR LIGHT
   ============================================================ */

.cursor-light {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out);
}
.cursor-light::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--accent);
  box-shadow: 0 0 24px var(--accent-glow), inset 0 0 8px var(--accent-glow);
}
.cursor-light::after {
  content: ""; position: absolute; inset: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; background: var(--accent); border-radius: 50%;
}
.cursor-light.hovering {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
}

/* ============================================================
   TOP CHROME — header / status bar
   ============================================================ */

.chrome-top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 36px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  pointer-events: none;
}
.chrome-top > * { pointer-events: auto; }

.brand-mark {
  display: flex; align-items: center; gap: 14px;
  color: var(--fg);
}
.brand-glyph {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  isolation: isolate;
}
.brand-glyph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Black background of the logo JPEG dissolves into the dark page bg
     via screen blend; only the colour stays. A subtle hue rotation
     pulls the violet toward the site's cyan accent without losing
     the original gradient identity. */
  mix-blend-mode: screen;
  filter:
    contrast(1.15)
    saturate(1.25)
    hue-rotate(15deg)
    drop-shadow(0 0 10px var(--accent-glow));
  transition: filter .4s var(--ease-out), transform .4s var(--ease-out);
}
.brand-mark:hover .brand-glyph img {
  filter:
    contrast(1.25)
    saturate(1.4)
    hue-rotate(15deg)
    drop-shadow(0 0 18px var(--accent-glow));
  transform: scale(1.04);
}
.brand-glyph::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  opacity: 0.6;
  pointer-events: none;
}
.brand-name {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  text-shadow: 0 0 18px var(--accent-glow);
}

.chrome-nav { display: flex; gap: 28px; }
.chrome-nav a {
  position: relative;
  text-transform: uppercase;
  transition: color .3s var(--ease-out);
}
.chrome-nav a::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 3px;
  background: var(--accent); margin-top: -1.5px;
  opacity: 0; transition: opacity .3s var(--ease-out);
  box-shadow: 0 0 6px var(--accent);
}
.chrome-nav a:hover { color: var(--fg); }
.chrome-nav a:hover::before { opacity: 1; }

.chrome-status {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  text-shadow: 0 0 14px var(--accent-glow);
  font-weight: 500;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Progress rail (left edge) */
.progress-rail {
  position: fixed;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--hairline);
  z-index: 99;
}
.progress-rail-fill {
  width: 100%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform-origin: top;
  height: 0%;
  transition: height .12s linear;
}

/* Scroll hint */
.scroll-hint {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-mute);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .8s var(--ease-out);
}
.scroll-hint.hidden { opacity: 0; }
.scroll-hint .tick {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: tickdrop 2s ease-in-out infinite;
}
@keyframes tickdrop {
  0% { transform: translateY(-20px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

.chrome-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 36px;
  display: flex; justify-content: flex-start;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
  pointer-events: none;
  font-weight: 500;
}
.chrome-secure {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--accent-soft);
  text-shadow: 0 0 14px var(--accent-glow);
}
.chrome-secure .status-dot.small {
  width: 6px; height: 6px;
}

/* ============================================================
   BOOT LOADER
   ============================================================ */

.boot {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 1.2s var(--ease-out);
}
.boot.gone { opacity: 0; pointer-events: none; }

.boot-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}
.boot-core {
  position: relative;
  width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
}
.boot-logo {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  isolation: isolate;
}
.boot-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  filter:
    contrast(1.2)
    saturate(1.3)
    hue-rotate(15deg)
    drop-shadow(0 0 22px var(--accent-glow));
  animation: boot-logo-breathe 3.6s ease-in-out infinite;
}
@keyframes boot-logo-breathe {
  0%, 100% { transform: scale(1);    filter: contrast(1.2) saturate(1.3) hue-rotate(15deg) drop-shadow(0 0 22px var(--accent-glow)); }
  50%      { transform: scale(1.04); filter: contrast(1.3) saturate(1.5) hue-rotate(15deg) drop-shadow(0 0 36px var(--accent-glow)); }
}
.boot-logo-orbit {
  position: absolute;
  inset: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  overflow: visible;
  z-index: 1;
}
.boot-logo-orbit .ring {
  fill: none; stroke: var(--accent); stroke-width: 0.5;
  transform-origin: center;
  animation: spin 14s linear infinite;
  opacity: 0.5;
}
.boot-logo-orbit .ring-2 {
  animation: spin 22s linear infinite reverse;
  opacity: 0.3;
  stroke-dasharray: 4 6;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.boot-status {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; gap: 16px; width: 100%;
  justify-content: space-between;
}
.boot-status .ok { color: var(--accent); }
.boot-bar {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.boot-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width .25s var(--ease-out);
}
.boot-log {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.06em;
  text-align: center;
  height: 14px;
  width: 100%;
}
.boot-log span { color: var(--accent); }

/* ============================================================
   LAYOUT: SECTION SHELL
   ============================================================ */

main {
  position: relative;
  z-index: 5;
}
.section {
  position: relative;
  min-height: 100vh;
  padding: 140px 6vw 80px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.section-rail {
  position: absolute;
  left: 6vw;
  top: 140px;
  bottom: 80px;
  width: 1px;
  background: var(--hairline);
}
.section-tag {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 36px;
  font-weight: 500;
}
.section-tag::before {
  content: ""; width: 7px; height: 7px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent-glow);
  border-radius: 50%;
}
.section-tag.soft { color: var(--accent-soft); }
.section-tag.soft::before {
  background: var(--accent-soft);
  box-shadow: 0 0 12px var(--accent-soft);
}
.section-index {
  color: var(--accent);
  font-family: var(--f-mono);
  text-shadow: 0 0 14px var(--accent-glow);
}

/* Section transitions — using CSS animations (forwards fill) so they
   complete reliably even in throttled / re-rendering environments */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.in {
  animation: reveal-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal.in[data-d="1"] { animation-delay: .08s; }
.reveal.in[data-d="2"] { animation-delay: .16s; }
.reveal.in[data-d="3"] { animation-delay: .24s; }
.reveal.in[data-d="4"] { animation-delay: .32s; }
.reveal.in[data-d="5"] { animation-delay: .40s; }
.reveal.in[data-d="6"] { animation-delay: .48s; }
.reveal.in[data-d="7"] { animation-delay: .56s; }
.reveal.in[data-d="8"] { animation-delay: .64s; }

/* ============================================================
   UNIVERSAL GLASS + SHIMMER
   Every padded surface uses the same expensive glass treatment:
   a soft frosted backdrop, a 1px highlighted edge, and a slow
   diagonal shimmer band that sweeps across at a luxurious pace.
   ============================================================ */
.glass {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.045) 0%,
      rgba(255,255,255,0.012) 45%,
      rgba(255,255,255,0.000) 100%),
    rgba(8, 12, 18, 0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(255,255,255,0.02),
    0 14px 40px rgba(0,0,0,0.35),
    0 0 0 1px rgba(34,211,238,0.05);
  overflow: hidden;
  isolation: isolate;
}
.glass::before {
  /* slow diagonal shimmer band */
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,0.08) 46%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.08) 54%,
    transparent 62%);
  transform: translateX(-30%);
  animation: shimmer-sweep 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: 0;
}
.glass::after {
  /* thin highlight along top edge — like real polished glass */
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.4),
    rgba(34,211,238,0.5),
    rgba(255,255,255,0.4),
    transparent);
  pointer-events: none;
  z-index: 1;
}
.glass > * { position: relative; z-index: 2; }

@keyframes shimmer-sweep {
  0%   { transform: translateX(-30%); opacity: 0; }
  10%  { opacity: 0.55; }
  60%  { opacity: 0.55; transform: translateX(80%); }
  100% { transform: translateX(80%); opacity: 0; }
}

/* Stagger shimmer across siblings so the whole page doesn't pulse in sync */
.glass:nth-child(2)  { animation-delay: -1.2s; }
.glass:nth-child(3)  { animation-delay: -2.4s; }
.glass:nth-child(4)  { animation-delay: -3.6s; }
.glass:nth-child(5)  { animation-delay: -4.8s; }
.glass:nth-child(6)  { animation-delay: -6.0s; }

/* Glass-on-glass nesting kills the backdrop-filter; opt-out inner layers */
.glass .glass { backdrop-filter: none; -webkit-backdrop-filter: none; }