/* Motion is opt-in through JS and never hides content without an observer. */
:root { --motion-fast: 180ms; --motion-base: 360ms; --motion-reveal: 700ms; --ease-out: cubic-bezier(.2,.8,.2,1); }
html:not(.motion-on) .cta-button:hover { transform: none; }
.nora-scroll-progress { position: fixed; z-index: 101; top: 0; left: 0; width: 100%; height: 3px; background: #ff6500; transform-origin: left; scale: 0 1; pointer-events: none; }
.motion-ready.motion-on .motion-reveal { opacity: 0; translate: 0 20px; transition: opacity var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms), translate var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms); }
.motion-ready.motion-on .motion-reveal.motion-visible, .motion-ready.motion-on .motion-reveal:focus-within { opacity: 1; translate: 0 0; }
.motion-ready.motion-on .motion-reveal:focus-within { transition: none; }
@keyframes nora-enter { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes nora-nav { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes nora-pop { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@keyframes nora-wobble { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes nora-float-decor { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes nora-float-photo { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.motion-on .navbar nav { animation: nora-nav 500ms var(--ease-out) both; }
.motion-on .hero h1 span { animation: nora-enter var(--motion-reveal) var(--ease-out) both; }
.motion-on .hero h1 span:nth-child(2) { animation-delay: 80ms; }
.motion-on .hero h1 span:nth-child(3) { animation-delay: 160ms; }
.motion-on .hero h1 span:nth-child(4) { animation-delay: 240ms; }
.motion-on .hero-image { animation: nora-enter var(--motion-reveal) var(--ease-out) 180ms both; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform var(--motion-base) var(--ease-out); }
.motion-on .cta-button { animation: nora-pop 600ms var(--ease-out) 350ms both, nora-wobble 5s ease-in-out 950ms infinite; transition: transform var(--motion-fast) var(--ease-out); }
.motion-on .hero-decoration { animation: nora-float-decor 7s ease-in-out infinite; }
.motion-on .product-photo { animation: nora-float-photo 6s ease-in-out infinite; }
.motion-on .product-card { transition: transform var(--motion-fast) var(--ease-out); }
.motion-on .card-photo { transition: transform var(--motion-base) var(--ease-out); }
.motion-on .tile .link, .motion-on .nav-links a, .motion-on .filter-btn { transition: color var(--motion-fast), background-color var(--motion-fast); }
@media (hover: hover) {
  .motion-on .product-card:hover { transform: translateY(-3px); }
  .motion-on .product-card:hover .card-photo { transform: scale(1.025); }
  .motion-on .tile .link:hover { text-decoration-thickness: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-on .navbar nav, .motion-on .hero h1 span, .motion-on .hero-image, .motion-on .cta-button, .motion-on .hero-decoration, .motion-on .product-photo { animation: none; }
  .motion-ready.motion-on .motion-reveal { opacity: 1; translate: none; transition: none; }
}

html.motion-reduced { scroll-behavior: auto; }

/* Pointer depth uses individual properties so it composes with reveals and entry. */
.motion-on .navbar { transition: box-shadow var(--motion-base) var(--ease-out), background-color var(--motion-base); }
.navbar.is-scrolled { box-shadow: 0 3px 18px rgba(52, 34, 20, .11); }
.motion-on .hero-decoration { transform: translate(var(--decor-x, 0px), var(--decor-y, 0px)); transition: transform 450ms var(--ease-out); }
.motion-on .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 220px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,255,255,.19), transparent 75%); opacity: 0; transition: opacity 300ms ease; }
.motion-on .hero.motion-glow::after { opacity: 1; }
.motion-on .product-card { transform: perspective(900px) rotateX(var(--card-x, 0deg)) rotateY(var(--card-y, 0deg)); transition: transform 300ms var(--ease-out), filter 300ms var(--ease-out); }
.motion-on .cta-button, .motion-on .nav-links a { translate: var(--move-x, 0px) var(--move-y, 0px); transition: translate 180ms var(--ease-out), transform 180ms var(--ease-out), background-color 180ms, color 180ms; }
.motion-on .contact-arrow, .motion-on .contact-icon { transition: transform 220ms var(--ease-out); }
.motion-on a:active, .motion-on button:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .motion-on .product-card:hover { transform: perspective(900px) translateY(-4px) rotateX(var(--card-x, 0deg)) rotateY(var(--card-y, 0deg)); filter: drop-shadow(0 10px 12px rgba(52,34,20,.12)); }
  .motion-on .contact-card:hover .contact-arrow { transform: translate(4px, -4px); }
  .motion-on .contact-card:hover .contact-icon { transform: rotate(-6deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-on .navbar, .motion-on .hero-decoration, .motion-on .hero::after, .motion-on .product-card, .motion-on .card-photo, .motion-on .cta-button, .motion-on .nav-links a, .motion-on .contact-arrow, .motion-on .contact-icon { animation: none; transition: none; transform: none; translate: none; scale: none; }
  .motion-on .hero::after { display: none; }
}