/* ═══════════════════════════════════════════════════════════════════════════
   AXION IT – MAGIC LAYER
   Visual-only enhancement layer (no content, structure, or color changes).
   All effects use the existing accent token (#C9B99A) as a soft light source.
   GPU-friendly, CSS-first, auto-reducing on tablet/mobile & reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Soft light tones derived exclusively from existing --color-accent (#C9B99A)
     and existing surfaces. No new hues are introduced. */
  --ax-accent-rgb: 201, 185, 154;
  --ax-glow-soft:   rgba(var(--ax-accent-rgb), 0.10);
  --ax-glow-mid:    rgba(var(--ax-accent-rgb), 0.16);
  --ax-glow-edge:   rgba(var(--ax-accent-rgb), 0.28);
  --ax-shadow-deep: 0 24px 60px -28px rgba(26, 26, 26, 0.18),
                    0 8px 22px -14px rgba(26, 26, 26, 0.10);
  --ax-ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ax-ease-calm:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════════
   1. SILENT DATA FLOW BACKGROUND  (desktop only, behind everything)
   Two whisper-soft layers: a dot grid + diagonal signal streaks.
   Both extremely low-opacity, slow-moving, pointer-transparent.
   ════════════════════════════════════════════════════════════════════════ */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10vmax;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

/* Dot grid — abstract data points, barely visible */
body::before {
  background-image:
    radial-gradient(rgba(var(--ax-accent-rgb), 0.18) 1px, transparent 1.4px);
  background-size: 44px 44px;
  background-position: 0 0;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  animation: ax-drift 60s linear infinite;
}

/* Diagonal signal streaks — data moving quietly through the background */
body::after {
  background-image:
    linear-gradient(115deg,
      transparent 0%,
      transparent 46%,
      rgba(var(--ax-accent-rgb), 0.055) 50%,
      transparent 54%,
      transparent 100%),
    linear-gradient(115deg,
      transparent 0%,
      transparent 70%,
      rgba(var(--ax-accent-rgb), 0.035) 73%,
      transparent 76%,
      transparent 100%);
  background-size: 220% 220%, 260% 260%;
  opacity: 0.55;
  animation: ax-stream 38s ease-in-out infinite alternate;
}

@keyframes ax-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-44px, -44px, 0); }
}
@keyframes ax-stream {
  0%   { background-position:   0% 50%,  50% 0%; }
  100% { background-position: 100% 50%, 50% 100%; }
}

/* The body has overflow-x:hidden already; make main stack above backdrops */
body > * { position: relative; z-index: 1; }

/* Fade the backdrop gently while scrolling deep (controlled via JS var) */
html { --ax-scroll-fade: 1; }
body::before { opacity: calc(0.35 * var(--ax-scroll-fade)); }
body::after  { opacity: calc(0.55 * var(--ax-scroll-fade)); }

/* Only on large screens */
@media (max-width: 1024px) {
  body::before, body::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   2. SIGNATURE MICRO-MOMENT
      Hero digital heartbeat — one quiet, recognizable presence.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero digital heartbeat — a slow, barely perceptible pulse of light */
.section--hero { position: relative; overflow: hidden; isolation: isolate; }

.section--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 50% 55%,
      rgba(var(--ax-accent-rgb), 0.10) 0%,
      rgba(var(--ax-accent-rgb), 0.04) 40%,
      transparent 72%);
  opacity: 0.0;
  animation: ax-heartbeat 7.2s var(--ax-ease-calm) infinite;
  will-change: opacity, transform;
}
.section--hero > * { position: relative; z-index: 1; }

@keyframes ax-heartbeat {
  0%   { opacity: 0.00; transform: scale(0.985); }
  18%  { opacity: 0.85; transform: scale(1.002); }
  30%  { opacity: 0.55; transform: scale(0.997); }
  44%  { opacity: 1.00; transform: scale(1.004); }
  70%  { opacity: 0.20; transform: scale(0.992); }
  100% { opacity: 0.00; transform: scale(0.985); }
}

/* ════════════════════════════════════════════════════════════════════════
   3. DIGITAL AURA  —  key elements, barely visible, engineered feel
      Applied to hero CTA, service highlights, trust elements, project cards,
      service cards. Uses conic/radial light — not a neon ring.
   ════════════════════════════════════════════════════════════════════════ */

.hero-cta,
.service-highlight,
.trust-element,
.service-card,
.project-card,
.page-cta-box {
  position: relative;
  isolation: isolate;
}

.hero-cta::before,
.service-highlight::before,
.trust-element::before,
.service-card::before,
.project-card::before,
.page-cta-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 120deg,
              rgba(var(--ax-accent-rgb), 0.00) 0deg,
              rgba(var(--ax-accent-rgb), 0.35) 90deg,
              rgba(var(--ax-accent-rgb), 0.00) 180deg,
              rgba(var(--ax-accent-rgb), 0.22) 270deg,
              rgba(var(--ax-accent-rgb), 0.00) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 600ms var(--ax-ease-calm);
  pointer-events: none;
  animation: ax-aura-rotate 14s linear infinite;
  z-index: 2;
}

.service-highlight:hover::before,
.trust-element:hover::before,
.service-card:hover::before,
.project-card:hover::before,
.page-cta-box:hover::before,
.hero-cta:hover::before { opacity: 1; }

@keyframes ax-aura-rotate {
  to { transform: rotate(360deg); }
}

/* Outer halo — a soft breath of accent light around the same cards */
.service-highlight::after,
.trust-element::after,
.service-card::after,
.project-card::after,
.page-cta-box::after {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: calc(var(--radius-lg, 12px) + 12px);
  background: radial-gradient(60% 60% at 50% 50%,
              var(--ax-glow-soft) 0%,
              transparent 70%);
  opacity: 0;
  transition: opacity 700ms var(--ax-ease-calm);
  pointer-events: none;
  z-index: -1;
  filter: blur(6px);
}
.service-highlight:hover::after,
.trust-element:hover::after,
.service-card:hover::after,
.project-card:hover::after,
.page-cta-box:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   4. GLASS + SIGNAL FUSION (limited use)
      Applied softly to service highlights, testimonial quotes, trust cards.
   ════════════════════════════════════════════════════════════════════════ */

.service-highlight,
.trust-element {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(250, 250, 250, 0.75) 100%),
    var(--color-bg-secondary, #FAFAFA);
  backdrop-filter: blur(6px) saturate(108%);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  border: 1px solid rgba(var(--ax-accent-rgb), 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(26, 26, 26, 0.035);
  transition:
    transform 500ms var(--ax-ease-soft),
    box-shadow 500ms var(--ax-ease-soft),
    border-color 500ms var(--ax-ease-soft);
}

/* Trust-Karten: Kanten wie .project-card (Portfolio-Sektion) */
.trust-element {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.service-highlight:hover,
.trust-element:hover {
  transform: translateY(-3px);
  box-shadow: var(--ax-shadow-deep);
  border-color: rgba(var(--ax-accent-rgb), 0.30);
}

.trust-element:hover {
  border-color: var(--color-accent);
}

.testimonial-quote {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem !important;
  background: linear-gradient(180deg,
                rgba(255,255,255,0.55),
                rgba(250,250,250,0.75));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-md, 8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              0 2px 8px rgba(26,26,26,0.04);
  overflow: hidden;
  isolation: isolate;
}

/* Very faint animated noise — prevents the glass from feeling sterile */
.service-highlight,
.trust-element,
.testimonial-quote { position: relative; }

.service-highlight > *,
.trust-element > *,
.testimonial-quote > * { position: relative; z-index: 1; }

.service-highlight,
.trust-element,
.testimonial-quote {
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(250, 250, 250, 0.75) 100%),
    repeating-linear-gradient(
      115deg,
      rgba(var(--ax-accent-rgb), 0.020) 0 1px,
      transparent 1px 4px);
  background-size: auto, 200% 200%;
  animation: ax-signal-shift 22s linear infinite;
}

@keyframes ax-signal-shift {
  0%   { background-position: 0 0, 0% 0%; }
  100% { background-position: 0 0, 100% 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   5. INTELLIGENT HOVER REACTIONS
      - Text sharpens (subtle letter-spacing + opacity tightening)
      - Icons nudge 1–2px
      - Borders animate smoothly (accent fade, not instant swap)
   ════════════════════════════════════════════════════════════════════════ */

.nav-link,
.hero-cta,
.hero-chat-trigger,
.service-highlight-link,
.about-cta-link,
.footer-links a,
.page-cta-button,
.service-links a,
.blog-quick-link,
.dropdown-toggle,
.dropdown-menu a {
  transition:
    color 420ms var(--ax-ease-calm),
    letter-spacing 500ms var(--ax-ease-soft),
    transform 420ms var(--ax-ease-soft),
    border-color 500ms var(--ax-ease-soft),
    background-color 420ms var(--ax-ease-calm),
    box-shadow 500ms var(--ax-ease-soft),
    filter 500ms var(--ax-ease-calm) !important;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover,
  .service-highlight-link:hover,
  .about-cta-link:hover,
  .footer-links a:hover,
  .blog-quick-link:hover,
  .dropdown-menu a:hover {
    letter-spacing: 0.005em;
    filter: contrast(1.02);
  }

  .service-highlight-link:hover,
  .about-cta-link:hover { transform: translateX(2px); }

  /* Icons shift 1–2px on hover of their containers */
  .hero-chat-trigger:hover svg,
  .hero-cta:hover svg,
  .page-cta-button:hover svg { transform: translateX(2px); }
  .hero-chat-trigger svg,
  .hero-cta svg,
  .page-cta-button svg {
    transition: transform 420ms var(--ax-ease-soft);
    will-change: transform;
  }

  /* Service/trust/project cards — icons & index numbers nudge */
  .service-card:hover .service-icon { transform: translateY(-2px); }
  .project-card:hover .project-index { transform: translateY(-1px); }
  .service-icon,
  .project-index { transition: transform 500ms var(--ax-ease-soft); }

  /* Animated underline on nav — grows from center instead of toggling */
  .nav-link::after {
    transition: transform 520ms var(--ax-ease-soft),
                opacity   520ms var(--ax-ease-calm) !important;
  }
}

/* CTA: add a quiet accent aura pulse on hover */
.hero-cta:hover {
  box-shadow:
    0 14px 34px -14px rgba(26, 26, 26, 0.22),
    0 0 0 6px rgba(var(--ax-accent-rgb), 0.10);
}

/* About CTA link — animated border (fade, no instant swap) */
.about-cta-link {
  background-image: linear-gradient(to right,
    var(--color-accent) 50%, var(--color-accent-hover) 50%);
  background-size: 200% 100%;
  background-position: 0% 0;
  background-repeat: no-repeat;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  transition:
    background-position 700ms var(--ax-ease-soft),
    color 420ms var(--ax-ease-calm),
    border-color 500ms var(--ax-ease-soft),
    transform 420ms var(--ax-ease-soft) !important;
}
.about-cta-link:hover { background-position: -100% 0; }

/* ════════════════════════════════════════════════════════════════════════
   6. SCROLL-BASED MICRO-REVEALS (layered)
      Text → background depth → accent light
      Default state set for elements marked by the JS runtime.
   ════════════════════════════════════════════════════════════════════════ */

.ax-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity       900ms var(--ax-ease-calm),
    transform     900ms var(--ax-ease-soft),
    filter        900ms var(--ax-ease-calm);
  filter: blur(4px);
  will-change: transform, opacity, filter;
}
.ax-reveal.ax-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Layered timing — text first, then background depth, then accent light */
.ax-reveal--t1 { transition-delay: 0ms,   0ms,   0ms; }
.ax-reveal--t2 { transition-delay: 140ms, 140ms, 140ms; }
.ax-reveal--t3 { transition-delay: 260ms, 260ms, 260ms; }

/* Card-specific micro-reveal: inner accent light blooms last */
.service-highlight.ax-inview,
.trust-element.ax-inview,
.service-card.ax-inview,
.project-card.ax-inview {
  animation: ax-accent-bloom 1600ms var(--ax-ease-calm) 300ms 1 both;
}
@keyframes ax-accent-bloom {
  0%   { box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.6),
          0 0 0 0 rgba(var(--ax-accent-rgb), 0.00),
          0 1px 2px rgba(26,26,26,0.035); }
  40%  { box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.6),
          0 0 0 10px rgba(var(--ax-accent-rgb), 0.07),
          0 8px 20px rgba(26,26,26,0.05); }
  100% { box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.6),
          0 0 0 0 rgba(var(--ax-accent-rgb), 0.00),
          0 1px 2px rgba(26,26,26,0.035); }
}

/* ════════════════════════════════════════════════════════════════════════
   7. LIGHT & DEPTH NARRATIVE
      Hero logo gains a gentle vertical parallax feel via scroll var;
      about photo subtly lifts its shadow while in view.
   ════════════════════════════════════════════════════════════════════════ */

html { --ax-sy: 0; }

.hero-logo {
  transform: translate3d(0, calc(var(--ax-sy) * -6px), 0);
  transition: transform 220ms var(--ax-ease-calm);
  will-change: transform;
}

.about-photo img {
  transition: box-shadow 900ms var(--ax-ease-calm),
              transform 900ms var(--ax-ease-soft);
}
.about-photo.ax-inview img {
  box-shadow:
    0 28px 60px -30px rgba(26, 26, 26, 0.22),
    0 12px 28px -18px rgba(26, 26, 26, 0.12),
    0 0 0 1px rgba(var(--ax-accent-rgb), 0.10);
}

/* Section divider light — very soft horizontal light across section edges */
.section + .section::before {
  content: "";
  display: block;
  height: 1px;
  width: min(720px, 80%);
  margin: 0 auto;
  background: linear-gradient(90deg,
              transparent,
              rgba(var(--ax-accent-rgb), 0.22),
              transparent);
  transform: translateY(-1px);
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════
   8. NAV — quiet glass reaction on scroll
   ════════════════════════════════════════════════════════════════════════ */

.navbar {
  transition:
    background-color 500ms var(--ax-ease-calm),
    box-shadow 500ms var(--ax-ease-calm),
    backdrop-filter 500ms var(--ax-ease-calm);
}
.navbar.scrolled {
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 1px 0 rgba(var(--ax-accent-rgb), 0.12),
    0 10px 30px -20px rgba(26, 26, 26, 0.15);
}

/* ════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE DIAL-DOWN
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Tablet: soften everything */
  .section--hero::after { animation-duration: 10s; opacity: 0.5; }
  .hero-cta::before,
  .service-highlight::before,
  .trust-element::before,
  .service-card::before,
  .project-card::before,
  .page-cta-box::before { animation-duration: 22s; }
}

@media (max-width: 768px) {
  /* Mobile: clarity over motion */
  .section--hero::after { animation: none; opacity: 0; }
  .ax-reveal { filter: none; transform: translate3d(0, 10px, 0); }
  .service-highlight,
  .trust-element,
  .testimonial-quote { animation: none; }
  .service-highlight::before,
  .trust-element::before,
  .service-card::before,
  .project-card::before,
  .page-cta-box::before,
  .hero-cta::before { display: none; }
  .service-highlight::after,
  .trust-element::after,
  .service-card::after,
  .project-card::after,
  .page-cta-box::after { display: none; }
  .hero-logo { transform: none; }
}

/* Reduced motion: honour user preference fully */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .section--hero::after,
  .service-highlight,
  .trust-element,
  .testimonial-quote,
  .hero-cta::before,
  .service-highlight::before,
  .trust-element::before,
  .service-card::before,
  .project-card::before,
  .page-cta-box::before { animation: none !important; }
  .ax-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-logo { transform: none !important; }
}

/* When user stops scrolling for a while, further settle the ambient motion */
html.ax-idle body::before,
html.ax-idle body::after { animation-play-state: paused; }
html.ax-idle .section--hero::after { animation-play-state: paused; }