/* ============ Shubham K Mart — motion layer ============
   Every effect here is decorative and switched off for
   users who prefer reduced motion (see bottom of file). */

/* Cross-page transitions (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.site-header { view-transition-name: header; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--green-500), var(--saffron)); pointer-events: none; }

/* Kinetic headline: words rise in */
.kinetic .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.kinetic .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); }
.kinetic.go .w > span { transform: none; }

/* Staggered hero intro */
.intro > * { opacity: 0; transform: translateY(18px); animation: intro-in .8s var(--ease) forwards; }
.intro > *:nth-child(1) { animation-delay: .05s; }
.intro > *:nth-child(3) { animation-delay: .7s; }
.intro > *:nth-child(4) { animation-delay: .85s; }
.intro > *:nth-child(5) { animation-delay: 1s; }
.intro > h1 { opacity: 1; transform: none; animation: none; }
@keyframes intro-in { to { opacity: 1; transform: none; } }
.page-hero--photo .bg { will-change: transform; }

/* Marquee ticker */
.marquee { overflow: hidden; background: var(--green-900); color: #fff; padding: 18px 0; transform: rotate(-1.2deg); margin: 10px -12px 0; box-shadow: var(--shadow); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-style: italic; padding: 0 22px; display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.marquee span::after { content: "✦"; color: var(--saffron); font-style: normal; font-size: .8em; }
.marquee .hi { font-style: normal; color: var(--saffron); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Reveal variants */
.reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-zoom.in { opacity: 1; transform: none; }
.cat-tile.reveal img { transform: scale(1.18); transition: transform 1.4s var(--ease); }
.cat-tile.reveal.in img { transform: scale(1); }
.cat-tile.reveal.in:hover img { transform: scale(1.07); transition-duration: .8s; }
.split-media.reveal { clip-path: inset(0 0 100% 0 round 28px); opacity: 1; transform: none; transition: clip-path 1.2s var(--ease); }
.split-media.reveal.in { clip-path: inset(0 0 0 0 round 28px); }
.split-media img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.split-media.in img { transform: scale(1); }
.step.reveal:nth-child(2) { transition-delay: .12s; }
.step.reveal:nth-child(3) { transition-delay: .24s; }
.step::before { transition: transform .6s var(--ease); }
.step:hover::before { transform: translateX(8px); }
.checks li { opacity: 0; transform: translateX(-12px); transition: .6s var(--ease); }
.in .checks li { opacity: 1; transform: none; }
.in .checks li:nth-child(2) { transition-delay: .12s; }
.in .checks li:nth-child(3) { transition-delay: .24s; }

/* 3D tilt cards (set by JS via --rx/--ry) */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(var(--ty, 0)); transition: transform .5s var(--ease), box-shadow .3s; }
[data-tilt].tilting { transition: transform .08s linear, box-shadow .3s; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 55%); opacity: 0; transition: opacity .3s; }
[data-tilt].tilting::after { opacity: 1; }
.format, .leader, .p-card { position: relative; }

/* Magnetic buttons */
.magnetic { transition: transform .35s var(--ease), background .2s, box-shadow .2s, color .2s; }


/* Button press ripple */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Count-up numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.stat { border-top: 2px solid rgba(255, 255, 255, .16); padding-top: 18px; }
.section:not(.section--dark) .stat { border-color: var(--line); }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; color: var(--saffron); font-variant-numeric: tabular-nums; }
.section:not(.section--dark) .stat b { color: var(--green-700); }
.stat span { font-size: .92rem; opacity: .85; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

/* List re-render */
.prod-grid.swap .prod { animation: card-in .5s var(--ease) both; }
.prod-grid.swap .prod:nth-child(2) { animation-delay: .03s; } .prod-grid.swap .prod:nth-child(3) { animation-delay: .06s; }
.prod-grid.swap .prod:nth-child(4) { animation-delay: .09s; } .prod-grid.swap .prod:nth-child(5) { animation-delay: .12s; }
.prod-grid.swap .prod:nth-child(6) { animation-delay: .15s; } .prod-grid.swap .prod:nth-child(7) { animation-delay: .18s; }
.prod-grid.swap .prod:nth-child(n+8) { animation-delay: .21s; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }


/* Nav link underline */
.nav-links a { position: relative; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .kinetic .w > span, .intro > *, .checks li, .split-media.reveal, .reveal-zoom { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .marquee-track { animation: none !important; }
  [data-tilt] { transform: none !important; }
}

.quote { position: relative; }