/* htdocs/vision/assets/css/style.css */

/* ==========================================================================  
   0) Design Tokens: color, radius, motion, typography
   ========================================================================== */
:root{
  /* Core palette */
  --tech-bg:#030712;                      /* near-black UI background */
  --tech-primary:#2563EB;                 /* brand blue */
  --tech-accent:#00E5FF;                  /* cyan accent for glow/highlights */

  /* Text colors */
  --tech-text-primary:#F9FAFB;            /* primary text on dark bg */
  --tech-text-secondary:#9CA3AF;          /* subdued text */

  /* Shadows / glow presets */
  --tech-glow:0 0 15px rgba(37,99,235,.5), 0 0 5px rgba(0,229,255,.7);
  --tech-glow-hover:0 0 25px rgba(37,99,235,.7), 0 0 10px rgba(0,229,255,.9);

  /* Motion + easing */
  --tech-transition:.3s cubic-bezier(.4,0,.2,1);

  /* RGB for layered alphas */
  --tech-primary-rgb:37,99,235;
  --tech-accent-rgb:0,229,255;

  /* Radii */
  --radius-sm:.75rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;

  /* Spacing quick refs */
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-16:4rem;
}

/* ==========================================================================  
   1) Base: html, body, typography
   ========================================================================== */
html{ box-sizing:border-box }
*,*::before,*::after{ box-sizing:inherit }

body{
  background-color:var(--tech-bg);
  color:var(--tech-text-primary);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;                       /* prevent accidental horizontal scroll */
}

.font-clash-display{                       /* utility class for display headings */
  font-family:'Clash Display',ui-serif,Georgia,serif;
}

/* ==========================================================================  
   2) Motion helpers: reveal-on-scroll + reduced motion safeguards
   ========================================================================== */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(20px) }
  to{ opacity:1; transform:translateY(0) }
}
.animate-on-scroll{ opacity:0 }
.animate-on-scroll.is-visible{
  animation:fadeInUp .8s ease-out forwards;
  animation-delay:var(--delay,0s);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ==========================================================================  
   3) Buttons
   Notes:
   - Consolidated duplicate .tech-button definitions.
   - Primary: .tech-button
   - Outline: .tech-button--outline
   - Back-compat aliases retained (.tech-button-outline, .tech-button-outlined)
   ========================================================================== */

/* Primary (solid) */
.tech-button{
  background:var(--tech-primary);
  color:var(--tech-text-primary);
  font-weight:700;                         /* strong label */
  border-radius:9999px;                    /* pill shape */
  padding:1rem 2rem;                       /* consistent target size */
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  text-transform:uppercase; letter-spacing:.05em;
  border:2px solid var(--tech-primary);
  min-width:240px;
  box-shadow:var(--tech-glow);
  transition:transform var(--tech-transition), box-shadow var(--tech-transition), background var(--tech-transition), color var(--tech-transition), border-color var(--tech-transition);
}
.tech-button:hover{
  background:var(--tech-accent);
  color:var(--tech-bg);
  border-color:var(--tech-accent);
  box-shadow:var(--tech-glow-hover);
  transform:translateY(-3px) scale(1.02);
}

/* Outline (bordered) */
.tech-button--outline{
  background:transparent;
  color:var(--tech-primary);
  font-weight:700;
  border-radius:9999px;
  padding:1rem 2rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  text-transform:uppercase; letter-spacing:.05em;
  border:2px solid var(--tech-primary);
  min-width:240px;
  transition:transform var(--tech-transition), box-shadow var(--tech-transition), background var(--tech-transition), color var(--tech-transition), border-color var(--tech-transition);
}
.tech-button--outline:hover{
  background:var(--tech-primary);
  color:var(--tech-text-primary);
  box-shadow:0 0 20px rgba(37,99,235,.7);
  transform:translateY(-3px) scale(1.02);
}

/* Backward-compatible aliases (do not edit existing markup) */
.tech-button-outline, .tech-button-outlined{ all:unset; }
.tech-button-outline, .tech-button-outlined{                       /* re-apply needed props */
  background:transparent; color:var(--tech-primary); font-weight:700;
  border-radius:9999px; padding:1rem 2rem; display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  text-transform:uppercase; letter-spacing:.05em; border:2px solid var(--tech-primary); min-width:240px;
  transition:transform var(--tech-transition), box-shadow var(--tech-transition), background var(--tech-transition), color var(--tech-transition), border-color var(--tech-transition);
}
.tech-button-outline:hover, .tech-button-outlined:hover{
  background:var(--tech-primary); color:var(--tech-text-primary);
  box-shadow:0 0 20px rgba(37,99,235,.7); transform:translateY(-3px) scale(1.02);
}

/* ==========================================================================  
   4) Video players: hero + X-series
   ========================================================================== */
.video-player{
  position:relative; border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:var(--tech-glow);
  transition:transform var(--tech-transition), box-shadow var(--tech-transition);
}
.video-player:hover{ transform:scale(1.03); box-shadow:var(--tech-glow-hover) }

.video-thumbnail{
  position:absolute; inset:0; cursor:pointer;
  transition:opacity var(--tech-transition);
}

.play-button{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:4.5rem; height:4.5rem;
}
@media (min-width:768px){
  .play-button{ width:5.5rem; height:5.5rem }
}
.play-button-inner{
  width:100%; height:100%;
  background:rgba(0,0,0,.2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--tech-accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform var(--tech-transition), background var(--tech-transition), box-shadow var(--tech-transition);
  box-shadow:var(--tech-glow);
}
.play-button-inner:hover{
  background:rgba(0,229,255,.2);
  transform:scale(1.1);
  box-shadow:var(--tech-glow-hover);
}
.play-icon{ width:1.5rem; height:1.5rem; fill:var(--tech-text-primary); margin-left:.2rem }
@media (min-width:768px){ .play-icon{ width:1.75rem; height:1.75rem; margin-left:.25rem } }

/* X Series container */
.video-player-container{
  position:relative; overflow:hidden; border-radius:var(--radius-md);
  box-shadow:var(--tech-glow);
  transition:transform var(--tech-transition), box-shadow var(--tech-transition);
}
.video-player-container:hover{ transform:scale(1.03); box-shadow:var(--tech-glow-hover) }

/* X Series play tint */
.xseries-play{
  background-color:rgba(var(--tech-primary-rgb),.3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(var(--tech-primary-rgb),.5);
  transition:transform var(--tech-transition), background-color var(--tech-transition), border-color var(--tech-transition);
}
.xseries-play:hover{
  background-color:rgba(var(--tech-accent-rgb),.5);
  border-color:rgba(var(--tech-accent-rgb),.7);
  transform:translate(-50%,-50%) scale(1.1);
}

/* =========================================================
   Hero Section Spacing — Refined (Closer to Header)
   ========================================================= */

#x-series-hero {
  padding-top: 6rem; /* Desktop: balanced vertical offset */
}

@media (max-width: 768px) {
  #x-series-hero {
    padding-top: 7.5rem; /* Tablet: slight pushdown */
  }
}

@media (max-width: 480px) {
  #x-series-hero {
    padding-top: 8rem; /* Mobile: safe clearance under fixed header */
  }
}


/* ==========================================================================  
   5) Cards: category, feature, glass, generic tech-card
   ========================================================================== */
.category-card{
  background:rgba(0,229,255,.05);
  border:1px solid rgba(0,229,255,.2);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:transform var(--tech-transition), box-shadow var(--tech-transition), border-color var(--tech-transition);
  will-change:transform, box-shadow;
}
.category-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--tech-glow-hover);
  border-color:var(--tech-accent);
}
.icon-container{
  width:4rem; height:4rem; border-radius:9999px;
  background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--tech-accent);
  transition:transform var(--tech-transition), background var(--tech-transition), color var(--tech-transition);
}
.category-card:hover .icon-container{
  background:var(--tech-accent);
  color:var(--tech-bg);
  transform:scale(1.1);
}

.feature-card{
  background-color:rgba(3,7,18,.5);
  border:1px solid rgba(0,229,255,.2);
  border-radius:var(--radius-md);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform var(--tech-transition), border-color var(--tech-transition), box-shadow var(--tech-transition);
  box-shadow:0 0 10px rgba(0,229,255,.1);
}
.feature-card:hover{
  transform:translateY(-8px);
  border-color:var(--tech-accent);
  box-shadow:var(--tech-glow-hover);
}

.icon-wrapper{
  width:3.5rem; height:3.5rem; border-radius:.75rem;
  background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--tech-accent);
  box-shadow:0 0 10px rgba(0,229,255,.3);
  flex-shrink:0;
}

/* Glassmorphism utility */
.glass-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border-radius:var(--radius-md);
  transition:transform var(--tech-transition), box-shadow var(--tech-transition);
}
.glass-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 25px rgba(0,229,255,.2);
}

/* Generic branded card (warranty, etc.) */
.tech-card{
  border:1px solid rgba(37,99,235,.2);
  border-radius:var(--radius-lg);
  padding:var(--space-10);
  background:linear-gradient(145deg, rgba(37,99,235,.05), rgba(3,7,18,.1));
  box-shadow:0 20px 25px -5px rgba(0,0,0,.2);
}
.tech-icon-wrapper{
  background-color:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.3);
  color:var(--tech-accent);
}

/* ==========================================================================  
   6) Images: framed containers and featured figures
   ========================================================================== */
.styled-image{
  border-radius:var(--radius-md);
  box-shadow:var(--tech-glow);
  transition:transform var(--tech-transition), box-shadow var(--tech-transition);
}
.styled-image:hover{ transform:scale(1.03); box-shadow:var(--tech-glow-hover) }

.image-container{
  border:1px solid rgba(37,99,235,.2);
  border-radius:var(--radius-md);
  padding:var(--space-8);
  background-color:rgba(37,99,235,.05);
  box-shadow:var(--tech-glow);
  transition:transform var(--tech-transition), box-shadow var(--tech-transition);
}
.image-container:hover{ transform:scale(1.03); box-shadow:var(--tech-glow-hover) }

.featured-figure{
  width:100%; max-width:960px; margin:0 auto;
  aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
}
.featured-figure img{ width:100%; height:100%; object-fit:contain }

/* ==========================================================================  
   7) Vision 2025 stats
   ========================================================================== */
.tech-stat-card{
  border:1px solid rgba(37,99,235,.2);
  border-radius:var(--radius-md);
  padding:var(--space-8);
  background-color:rgba(37,99,235,.05);
  transition:transform var(--tech-transition), background-color var(--tech-transition), border-color var(--tech-transition);
}
.tech-stat-card:hover{
  transform:translateY(-8px);
  background-color:rgba(37,99,235,.1);
  border-color:rgba(0,229,255,.5);
}
.tech-stat-icon-wrapper{
  background-color:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.3);
  color:var(--tech-accent);
}

/* ==========================================================================  
   8) CTA: animated border + shifting background
   ========================================================================== */
.tech-cta-card{
  position:relative; border-radius:var(--radius-lg);
  padding:var(--space-16) var(--space-8);
  background:linear-gradient(135deg, rgba(37,99,235,.1), rgba(0,229,255,.05));
  background-size:200% 200%;
  animation:bgShift 12s ease infinite;
  overflow:hidden; z-index:1;
}
.tech-cta-card::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg); padding:2px;
  background:linear-gradient(90deg, #2563EB, #00E5FF, #2563EB);
  background-size:300% 300%;
  animation:borderGlow 6s linear infinite;
  z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; /* fancy inner stroke */
}
@keyframes borderGlow{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}
@keyframes bgShift{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}

/* ==========================================================================  
   9) Header and navigation
   ========================================================================== */
.header-logo{                 /* keeps brand crisp and small */
  height:28px; width:auto; max-width:110px;
}
@media (max-width:480px){
  .header-logo{ height:24px; max-width:95px }
}

/* Mobile menu trigger */
#mobile-menu-toggle{
  background:rgba(3,7,18,.6);
  -webkit-backdrop-filter:blur(8px);
  
/* ==========================================================================  
   Tech Divider — Ultra Glow + Pulse (Cyan Energy Beam)
   ========================================================================== */
.tech-divider {
  position: relative;
  width: 260px;
  height: 4px;
  margin: 5rem auto;
  border-radius: 6px;
  background: linear-gradient(90deg, #00E5FF 0%, #37A8FF 50%, #2563EB 100%);
  box-shadow:
    0 0 35px rgba(0,229,255,1),
    0 0 60px rgba(0,229,255,0.9),
    0 0 90px rgba(37,99,235,0.8),
    0 0 140px rgba(0,229,255,0.6);
  overflow: hidden;
  z-index: 12;
  filter: brightness(1.3) saturate(1.4);
}

/* Bright white scanning pulse */
.tech-divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
  filter: blur(3px);
  animation: pulse-glow-strong 2.5s linear infinite;
  opacity: 1;
}

/* Secondary accent line beneath main bar */
.tech-divider::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 3px;
  background: linear-gradient(90deg, #00E5FF, #2563EB);
  border-radius: 3px;
  box-shadow:
    0 0 20px rgba(0,229,255,1),
    0 0 40px rgba(0,229,255,0.9),
    0 0 70px rgba(37,99,235,0.7);
}

/* Animation keyframes for stronger pulse motion */
@keyframes pulse-glow-strong {
  0%   { left: -70%; opacity: 0.6; }
  50%  { left: 120%; opacity: 1; }
  100% { left: -70%; opacity: 0.6; }
}

/* Responsive scaling */
@media (max-width: 480px) {
  .tech-divider {
    width: 200px;
    height: 3px;
    margin: 4rem auto;
    box-shadow:
      0 0 30px rgba(0,229,255,1),
      0 0 60px rgba(0,229,255,0.9),
      0 0 100px rgba(37,99,235,0.7);
  }
  .tech-divider::before {
    width: 90px;
    height: 2px;
  }
}

/* ===== Tech Circuit Background layers ===== */

/* 1) Subtle grid made with gradients (very cheap to render) */
.tech-circuit-grid{
  background:
    radial-gradient(circle at 20% 30%, rgba(0,229,255,.08), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(37,99,235,.10), transparent 60%),
    /* grid */
    linear-gradient(rgba(0,229,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.06) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    32px 32px,    /* row spacing */
    32px 32px;    /* column spacing */
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), transparent 75%);
}

/* 2) Animated traces: gentle dash flow for a living-circuit feel */
.tech-circuit-lines{
  opacity:.55;
}
.tech-circuit-lines .trace{
  stroke-dasharray:6 8;
  animation:traceFlow 6s ease-in-out infinite;
}
@keyframes traceFlow{
  0%   { stroke-dashoffset: 0 }
  50%  { stroke-dashoffset: -70 }
  100% { stroke-dashoffset: 0 }
}

/* Reduce intensity for users preferring less motion */
@media (prefers-reduced-motion: reduce){
  .tech-circuit-lines .trace{ animation:none; }
}