/* ============================================================
   Slashiee — About page
   ============================================================ */

/* ---------- Two-column flow: text left, sticky cyber visual right ---------- */
.about-flow{
  padding-block: clamp(3rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
}
.about-flow-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px){
  .about-flow-grid{ grid-template-columns: 1fr; }
}
.about-flow-content{
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5rem);
}
.about-flow-block .eyebrow{ margin-bottom: 1.1rem; }
.about-flow-block h1{  max-width: 16ch; }

.about-flow-visual{
  position: sticky;
  top: 96px;
  height: clamp(500px, 70vh, 900px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
@media (max-width: 900px){
  .about-flow-visual{ display: none; }
}
.cyber-column{
  position: relative;
  width: 100%;
  height: 100%;
}
.cyber-column::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.3;
  z-index: 1;
}
.cyber-column-svg{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}
.cc-spine{
  stroke: var(--line-bright);
  stroke-width: 1.5;
}
.cc-spine-glow{
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 14;
  opacity: 0.6;
  animation: cc-flow 3s linear infinite;
}
@keyframes cc-flow{
  to{ stroke-dashoffset: -170; }
}
.cc-branch{
  stroke: var(--line-bright);
  stroke-width: 1;
  fill: none;
  opacity: 0.8;
}
.cc-node{
  fill: var(--bg-raised);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.cc-node-pulse{
  fill: var(--accent-2);
  animation: node-pulse 2.4s ease-in-out infinite;
}
@keyframes node-pulse{
  0%, 100%{ opacity: 0.5; r: 2.5; }
  50%{ opacity: 1; r: 4.5; }
}
.cc-chip{
  fill: none;
  stroke: var(--line-bright);
  stroke-width: 1;
  opacity: 0.75;
}
.cc-signal{
  fill: var(--accent-2);
  filter: drop-shadow(0 0 6px rgba(255,138,122,0.9));
}
@media (prefers-reduced-motion: reduce){
  .cc-spine-glow, .cc-node-pulse{ animation: none; }
}

/* ---------- Statement sections (heading-led, minimal body copy) ---------- */
.statement-head{
  max-width: 52ch;
}
.statement-head h2{
  
  margin-top: 0.9rem;
  margin-bottom: 1rem;
}
.statement-head p{
  color: var(--ink-70);
  font-size: 1rem;
  max-width: 48ch;
}

/* ---------- Cyberpunk terminal panel ---------- */
/* A technical "readout" visual — scanline sweep, corner brackets,
   blinking cursor, mono readout. */
.terminal-panel{
  position: relative;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
  font-family: var(--font-mono);
}
/* Compact variant: sits inline within a text column rather than
   spanning full width, so it no longer competes with the cyber
   column visual for space. */
.terminal-panel-compact{
  max-width: 34rem;
  padding: 1.5rem 1.75rem;
  margin-top: 2rem;
}
.terminal-panel-compact .terminal-line{ font-size: var(--step--1); }
.terminal-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.35;
}
.terminal-panel::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
  animation: scanline-sweep 5s linear infinite;
  box-shadow: 0 0 12px 1px rgba(232,93,107,0.6);
}
@keyframes scanline-sweep{
  0%{ top: 0; }
  100%{ top: 100%; }
}
.terminal-corner{
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  opacity: 0.8;
}
.terminal-corner.tl{ top: 10px; left: 10px; border-right: none; border-bottom: none; }
.terminal-corner.tr{ top: 10px; right: 10px; border-left: none; border-bottom: none; }
.terminal-corner.bl{ bottom: 10px; left: 10px; border-right: none; border-top: none; }
.terminal-corner.br{ bottom: 10px; right: 10px; border-left: none; border-top: none; }
.terminal-body{
  position: relative;
  display: grid;
  gap: 0.6rem;
}
.terminal-line{
  font-size: var(--step--1);
  color: var(--ink-70);
  display: flex;
  gap: 0.8em;
}
.terminal-line .prompt{ color: var(--accent); flex-shrink: 0; }
.terminal-line .val{ color: var(--ink-100); }
.terminal-cursor{
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--accent-2);
  vertical-align: -0.15em;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .terminal-panel::after,
  .terminal-cursor{ animation: none; }
}

/* ---------- Floating scroll-linked logo mark ---------- */
/* Fixed icon mark that rotates in proportion to scroll depth,
   positioned in the page margin so it never overlaps content.
   Hidden on narrow viewports where there's no margin to sit in. */
.scroll-logo{
  position: fixed;
  top: 50%;
  right: clamp(0.75rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  width: clamp(36px, 4vw, 56px);
  height: clamp(36px, 4vw, 56px);
  z-index: 40;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(232,93,107,0.35));
}
.scroll-logo img{
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}
@media (max-width: 900px){
  .scroll-logo{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-logo img{ transition: none !important; }
}

/* ---------- Simplified CTA (single button, no paragraph) ---------- */
.cta-band.simple{
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 640px){
  .cta-band.simple{ grid-template-columns: 1fr; text-align: center; }
}
.cta-band.simple h2{ margin-bottom: 0; }