/*
 * mobile-perf.css — CRITICAL BLOCKING RULES ONLY
 * Loaded synchronously; contains every rule that applies to the
 * first viewport (hero, nav) or to html/body before first paint.
 *
 * Non-critical below-fold rules live in mobile-perf-deferred.css
 * and are loaded asynchronously via preload/onload in index.html.
 */

/* ==========================================================
   1. VIEWPORT HEIGHT — Safari / iPhone toolbar wobble fix
   Applies to .min-h-screen on the hero section (first viewport).
   Must be blocking to prevent visible layout shift on load.
   ========================================================== */

@supports (min-height: 100svh) {
  .min-h-screen {
    min-height: 100svh !important;
  }
}

/* Fallback for iOS < 15.4: use CSS custom property set by inline JS */
@supports not (min-height: 100svh) {
  .min-h-screen {
    min-height: calc(var(--svh, 1vh) * 100) !important;
  }
}

/* ==========================================================
   2. HERO DECORATIVE ORBS — blur removal (first viewport)
   These orbs sit inside the hero section. If this rule loads
   late, the GPU-heavy blur(120px) would render on first paint.
   Keep blocking so the cheap no-filter path is in place before
   the hero composites.
   ========================================================== */

@media (max-width: 767px) {
  .blur-\[120px\] {
    filter: none !important;
  }

  .blur-\[100px\] {
    filter: none !important;
  }

  /* Reduce decorative glow blur on all elements */
  .blur-2xl {
    --tw-blur: blur(8px);
    filter: blur(8px) !important;
  }

  /* Slow pulse on blurred elements — prevents continuous repaints */
  .animate-pulse {
    animation-duration: 6s !important;
  }
}

/* ==========================================================
   3. BACKDROP-FILTER — nav is above fold (fixed, full-width)
   backdrop-blur-xl on the nav triggers on first scroll.
   Reduce before any paint so the cheaper path is active when
   the nav composites for the first time.
   ========================================================== */

@media (max-width: 767px) {
  .backdrop-blur-xl,
  .backdrop-blur-2xl {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  .backdrop-blur-lg {
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }

  .backdrop-blur-md {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }
}

/* ==========================================================
   6. OVERFLOW + SCROLL BEHAVIOR — html/body
   Must be blocking: sets touch-action on html/body which the
   browser reads before the first touchstart event. If deferred,
   the browser uses the default (pan-x + pan-y) on early touch.
   ========================================================== */

html,
body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* ==========================================================
   7. TRANSITION CONTAINMENT — mobile touch devices
   Affects .transition-all elements including the nav and hero
   buttons which are above fold. Keep blocking.
   ========================================================== */

@media (max-width: 767px) and (hover: none) {
  .transition-all {
    transition-property: opacity, transform !important;
  }
}

/* ==========================================================
   11. NAV — classes not compiled into Tailwind bundle
   font-semibold (600) and tracking-[0.12em] used by desktop
   nav links; neon text-shadow glow on hover (desktop only).
   ========================================================== */

.font-semibold {
  --tw-font-weight: 600;
  font-weight: 600;
}

.tracking-\[0\.12em\] {
  --tw-tracking: 0.12em;
  letter-spacing: 0.12em;
}

@media (min-width: 768px) {
  /* Smooth transition includes text-shadow so the glow fades in/out */
  .hover\:text-neo {
    transition: color 170ms ease, text-shadow 170ms ease;
  }
  .hover\:text-neo:hover {
    text-shadow: 0 0 8px rgba(215,255,0,.45);
  }
}

/* Hero CTA button: brightness + glow on hover, no scale.
   Targets bg-neo rounded-full buttons (hero + any standalone CTA).
   transform:none overrides the compiled hover:scale-105 on the hero button. */
.bg-neo.rounded-full.cursor-pointer:hover {
  transform: none !important;
  filter: brightness(1.08);
  box-shadow: 0 0 55px rgba(215,255,0,.55), 0 0 110px rgba(215,255,0,.25);
  transition: filter 160ms ease, box-shadow 160ms ease;
}

/* Client logo strip: opacity 30% → 100% on hover (smooth).
   group-hover:opacity-100 is already compiled; this ensures the
   transition is explicitly smooth in case transition-opacity is missing. */
.group:hover .group-hover\:opacity-100 {
  transition: opacity 200ms ease;
}

/* ==========================================================
   12. CONTENT CARDS — no default neon border; 1px neon on hover only
   Hover is scoped to interactive group cards only:
     service, technical, support, infrastructure, comparison cards.
   Excluded: testimonials, stat boxes, founder note, screenshot panels,
     CTA strips, contact info, image panels, small utility boxes.
   Hover effects are desktop-only (@media hover:hover — no touch).
   ========================================================== */

/* Hide all neon card borders by default */
.border-white\/10.p-8,
.border-white\/10.p-6 {
  border-color: transparent !important;
  transition: border-color 220ms ease;
}

.border-neo\/20,
.border-neo\/30 {
  border-color: transparent !important;
}

/* Desktop hover — group cards only (service / technical / support / comparison) */
@media (hover: hover) {
  .border-white\/10.p-8.group:hover {
    border-color: var(--color-neo) !important;
    box-shadow: 0 0 8px rgba(204,255,0,.07), 0 4px 16px rgba(0,0,0,.28);
  }

  .border-neo\/30.group:hover {
    border-color: var(--color-neo) !important;
    box-shadow: 0 0 8px rgba(204,255,0,.07), 0 4px 16px rgba(0,0,0,.28);
  }
}

/* ==========================================================
   13. CURSOR ORB — hero section only
   Once scrolled past #hero, the custom cursor is hidden.
   JS adds .past-hero to <body>; CSS forces opacity 0
   (overrides Framer Motion inline style via !important).
   ========================================================== */

body.past-hero .w-\[90px\].h-\[90px\] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================
   10. PREFERS REDUCED MOTION — accessibility
   Should apply before any animations start. Keep blocking.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .animate-pulse {
    animation: none !important;
  }
  .transition,
  .transition-all,
  .transition-colors,
  .transition-opacity,
  .transition-transform {
    transition: none !important;
  }
}