/* WebPulse template — custom utilities (from src/styles.css) */

.huly-dot-grid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Hero beam — curved path (top-right → hero image top-center), same palette as former vertical beam */
.hero-beam-curve {
  display: block;
  overflow: visible;
}

.hero-beam-curve-glow {
  opacity: 0.42;
  filter: blur(10px);
}

.hero-beam-curve-path {
  filter: url(#hero-beam-glow-filter);
}

.hero-beam-curve-ambient {
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
}

.hero-beam-target {
  --hero-beam-junction-x: 50%;
}

.hero-beam-waterfall-anchor,
.hero-beam-horizon-anchor {
  left: var(--hero-beam-junction-x);
  transform: translateX(-50%);
}

.hero-beam-junction-glow {
  position: absolute;
  top: 0;
  left: var(--hero-beam-junction-x, 50%);
  transform: translate(-50%, -45%);
  width: min(420px, 90vw);
  height: 12rem;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 85% at 50% 20%,
    rgba(203, 0, 0, 0.38) 0%,
    rgba(203, 0, 0, 0.22) 22%,
    rgba(203, 0, 0, 0.1) 42%,
    rgba(0, 7, 52, 0.08) 58%,
    transparent 75%
  );
  filter: blur(10px);
}

.hero-beam-junction-core {
  position: absolute;
  top: 0;
  left: var(--hero-beam-junction-x, 50%);
  transform: translate(-50%, -50%);
  width: 10rem;
  height: 6rem;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(203, 0, 0, 0.55) 0%,
    rgba(203, 0, 0, 0.3) 35%,
    rgba(203, 0, 0, 0.12) 55%,
    transparent 72%
  );
  filter: blur(6px);
  box-shadow:
    0 0 40px rgba(203, 0, 0, 0.55),
    0 0 80px rgba(203, 0, 0, 0.3);
}

.huly-beam-waterfall {
  position: relative;
  width: 0;
  height: 0;
}

.huly-beam-waterfall-funnel {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -35%);
  width: min(92vw, 52rem);
  height: 10rem;
  background: radial-gradient(
    ellipse 100% 80% at 50% 0%,
    rgba(203, 0, 0, 0.7) 0%,
    rgba(203, 0, 0, 0.45) 12%,
    rgba(203, 0, 0, 0.3) 28%,
    rgba(0, 7, 52, 0.35) 48%,
    rgba(0, 7, 52, 0.15) 62%,
    transparent 78%
  );
  filter: blur(1px);
}

.huly-beam-waterfall-wide {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -20%);
  width: min(110vw, 64rem);
  height: 14rem;
  background: radial-gradient(
    ellipse 100% 70% at 50% 0%,
    rgba(203, 0, 0, 0.5) 0%,
    rgba(203, 0, 0, 0.28) 22%,
    rgba(0, 7, 52, 0.3) 45%,
    transparent 70%
  );
}

.huly-beam-waterfall-horizon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -8%);
  width: min(100%, 56rem);
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(203, 0, 0, 0.25) 20%,
    rgba(203, 0, 0, 0.5) 45%,
    rgba(203, 0, 0, 0.5) 55%,
    rgba(203, 0, 0, 0.25) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 48px rgba(203, 0, 0, 0.55),
    0 4px 60px rgba(203, 0, 0, 0.35),
    0 8px 100px rgba(0, 7, 52, 0.45);
}

@property --hero-electric-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero-electric-ring {
  --hero-electric-angle: 0deg;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--hero-electric-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(0, 7, 52, 0.5) 265deg,
    rgba(203, 0, 0, 0.45) 275deg,
    rgba(255, 255, 255, 0.95) 286deg,
    rgba(203, 0, 0, 0.85) 289deg,
    rgba(255, 255, 255, 0.7) 291deg,
    rgba(203, 0, 0, 0.5) 294deg,
    rgba(0, 7, 52, 0.35) 300deg,
    transparent 320deg
  );
  animation: hero-electric-spin 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 12px rgba(203, 0, 0, 0.45));
}

.hero-electric-spark {
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.85) 12%,
    rgba(203, 0, 0, 0.75) 28%,
    rgba(203, 0, 0, 0.35) 45%,
    transparent 72%
  );
  filter: blur(3px);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 28px rgba(203, 0, 0, 0.75),
    0 0 56px rgba(203, 0, 0, 0.4);
  animation: hero-electric-flicker 2.4s ease-in-out infinite;
}

.hero-electric-spark-trail {
  width: 5rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(203, 0, 0, 0.15) 30%,
    rgba(203, 0, 0, 0.45) 70%,
    rgba(255, 255, 255, 0.5) 100%
  );
  filter: blur(6px);
  transform: translate(-75%, -50%) rotate(-90deg);
  opacity: 0.7;
}

@keyframes hero-electric-spin {
  to {
    --hero-electric-angle: 360deg;
  }
}

@keyframes hero-electric-flicker {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.08);
  }
  70% {
    opacity: 0.92;
    transform: scale(0.96);
  }
}

.huly-btn-glow {
  box-shadow:
    0 0 40px rgba(249, 115, 22, 0.5),
    inset -20px 0 30px rgba(249, 115, 22, 0.15);
}

.huly-card-dark {
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.huly-glow-blue {
  box-shadow: 0 0 80px rgba(59, 130, 246, 0.35);
}

.huly-glow-purple {
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.35), transparent 70%);
}

.huly-section-light {
  background: #f7f7f7;
  color: #0a0a0a;
}

.footer-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-btn-primary {
  background: linear-gradient(135deg, #e60000 0%, #cb0000 45%, #8a0000 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 4px 24px -4px rgba(203, 0, 0, 0.55),
    0 0 48px -8px rgba(203, 0, 0, 0.45);
}

.footer-btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 8px 32px -4px rgba(203, 0, 0, 0.7),
    0 0 64px -8px rgba(203, 0, 0, 0.55);
}

.footer-btn-glass {
  background: rgba(0, 7, 52, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-btn-glass:hover {
  border-color: rgba(203, 0, 0, 0.35);
  box-shadow: 0 0 32px -8px rgba(203, 0, 0, 0.35);
}

.footer-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes footer-glow-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translate(4%, -3%) scale(1.08);
    opacity: 0.75;
  }
}

@keyframes footer-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes footer-shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.footer-animate-glow {
  animation: footer-glow-drift 14s ease-in-out infinite;
}

.footer-animate-float {
  animation: footer-float 7s ease-in-out infinite;
}

.footer-animate-float-delayed {
  animation: footer-float 8.5s ease-in-out infinite 1.2s;
}

.footer-shine {
  background-size: 200% auto;
  animation: footer-shine 4s linear infinite;
}

/* Orbit rotations */
.orbit-spin {
  animation: orbit-rotate linear infinite;
}
.orbit-spin-reverse {
  animation: orbit-rotate-reverse linear infinite;
}
.orbit-spin-slow {
  animation: orbit-rotate 14s linear infinite;
}
.orbit-spin-fast {
  animation: orbit-rotate-reverse 8s linear infinite;
}
.orbit-spin-footer {
  animation: orbit-rotate 6s linear infinite;
}

@keyframes orbit-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orbit-rotate-reverse {
  to {
    transform: rotate(-360deg);
  }
}

.orbit-layer {
  position: absolute;
  transform-origin: 50% 50%;
}
.orbit-spark-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

/* Hero mouse glow */
#hero-mouse-glow-primary,
#hero-mouse-glow-secondary {
  transition: background 0.15s ease-out;
  will-change: background;
}

/* FAQ accordion */
.faq-trigger svg {
  transition: transform 0.2s ease;
}
.faq-item[data-open="true"] .faq-trigger svg {
  transform: rotate(180deg);
}
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.faq-item[data-open="true"] .faq-content {
  grid-template-rows: 1fr;
}
.faq-content-inner {
  overflow: hidden;
}

/* Mobile menu */
#mobile-menu.hidden {
  display: none;
}
@media (min-width: 768px) {
  #mobile-menu {
    display: none !important;
  }
}

/* Navbar scrolled */
header.nav-scrolled {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Portfolio pages */
.portfolio-glass {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 45%,
    rgba(0, 7, 52, 0.15) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.portfolio-card-glow {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 24px 80px -32px rgba(0, 0, 0, 0.9),
    0 0 48px -16px rgba(203, 0, 0, 0.12);
}

.portfolio-card-glow:hover,
.group:hover .portfolio-card-glow {
  box-shadow:
    0 0 0 1px rgba(203, 0, 0, 0.2) inset,
    0 32px 100px -24px rgba(0, 0, 0, 0.85),
    0 0 64px -12px rgba(203, 0, 0, 0.28);
}

.portfolio-filter-track .portfolio-filter-pill {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(203, 0, 0, 0.35) 0%, rgba(0, 7, 52, 0.6) 100%);
  box-shadow: 0 0 24px -4px rgba(203, 0, 0, 0.45);
}

.portfolio-filter-btn {
  position: relative;
}

.portfolio-ambient-orb {
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(203, 0, 0, 0.22) 0%, rgba(0, 7, 52, 0.35) 40%, transparent 70%);
  filter: blur(40px);
  animation: portfolio-orb-drift 18s ease-in-out infinite;
}

.portfolio-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.portfolio-marquee-track {
  animation: portfolio-marquee 32s linear infinite;
}

.portfolio-shine-border {
  position: relative;
}

.portfolio-shine-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(203, 0, 0, 0.35) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.portfolio-shine-border:hover::after {
  opacity: 1;
}

@keyframes portfolio-orb-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(3%, -4%) scale(1.06);
  }
}

@keyframes portfolio-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes portfolio-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.portfolio-float {
  animation: portfolio-float 8s ease-in-out infinite;
}

#gallery-lightbox.hidden {
  display: none;
}

/* Ad video — frame + minimal side circuit lines */
.ad-video-stage {
  overflow: visible;
}

.ad-video-box {
  overflow: hidden;
  border-radius: 1.25rem;
  border: 5px solid rgba(0, 7, 52, 0.28);
  box-shadow:
    0 0 0 1px rgba(203, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px rgba(0, 7, 52, 0.14);
}

.ad-video-circuit {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: clamp(5rem, 14vw, 8.5rem);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.ad-video-circuit--left {
  right: calc(100% + 0.65rem);
}

.ad-video-circuit--right {
  left: calc(100% + 0.65rem);
}

.ad-video-circuit--right .ad-video-circuit__svg {
  transform: scaleX(-1);
}

.ad-video-circuit__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ad-video-circuit__path {
  fill: none;
  stroke: rgba(0, 7, 52, 0.22);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.15));
  animation: ad-circuit-flow 8s ease-in-out infinite;
}

.ad-video-circuit__path--accent {
  stroke: rgba(203, 0, 0, 0.28);
  filter: drop-shadow(0 0 3px rgba(203, 0, 0, 0.12));
}

.ad-video-circuit__node {
  fill: rgba(59, 130, 246, 0.35);
  animation: ad-circuit-node-pulse 3s ease-in-out infinite;
}

.ad-video-circuit__node--hub {
  fill: rgba(203, 0, 0, 0.4);
  animation-duration: 2.5s;
}

.ad-video-circuit__node:nth-of-type(2) {
  animation-delay: -0.7s;
}

.ad-video-circuit__node:nth-of-type(3) {
  animation-delay: -1.4s;
}

.ad-video-circuit__node:nth-of-type(4) {
  animation-delay: -1.9s;
}

.ad-video-circuit__node:nth-of-type(5) {
  animation-delay: -1.1s;
}

@keyframes ad-circuit-flow {
  0% {
    stroke-dashoffset: 100;
    opacity: 0.35;
  }
  40% {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
  60% {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
  100% {
    stroke-dashoffset: -100;
    opacity: 0.35;
  }
}

@keyframes ad-circuit-node-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ad-video-circuit__path {
    stroke-dashoffset: 0;
    animation: none;
    opacity: 0.55;
  }

  .ad-video-circuit__node {
    animation: none;
    opacity: 0.6;
  }
}

/* Site navigation — dropdowns & responsive layout (not in Tailwind build) */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__panel {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 50;
  min-width: 15rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding-top: 0.625rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.nav-dropdown__menu {
  padding: 0.5rem 0;
  max-height: min(70vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-dropdown__link {
  margin: 0.3rem 0.5rem;
  padding: 0.55rem 0.875rem;
  border-radius: 0.5rem;
  line-height: 1.35;
}

.nav-dropdown.is-open .nav-dropdown__panel,
.nav-dropdown:hover .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown.is-open .nav-dropdown__chevron,
.nav-dropdown:hover .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__chevron {
  transition: transform 0.2s ease;
}

.nav-mobile-submenu {
  display: none;
  padding: 0.25rem 0 0.75rem;
}

.nav-mobile-submenu.is-open {
  display: block;
}

.nav-mobile-submenu__link {
  margin: 0.35rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  line-height: 1.4;
}

.nav-mobile-submenu__link:hover,
.nav-mobile-submenu__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.nav-mobile-toggle[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.nav-chevron {
  transition: transform 0.2s ease;
}

/* Lock scroll when mobile nav is open */
body.nav-menu-open {
  overflow: hidden;
}

/* Responsive site header (nav.js — not scanned by Tailwind build) */
.site-nav {
  height: 3.5rem;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .site-nav {
    height: 4rem;
    gap: 0.75rem;
  }
}

.site-nav__logo {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 640px) {
  .site-nav__logo {
    width: 2rem;
    height: 2rem;
  }
}

.site-nav__brand-text {
  font-size: 1rem;
}

@media (min-width: 640px) {
  .site-nav__brand-text {
    font-size: 1.125rem;
  }
}

.site-nav__link,
.nav-dropdown__trigger.site-nav__link {
  font-size: 0.75rem;
}

.site-nav__desktop {
  display: none;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__actions {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.site-nav__menu-btn {
  display: flex;
  margin-left: auto;
}

#mobile-menu.site-nav__mobile.hidden {
  display: none;
}

#mobile-menu.site-nav__mobile:not(.hidden) {
  display: flex;
}

.site-nav__mobile-list {
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .site-nav {
    gap: 1.25rem;
  }

  .site-nav__desktop {
    display: flex;
  }

  .site-nav__actions {
    display: flex;
  }

  .site-nav__menu-btn {
    display: none;
  }

  #mobile-menu.site-nav__mobile {
    display: none !important;
  }

  .site-nav__link,
  .nav-dropdown__trigger.site-nav__link {
    font-size: 0.8125rem;
  }
}

@media (min-width: 1280px) {
  .site-nav {
    gap: 1.5rem;
  }

  .site-nav__desktop {
    gap: 1.25rem;
  }

  .site-nav__actions {
    gap: 1rem;
  }

  .site-nav__link,
  .nav-dropdown__trigger.site-nav__link {
    font-size: 0.875rem;
  }

  .nav-dropdown__panel {
    min-width: 17.5rem;
  }
}

/* Desktop nav: compact CTA on large tablets */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav__actions a {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    font-size: 0.65rem;
  }
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
  letter-spacing: -0.02em;
}