/* =========================================================
   PAGE: SERVICES INTRO – LONG ISLAND
   File: page-services-intro.css
   Purpose:
   Elegant, modern, SEO-friendly intro section styling.
   Built to extend core-u.css tokens only.
   ========================================================= */


/* =========================================================
   SECTION BASE
   ========================================================= */

   #services-intro-long-island {
    position: relative;
    padding: clamp(4rem, 6vw, 7rem) 0;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbfd 100%
    );
  }
  
  /* soft background glow */
  #services-intro-long-island::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background:
      radial-gradient(circle at 20% 30%, rgba(28,163,199,0.10), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(0,174,239,0.08), transparent 50%);
    z-index: 0;
    pointer-events: none;
  }
  
  /* container safety */
  #services-intro-long-island .container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
  }
  
  
  /* =========================================================
     TYPOGRAPHY – SEO + ACCESSIBILITY
     ========================================================= */
  
  #services-intro-long-island h2 {
    margin: 0 auto;
    max-width: 920px;
  
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
  
    color: var(--text-primary);
  
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.8s ease,
      transform 0.8s ease;
  }
  
  #services-intro-long-island p {
    margin-top: 1.5rem;
  
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.75;
    font-weight: 400;
  
    color: var(--text-muted);
  
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.9s ease,
      transform 0.9s ease;
  }
  
  
  /* =========================================================
     VISUAL EMPHASIS BAR
     ========================================================= */
  
  #services-intro-long-island h2::after {
    content: "";
    display: block;
    margin: 1.2rem auto 0;
    width: 75%;
    height: 4px;
    border-radius: 99px;
  
    background: linear-gradient(
      90deg,
      var(--color-primary-teal),
      var(--color-primary-cyan)
    );
  
    transform: scaleX(0.5);
    opacity: 0;
    transition: transform .7s ease .2s, opacity .7s ease .2s;
  }
  
  
  /* =========================================================
     ACTIVE STATE (JS TRIGGERED)
     ========================================================= */
  
  #services-intro-long-island.is-visible h2,
  #services-intro-long-island.is-visible p {
    opacity: 1;
    transform: translateY(0);
  }
  
  #services-intro-long-island.is-visible h2::after {
    transform: scaleX(1);
    opacity: 1;
  }
  
  
  /* =========================================================
     MICRO INTERACTION – SUBTLE FLOAT
     ========================================================= */
  
  @media (hover:hover) {
    #services-intro-long-island:hover h2 {
      text-shadow:
        0 1px 0 rgba(255,255,255,0.4),
        0 6px 18px rgba(0,0,0,0.04);
    }
  }
  
  
  /* =========================================================
     RESPONSIVE OPTIMIZATION
     ========================================================= */
  
  @media (max-width: 900px) {
    #services-intro-long-island {
      padding: 4.5rem 0;
    }
  
    #services-intro-long-island p {
      line-height: 1.65;
    }
  }
  
  @media (max-width: 600px) {
    #services-intro-long-island {
      padding: 3.75rem 0;
    }
  
    #services-intro-long-island h2 {
      font-size: clamp(1.6rem, 7vw, 2.2rem);
    }
  
    #services-intro-long-island p {
      font-size: 1rem;
    }
  }
  
  
  /* =========================================================
     MOTION ACCESSIBILITY (Google UX Standard)
     ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    #services-intro-long-island h2,
    #services-intro-long-island p {
      transition: none;
      transform: none;
      opacity: 1;
    }
  
    #services-intro-long-island h2::after {
      transition: none;
      transform: scaleX(1);
      opacity: 1;
    }
  }