/* ==========================================================================
   JJS CINE RENTALS — MOTION LAYER
   Scroll-in reveals + hover / shine effects. Loaded AFTER styles.css.
   Not linked on shop.html (by design). Removing this file + motion.js
   restores the site exactly as it was.
   ========================================================================== */

:root {
  --mo-ease: cubic-bezier(.22, .68, .2, 1);
  --mo-dur: .8s;
}

/* ---------- 1. Scroll reveal ---------- */
html.mo-js [data-mo="out"] {
  opacity: 0;
  translate: 0 28px;
}
html.mo-js [data-mo="out"][data-mo-from="left"]  { translate: -32px 0; }
html.mo-js [data-mo="out"][data-mo-from="right"] { translate: 32px 0; }
html.mo-js [data-mo="in"] {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--mo-dur) var(--mo-ease) var(--mo-d, 0s),
    translate var(--mo-dur) var(--mo-ease) var(--mo-d, 0s),
    transform .3s var(--mo-ease),
    box-shadow .3s var(--mo-ease),
    border-color .3s ease;
}
@media (max-width: 960px) {
  html.mo-js [data-mo="out"] { translate: 0 18px; }
  html.mo-js [data-mo="out"][data-mo-from="left"],
  html.mo-js [data-mo="out"][data-mo-from="right"] { translate: 0 18px; }  /* slide up, not sideways: nothing pokes past the screen edge */
}

/* Home hero: text eases in on load */
@keyframes mo-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-slide-content > * { animation: mo-rise .9s var(--mo-ease) both; }
.hero-slide-content > :nth-child(2) { animation-delay: .12s; }
.hero-slide-content > :nth-child(3) { animation-delay: .24s; }
.hero-slide-content > :nth-child(4) { animation-delay: .36s; }

/* ---------- 2. Buttons: lift + shine sweep ---------- */
.btn-primary, .btn-primary-sm, .btn-secondary, .btn-checkout, .btn-add-cart,
.btn-add-cart-large, .btn-rent-now, .btn-view-product, .auth-submit,
.auth-links .btn-signin, .contact-form button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--mo-ease), background .2s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease;
}
.btn-primary::before, .btn-primary-sm::before, .btn-secondary::before, .btn-checkout::before,
.btn-add-cart::before, .btn-add-cart-large::before, .btn-rent-now::before, .btn-view-product::before,
.auth-submit::before, .auth-links .btn-signin::before, .contact-form button::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: -1;
}
.btn-secondary::before { background: linear-gradient(105deg, transparent 0%, rgba(227,30,36,.12) 50%, transparent 100%); }
.btn-primary:hover::before, .btn-primary-sm:hover::before, .btn-secondary:hover::before,
.btn-checkout:hover::before, .btn-add-cart:hover::before, .btn-add-cart-large:hover::before,
.btn-rent-now:hover::before, .btn-view-product:hover::before, .auth-submit:hover::before,
.auth-links .btn-signin:hover::before, .contact-form button:hover::before {
  left: 130%;
  transition: left .75s var(--mo-ease);
}
.btn-primary:hover, .btn-primary-sm:hover, .btn-checkout:hover, .btn-add-cart-large:hover, .auth-submit:hover {
  box-shadow: 0 8px 22px rgba(227,30,36,.32);
  transform: translateY(-2px);
}
.btn-secondary:hover, .btn-add-cart:hover, .btn-rent-now:hover, .btn-view-product:hover,
.auth-links .btn-signin:hover, .contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.btn-primary:active, .btn-primary-sm:active, .btn-secondary:active, .btn-checkout:active,
.btn-add-cart:active, .btn-add-cart-large:active, .btn-rent-now:active, .btn-view-product:active,
.auth-submit:active, .contact-form button:active { transform: translateY(0) scale(.98); }

/* ---------- 3. Cards: lift + soft light pass ---------- */
.step-card, .why-card, .testimonial-card, .stats-bar .stat-item,
.service-card, .support-card, .support-chatbot-section,
.about-mission-card, .about-offer, .about-step, .about-stats .stat-item,
.values-grid article, .faq-section details, .about-cta {
  --mo-shine: rgba(227,30,36,.075);
  background-image: linear-gradient(115deg, transparent 38%, var(--mo-shine) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  transition:
    transform .35s var(--mo-ease),
    box-shadow .35s var(--mo-ease),
    border-color .3s ease,
    background-position 0s;
}
.about-step, .about-stats .stat-item { --mo-shine: rgba(255,255,255,.09); }

.step-card:hover, .why-card:hover, .testimonial-card:hover, .stats-bar .stat-item:hover,
.service-card:hover, .support-card:hover, .support-chatbot-section:hover,
.about-mission-card:hover, .about-offer:hover, .about-step:hover, .about-stats .stat-item:hover,
.values-grid article:hover, .faq-section details:hover, .about-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  background-position: -40% 0;
  transition:
    transform .35s var(--mo-ease),
    box-shadow .35s var(--mo-ease),
    border-color .3s ease,
    background-position 1s var(--mo-ease);
}
/* cards that must stay put (big forms / long content) lift less */
.support-card:hover, .support-chatbot-section:hover, .about-cta:hover { transform: translateY(-2px); }
.about-offer:hover { border-color: rgba(227,30,36,.4); }
.faq-section details:hover { transform: none; border-color: rgba(227,30,36,.35); box-shadow: 0 8px 22px rgba(0,0,0,.07); }

/* Icon badges respond when their card is hovered */
.card-icon, .service-icon, .why-icon, .about-mission-icon, .about-offer-icon {
  transition: transform .35s var(--mo-ease), box-shadow .35s ease;
}
.step-card:hover .card-icon, .service-card:hover .service-icon, .why-card:hover .why-icon,
.about-mission-card:hover .about-mission-icon, .about-offer:hover .about-offer-icon,
.support-card:hover > .card-icon, .testimonial-card:hover .card-icon {
  transform: translateY(-2px) scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 20px rgba(227,30,36,.32);
}

/* Stats / big numbers feel alive */
.stats-bar .stat-icon, .about-stats .stat-icon { transition: transform .35s var(--mo-ease); }
.stats-bar .stat-item:hover .stat-icon { transform: scale(1.12); }

/* ---------- 4. Images, links, header, footer ---------- */
.about-story-media { overflow: visible; }
.about-story-media img { transition: transform .6s var(--mo-ease), box-shadow .6s var(--mo-ease); }
.about-story-media:hover img { transform: scale(1.015); box-shadow: 0 26px 54px rgba(0,0,0,.2); }

.logo-icon { transition: transform .35s var(--mo-ease); }
.logo:hover .logo-icon { transform: rotate(-6deg) scale(1.06); }

.main-nav a { transition: color .2s ease, border-color .25s ease; }

.footer-col ul a { display: inline-block; transition: transform .25s var(--mo-ease), color .2s ease; }
.footer-col ul a:hover { transform: translateX(4px); }

.see-more { display: inline-block; transition: transform .25s var(--mo-ease), color .2s ease; }
.see-more:hover { transform: translateX(3px); text-decoration: none; }

.messenger-contact, .phone-contact-number { transition: transform .3s var(--mo-ease), box-shadow .3s ease, border-color .3s ease; }
.messenger-contact:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }

.contact-form input, .contact-form select, .contact-form textarea { transition: border-color .2s ease, box-shadow .25s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { box-shadow: 0 0 0 4px rgba(227,30,36,.1); outline-color: var(--red); }

.testimonial-track { scroll-behavior: smooth; }

/* ---------- 5. Respect reduced-motion / touch ---------- */
@media (prefers-reduced-motion: reduce) {
  html.mo-js [data-mo] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .hero-slide-content > * { animation: none; }
  *::before { transition: none !important; }
}
@media (hover: none) {
  /* no sticky hover lifts on touch screens */
  .step-card:hover, .why-card:hover, .testimonial-card:hover, .stats-bar .stat-item:hover,
  .service-card:hover, .support-card:hover, .about-mission-card:hover, .about-offer:hover,
  .about-step:hover, .values-grid article:hover { transform: none; }
}