/* ==========================================================================
   ConcreteShield - shared custom CSS
   ==========================================================================
   This file consolidates the hand-written CSS that was previously duplicated
   as an inline <style> block inside every page's <head>. It is NOT part of
   Tailwind - load it alongside tailwind.min.css:

     <link rel="stylesheet" href="/assets/tailwind.min.css">
     <link rel="stylesheet" href="/assets/site-custom.css">

   Before this file existed, the same ~765-byte animation block was pasted
   inline into 13 of your 16 pages (byte-for-byte identical every time), and
   a second, larger lightbox/gallery block was pasted into all 3 Projects
   pages. Inline <style> blocks can never be cached by the browser - they are
   re-parsed on every single page load. Moving this to one external file
   means the browser downloads and parses it ONCE, then reuses it (from
   cache) across every other page on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CTA pulse animation
   Used on: all Product pages, all Service pages (15 of 16 pages audited).
   Draws attention to the primary "Get Free Quote" call-to-action buttons.
   -------------------------------------------------------------------------- */
@keyframes pulseCta {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.cta-pulse {
  animation: pulseCta 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta-pulse { animation: none; }
}

/* --------------------------------------------------------------------------
   2. Scroll-triggered entrance animations
   Used on: all Product pages and all Service pages except productsflakesystem.html
   (13 of 16 pages). Elements start invisible (opacity:0) and slide/fade in
   once a "is-visible" class is toggled on by the page's scroll-observer JS.

   NOTE FOR THE FLAKE SYSTEM PAGE: productsflakesystem.html does not currently
   use these classes at all, so nothing breaks by including this rule
   sitewide - but if you want that page's hero/sections to animate in the
   same way as every sibling product page, add class="scroll-animate-left" /
   "scroll-animate-right" to its section wrappers to match the rest of the
   site (see the SEO audit, Part 3, productsflakesystem.html notes).
   -------------------------------------------------------------------------- */
@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
.scroll-animate-left  { opacity: 0; }
.scroll-animate-right { opacity: 0; }
.scroll-animate-left.is-visible {
  animation: slideInFromLeft 0.8s ease-out 0.1s forwards;
}
.scroll-animate-right.is-visible {
  animation: slideInFromRight 0.8s ease-out 0.2s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-animate-left,
  .scroll-animate-right {
    animation: none !important;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   3. Project gallery + lightbox
   Used on: projectscommercial.html, projectsindustrial.html, projectsresidential.html
   Powers the photo lightbox (full-screen image viewer) and the hover/loading
   states on each gallery photo card. See the SEO audit, Part 2 item 2.8/2.9,
   for the recommendation to also server-render the gallery <img> markup
   instead of injecting it purely via JavaScript - this stylesheet covers the
   visual styling either way.
   -------------------------------------------------------------------------- */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}

.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: none;
  border: none;
}

.lightbox-caption {
  color: white;
  text-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 5px 5px;
}

.gallery-item {
  transition: all 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(37, 99, 235, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 10;
}

/* Skeleton-loading shimmer shown behind each gallery photo while it loads */
.gallery-image {
  background: linear-gradient(110deg, #f6f7f8 30%, #edeef1 50%, #f6f7f8 70%);
  background-size: 200% 100%;
  animation: 1.5s loading linear infinite;
}
@keyframes loading {
  to { background-position-x: -200%; }
}

/* --------------------------------------------------------------------------
   4. Hero / FAQ section background helpers
   Used on: all Location pages (17 of 17). Previously duplicated inline in
   every one, byte-for-byte identical (just reformatted/re-indented between
   pages). Moved here for the same caching reason as sections 1 and 2 above.
   -------------------------------------------------------------------------- */
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}
@media (min-width: 768px) {
  .hero-bg { min-height: 520px; }
}
.faq-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   5. Fixed-size icon circles + thumbnail images
   Used on: index.html ("The ConcreteShield Advantage" grid + the homepage
   "Real Questions, Straight Answers" Q&A accordion). The purged tailwind.min.css
   build on this site only includes the specific utility classes referenced
   elsewhere on the site, so arbitrary fixed w-/h- sizes (e.g. w-14, h-14, w-20,
   h-20, rounded-md) are NOT present in that file and silently no-op. These
   hand-written classes give reliable, fixed pixel sizing that doesn't depend
   on what Tailwind classes happen to already be compiled in.
   -------------------------------------------------------------------------- */
.icon-circle-lg {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  flex-shrink: 0;
}
.icon-circle-lg svg {
  width: 28px;
  height: 28px;
}

.qa-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .qa-thumb {
    width: 72px;
    height: 72px;
  }
}
