/* dadudekc.site — v3 custom effects layer (Tailwind handles layout/utilities) */

:root {
  --teal: #28f2c4;
  --cyan: #39d3ff;
  --gold: #ffb347;
  --void: #05070a;
}

html { scroll-behavior: smooth; }
body { background: var(--void); }
::selection { background: var(--teal); color: #04120d; }

/* subtle tech grid over the whole page */
.grid-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(40, 242, 196, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 242, 196, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
}

/* hero swarm canvas */
#swarm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* gradient glow text */
.glow-grad {
  background: linear-gradient(95deg, var(--teal) 5%, var(--cyan) 50%, var(--gold) 95%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradshift 8s ease-in-out infinite alternate;
}
@keyframes gradshift { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* blinking terminal cursor */
.blink::after {
  content: "▌";
  color: var(--teal);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* pulsing status dot */
.dot-live {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal), 0 0 24px rgba(40,242,196,.5);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .4; transform: scale(.7); } }

/* infinite marquee ticker */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(40,242,196,.22);
  border-bottom: 1px solid rgba(40,242,196,.22);
  background: rgba(40,242,196,.04);
}
.marquee-track {
  display: inline-block;
  padding: .65rem 0;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s cubic-bezier(.22,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

/* hover-lift card with corner brackets */
.tcard {
  position: relative;
  transition: transform .3s cubic-bezier(.22,.8,.3,1), border-color .3s, box-shadow .3s;
}
.tcard::before, .tcard::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--teal);
  border-style: solid;
  opacity: 0;
  transition: opacity .3s;
}
.tcard::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.tcard::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.tcard:hover {
  transform: translateY(-5px);
  border-color: rgba(40,242,196,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(40,242,196,.08);
}
.tcard:hover::before, .tcard:hover::after { opacity: 1; }

/* video demo frame: terminal window chrome */
.term-frame {
  border: 1px solid rgba(40,242,196,.3);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(40,242,196,.07);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: #0b1016;
  border-bottom: 1px solid rgba(40,242,196,.18);
}
.term-bar .b { width: 11px; height: 11px; border-radius: 999px; }
.term-frame video { display: block; width: 100%; height: auto; }

/* scanline sweep on the video frame */
.term-frame { position: relative; }
.term-frame .scan {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(40,242,196,.06), transparent);
  animation: scan 5s linear infinite;
  z-index: 2;
}
@keyframes scan { from { top: -90px; } to { top: 100%; } }

/* buttons */
.btn-solid {
  background: linear-gradient(120deg, var(--teal), var(--cyan));
  color: #04120d;
  box-shadow: 0 8px 30px rgba(40,242,196,.25);
  transition: transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s;
}
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(40,242,196,.4); }
.btn-line {
  border: 1px solid rgba(232,246,241,.2);
  transition: transform .25s cubic-bezier(.22,.8,.3,1), border-color .25s, background .25s;
}
.btn-line:hover { transform: translateY(-3px); border-color: var(--teal); background: rgba(40,242,196,.08); }

/* nav underline */
.nav-link { position: relative; transition: color .2s; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.8,.3,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* free tools I/O */
.tool-in {
  width: 100%;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(232,246,241,.14);
  border-radius: 8px;
  color: #e8f6f1;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: .875rem;
  padding: .75rem .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.tool-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(40,242,196,.15); }
.tool-out {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(232,246,241,.14);
  border-radius: 8px;
  padding: .75rem .9rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: .84rem;
  color: var(--teal);
  min-height: 2.4rem;
}
.tool-out.err { color: #ff8d78; border-color: rgba(255,141,120,.4); }

/* stat number */
.stat-num { text-shadow: 0 0 30px rgba(40,242,196,.35); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}