/* ============================================================
   RACK AISLE — styles (everything is scoped under .sf-root)
   Tweak the variables in the first block to restyle quickly.
   ============================================================ */
.sf-root {
  --sf-runway: 1800vh;   /* total scroll length: bigger = slower walk down the aisle */
  --sf-top: 0px;         /* push the stage down if your theme has a sticky header (e.g. 80px) */
  --sf-cyan: rgb(var(--sf-accent-rgb, 64 240 255));
  --sf-green: #78ffaa;
  --sf-text: rgb(var(--sf-text-rgb, 230 252 255));
  --sf-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --sf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  position: relative;
  display: block;
  width: 100%;
  height: var(--sf-runway);
  margin: 0;
  padding: 0;
  background: #000;
  color: var(--sf-text);
  font-family: var(--sf-mono);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* optional: add class "sf-breakout" to #sf-root to stretch edge-to-edge inside a narrow theme column */
.sf-root.sf-breakout {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

.sf-root *,
.sf-root *::before,
.sf-root *::after { box-sizing: border-box; }

/* neutralise aggressive theme styles */
.sf-root p,
.sf-root div,
.sf-root span,
.sf-root a,
.sf-root button { font-family: inherit; letter-spacing: inherit; text-transform: none; }
.sf-root p { margin: 0; padding: 0; }
.sf-root a { text-decoration: none; box-shadow: none; border-bottom: 0; }
.sf-root button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  min-height: 0;
  min-width: 0;
  line-height: inherit;
}

/* ---------- stage (sticky viewport) ---------- */
.sf-stage {
  position: sticky;
  top: var(--sf-top);
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #02050a;
}
.sf-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sf-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.sf-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* ---------- header ---------- */
.sf-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px; }
.sf-logo {
  pointer-events: auto;
  font-family: var(--sf-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff;
}
.sf-cursor { color: var(--sf-cyan); animation: sf-blink 1.05s steps(1) infinite; }
.sf-nav { pointer-events: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; }
.sf-pill {
  display: inline-block;
  border: 1px solid rgba(64,240,255,.3) !important;
  background: rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px !important;
  padding: 8px 16px !important;
  color: var(--sf-text) !important;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  transition: border-color .2s, color .2s, background .2s;
}
.sf-pill:hover { border-color: var(--sf-cyan) !important; color: #a5f7ff !important; }
.sf-pill.sf-cart { border-color: rgb(var(--sf-cart-rgb, 110 231 183) / .55) !important; background: rgb(var(--sf-cart-rgb, 110 231 183) / .12) !important; color: rgb(var(--sf-cart-text-rgb, 167 243 208)) !important; }
.sf-pill.sf-cart:hover { background: rgb(var(--sf-cart-rgb, 110 231 183) / .24) !important; }

/* ---------- hero ---------- */
.sf-hero {
  position: absolute; left: 0; right: 0; top: 24%;
  padding: 40px 24px 64px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, transparent 72%);
  will-change: transform, opacity;
}
.sf-eyebrow { margin-bottom: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .4em; color: rgba(103,232,249,.85); }
.sf-title {
  font-family: var(--sf-display);
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  font-weight: 700; line-height: .95; letter-spacing: -0.02em; color: #fff;
  text-shadow: 2px 0 rgba(0,255,255,.55), -2px 0 rgba(255,0,120,.4);
  animation: sf-glitch 5s infinite;
}
.sf-sub { max-width: 28rem; margin: 20px auto 0; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.92); text-shadow: 0 0 12px #000; }
.sf-enter { margin-top: 40px; font-size: 12px; text-transform: uppercase; letter-spacing: .35em; color: var(--sf-cyan); }

/* ---------- product panel ---------- */
.sf-panel {
  position: absolute; left: 28px; bottom: 80px; width: min(92vw, 380px);
  padding: 20px;
  border: 1px solid rgba(64,240,255,.3);
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s, transform .5s;
}
.sf-panel.sf-show { opacity: 1; transform: none; }
.sf-panel-top { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--sf-cyan); }
.sf-panel-name { font-family: var(--sf-display); font-size: 24px; font-weight: 700; line-height: 1.15; color: #fff; }
.sf-panel-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: rgba(207,250,254,.75); }
.sf-tag { border: 1px solid rgba(64,240,255,.4); padding: 2px 8px; letter-spacing: .12em; }
.sf-price { font-size: 16px; color: #6ee7b7; }
.sf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sf-cyan) !important; color: #000 !important;
  padding: 9px 16px !important;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  transition: background .2s;
}
.sf-btn:hover { background: #fff !important; }
.sf-panel .sf-btn { pointer-events: none; }
.sf-panel.sf-show .sf-btn { pointer-events: auto; }
.sf-btn svg { width: 14px; height: 14px; }

/* ---------- end CTA ---------- */
.sf-end {
  position: absolute; left: 0; right: 0; bottom: 12%;
  padding: 64px 24px 32px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 45%, transparent 72%);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s, transform .7s;
}
.sf-end.sf-show { opacity: 1; transform: none; }
.sf-end-eyebrow { margin-bottom: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .4em; color: #6ee7b7; }
.sf-end-title { font-family: var(--sf-display); font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 700; color: #fff; }
.sf-end .sf-btn { margin-top: 24px; padding: 12px 24px !important; font-size: 14px; pointer-events: none; }
.sf-end.sf-show .sf-btn { pointer-events: auto; }

/* ---------- right rail ---------- */
.sf-rail { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sf-tick { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 2px 0 !important; }
.sf-tick-label { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: rgba(207,250,254,0); transition: color .2s; }
.sf-tick:hover .sf-tick-label { color: rgba(207,250,254,.7); }
.sf-tick.sf-on .sf-tick-label { color: var(--sf-cyan); }
.sf-tick-line { display: block; width: 16px; height: 1px; background: rgba(207,250,254,.3); transition: width .2s, background .2s; }
.sf-tick:hover .sf-tick-line { width: 24px; }
.sf-tick.sf-on .sf-tick-line { width: 32px; background: var(--sf-cyan); }

/* ---------- telemetry + progress ---------- */
.sf-telemetry { position: absolute; right: 28px; bottom: 28px; text-align: right; font-size: 10px; line-height: 20px; text-transform: uppercase; letter-spacing: .25em; color: rgba(207,250,254,.6); }
.sf-telemetry span { color: var(--sf-cyan); }
.sf-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(64,240,255,.1); }
.sf-progress-bar { width: 1px; height: 0; background: var(--sf-cyan); }

/* ---------- boot screen ---------- */
.sf-boot { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; padding: 48px; background: #000; transition: opacity .7s; }
.sf-boot.sf-done { opacity: 0; pointer-events: none; }
.sf-boot-log { font-size: 14px; color: #67e8f9; }
.sf-boot-log p { margin: 0 0 4px; }

/* ---------- no-WebGL fallback ---------- */
.sf-fallback { display: none; }
.sf-root.sf-nogl { height: auto; }
.sf-root.sf-nogl .sf-stage { display: none; }
.sf-root.sf-nogl .sf-fallback { display: block; padding: 40px 28px; background: #02050a; }
.sf-fb-title { margin-top: 12px; font-family: var(--sf-display); font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 700; color: #fff; }
.sf-fb-sub { max-width: 32rem; margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.8); }
.sf-fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 40px; }
.sf-fb-card { display: block; border: 1px solid rgba(64,240,255,.3); background: rgba(0,0,0,.5); padding: 12px; color: inherit; transition: border-color .2s; }
.sf-fb-card:hover { border-color: var(--sf-cyan); }
.sf-fb-media img, .sf-fb-media canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; }
.sf-fb-code { margin-top: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: var(--sf-cyan); }
.sf-fb-name { font-family: var(--sf-display); font-size: 16px; font-weight: 600; color: #fff; }
.sf-fb-price { font-size: 14px; color: #6ee7b7; }

/* ---------- animations ---------- */
@keyframes sf-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sf-glitch {
  0%, 92%, 100% { transform: translate(0); }
  93% { transform: translate(-3px, 1px); }
  95% { transform: translate(3px, -1px); }
  97% { transform: translate(-2px, 0); }
}
.sf-blink { animation: sf-blink 1.05s steps(1) infinite; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .sf-header { padding: 16px; }
  .sf-logo { font-size: 20px; }
  .sf-pill { padding: 7px 12px !important; font-size: 11px; letter-spacing: .12em; }
  .sf-panel { left: 16px; bottom: 64px; }
  .sf-rail { right: 10px; }
  .sf-tick-label, .sf-telemetry { display: none; }
  .sf-boot { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-title, .sf-blink { animation: none; }
}

/* ---------- store additions (add-to-cart button) ---------- */
.sf-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sf-panel-actions .sf-btn { margin-top: 0; }
.sf-root .sf-btn-ghost {
  background: transparent !important; color: var(--sf-cyan) !important;
  border: 1px solid var(--sf-cyan) !important; pointer-events: none;
}
.sf-panel.sf-show .sf-btn-ghost { pointer-events: auto; }
.sf-root .sf-btn-ghost:hover { background: rgba(64,240,255,.15) !important; }
.sf-root .sf-btn-ghost[disabled] { opacity: .7; cursor: default; }
.sf-root .sf-btn[hidden] { display: none !important; }


/* v1.1 - rounded + 33% transparent HUD panels */
.sf-panel { border-radius: 16px; background: rgba(0, 0, 0, .67); }
.sf-tag { border-radius: 6px; }
.sf-root .sf-btn { border-radius: 10px !important; }
.sf-fb-card { border-radius: 16px; }
.sf-fb-media img, .sf-fb-media canvas { border-radius: 10px; }


/* v1.3 - lighter HUD panel + glass buttons to match the rest of the theme */
.sf-panel { background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgb(var(--sf-accent-rgb, 64 240 255) / .4); }
.sf-root .sf-btn {
  background: rgb(var(--sf-accent-rgb, 64 240 255) / .26) !important;
  color: #e6fcff !important;
  border: 1px solid rgb(var(--sf-accent-rgb, 64 240 255) / .65) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sf-root .sf-btn:hover { background: rgb(var(--sf-accent-rgb, 64 240 255) / .5) !important; color: #fff !important; border-color: #40f0ff !important; }
.sf-root .sf-btn-ghost { background: transparent !important; }
.sf-root .sf-btn-ghost:hover { background: rgb(var(--sf-accent-rgb, 64 240 255) / .22) !important; }
.sf-end { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .3) 45%, transparent 72%); }


/* v1.3-contrast: HUD readability over the 3D scene */
.sf-panel { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sf-telemetry { color: rgb(var(--sf-text-rgb, 230 252 255) / .85); text-shadow: 0 0 8px #000, 0 0 3px #000; }
.sf-telemetry span { text-shadow: 0 0 8px #000, 0 0 3px #000; }


/* v1.4 - HUD panel + buttons follow the Colors & Opacity settings */
.sf-panel {
  background: rgb(var(--sf-card-rgb, 0 0 0) / calc(var(--sf-card-alpha, .3) + .1));
  border-radius: var(--sf-radius, 16px);
  -webkit-backdrop-filter: blur(calc(var(--sf-blur, 16px) + 4px));
  backdrop-filter: blur(calc(var(--sf-blur, 16px) + 4px));
}
.sf-root .sf-btn {
  background: rgb(var(--sf-btn-rgb, 64 240 255) / var(--sf-btn-alpha, .26)) !important;
  color: var(--sf-btn-text, #e6fcff) !important;
  border: 1px solid rgb(var(--sf-btn-rgb, 64 240 255) / .65) !important;
  border-radius: var(--sf-radius-sm, 10px) !important;
}
.sf-root .sf-btn:hover {
  background: rgb(var(--sf-btn-rgb, 64 240 255) / .5) !important;
  color: #fff !important;
  border-color: rgb(var(--sf-btn-rgb, 64 240 255)) !important;
}
.sf-root .sf-btn-ghost { background: transparent !important; }
.sf-root .sf-btn-ghost:hover { background: rgb(var(--sf-btn-rgb, 64 240 255) / .22) !important; }


/* v1.5 - end block sits lower (the back-wall picture owns the middle), panel takes the card's color */
.sf-end { bottom: 5%; }
.sf-panel {
  border-color: color-mix(in srgb, var(--sf-panel-accent, #40f0ff) 60%, transparent);
}
.sf-tag { border-color: color-mix(in srgb, var(--sf-panel-accent, #40f0ff) 55%, transparent); }
.sf-panel .sf-panel-top { color: var(--sf-panel-accent, #40f0ff); }


/* v1.6 - "Quantum Array": the info panel gets a gradient border made of all 15 palette colors */
.sf-panel.sf-special { border-color: transparent; }
.sf-panel.sf-special::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #000000, #00A550, #5D5E60, #004517, #91268F, #405585, #A9DFD1, #AFA68F, #B25538, #D91B5B, #ED1C24, #F05A28, #FFFF00, #FFFFFF, #000000);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}