/* ============================================
   SAE CENTER — Visual Enhancements Layer
   Gradient Mesh · Floating Elements · Mouse Glow
   Animated Borders · SVG Icons · Parallax
   ============================================ */

/* ——— Animated Gradient Mesh (Hero) ——— */
.hero__mesh{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 20% 30%,rgba(56,189,248,.14) 0%,transparent 70%),
    radial-gradient(ellipse 600px 600px at 80% 60%,rgba(103,232,249,.10) 0%,transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% 80%,rgba(2,132,199,.12) 0%,transparent 70%);
  animation:meshMove 14s ease-in-out infinite;
}
@keyframes meshMove{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(50px,-35px) scale(1.08)}
  50%{transform:translate(-35px,50px) scale(.92)}
  75%{transform:translate(25px,25px) scale(1.05)}
}

/* ——— Floating Decorative Circles ——— */
.hero__float{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  border:1.5px solid rgba(56,189,248,.15);
  background:radial-gradient(circle,rgba(56,189,248,.06) 0%,transparent 70%);
  box-shadow:0 0 30px rgba(56,189,248,.05),inset 0 0 20px rgba(56,189,248,.03);
}
.hero__float--1{width:260px;height:260px;top:10%;right:4%;animation:floatSlow 7s ease-in-out infinite}
.hero__float--2{width:170px;height:170px;bottom:15%;left:5%;animation:floatSlow 11s ease-in-out infinite reverse}
.hero__float--3{width:110px;height:110px;top:50%;right:16%;animation:floatSlow 9s ease-in-out 1s infinite}
@keyframes floatSlow{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:.5}
  50%{transform:translateY(-35px) rotate(180deg);opacity:1}
}

/* Decorative tech lines */
.hero__deco-line{
  position:absolute;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.25),transparent);
  overflow:hidden;
}
.hero__deco-line::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.6),transparent);
  animation:scanLine 3s ease-in-out infinite;
}
.hero__deco-line--1{width:280px;top:25%;left:2%;transform:rotate(15deg)}
.hero__deco-line--2{width:220px;bottom:30%;right:3%;transform:rotate(-10deg)}
.hero__deco-line--2::after{animation-delay:1.5s}
@keyframes scanLine{
  0%{left:-100%}
  100%{left:200%}
}

/* ——— Hero Car Illustration ——— */
.hero__illustration{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  width:clamp(380px,58vw,800px);opacity:.22;z-index:1;pointer-events:none;
  animation:carFloat 5s ease-in-out infinite;
  filter:drop-shadow(0 0 50px rgba(56,189,248,.12));
}
@keyframes carFloat{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-18px)}
}

/* ——— Word accent shimmer ——— */
.hero__word--accent{
  background-size:200% 100%;
  animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position:100% 0}
  50%{background-position:0 0}
  100%{background-position:100% 0}
}

/* ——— Hero word stagger handled by JS data-anim system ——— */

/* ——— Hero Sparkle Particles ——— */
.hero__sparkle{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#38bdf8;pointer-events:none;z-index:2;
  box-shadow:0 0 6px rgba(56,189,248,.5),0 0 12px rgba(56,189,248,.2);
  animation:sparkleFloat linear infinite;
  opacity:0;
}
@keyframes sparkleFloat{
  0%{opacity:0;transform:translateY(0) scale(0)}
  10%{opacity:1;transform:scale(1)}
  90%{opacity:.6;transform:scale(.8)}
  100%{opacity:0;transform:translateY(-120px) scale(0)}
}

/* ——— (orb removed — clean logo) ——— */

/* ——— Mouse Glow Effect ——— */
.mouse-glow{
  position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.05) 0%,transparent 70%);
  pointer-events:none;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s;z-index:0;
  will-change:transform,opacity;
}

/* ——— Service Card Professional Icons ——— */
.svc-card__svg-icon{
  width:72px;height:72px;margin-bottom:24px;
  border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:var(--accent-dark);
  background:linear-gradient(145deg,#f0f9ff 0%,#e0f2fe 100%);
  border:1px solid rgba(2,132,199,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(2,132,199,.08),
    0 4px 12px rgba(2,132,199,.08),
    0 12px 28px rgba(2,132,199,.05);
  position:relative;
  transition:all .5s cubic-bezier(.16,1,.3,1);
}
.svc-card__svg-icon::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.8) 0%,transparent 55%);
  pointer-events:none;
}
.svc-card__svg-icon::after{
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(145deg,var(--accent) 0%,var(--accent-dark) 100%);
  transition:opacity .5s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.svc-card__svg-icon i{position:relative;z-index:1;transition:all .5s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .svc-card__svg-icon{
  transform:translateY(-4px);
  border-color:rgba(2,132,199,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 10px 28px rgba(2,132,199,.25),
    0 20px 48px rgba(2,132,199,.18);
}
.svc-card:hover .svc-card__svg-icon::after{opacity:1}
.svc-card:hover .svc-card__svg-icon i{color:#fff;transform:scale(1.1)}

/* ——— Animated Glowing Card Border (Conic Gradient) ——— */
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.svc-card{--border-angle:0deg}
.svc-card::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--border-angle),transparent 60%,rgba(56,189,248,.25) 80%,transparent 100%);
  opacity:0;transition:opacity .4s;
}
.svc-card:hover::after{
  opacity:1;
  animation:rotateBorder 4s linear infinite;
}
@keyframes rotateBorder{to{--border-angle:360deg}}

/* ——— Service Card Photo Banner ——— */
.svc-card__photo{
  position:relative;height:180px;margin:-36px -28px 20px;overflow:hidden;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.svc-card__photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .6s var(--ease);
  filter:brightness(.7) saturate(.9);
}
.svc-card:hover .svc-card__photo img{
  transform:scale(1.08);
  filter:brightness(.85) saturate(1.1);
}
.svc-card__photo::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:60%;
  background:linear-gradient(transparent,rgba(12,45,74,.9));
  pointer-events:none;
}

/* ——— Gallery / Portfolio Grid ——— */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:16px;
}
.gallery-grid__item{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--glass-border);cursor:pointer;
}
.gallery-grid__item--wide{grid-column:span 2}
.gallery-grid__item--tall{grid-row:span 2}

.gallery-grid__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .6s var(--ease);
  filter:brightness(.65) saturate(.85);
}
.gallery-grid__item:hover img{
  transform:scale(1.1);
  filter:brightness(.9) saturate(1.1);
}
.gallery-grid__item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 40%,rgba(12,45,74,.85));
  pointer-events:none;
}
.gallery-grid__caption{
  position:absolute;bottom:14px;right:16px;left:16px;z-index:1;
}
.gallery-grid__caption h4{
  font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:2px;
}
.gallery-grid__caption span{
  font-size:.75rem;color:var(--accent);font-weight:600;
}
.gallery-grid__item::before{
  content:'';position:absolute;inset:0;z-index:1;
  border:2px solid transparent;border-radius:inherit;
  transition:border-color .4s;
}
.gallery-grid__item:hover::before{
  border-color:rgba(56,189,248,.3);
}

/* ——— About Illustration ——— */
.about__illustration{
  width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.92);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.about__illustration.active{opacity:1;transform:scale(1)}

.about__img-box{
  position:relative;overflow:hidden;
}
.about__img-box img{
  width:100%;height:100%;object-fit:contain;
}

/* ——— Button Ripple Effect ——— */
.btn--accent{position:relative;overflow:hidden}
.btn--accent .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.2);
  transform:scale(0);animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ——— Button Glow Pulse on Hover ——— */
.btn--accent:hover{
  animation:btnGlowPulse 1.8s ease-in-out infinite;
}
@keyframes btnGlowPulse{
  0%,100%{box-shadow:0 0 20px var(--accent-glow)}
  50%{box-shadow:0 0 40px var(--accent-glow),0 0 60px rgba(56,189,248,.08)}
}

/* ——— Image/SVG Reveal Animations ——— */
.reveal-img{
  opacity:0;transform:scale(.9);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal-img.active{opacity:1;transform:scale(1)}

.reveal-clip{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease);
}
.reveal-clip.active{clip-path:inset(0 0 0 0)}

/* ——— Stat Ring Progress ——— */
.stat__ring{
  width:110px;height:110px;margin:0 auto 14px;position:relative;
}
.stat__ring svg{
  transform:rotate(-90deg);width:100%;height:100%;
}
.stat__ring circle{fill:none;stroke-linecap:round}
.stat__ring .ring-bg{stroke:rgba(56,189,248,.08);stroke-width:4}
.stat__ring .ring-fill{
  stroke:var(--accent);stroke-width:4;
  stroke-dasharray:314;stroke-dashoffset:314;
  transition:stroke-dashoffset 1.8s var(--ease);
  filter:drop-shadow(0 0 6px rgba(56,189,248,.3));
}
.stat__ring.active .ring-fill{
  stroke-dashoffset:var(--ring-offset,0);
}
.stat__ring-value{
  position:absolute;inset:0;display:grid;place-items:center;
}

/* ——— Video Card Gradient Backgrounds ——— */
.vid-card:nth-child(1) .vid-card__placeholder{
  background:linear-gradient(135deg,#dff0fa 0%,#cce6f6 100%)}
.vid-card:nth-child(2) .vid-card__placeholder{
  background:linear-gradient(135deg,#dff0fa 0%,#b8dcf2 50%,#cce6f6 100%)}
.vid-card:nth-child(3) .vid-card__placeholder{
  background:linear-gradient(135deg,#d5edfa 0%,#a8d8f0 100%)}
.vid-card:nth-child(4) .vid-card__placeholder{
  background:linear-gradient(135deg,#dff0fa 0%,#d0eaf8 100%)}
.vid-card:nth-child(5) .vid-card__placeholder{
  background:linear-gradient(135deg,#e0f0fc 0%,#b8dcf2 100%)}
.vid-card:nth-child(6) .vid-card__placeholder{
  background:linear-gradient(135deg,#dff0fa 0%,#bfe0f4 100%)}
.vid-card:nth-child(7) .vid-card__placeholder{
  background:linear-gradient(135deg,#d5edfa 0%,#d0eaf8 100%)}

/* ——— Product Card Enhanced Backgrounds ——— */
.prod-card__img{
  position:relative;overflow:hidden;
}
.prod-card:nth-child(odd) .prod-card__img{
  background:linear-gradient(135deg,rgba(56,189,248,.03) 0%,rgba(56,189,248,.01) 100%)}
.prod-card:nth-child(even) .prod-card__img{
  background:linear-gradient(135deg,rgba(103,232,249,.02) 0%,rgba(56,189,248,.01) 100%)}
.prod-card__img::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:40%;
  background:linear-gradient(transparent,rgba(12,45,74,.5));
}

/* ——— Enhanced Section Divider ——— */
.section__wave{
  position:absolute;bottom:-1px;left:0;width:100%;height:50px;overflow:hidden;z-index:2;
}
.section__wave svg{width:100%;height:100%;display:block}

/* ——— Quality Badge ——— */
.hero__quality-badge{
  position:absolute;top:18%;left:5%;width:70px;z-index:1;
  animation:floatSlow 7s ease-in-out 1s infinite;opacity:.6;pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(56,189,248,.15));
}

/* ——— Enhanced Glassmorphism Depth ——— */
.glass-deep{
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);
  backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);
}
.glass-deep::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}

/* ——— Testimonial Enhanced ——— */
.testimonial::before{
  content:'\\201C';position:absolute;top:16px;right:20px;
  font-size:4rem;color:rgba(56,189,248,.06);font-family:Georgia,serif;line-height:1;
}

/* ——— Process Step Enhanced ——— */
.process__step::after{
  content:'';position:absolute;top:28px;left:50%;transform:translateX(-50%);
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.04) 0%,transparent 70%);
  z-index:-1;
}

/* ——— Feature Card Hover Glow ——— */
.feature::after{
  content:'';position:absolute;bottom:-20%;left:50%;transform:translateX(-50%);
  width:80%;height:40%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(56,189,248,.06) 0%,transparent 70%);
  opacity:0;transition:opacity .4s;z-index:-1;
}
.feature:hover::after{opacity:1}

/* ——— Page Hero Enhanced ——— */
.page-hero{position:relative}
.page-hero .hero__float{
  width:120px;height:120px;top:20%;right:8%;
  animation:floatSlow 10s ease-in-out infinite;opacity:.3;
}
.page-hero .hero__float--sm{
  width:70px;height:70px;bottom:25%;left:10%;
  animation:floatSlow 13s ease-in-out reverse infinite;opacity:.2;
}

/* ——— Responsive Adjustments ——— */
@media(max-width:768px){
  .hero__illustration{display:none}
  .hero__float,.hero__deco-line,.hero__quality-badge,.hero__sparkle{display:none}
  .mouse-glow{display:none!important}
  .hero__mesh{animation-duration:20s}
  /* orb removed */
  .stat__ring{width:80px;height:80px}
  .svc-card__svg-icon{width:56px;height:56px;margin-bottom:16px}
  .svc-card__photo{height:150px;margin:-28px -20px 16px}
  .page-hero .hero__float{display:none}
  .hero__word{transition-delay:calc(var(--d) * .08s)!important;transition-duration:.6s!important}
  .hero__eyebrow,.hero__desc,.hero__actions{transition-duration:.6s!important}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px;gap:12px}
  .gallery-grid__item--wide{grid-column:span 1}
  .gallery-grid__item--tall{grid-row:span 1}
}

@media(max-width:480px){
  .hero__illustration{display:none}
  .stat__ring{width:70px;height:70px}
  .svc-card__svg-icon{width:48px;height:48px;margin-bottom:14px}
  .svc-card__photo{height:130px}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .gallery-grid__caption h4{font-size:.78rem}
  .gallery-grid__caption span{font-size:.68rem}
}

/* ——— Reduced Motion ——— */
@media(prefers-reduced-motion:reduce){
  .hero__mesh,.hero__float,.hero__illustration,.hero__quality-badge,.hero__sparkle{animation:none!important}
  .svc-card::after{animation:none!important}
  .hero__typing::after{animation:none!important}
  .hero__title .gradient-text{animation:none!important}
  .hero__badge{animation:none!important}
  .mouse-glow{display:none!important}
  .reveal{transition-duration:.01s!important}
  .stat__ring .ring-fill{transition-duration:.01s!important}
}