/* --- effects.css --- */

/* Terminal widget — gradient border, dark bg, glow */
.terminal{
  background:#0b101c;
  border:1px solid transparent;
  background:
    linear-gradient(#0b101c,#0b101c) padding-box,
    linear-gradient(135deg,var(--clr-accent),var(--clr-accent-4),var(--clr-accent-2),var(--clr-accent-3)) border-box;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.45), 0 0 50px var(--clr-accent-soft);
  font-family:var(--font-mono);
  font-size:.92rem;
}

/* Terminal title bar — macOS-style traffic-light dots */
.terminal__bar{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.8rem 1.1rem;
  background:#111a2e;
  border-bottom:1px solid #1e2a45;
}

.terminal__dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

.terminal__dot--r{background:#ff5f57}
.terminal__dot--y{background:#febc2e}
.terminal__dot--g{background:#28c840}

.terminal__title{
  margin-left:.6rem;
  color:#8b9bb8;
  font-size:.75rem;
}

/* Terminal body — fixed height, scan-line overlay */
.terminal__body{
  position:relative;
  padding:1.2rem 1.4rem;
  height:560px;
  overflow:hidden;
  color:#c9d6ee;
  line-height:1.75;
}

/* CRT scan-line effect */
.terminal__body::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  pointer-events:none;
}

/* Terminal text colour tokens */
.terminal__prompt{
  color:#00e5a0;
}

.terminal__cmd{
  color:#e6edf7;
}

.terminal__out{
  color:#8b9bb8;
  white-space:pre-wrap;
}

.terminal__cursor{
  color:#00e5a0;
  animation:blink 1s steps(1) infinite;
}

/* Interactive input line in terminal */
.term-line--input{
  display:flex;
  gap:.5rem;
}

.term-line--input input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:#e6edf7;
  font:inherit;
  caret-color:#00e5a0;
}

.terminal__echo{
  color:#e6edf7;
}

.terminal__err{
  color:#ff5c7a;
}

.terminal__ok{
  color:#00e5a0;
}

/* Interactive mode — scrollable, text cursor */
.terminal__body--interactive{
  overflow-y:auto;
  cursor:text;
}

/* Larger height when terminal is a page hero element */
.terminal--page .terminal__body--interactive{
  height:68vh;
  min-height:400px;
}

/* Centred, constrained terminal variant */
.terminal--full{
  max-width:880px;
  margin-inline:auto;
}

/* Terminal hint beneath the widget */
.term-hint{
  text-align:center;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--clr-muted);
  margin-top:1.4rem;
}

.term-hint b{
  color:var(--clr-accent);
}

/* Responsive — shorter terminal on mobile */
@media (max-width:960px){
  .terminal__body{
    height:340px;
    font-size:.78rem;
  }
}

/* Topology canvas — fills hero section, semi-transparent */
.hero__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.55;
  pointer-events:none;
}

[data-theme="light"] .hero__canvas{
  opacity:.3;
}

/* Marquee — auto-scrolling tech stack strip */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--clr-border);
  background:var(--clr-bg-alt);
  padding:1rem 0;
}

.marquee__track{
  display:flex;
  gap:3rem;
  width:max-content;
  animation:marquee 28s linear infinite;
}

/* Pause on hover */
.marquee:hover .marquee__track{
  animation-play-state:paused;
}

.marquee__item{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--clr-muted);
  white-space:nowrap;
}

/* Diamond prefix, colour cycles per 4th item */
.marquee__item::before{
  content:'◆ ';
  color:var(--clr-accent);
}

.marquee__item:nth-child(4n+2)::before{color:var(--clr-accent-2)}
.marquee__item:nth-child(4n+3)::before{color:var(--clr-accent-3)}
.marquee__item:nth-child(4n)::before{color:var(--clr-accent-4)}

@keyframes marquee{
  to{
    transform:translateX(-50%);
  }
}

/* Floating decorative shapes — circle, square, hex */
.shape{
  position:absolute;
  pointer-events:none;
  opacity:.3;
  animation:float 7s ease-in-out infinite;
}

.shape--circle{
  width:90px;
  height:90px;
  border-radius:50%;
  border:1px solid var(--clr-accent);
}

.shape--square{
  width:56px;
  height:56px;
  border:1px solid var(--clr-accent-2);
  transform:rotate(45deg);
  animation-delay:1.2s;
}

.shape--hex{
  width:80px;
  height:80px;
  background:var(--clr-accent-2);
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  animation-delay:.6s;
}

.shape--hex-alt{
  background:var(--clr-accent);
  width:56px;
  height:56px;
  animation-delay:1.8s;
}

@keyframes float{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -18px;
  }
}

/* Disable shape/marquee/topo animations for reduced motion */
@media (prefers-reduced-motion:reduce){
  .shape,
  .marquee__track,
  .topo__edge,
  .topo__packet{
    animation:none;
  }
}

/* Topology SVG — full-width, auto-height */
.topo{
  width:100%;
  height:auto;
  display:block;
}

/* Topology edge — dashed, animated dash offset */
.topo__edge{
  fill:none;
  stroke:var(--clr-accent);
  stroke-width:1.5;
  stroke-dasharray:5 7;
  opacity:.45;
  animation:topo-dash 2.5s linear infinite;
}

@keyframes topo-dash{
  to{
    stroke-dashoffset:-48;
  }
}

/* Topology ring — pulsing stroke opacity */
.topo__ring{
  fill:var(--clr-bg-alt);
  stroke:var(--clr-accent);
  stroke-width:1.5;
  animation:topo-pulse 3s ease-in-out infinite;
}

@keyframes topo-pulse{
  50%{
    stroke-opacity:.4;
  }
}

/* Topology emoji nodes */
.topo__emoji{
  font-size:18px;
  text-anchor:middle;
}

/* Topology label — mono, muted */
.topo__label{
  fill:var(--clr-muted);
  font-family:var(--font-mono);
  font-size:13px;
  text-anchor:middle;
}

/* Topology data packet — accent dots */
.topo__packet{
  fill:var(--clr-accent);
}

.topo__packet--2{fill:var(--clr-accent-2)}
.topo__packet--3{fill:var(--clr-accent-3)}
.topo__packet--4{fill:var(--clr-accent-4)}
.topo__packet--5{fill:var(--clr-accent-5)}

/* Larger labels on small screens */
@media (max-width:640px){
  .topo__label{
    font-size:16px;
  }
}

/* Scroll-to-top ring — fixed bottom-left, SVG circle progress */
.scroll-ring{
  position:fixed;
  bottom:1.8rem;
  left:1.8rem;
  z-index:99;
  width:44px;
  height:44px;
  cursor:pointer;
  opacity:0;
  transition:opacity .4s ease,transform .3s ease;
  transform:scale(.8);
}

.scroll-ring.is-visible{
  opacity:1;
  transform:scale(1);
}

.scroll-ring:hover{
  transform:scale(1.1);
}

/* Rotate SVG so ring starts at top */
.scroll-ring svg{
  transform:rotate(-90deg);
  width:100%;
  height:100%;
}

/* Background track — border colour */
.scroll-ring__bg{
  fill:none;
  stroke:var(--clr-border);
  stroke-width:3;
}

/* Foreground progress — gradient stroke, dynamic dashoffset */
.scroll-ring__fg{
  fill:none;
  stroke:url(#ringGrad);
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dashoffset .15s ease;
}

/* Percentage label in centre */
.scroll-ring__label{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:.6rem;
  color:var(--clr-muted);
  pointer-events:none;
}

.scroll-ring__arrow{
  font-size:.85rem;
  line-height:1;
}

/* Smaller ring on mobile */
@media (max-width:640px){
  .scroll-ring{
    left:1rem;
    bottom:1rem;
    width:36px;
    height:36px;
  }
}

/* Donut chart — conic gradient segments, card centre */
.donut{
  width:170px;
  height:170px;
  border-radius:50%;
  position:relative;
  margin-inline:auto;
  background:conic-gradient(
    var(--clr-accent) 0 45%,
    var(--clr-accent-2) 45% 70%,
    var(--clr-accent-3) 70% 90%,
    var(--clr-accent-4) 90% 100%
  );
  animation:donut-in 1.2s ease;
}

@keyframes donut-in{
  from{
    transform:rotate(-90deg) scale(.7);
    opacity:0;
  }
}

/* Hollow centre cut-out */
.donut::after{
  content:'';
  position:absolute;
  inset:24px;
  border-radius:50%;
  background:var(--clr-card);
}

/* Centre label inside donut */
.donut__center{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-content:center;
  text-align:center;
  font-family:var(--font-mono);
}

.donut__center strong{
  font-size:1.35rem;
  color:var(--clr-accent);
}

.donut__center span{
  font-size:.7rem;
  color:var(--clr-muted);
}

/* Legend list — coloured dots with labels */
.legend{
  display:grid;
  gap:.55rem;
  margin-top:1.4rem;
}

.legend__row{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.85rem;
  color:var(--clr-muted);
}

.legend__row b{
  margin-left:auto;
  color:var(--clr-text);
  font-family:var(--font-mono);
  font-size:.8rem;
}

.legend__dot{
  width:10px;
  height:10px;
  border-radius:3px;
  flex:none;
}

/* Bar chart — animated fill on scroll */
.bars{
  display:grid;
  gap:1.05rem;
}

.bar__top{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--clr-muted);
  margin-bottom:.35rem;
}

.bar__track{
  height:8px;
  background:var(--clr-bg-alt);
  border-radius:999px;
  overflow:hidden;
}

.bar__fill{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  transition:width 1.4s cubic-bezier(.22,1,.36,1) .2s;
}

/* Trigger bar animation when parent enters viewport */
.is-visible .bar__fill{
  width:var(--w);
}

/* Sparkline number — large mono figure */
.spark__num{
  font-family:var(--font-mono);
  font-size:2.1rem;
  font-weight:800;
  color:var(--clr-text);
}

.spark__num span{
  font-size:.9rem;
  color:var(--clr-accent);
}

/* Sparkline SVG — draw-in animation on scroll */
.spark{
  width:100%;
  height:90px;
  margin-top:.8rem;
}

.spark path{
  stroke-dasharray:700;
  stroke-dashoffset:700;
  transition:stroke-dashoffset 2.4s ease .3s;
}

.is-visible .spark path{
  stroke-dashoffset:0;
}

.spark__foot{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--clr-muted);
  margin-top:.6rem;
}

/* Heatmap header — title + legend row */
.heat__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.1rem;
}

.heat__legend{
  display:flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--clr-muted);
}

/* Heatmap grid — horizontally scrollable columns */
.heat{
  display:flex;
  gap:3px;
  overflow-x:auto;
  padding-bottom:.5rem;
}

.heat__col{
  display:grid;
  grid-template-rows:repeat(7,1fr);
  gap:3px;
}

.heat__cell{
  width:11px;
  height:11px;
  border-radius:2px;
  background:var(--clr-bg-alt);
  flex:none;
}

/* Intensity levels 1–4 */
.heat__cell--1{background:var(--clr-accent);opacity:.25}
.heat__cell--2{background:var(--clr-accent);opacity:.45}
.heat__cell--3{background:var(--clr-accent);opacity:.7}
.heat__cell--4{background:var(--clr-accent);opacity:1}

/* Code editor widget — dark IDE look, bordered */
.codeditor{
  background:#0b101c;
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  font-family:var(--font-mono);
  font-size:.8rem;
  line-height:1.65;
  width:100%;
}

[data-theme="light"] .codeditor{
  background:#f5f7fa;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
}

/* Editor title bar — dark, dot indicators */
.codeditor__bar{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem 1rem;
  background:#111a2e;
  border-bottom:1px solid #1e2a45;
}

[data-theme="light"] .codeditor__bar{
  background:#e8ecf2;
  border-bottom:1px solid #d0d7e2;
}

/* Editor body — flex row for sidebar + explorer + code */
.codeditor__body{
  display:flex;
  min-height:340px;
}

/* Activity bar — icon column left */
.codeditor__sidebar{
  width:44px;
  background:#0d1424;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding-top:.8rem;
  flex-shrink:0;
}

[data-theme="light"] .codeditor__sidebar{
  background:#e0e5ee;
}

.codeditor__sidebar-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:6px;
  font-size:.85rem;
  color:var(--clr-muted);
  cursor:pointer;
  transition:all .15s ease;
}

.codeditor__sidebar-icon--active{
  background:var(--clr-accent);
  color:#04120c;
}

.codeditor__sidebar-icon svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.5;
  fill:none;
}

/* File explorer panel */
.codeditor__files{
  width:170px;
  background:#0f1729;
  padding:.8rem 0;
  flex-shrink:0;
  overflow:hidden;
}

[data-theme="light"] .codeditor__files{
  background:#eef2f7;
}

.codeditor__file{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem 1rem;
  font-size:.75rem;
  color:var(--clr-muted);
  transition:background .15s ease;
  cursor:pointer;
}

.codeditor__file:hover{
  background:rgba(255,255,255,.04);
}

.codeditor__file--active{
  background:rgba(0,229,160,.08);
  color:var(--clr-text);
}

[data-theme="light"] .codeditor__file:hover{
  background:rgba(0,0,0,.03);
}

[data-theme="light"] .codeditor__file--active{
  background:rgba(0,163,116,.06);
}

.codeditor__file-icon{
  flex-shrink:0;
  font-size:.7rem;
}

/* Workspace label in file tree */
.codeditor__workspace{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.3rem 1rem .6rem;
  color:var(--clr-muted);
  opacity:.5;
}

/* Main editor area */
.codeditor__editor{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* Tab bar — horizontal scrollable */
.codeditor__tabs{
  display:flex;
  background:#0d1424;
  border-bottom:1px solid #1e2a45;
  overflow-x:auto;
}

[data-theme="light"] .codeditor__tabs{
  background:#e0e5ee;
  border-bottom:1px solid #d0d7e2;
}

.codeditor__tab{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  font-size:.75rem;
  color:var(--clr-muted);
  border-bottom:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}

.codeditor__tab--active{
  background:#0b101c;
  color:var(--clr-text);
  border-bottom-color:var(--clr-accent);
}

[data-theme="light"] .codeditor__tab--active{
  background:#f5f7fa;
}

/* Code area — flex row with line numbers + content */
.codeditor__code{
  flex:1;
  display:flex;
  padding:.8rem 0;
  overflow-x:auto;
  background:#0b101c;
}

[data-theme="light"] .codeditor__code{
  background:#f5f7fa;
}

/* Line number gutter */
.codeditor__lines{
  text-align:right;
  padding:0 .8rem 0 1rem;
  color:var(--clr-muted);
  opacity:.45;
  user-select:none;
  min-width:2.4rem;
  flex-shrink:0;
  line-height:1.65;
}

.codeditor__lines br{
  display:block;
  content:'';
}

/* Code content — preserves whitespace */
.codeditor__content{
  white-space:pre;
  flex:1;
  min-width:0;
  padding-right:1.5rem;
  line-height:1.65;
}

.codeditor__content br{
  display:block;
  content:'';
}

/* Syntax highlight colour tokens (dark theme) */
.codeditor__k{color:#a855f7}
.codeditor__f{color:#f59e0b}
.codeditor__s{color:#00e5a0}
.codeditor__c{color:var(--clr-muted);font-style:italic}
.codeditor__n{color:#22d3ee}
.codeditor__o{color:#3b82f6}
.codeditor__d{color:#3b82f6}
.codeditor__v{color:#e6edf7}

/* Syntax highlight colour tokens (light theme) */
[data-theme="light"] .codeditor__k{color:#7c3aed}
[data-theme="light"] .codeditor__f{color:#d97706}
[data-theme="light"] .codeditor__s{color:#00a374}
[data-theme="light"] .codeditor__n{color:#0891b2}
[data-theme="light"] .codeditor__o{color:#2f6fed}
[data-theme="light"] .codeditor__d{color:#2f6fed}
[data-theme="light"] .codeditor__v{color:#0f1a2c}

/* Embedded terminal panel at bottom of editor */
.codeditor__terminal{
  border-top:1px solid #1e2a45;
  padding:0;
  font-size:.72rem;
  background:#0d1424;
  display:flex;
  flex-direction:column;
}

.codeditor__term-body{
  max-height:160px;
  overflow-y:auto;
  padding:.6rem 1rem;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.codeditor__term-line{
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Terminal input row */
.codeditor__term-input-line{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.4rem 1rem .6rem;
  border-top:1px solid #1e2a45;
}

.codeditor__term-input-line input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:#e6edf7;
  font:inherit;
  caret-color:#00e5a0;
}

[data-theme="light"] .codeditor__terminal{
  background:#e0e5ee;
  border-top:1px solid #d0d7e2;
}

[data-theme="light"] .codeditor__term-input-line{
  border-top:1px solid #d0d7e2;
}

[data-theme="light"] .codeditor__term-input-line input{
  color:#0f1a2c;
}

.codeditor__terminal-prefix{
  color:var(--clr-accent);
  flex-shrink:0;
}

/* Blinking block cursor in code */
.codeditor__cursor{
  display:inline-block;
  width:8px;
  height:1.1em;
  background:var(--clr-accent);
  animation:blink 1s steps(1) infinite;
  vertical-align:text-bottom;
  margin-left:4px;
}

/* Fullscreen overlay mode */
.codeditor--fullscreen{
  position:fixed;
  inset:0;
  z-index:200;
  border-radius:0;
  background:#0b101c;
  display:flex;
  flex-direction:column;
  box-shadow:none;
  animation:fadeIn .2s ease;
}

.codeditor--fullscreen .codeditor__code{
  flex:1;
}

.codeditor--fullscreen .codeditor__terminal{
  max-height:45vh;
}

.codeditor--fullscreen .codeditor__term-body{
  max-height:50vh;
  min-height:200px;
}

[data-theme="light"] .codeditor--fullscreen{
  background:var(--clr-card);
}

/* Fullscreen toggle button in editor */
.codeditor__fs-btn{
  position:absolute;
  top:.6rem;
  right:.8rem;
  z-index:5;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:6px;
  border:1px solid var(--clr-border);
  background:rgba(255,255,255,.06);
  color:var(--clr-muted);
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s ease;
}

.codeditor__fs-btn:hover{
  color:var(--clr-text);
  background:rgba(255,255,255,.12);
}

/* Compact sidebar + font on mobile */
@media (max-width:640px){
  .codeditor__sidebar{
    width:32px;
  }
  .codeditor{
    font-size:.7rem;
  }
}