/* Doctor Stone Care — custom styles */

/* Before/After compare slider */
.compare-container { position: relative; overflow: hidden; user-select: none; touch-action: none; }
.compare-after { position: absolute; inset: 0; overflow: hidden; }
.compare-handle {
    position: absolute; top: 0; bottom: 0; width: 4px;
    background: #fff; cursor: ew-resize; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.compare-handle::after {
    content: "\2194";
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9999px;
    background: #0d0d0d; color: #fff; font-weight: 700;
}

/* Masonry gallery */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 200px;
    gap: 20px;
}
.masonry-item-tall { grid-row: span 3; }
.masonry-item-wide { grid-row: span 2; }
.masonry-item-square { grid-row: span 2; }
@media (max-width: 640px) {
    .masonry-item-wide, .masonry-item-tall, .masonry-item-square { grid-row: span 2; }
}

.project-card .project-overlay { opacity: 0; transition: opacity .5s ease; }
.project-card:hover .project-overlay,
.project-card:focus-within .project-overlay { opacity: 1; }

/* Testimonial / review cards */
.review-card { transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease; }
.review-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.25); }

/* Modal transitions */
#quote-modal-backdrop { transition: opacity .3s ease; opacity: 0; }
#quote-modal-panel { transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1); opacity: 0; transform: scale(.95) translateY(10px); }
#quote-modal.modal-open #quote-modal-backdrop { opacity: 1; }
#quote-modal.modal-open #quote-modal-panel { opacity: 1; transform: scale(1) translateY(0); }

/* Mobile menu animation */
#mobile-menu { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Hero fade-up staggering handled via inline animation-delay + .reveal class in JS */

/* Buttons micro-interaction */
button, a { -webkit-tap-highlight-color: transparent; }

/* Star rating fill color already handled inline via material symbol FILL variant using text-tertiary */

/* Scroll reveal base state defined by .reveal in tailwind-config.php */

/* ============================================================
   Hero slider — plain CSS (NOT Tailwind-JIT classes), so there is
   never a flash of stacked/duplicated slides or text while the
   Tailwind CDN script is still loading and generating its utility
   classes at runtime. This is the first CSS the browser parses for
   these elements, applied synchronously before any JS runs.
   ============================================================ */
.hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide-text { display: none; }
.hero-slide-text.is-active { display: block; animation: heroTextFadeIn .6s ease; }
@keyframes heroTextFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Hide scrollbar for the mobile video carousel (horizontal snap-scroll)
   while keeping the content scrollable via touch/drag. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }