/* ============================================================
   Kaath Kotha — slow, tactile, editorial motion layer.
   Progressive enhancement: motion.js adds `html.motion` ONLY when JS runs
   and the user hasn't asked for reduced motion. Every "hidden" start state is
   scoped under `.motion`, so without JS (or with prefers-reduced-motion) all
   content is fully visible — no stuck-invisible elements, SEO-safe.
   GPU-friendly (transform/opacity only).
   ============================================================ */

/* ---- Scroll reveal (unhurried) ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.15s cubic-bezier(.22,.8,.3,1), transform 1.15s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-42px); }
.motion .reveal-right { transform: translateX(42px); }
.motion .reveal-left.in, .motion .reveal-right.in { transform: none; }

/* ---- Staggered children (grids, hero content) ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(.22,.8,.3,1), transform 1s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal-stagger.in > * { opacity: 1; transform: none; }
.motion .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.motion .reveal-stagger.in > *:nth-child(2) { transition-delay: .11s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .22s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .33s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .44s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .55s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .66s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .77s; }

/* ---- Image clip-wipe reveal (editorial) ---- */
.motion .reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.76,0,.24,1); will-change: clip-path; }
.motion .reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---- Joint-seam divider draws in from the centre (woodworking-joint motif) ---- */
.motion .joint-seam { transform: scaleX(0); transform-origin: center; transition: transform 1s cubic-bezier(.76,0,.24,1) .15s; }
.motion .joint-seam.in { transform: scaleX(1); }

/* ---- Hover lift / image zoom — "lifting a cushion": soft, warm-tinted shadow ---- */
.room-card, .product-card, .material-card, .roomset-card, .blog-card, .brand-card, .testi-card, .branch-card {
    transition: transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .5s ease;
}
.room-card:hover, .product-card:hover, .material-card:hover, .roomset-card:hover, .blog-card:hover, .brand-card:hover, .branch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(74,50,38,.18);
}
figure img, .product-card figure img, .gallery-item img, .room-card img { transition: transform 1.2s cubic-bezier(.22,.8,.3,1); }
.product-card:hover figure img, .room-card:hover img, .gallery-item:hover img, figure:hover > img { transform: scale(1.05); }

/* ---- Hero: gentle, slow Ken-Burns zoom on the active slide ---- */
.hero-slide.active { animation: kk-kenburns 22s ease-out forwards; }
@keyframes kk-kenburns { from { transform: scale(1.001); } to { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .room-card, .product-card, .material-card, figure img { transition: none; }
}