/*
 * JetForce Washing website stylesheet
 *
 * This stylesheet implements a modern, luxury look for the single‑page
 * website. It makes use of a dark background with vibrant accents,
 * glassmorphic cards, neumorphic buttons and subtle animations.
 */

/* Base styles and typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  /* Use Urbanist for a refined, contemporary feel */
  font-family: 'Urbanist', sans-serif;
  background: linear-gradient(180deg, #050c1a 0%, #0a172f 100%);
  color: #f3f5f7;
  scroll-behavior: smooth;
}

/* Gradient overlay on the body to smooth the transition between
   sections.  It darkens the lower portion of the viewport slightly,
   blending the aurora glow into the page background so that no sharp
   horizontal lines are visible when scrolling.  The overlay sits
   above the star canvas but beneath the content thanks to its
   z-index.  Pointer-events are disabled so it doesn't interfere
   with user interactions. */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* A transparent-to-dark gradient: the top remains clear while the
     bottom gradually darkens to the body colour.  Adjust the final
     opacity to control the strength of the blend. */
  background: linear-gradient(to bottom, rgba(5, 12, 26, 0) 60%, rgba(5, 12, 26, 0.6) 100%);
  z-index: 1;
}

body {
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(5, 12, 26, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.3s ease;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrapper {
  display: flex;
  align-items: center;
}

.logo {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.5));
}

/* Sparkles wrapper: positions the canvas behind the text for the hero
   heading.  The canvas fills the wrapper and allows sparkles to
   animate beneath the letters. */
/* Remove legacy sparkle wrapper definitions as the starfield is now
   implemented globally on a fixed canvas. */

/* Global starfield canvas styling */
#stars-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  /* Raise stars above the aurora glow.  Combined with the screen blend
     mode this allows both the glow and the stars to be visible. */
  z-index: 0;
  /* Slight blur to soften star edges and blend them into the background */
  filter: blur(0.5px);
  /* Remove blend mode to allow the stars to sit on top of the
     background without additive blending.  This helps minimise any
     colour shift between sections caused by the screen blend. */
}


/* Holographic card effect */
.holo-card {
  position: relative;
  overflow: hidden;
  perspective: 800px;
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
}

/* Provide a fallback 3D lift on hover for environments where JavaScript
   events might not fire.  When the user hovers over a card the
   holographic gradient comes to life and the card gently tilts and
   scales, giving it a premium, interactive feel. */
.holo-card:hover {
  transform: perspective(800px) rotateX(12deg) rotateY(-12deg) scale(1.05);
}
.holo-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* Moving gradient creates the holographic shimmer.  The mix-blend-mode
     lightens the underlying image, giving a shiny appearance. */
  /* Use a CSS variable to rotate the gradient based on pointer position.  A
     fallback angle of 45deg is provided for browsers that don't support
     CSS variables or before the card has been hovered. */
  background: linear-gradient(
    var(--gradient-angle, 45deg),
    rgba(255, 0, 255, 0.25),
    rgba(0, 188, 212, 0.2),
    rgba(255, 255, 255, 0.1)
  );
  animation: gradientMove 5s linear infinite;
  mix-blend-mode: screen;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}
.holo-card img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

@keyframes gradientMove {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Navigation links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: #f3f5f7;
  font-weight: 300;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  opacity: 0.85;
}

.nav-links a:hover {
  color: #00bcd4;
  opacity: 1;
}

/* Hamburger menu (hidden on desktop) */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0.5rem;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: #f3f5f7;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger animation into a cross */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Drawer menu */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background: rgba(5, 12, 26, 0.9);
  backdrop-filter: blur(15px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Slide the drawer off screen by default */
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* When open, the drawer slides into view */
.drawer.open {
  transform: translateX(0);
}

.drawer-links {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}

.drawer-links a {
  text-decoration: none;
  color: #f3f5f7;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.drawer-links a:hover {
  color: #00bcd4;
  opacity: 1;
}

/* Section styling */
.section {
  padding: 6rem 1.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 70px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Aurora glow effect behind the hero content inspired by
   futurastic hero section【470727655141461†screenshot】.  Two radial
   gradients drift slowly to create a soft, colourful glow. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  width: 130%;
  height: 130%;
  top: -15%;
  left: -15%;
  pointer-events: none;
  filter: blur(120px);
  /* Keep the glow subtle so it doesn't create a harsh boundary with
     the sections below. */
  /* Lower the glow opacity slightly to avoid a noticeable rectangle
     where the hero meets the rest of the page.  A subtle glow still
     adds interest without overpowering the content. */
  opacity: 0.15;
  /* Fade the aurora glow toward the bottom of the hero using a
     vertical mask.  Starting the fade around halfway down the element
     helps blend the glow into the page background without leaving
     a visible boundary. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
  animation: auroraMove 12s linear infinite;
}

.hero::before {
  background: radial-gradient(circle at 30% 70%, rgba(0, 188, 212, 0.6), rgba(255, 255, 255, 0) 70%);
}

.hero::after {
  background: radial-gradient(circle at 70% 30%, rgba(255, 0, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  animation-direction: reverse;
}

@keyframes auroraMove {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(15%, -15%, 0);
  }
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  /* Increase weight for a stronger presence */
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}

.subtitle {
  font-size: 1.25rem;
  font-weight: 300;
  opacity: 0.75;
  margin-bottom: 2rem;
}

/* Small tagline accent below subtitle */
.tagline {
  /* Increase the tagline size so the morphing descriptors are more prominent */
  font-size: 1.8rem;
  font-weight: 500;
  opacity: 0.7;
  color: #00bcd4;
  margin-bottom: 2.8rem;
  letter-spacing: 0.04em;
  transition: opacity 0.5s ease;
}

/* Call to action button */
.cta-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 30px;
  background: linear-gradient(145deg, #0e213f, #091527);
  color: #f3f5f7;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: -6px -6px 12px rgba(255, 255, 255, 0.05), 6px 6px 12px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
  box-shadow: 0 0 15px rgba(0, 188, 212, 0.6), 0 0 30px rgba(0, 188, 212, 0.4);
  transform: translateY(-2px);
}

/* Section titles */
.section-title {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* About section */
.about-text {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
  font-weight: 300;
  opacity: 0.8;
  line-height: 1.7;
}

.before-after {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Services list within the About section */
.services-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem auto 3rem;
  padding: 0;
  list-style: none;
  max-width: 800px;
}

.services-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f3f5f7;
  opacity: 0.9;
}

.services-list i {
  font-size: 1.2rem;
  color: #00bcd4;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  width: 100%;
  max-width: 350px;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
}

.card-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(5, 12, 26, 0.7);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f3f5f7;
}

/* Contact section */
.contact {
  text-align: center;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 300;
  opacity: 0.85;
}

.contact-item i {
  font-size: 1.5rem;
  color: #00bcd4;
}

.contact-item a {
  color: #f3f5f7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-item a:hover {
  color: #00bcd4;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
  opacity: 0.6;
}

/* Animation styles for scroll‑in elements */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out,
    filter 0.7s ease-out;
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Responsive behaviour */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .logo {
    height: 32px;
  }
  .drawer {
    width: 80%;
  }
  .contact-details {
    font-size: 1.125rem;
  }
  .before-after {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .subtitle {
    font-size: 1rem;
  }
  .cta-button {
    padding: 0.6rem 1.5rem;
  }
}