/* =========================================================
   🎨 Global Styles
   ========================================================= */
   body {
      margin: 0;
  overflow-x: hidden;
overflow-y: auto;

      background: black;
    }
   



    
/* Custom font for your brand */
@font-face {
  font-family: 'NinetiesDisplay';
  src: url('NinetiesDisplay.otf') format('opentype');
}

/* Stop horizontal scroll */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   ✅ BODY GRID
   ========================================================= */
body {
  background-color: #000;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 15px 15px; /* smaller grid boxes */
}




/* Hide default cursor when the custom one is used */
body.show-view-cursor {
  cursor: none;
}

/* The custom cursor */
#view-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 85px;
  height: 85px;
  border-radius: 999px;
  border: 1px solid white;
  color: white;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

/* Visible only during hover on card */
body.show-view-cursor #view-cursor {
  opacity: 1;
}


/* =========================================================
   ✅ HERO SECTION STYLES
   ========================================================= */
 /* marquee keyframes — adjust duration to speed up/down */
    @keyframes marqueeDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

   @keyframes marqueeUp {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}


    /* utility wrappers for consistent behavior */
    .marquee-down {
      animation: marqueeDown 60s linear infinite;
      will-change: transform;
    }
    .marquee-up {
      animation: marqueeUp 60s linear infinite;
      will-change: transform;
    }

/* ===============================================
   🔥 UNIVERSAL 3D TEXT FLIP UTILITY
   =============================================== */

/* ========== Reusable Flip Text Utility ========== */

/* default flip height (matches ~1em). override per element with --flip-h */
.flip-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: var(--flip-h, 1em);
  line-height: var(--flip-h, 1em);
  perspective: 1000px;
}

/* faces */
.rotate-front,
.rotate-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  display: block;
  transition: transform 300ms cubic-bezier(.2,.9,.2,1);
  transform-style: preserve-3d;
}

/* initial states */
.rotate-front {
  transform: translateY(0) rotateX(0deg);
  transform-origin: bottom;
  position: relative;
  z-index: 2;
}

.rotate-back {
  transform: translateY(100%) rotateX(90deg);
  transform-origin: top;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

/* KEY: trigger on ancestor .group hover (works when hovering whole button) */
.group:hover .flip-text .rotate-front {
  transform: translateY(-100%) rotateX(-90deg);
}
.group:hover .flip-text .rotate-back {
  transform: translateY(0) rotateX(0deg);
}

/* accessibility: reduce motion fallback */
@media (prefers-reduced-motion: reduce) {
  .rotate-front,
  .rotate-back {
    transition: none !important;
  }
  .group:hover .flip-text .rotate-front,
  .group:hover .flip-text .rotate-back {
    transform: none !important; /* disable 3D flip, keep content stable */
  }
}

/* helpful utility: let authors override height per element */
/* Example in HTML: style="--flip-h:1.2rem" to increase wrapper height */

/* =========================================================
   ✅ arrow styles
   ========================================================= */
.arrow-wrap svg {
  transition: transform 300ms ease;
}

.group:hover .arrow-wrap svg {
  transform: rotate(-45deg);
}

/* ------------ Fix marquee overlap + make images smaller (300–1024px) ------------- */
@media (min-width:300px) and (max-width:1024px) {

  /* 1) Reduce the negative pull so right column doesn't collide with top nav/logo */
  #home .-mt-24 {
    margin-top: -1rem !important;
  }

  /* 2) Add a little top padding to the right marquee column so images start below the badge/nav */
  #home > .max-w-\[1700px\] .grid > .grid.grid-cols-2 {
    padding-top: 0.8rem !important;
  }

  /* 3) Ensure nav/logo sits above everything */
  nav, .nav-logo {
    position: relative;
    z-index: 80 !important;
  }

  /* 4) Guarantee CTA is above the marquees */
  #home .group.inline-flex.items-center.gap-4 {
    position: relative !important;
    z-index: 70 !important;
  }

  /* 5) SMALLER MARQUEE CONTAINER */
  .overflow-hidden.h-\[800px\] {
    height: 260px !important;   /* smaller scroll window */
  }

  /* 6) SMALLER MARQUEE IMAGE HEIGHT */
  .overflow-hidden img.h-\[350px\] {
    height: 150px !important;   /* was 200 — now much smaller */
    object-fit: cover;
  }

  /* 7) Reduce space between stacked images */
  .marquee-down, .marquee-up {
    gap: 0.4rem !important;
  }

  /* 8) Subtle top padding for first column */
  #home > .max-w-\[1700px\] .grid > .grid.grid-cols-2 > div:first-child {
    padding-top: 0.3rem !important;
  }
}

 @media (max-width: 1024px) {
      /* reduce column height on tablets */
      .overflow-hidden.h-\[550px\] { height: 420px !important; }
      .overflow-hidden img.h-\[350px\] { height: 300px !important; }
    }
    @media (max-width: 640px) {
      /* stack marquees under hero on small screens */
      .grid.grid-cols-1.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
      .overflow-hidden.h-\[550px\] { height: 320px !important; }
      .overflow-hidden img.h-\[350px\] { height: 220px !important; }
    }


/* =========================================================
   ✅ ABOUT SECTION STYLES
   ========================================================= */
#about {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: transparent;
  color: #fff;
  padding: 5rem 2rem;
}

/* 🧠 Heading Animation Style */
#about h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.6rem; /* Perfect large headline */
  font-weight: 900;
  line-height: 1.1;
  max-width: 2000px;
  color: #efe7d3;
  letter-spacing: 0.2rem;
  opacity: 0; /* Hidden before GSAP reveal */
  transform: scale(0.95);
  background: linear-gradient(90deg, #efe7d3, #f03800, #efe7d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: shimmer 6s ease-in-out infinite alternate;
}



/* 💫 Gradient shimmer for text */
@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* =========================================================
   ✅ ABOUT SECTION — MOBILE (max-width: 768px)
   ========================================================= */
@media (max-width: 768px) {
  #about {
    padding: 4rem 1.5rem;
  }

  #about h1 {
    font-size: 6rem; /* reduced for mobile screens */
    line-height: 1.2;
    letter-spacing: 0.1rem;
    max-width: 95%;
    text-align: center;
    background-size: 250% 100%;
    animation: shimmer 8s ease-in-out infinite alternate;
  }

 
}


@media (max-width: 500px) {
  #about {
    padding: 3rem 1rem;
  }

  #about h1 {
    font-size: 4.5rem; /* smaller headline for tiny screens */
    line-height: 1.2;
    letter-spacing: 0.05rem;
    max-width: 100%;
    text-align: center;
    background-size: 200% 100%;
    animation: shimmer 10s ease-in-out infinite alternate;
  }

 
}

@media (max-width: 500px) {
  #about {
    padding: 1rem 1rem;
  }

  #about h1 {
    font-size: 3rem; /* smaller headline for tiny screens */
    line-height: 1.2;
    letter-spacing: 0.05rem;
    max-width: 100%;
    text-align: center;
    background-size: 200% 100%;
    animation: shimmer 10s ease-in-out infinite alternate;
  }

  #about button {
    margin-top: 1.2rem;
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 9999px;
  }
}

/* =========================================================
   ✅ MY DESIGN STACK SECTION
   ========================================================= */
#stack {
  background: transparent;
}


/* ✨ Gradient heading shimmer animation */
#stack h2 {
  background: linear-gradient(90deg, #efe7d3, #f03800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: shimmer 6s ease-in-out infinite alternate;
}

/* 💫 Smooth gradient shimmer keyframes */
@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* 🌀 Marquee ensures images align and stay in one line */
.marquee img {
  transition: transform 0.3s ease;
}

/* Small hover scale for polish */
.marquee img:hover {
  transform: scale(1.1);
}


/* =========================
   Curated Projects Section
========================= */

/* Floating Action Button inside card */
.group:hover .action-btn {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* rule for service image */
  /* ✅ Hide service image until 1700px */
  @media (max-width: 1400px) {
    #service-image {
      display: none !important;
    }
  }

  

 /* 🌫️ Premium Apple Glassmorphism (iOS 16+ look) */
  .apple-glass-card {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
  }

  /* 🌈 Soft inner lighting gradient for glass depth */
  .apple-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    transition: opacity 0.6s ease;
  }

  /* 💡 Hover: Slight lift + glow shimmer */
  .apple-glass-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  /* 🎇 Hover reflection shimmer */
  .apple-glass-card:hover::before {
    opacity: 0.9;
    background: linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.1) 100%
    );
  }





  /* ✅ From 800px to 1300px — keep layout centered with proper spacing */
  @media (min-width: 800px) and (max-width: 1300px) {
    #services .grid {
      grid-template-columns: 1fr !important; /* single-column but aligned nicely */
      max-width: 900px;
      margin: 0 auto; /* center the section horizontally */
      padding-left: 40px;
      padding-right: 40px;
    }

    #services .space-y-10 {
      padding-right: 0;
    }

    #services h2 {
      font-size: 120px !important;
      line-height: 1;
      text-align: left !important; /* keep heading aligned left */
    }

    #services p {
      font-size: 1rem;
      max-width: 700px;
      text-align: left !important;
    }
  }

  /* ✅ Below 800px — normal stacked responsive layout */
  @media (max-width: 799px) {
    #services .grid {
      grid-template-columns: 1fr;
      max-width: 600px;
      margin: 0 auto;
      padding: 0 20px;
    }

    #services h2 {
      font-size: 80px !important;
    }

    #services p {
      font-size: 0.9rem;
    }
  }

/* ✅ Below 400px — perfectly centered, balanced layout */
@media (max-width: 400px) {
  #services .grid {
    grid-template-columns: 1fr;
    max-width: 370px;
    margin: 0 auto;
    padding: 0 12px;
    gap: 1.5rem;
    transform: translateX(-3px); /* 👈 Slight nudge to the left */
  }

  #services h2 {
    font-size: 60px !important;
    line-height: 1.1;
    letter-spacing: -1px;
    text-align: center; /* optional, if you want heading centered */
  }

  #services p {
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center; /* optional */
  }

  #services .service-item {
    padding: 1rem;
  }
}


/* Marquee animation helpers for contact */
.marquee-wrapper {
  position: relative;
  overflow: hidden;
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  flex-shrink: 0;
}


.footer-link {
  position: relative;
  display: inline-block;
  color: #efe7d3;
  text-decoration: none;
  padding-bottom: 2px;
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #efe7d3;
  transition: width 0.4s ease;
  transform-origin: left;
}

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

@media (max-width: 500px) {
  footer h3 { font-size: 1.25rem; }
  footer p, footer li { font-size: 0.95rem; }
  footer img { height: 150px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  footer h3 { font-size: 1.6rem; }
  footer p, footer li { font-size: 1.05rem; }
}