/* ==========================================================================
   Cinematic 3D Hero — scoped stylesheet.
   Every selector is prefixed with #hero.cine-hero (or a .cine-* class defined
   here) so it cannot leak into the rest of the site. The static hero headline
   (.hero-title) is deliberately LEFT UNTOUCHED — no transform/animation/
   transition/will-change rules are ever declared for it (contract).
   ========================================================================== */

/* ---- layer stacking ----------------------------------------------------- */
#hero.cine-hero .cine-layer--scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#hero.cine-hero .cine-layer--panels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* the semantic hero copy always sits above the 3D scene */
#hero.cine-hero .hero-content {
  position: relative;
  z-index: 20;
}

#hero.cine-hero {
  position: relative;
  overflow: hidden;
}

/* ---- accessible-but-hidden (clip technique, NOT display:none) ----------- */
.cine-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- root wrapper for the cinematic layers ------------------------------ */
.cine-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- visible 'simulated run' badge -------------------------------------- */
.cine-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 12;
  background: #ff5fd2;
  color: #0c0c12;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(255, 95, 210, 0.6);
  text-transform: uppercase;
}

/* ==========================================================================
   CSS fallback workstation (.cine-fallback) — layered divs + CSS 3D.
   No canvas, no WebGL, no JS animation.
   ========================================================================== */
.cine-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 900px;
  transform-style: preserve-3d;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(124, 107, 255, 0.15), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, rgba(56, 228, 255, 0.12), transparent 60%),
    #0c0c12;
  color: #eee;
  overflow: hidden;
}

/* technical grid floor backdrop */
.cine-fallback .grid-floor {
  position: absolute;
  inset: 0;
  transform: rotateX(70deg) translateY(30%);
  transform-origin: bottom center;
  background:
    repeating-linear-gradient(0deg, rgba(56, 228, 255, 0.18), rgba(56, 228, 255, 0.18) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(124, 107, 255, 0.18), rgba(124, 107, 255, 0.18) 1px, transparent 1px, transparent 42px);
  opacity: 0.5;
}

/* monitor frame with bezel */
.cine-fallback .monitor-frame {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 320px;
  height: 214px;
  transform: translateX(-50%) rotateX(12deg) rotateY(0deg);
  background: linear-gradient(180deg, #23232c, #17171f);
  border-radius: 10px;
  border: 3px solid #2e2e3a;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(56, 228, 255, 0.35);
  transform-style: preserve-3d;
  padding: 12px;
}

.cine-fallback .monitor-frame::after {
  /* bezel bottom lip */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: #1a1a22;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transform: translateZ(-1px);
}

/* the screen */
.cine-fallback .screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #05060a;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  box-shadow:
    inset 0 0 0 1px rgba(56, 228, 255, 0.25),
    0 0 18px rgba(56, 228, 255, 0.15);
}

.cine-fallback .screen-gutter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 6px;
  color: rgba(124, 107, 255, 0.55);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  border-right: 1px solid rgba(124, 107, 255, 0.2);
}

.cine-fallback .code-sample {
  margin: 0;
  padding: 8px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #d9e2f0;
  white-space: pre;
  word-break: normal;
}

/* syntax token colours */
.cine-fallback .tok-kw  { color: #ff5fd2; }
.cine-fallback .tok-fn  { color: #38e4ff; }
.cine-fallback .tok-id  { color: #d9e2f0; }
.cine-fallback .tok-str { color: #7cffb2; }
.cine-fallback .tok-muted { color: #8b93a7; }
.cine-fallback .tok-ok  { color: #7cffb2; }
.cine-fallback .tok-prompt { color: #38e4ff; }

/* floating terminal card */
.cine-fallback .terminal-card {
  position: absolute;
  left: 6%;
  top: 62%;
  width: 300px;
  transform: rotateY(8deg) rotateX(2deg);
  background: rgba(18, 18, 26, 0.92);
  border: 2px solid rgba(124, 107, 255, 0.7);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 14px rgba(124, 107, 255, 0.25);
  backdrop-filter: blur(2px);
}

.cine-fallback .terminal-output {
  margin: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.65;
  color: #c8b9ff;
}

/* AI agent status card — five phase labels */
.cine-fallback .agent-status-card {
  position: absolute;
  right: 6%;
  top: 62%;
  width: 208px;
  transform: rotateY(-8deg) rotateX(-2deg);
  background: rgba(22, 20, 32, 0.92);
  border: 2px solid rgba(255, 95, 210, 0.7);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 95, 210, 0.22);
  backdrop-filter: blur(2px);
}

.cine-fallback .agent-status-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 95, 210, 0.8);
  margin-bottom: 8px;
}

.cine-fallback .agent-status-card ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cine-fallback .agent-status-card li {
  font-size: 12px;
  color: rgba(238, 238, 238, 0.6);
  padding-left: 16px;
  position: relative;
}

.cine-fallback .agent-status-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #4a4a5a;
}

.cine-fallback .agent-status-card li.agent-state--active {
  color: #38e4ff;
  font-weight: 600;
}

.cine-fallback .agent-status-card li.agent-state--active::before {
  background: #38e4ff;
  box-shadow: 0 0 8px rgba(56, 228, 255, 0.9);
}

/* ==========================================================================
   Reduced motion — disable all transforms/animations/transitions in the hero
   scene layers AND flatten the CSS fallback to a stable 2D stacked layout so
   nothing moves. The fallback (static DOM) is shown by the component when the
   tier is reduced/unsupported.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #hero.cine-hero .cine-motion,
  #hero.cine-hero .cine-layer--scene *,
  #hero.cine-hero .cine-layer--panels *,
  #hero.cine-hero .cine-fallback * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    backdrop-filter: none !important;
  }
  #hero.cine-hero .cine-fallback {
    perspective: none;
  }
  #hero.cine-hero .cine-fallback .monitor-frame,
  #hero.cine-hero .cine-fallback .terminal-card,
  #hero.cine-hero .cine-fallback .agent-status-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 8px auto;
    transform: none;
  }
  #hero.cine-hero .cine-fallback .grid-floor {
    opacity: 0.25;
    transform: none;
  }
}

/* ==========================================================================
   Mobile / coarse pointers — simplify, show the CSS fallback as the primary
   presentation, hide heavy floating cards, no pinned section (paired with the
   JS `pin:false` for coarse pointers).
   ========================================================================== */
@media (max-width: 768px), (pointer: coarse) {
  #hero.cine-hero .cine-fallback .monitor-frame {
    width: 86%;
    top: 24%;
  }
  #hero.cine-hero .cine-fallback .terminal-card,
  #hero.cine-hero .cine-fallback .agent-status-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 10px 16px;
    transform: none;
    width: auto;
  }
  #hero.cine-hero .cine-fallback .code-sample {
    font-size: 11px;
  }
  #hero.cine-hero .cine-layer--scene {
    pointer-events: none;
  }
}