/* 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 */