/* ============================
   NetWifi — custom styles
   Tailwind handles the rest
   ============================ */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================
   Hero — atmospheric streaks
   Long blurred neon bars angled across the hero
   ============================ */
.streak {
  position: absolute;
  left: -100px;
  width: calc(100% + 200px);
  height: 3px;
  pointer-events: none;
}

.streak-purple {
  background: #A855F7;
  height: 3px;
  filter: blur(40px);
  opacity: 0.55;
}

.streak-cyan {
  background: #06B6D4;
  height: 2px;
  filter: blur(50px);
  opacity: 0.5;
}

.streak-pink {
  background: #EC4899;
  height: 4px;
  filter: blur(60px);
  opacity: 0.45;
}

/* ============================
   Hero glow — gentle drift
   ============================ */
@keyframes drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -10px) scale(1.04);
  }
  66% {
    transform: translate(-15px, 15px) scale(0.97);
  }
}

.hero-glow {
  animation: drift 18s ease-in-out infinite;
}

/* ============================
   FAQ — details open animation
   ============================ */
details > summary {
  list-style: none;
  user-select: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] > p {
  animation: faqFadeIn 0.25s ease-out;
}

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================
   Buttons / links — smooth transitions
   ============================ */
a, button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease, color 0.2s ease;
}

/* Keyboard-focus outline tuned to brand */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #C4F542;
  outline-offset: 3px;
  border-radius: 12px;
}

/* ============================
   Custom scrollbar
   ============================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
  background: #27272A;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3F3F46;
}

/* ============================
   Selection — lime brand color
   ============================ */
::selection {
  background: #C4F542;
  color: #0A0A0A;
}

/* ============================
   Image rendering (crisp router photo)
   ============================ */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* ============================
   Phosphor icons baseline align
   ============================ */
.ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ============================
   Mobile tuning
   ============================ */
@media (max-width: 640px) {
  .streak {
    height: 2px !important;
    filter: blur(30px) !important;
  }
}

/* ============================
   Hero — tech grid background
   Soft dot/line grid faded by radial mask
   ============================ */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
}

/* ============================
   Hero — fade-up entry animation
   ============================ */
.hero-fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0s;
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================
   Router — gentle floating
   ============================ */
.router-float {
  animation: routerFloat 6s ease-in-out infinite;
}
@keyframes routerFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ============================
   Floating cards near router
   ============================ */
.float-card {
  animation: floatCard 5s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ============================
   Service logo cards — gentle glow on hover
   ============================ */
.service-card {
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: #C4F542;
  background-color: #141416;
  box-shadow: 0 0 32px rgba(196, 245, 66, 0.15);
}

/* Service icons (Simple Icons CDN <img>) recolor to white */
.service-icon {
  width: 36px;
  height: 36px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.service-card:hover .service-icon {
  opacity: 1;
}

/* Inline SVG service icons (ChatGPT, Claude) — match style of CDN icons */
.service-svg {
  width: 36px;
  height: 36px;
  color: #ffffff;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.service-card:hover .service-svg {
  opacity: 1;
}

/* ============================
   Marquee — endless horizontal scroll
   ============================ */
.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee {
  width: max-content;
  animation: marqueeScroll 50s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-dot {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: #3F3F46;
  font-size: 18px;
  flex-shrink: 0;
}

/* ============================
   Squid logo — glow + gentle idle bob
   ============================ */
#squid-logo {
  filter: drop-shadow(0 0 5px rgba(196, 245, 66, 0.45));
  animation: squidBob 5s ease-in-out infinite;
  transform-origin: 50% 40%;
}
@keyframes squidBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(1.5px) rotate(-3deg); }
}
.squid-mini {
  filter: drop-shadow(0 0 4px rgba(196, 245, 66, 0.4));
}

/* ============================
   Tentacle — squid reaches the hero badge dot
   ============================ */
#tentacle-svg {
  /* own compositor layer — redrawing the tentacle never repaints the
     hero background behind it */
  transform: translateZ(0);
}
#tentacle-path {
  fill: none;
  stroke: #C4F542;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.92;
}
/* the glow filter is applied only once the line is fully drawn and
   static — a drop-shadow on a moving stroke is expensive to repaint */
#tentacle-svg.lit #tentacle-path {
  filter: drop-shadow(0 0 4px rgba(196, 245, 66, 0.75));
}
#tentacle-svg.connected #tentacle-path {
  animation: tentaclePulse 2.6s ease-in-out infinite;
}
@keyframes tentaclePulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 0.6; }
}

/* ============================
   Connection badge — LAN port → lit when connected
   ============================ */
.lan-port {
  width: 22px;
  height: 18px;
  display: block;
  transition: filter 0.4s ease;
}
.lan-frame,
.lan-keyway {
  fill: #0d0d0f;
  stroke: #3F3F46;
  stroke-width: 2;
  transition: stroke 0.4s ease;
}
.lan-pins path {
  stroke: #3F3F46;
  stroke-width: 1.7;
  stroke-linecap: round;
  transition: stroke 0.4s ease;
}
#connect-port .ping {
  background: #C4F542;
  opacity: 0;
}
#connect-badge {
  transition: border-color 0.4s ease;
}
#connect-badge.connected {
  border-color: rgba(196, 245, 66, 0.4);
}
#connect-badge.connected .lan-frame,
#connect-badge.connected .lan-keyway {
  stroke: #C4F542;
}
#connect-badge.connected .lan-pins path {
  stroke: #C4F542;
}
#connect-badge.connected .lan-port {
  filter: drop-shadow(0 0 5px rgba(196, 245, 66, 0.85));
}
#connect-badge.connected #connect-port .ping {
  animation: connectPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes connectPing {
  0%        { transform: scale(1);   opacity: 0.5; }
  75%, 100% { transform: scale(2.3); opacity: 0; }
}
/* text + caret hidden until the tentacle plugs in */
#connect-badge:not(.connected) .connect-textwrap {
  display: none;
}
/* typewriter caret */
#connect-caret {
  display: inline-block;
  width: 2px;
  height: 12px;
  margin-left: 2px;
  border-radius: 1px;
  background: #C4F542;
  animation: caretBlink 1s step-end infinite;
}
#connect-caret.done {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
@keyframes caretBlink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ============================
   Devices hub — radial connection diagram
   ============================ */
.hub-line line {
  stroke: rgba(196, 245, 66, 0.16);
  stroke-width: 0.5;
}
.hub-flow line {
  stroke: #C4F542;
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 2 11;
  animation: hubFlow 1.6s linear infinite;
}
@keyframes hubFlow {
  to { stroke-dashoffset: -13; }
}
.hub-core {
  box-shadow: 0 0 44px rgba(196, 245, 66, 0.26);
  animation: hubPulse 3.6s ease-in-out infinite;
}
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(196, 245, 66, 0.20); }
  50%      { box-shadow: 0 0 70px rgba(196, 245, 66, 0.42); }
}
.hub-icon {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.hub-node:hover .hub-icon {
  transform: translateY(-4px);
  border-color: #C4F542;
  box-shadow: 0 0 28px rgba(196, 245, 66, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  #squid-logo { animation: none; }
  #tentacle-svg.connected #tentacle-path { animation: none; }
  #connect-caret { animation: none; }
  .hub-flow line { animation: none; }
  .hub-core { animation: none; }
}

/* ============================================================
   Mobile — performance & smoothness
   On phones the big animated blurred glows and live backdrop
   filters are the main source of scroll jank. Make them static.
   ============================================================ */
@media (max-width: 768px) {
  /* Phones can't rasterise the 140px-blurred glow divs fast enough while
     scrolling — that is the blank/black tiles on a fast scroll. Drop the
     blurred elements and paint the ambient colour as a flat gradient,
     which costs a fraction to raster. */
  .hero-glow { display: none; }
  .amb-glow  { display: none; }
  #hero {
    background:
      radial-gradient(58% 38% at 50% 20%, rgba(168, 85, 247, 0.20), transparent 72%),
      radial-gradient(62% 40% at 12% 66%, rgba(6, 182, 212, 0.16), transparent 72%),
      radial-gradient(62% 40% at 88% 62%, rgba(236, 72, 153, 0.16), transparent 72%);
  }

  /* box-shadow pulse forces a repaint each frame — freeze it */
  .hub-core { animation: none; }

  /* keep the drawn tentacle perfectly static once connected */
  #tentacle-svg.connected #tentacle-path { animation: none; }

  /* backdrop-blur re-blurs the page behind it on every scroll frame */
  .backdrop-blur-md,
  .backdrop-blur-sm {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ============================================================
   Touch devices — no sticky :hover states after a tap
   ============================================================ */
@media (hover: none) {
  .service-card:hover {
    transform: none;
    border-color: #27272A;
    background-color: #141416;
    box-shadow: none;
  }
  .service-card:hover .service-icon,
  .service-card:hover .service-svg { opacity: 0.85; }
  .hub-node:hover .hub-icon {
    transform: none;
    border-color: #27272A;
    box-shadow: none;
  }
}