/* Google Fonts: Poppins (400, 500, 600, 700) and Inter (400, 500) */

/* Google Material Symbols Outlined */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-warm-white text-off-black font-body antialiased selection:bg-signal-green selection:text-warm-white;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading text-off-black-900 tracking-tight;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    @apply bg-slate-cool-50/50 border border-slate-cool-200 text-off-black-900 font-body text-sm rounded-subtle px-4 py-3 w-full transition-all duration-200 placeholder:text-slate-cool-400 focus:outline-none focus:border-signal-green focus:ring-1 focus:ring-signal-green focus:bg-warm-white;
  }

  textarea {
    @apply min-h-[120px] resize-y;
  }
}

@layer utilities {

  /* Blueprint styling */
  .blueprint-line {
    @apply border border-blueprint;
  }

  .blueprint-line-b {
    @apply border-b border-blueprint;
  }

  .blueprint-line-t {
    @apply border-t border-blueprint;
  }

  .blueprint-line-l {
    @apply border-l border-blueprint;
  }

  .blueprint-line-r {
    @apply border-r border-blueprint;
  }

  /* Ultra-thin Material Symbols */
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
  }

  /* The Uptime Glow - Duotone Image Filter */
  .image-duotone-container {
    @apply bg-faint-bg relative overflow-hidden;
  }

  .image-duotone {
    filter: brightness(0.75) contrast(1.25);
    mix-blend-mode: multiply;
    @apply w-full h-full object-cover grayscale;
  }

  /* Signal Pulse Dot */
  .signal-pulse {
    @apply w-2 h-2 rounded-full bg-signal-green relative;
  }

  .signal-pulse::after {
    content: '';
    @apply absolute inset-0 rounded-full bg-signal-green animate-ping;
    animation-duration: 2s;
  }

  /* SVG EKG Scroll Timeline */
  .ekg-track {
    stroke: theme('colors.blueprint');
    stroke-width: 1px;
    stroke-dasharray: 4 4;
  }

  .ekg-progress {
    stroke: theme('colors.signal-green');
    stroke-width: 2px;
    /* We'll use JS to animate stroke-dashoffset, but let's initialize it here */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }

  /* dynamic guide lines */
  .bg-grid-guides {
    background-image: linear-gradient(to right, rgba(26, 37, 48, 0.05) 1px, transparent 1px);
    background-size: 25% 100%;
  }

  /* glassmorphic panels */
  .glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* SVG data stream animations */
  @keyframes draw-stream {
    from {
      stroke-dashoffset: 100%;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  .data-stream-line {
    stroke-dasharray: 8, 8;
    animation: draw-stream 15s linear infinite;
  }

  /* card 3d tilt helpers */
  .tilt-card {
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    transform-style: preserve-3d;
  }

  .tilt-card>* {
    transform: translateZ(20px);
  }

  /* form colors */
  .border-success {
    border-color: #75C043 !important;
    background-color: rgba(117, 197, 3, 0.05) !important;
  }

  .border-error {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
  }

  /* vertical timeline */
  .timeline-axis {
    width: 2px;
    background: linear-gradient(180deg, rgba(117, 197, 3, 0.2) 0%, #75C043 50%, rgba(117, 197, 3, 0.2) 100%);
  }

  /* custom buttons - Swiss SaaS */
  .primary-btn {
    @apply bg-off-black text-warm-white font-body text-sm font-semibold px-6 py-3 rounded-subtle border border-transparent transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-signal-green focus-visible:ring-offset-2;
  }

  .primary-btn:hover {
    @apply bg-signal-green text-off-black shadow-swiss-md;
  }

  .secondary-btn {
    @apply bg-transparent border border-slate-cool-300 text-off-black-800 font-body text-sm font-semibold px-6 py-3 rounded-subtle transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-signal-green focus-visible:ring-offset-2;
  }

  .secondary-btn:hover {
    @apply border-signal-green text-signal-green bg-signal-green/5 shadow-swiss;
  }

  /* Bento card styling */
  .bento-card {
    @apply border border-slate-cool-200/60 rounded-lg bg-warm-white transition-all duration-300 shadow-swiss;
  }

  .bento-card:hover {
    @apply -translate-y-1 shadow-swiss-lg border-slate-cool-300;
  }

  /* Gradient presets */
  .bg-gradient-auralis {
    background: radial-gradient(circle at 0% 0%, #0cc0df 0%, #ffde59 100%);
  }

  .bg-gradient-magenta {
    background: linear-gradient(135deg, #75c043 0%, #1A2530 100%);
  }

  .bg-gradient-lime {
    background: linear-gradient(135deg, #75c043 0%, #75C043 100%);
  }

  /* 5-Column Vertical Guide System Background */
  .bg-grid-5-col {
    background-image: linear-gradient(to right, theme('colors.blueprint') 1px, transparent 1px);
    background-size: 20% 100%;
    background-position: left top;
  }

  /* Subtle shadow for the UI mockup */
  .mockup-shadow {
    @apply shadow-swiss-lg border border-slate-cool-200/60 rounded-lg;
  }

  /* Animated Interactive Mockup Keyframes */
  @keyframes densityWave {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes assetHeartbeat {

    0%,
    100% {
      transform: scale(1);
      filter: drop-shadow(0 4px 6px rgba(117, 197, 3, 0.1));
    }

    50% {
      transform: scale(1.03);
      filter: drop-shadow(0 10px 15px rgba(117, 197, 3, 0.2));
    }
  }

  .animate-density-wave {
    animation: densityWave 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  .animate-heartbeat {
    animation: assetHeartbeat 4s ease-in-out infinite;
  }

  .hover-tactile {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hover-tactile:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .link-underline-grow {
    position: relative;
  }

  .link-underline-grow::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
  }

  .link-underline-grow:hover::after {
    width: 100%;
  }

  .ch-display {
    max-width: 24ch;
  }

  .ch-body {
    max-width: 75ch;
  }

  .border-subtle {
    @apply border border-slate-cool-200/60;
  }

  .nav-dropdown {
    @apply absolute bg-warm-white border border-slate-cool-200/80 rounded-lg shadow-swiss-lg opacity-0 invisible translate-y-2 transition-all duration-200 ease-out z-50;
  }

  .group:hover .nav-dropdown {
    @apply opacity-100 visible translate-y-0;
  }
}

/* ==========================================================================
   Tactile DOM Micro-Interactions Styles
   ========================================================================== */

/* Magnetic Buttons Transition */
.magnetic-button {
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/* Custom Contextual Diagnostic Cursor */
.diagnostic-cursor-area {
  cursor: none !important;
}

#diagnostic-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: scale(0.3) rotate(0deg);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, top, left;
}

#diagnostic-cursor.active {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}

#diagnostic-cursor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 8px rgba(117, 197, 3, 0.3));
}

/* Data-Fill Wave Masks */
.stat-wave-svg {
  display: block;
  overflow: visible;
  user-select: none;
}

.wave-path {
  transition: transform 2.0s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(80px);
  /* Starts below */
  will-change: transform;
}

.in-view .wave-path {
  transform: translateY(0px);
  animation: slosh 4s ease-in-out infinite alternate;
}

@keyframes slosh {
  0% {
    d: path("M 0 45 Q 25 40, 50 45 T 100 45 T 150 45 T 200 45 L 200 80 L 0 80 Z");
  }

  100% {
    d: path("M 0 40 Q 25 45, 50 40 T 100 40 T 150 40 T 200 40 L 200 80 L 0 80 Z");
  }
}

/* Elastic Accordion Spring Content */
.spring-accordion-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(12px);
  will-change: height, opacity, transform;
}

/* Uptime Reading Progress Dial */
#uptime-reading-dial-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  z-index: 9999;
  cursor: pointer;
  background: rgba(26, 37, 48, 0.9);
  border: 1px solid rgba(117, 197, 3, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, opacity 0.4s ease;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

#uptime-reading-dial-container.visible {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

#uptime-reading-dial-container:hover {
  transform: scale(1.1);
  border-color: rgba(117, 197, 3, 0.7);
}

#uptime-reading-dial-container svg {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}

#uptime-reading-dial-container circle.bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 3.5px;
}

#uptime-reading-dial-container circle.progress {
  fill: none;
  stroke: #75C043;
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-dasharray: 126;
  /* 2 * PI * r = 2 * 3.14159 * 20 */
  stroke-dashoffset: 126;
  transition: stroke-dashoffset 0.15s ease-out;
}

#uptime-reading-dial-container .dial-text {
  position: absolute;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

#uptime-reading-dial-container.complete {
  animation: dial-glow-pulse 1.5s infinite alternate;
  border-color: #75C043;
}

@keyframes dial-glow-pulse {
  0% {
    box-shadow: 0 0 8px rgba(117, 197, 3, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  100% {
    box-shadow: 0 0 24px rgba(117, 197, 3, 0.85), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

/* Rectangular Mitotic Split Audience Gateway */
.audience-gateway-container {
  position: relative;
  width: 280px;
  /* Mobile width */
  height: 28px;
  overflow: visible;
  cursor: pointer;
}

@media (min-width: 768px) {
  .audience-gateway-container {
    width: 420px;
    /* Desktop width */
  }
}

.gateway-gooey-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: url('#mitotic-gooey');
  pointer-events: none;
}

.gateway-bg-block {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  border-radius: 0;
  /* strict rectangular geometry constraint */
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}

.left-block {
  left: 0;
}

.right-block {
  right: 0;
}

.gateway-foreground {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.resting-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 5;
}

.gateway-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: scale(0.85);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, color 0.2s ease;
  pointer-events: auto;
  z-index: 15;
}

@media (min-width: 768px) {
  .gateway-link {
    font-size: 10px;
    letter-spacing: 0.05em;
  }
}

.left-link {
  transform: translateX(12px) scale(0.85);
}

.right-link {
  transform: translateX(-12px) scale(0.85);
}

@media (min-width: 768px) {
  .left-link {
    transform: translateX(20px) scale(0.85);
  }

  .right-link {
    transform: translateX(-20px) scale(0.85);
  }
}

/* Hover separation behaviors */
.audience-gateway-container:hover .left-block {
  transform: translateX(-35px);
}

.audience-gateway-container:hover .right-block {
  transform: translateX(35px);
}

@media (min-width: 768px) {
  .audience-gateway-container:hover .left-block {
    transform: translateX(-50px);
  }

  .audience-gateway-container:hover .right-block {
    transform: translateX(50px);
  }
}

.audience-gateway-container:hover .resting-text {
  opacity: 0;
  transform: scale(0.9);
}

.audience-gateway-container:hover .gateway-link {
  opacity: 1;
}

.audience-gateway-container:hover .left-link {
  transform: translateX(-30px) scale(1);
}

.audience-gateway-container:hover .right-link {
  transform: translateX(30px) scale(1);
}

@media (min-width: 768px) {
  .audience-gateway-container:hover .left-link {
    transform: translateX(-40px) scale(1);
  }

  .audience-gateway-container:hover .right-link {
    transform: translateX(40px) scale(1);
  }
}

.gateway-link:hover {
  color: #75C043;
  /* hover:text-signal-green */
}

/* Footer logo group hover scale compatibility */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* ==========================================================================
   UPTIME ALLIANCE PAGE LOADER
   ========================================================================== */

#ua-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}

#ua-page-loader.ua-loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Light branded background */
.ua-loader-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F4F8 50%, #FFFFFF 100%);
}

/* Engineering grid overlay */
.ua-loader-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 31, 45, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 31, 45, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: ua-grid-drift 20s linear infinite;
}

@keyframes ua-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 40px 40px; }
}

/* Center container */
.ua-loader-center {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Logo wrapper */
.ua-loader-logo-wrap {
  position: relative;
  width: 120px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ua-loader-logo {
  width: 120px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(117, 192, 67, 0.35));
  animation: ua-logo-breathe 3s ease-in-out infinite;
}

/* Path animation: fade-in staggered */
.ua-logo-path {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

#ua-page-loader.ua-loader-active .ua-logo-path {
  opacity: 1;
  transform: scale(1);
}

@keyframes ua-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(117, 192, 67, 0.3)); }
  50%       { filter: drop-shadow(0 0 40px rgba(117, 192, 67, 0.65)); }
}

/* Glow ring */
.ua-loader-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(117, 192, 67, 0.15);
  animation: ua-ring-pulse 2.5s ease-in-out infinite;
}

.ua-loader-ring::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(117, 192, 67, 0.07);
}

@keyframes ua-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%       { transform: scale(1.08); opacity: 1; }
}

/* Wordmark */
.ua-loader-wordmark {
  display: flex;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

#ua-page-loader.ua-loader-active .ua-loader-wordmark {
  opacity: 1;
  transform: translateY(0);
}

.ua-loader-word-uptime { color: #75C043; }
.ua-loader-word-alliance { color: #0D1F2D; }

/* Tagline */
.ua-loader-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(13, 31, 45, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}

#ua-page-loader.ua-loader-active .ua-loader-tagline {
  opacity: 1;
  transform: translateY(0);
}

/* Progress bar track */
.ua-loader-bar-track {
  position: relative;
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.5s ease 0.8s;
}

#ua-page-loader.ua-loader-active .ua-loader-bar-track {
  opacity: 1;
}

.ua-loader-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #75C043, #0cc0df);
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(117, 192, 67, 0.6);
}

/* EKG pulse SVG */
.ua-loader-ekg-pulse {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 20px;
  opacity: 0.5;
  animation: ua-ekg-scroll 2s linear infinite;
  overflow: visible;
}

@keyframes ua-ekg-scroll {
  from { transform: translateX(0); opacity: 0.6; }
  to   { transform: translateX(-30px); opacity: 0.3; }
}

/* Engineering corner marks */
.ua-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(117, 192, 67, 0.3);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}

#ua-page-loader.ua-loader-active .ua-corner { opacity: 1; }

.ua-corner-tl { top: 24px;    left: 24px;  border-width: 2px 0 0 2px; }
.ua-corner-tr { top: 24px;    right: 24px; border-width: 2px 2px 0 0; }
.ua-corner-bl { bottom: 24px; left: 24px;  border-width: 0 0 2px 2px; }
.ua-corner-br { bottom: 24px; right: 24px; border-width: 0 2px 2px 0; }