/* ==========================================================================
   MCC — Global Motion System (additive)
   One-shot / user-triggered only. No canvas, no rAF loops, no timers,
   no libraries. CLS-safe (transform + opacity only). Reduced-motion aware.
   ========================================================================== */

:root{
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 520ms;
  --motion-ease: cubic-bezier(.22,.61,.36,1);   /* smooth premium ease-out, no bounce */
}

/* --------------------------------------------------------------------------
   1. Cross-document page transitions — native View Transitions.
   Progressive enhancement: unsupported browsers navigate normally.
   No SPA, no link interception, no JS.
   -------------------------------------------------------------------------- */
@view-transition{ navigation: auto; }
/* Tablet + mobile (<=1024px): DISABLE cross-document transitions — native, instant navigation. */
@media (max-width:1024px){ @view-transition{ navigation: none; } }

/* --------------------------------------------------------------------------
   NO_LCP fix — keep the hero's large above-the-fold region STATIC so Lighthouse
   can finalise an LCP candidate (the headline). Infinite Ken-Burns / scan / sweep
   on big hero elements meant the largest paint never settled. Decorative only.
   -------------------------------------------------------------------------- */
.hero-video{ animation: none !important; }        /* stop infinite zoom on the largest hero element */
.hero-scan, .hero-sweep{ animation: none !important; }
/* Hero entrance (replaces the removed fullscreen intro) — LCP-safe:
   the headline is painted immediately (valid LCP candidate); only the
   supporting elements do a quick fade. No fullscreen layer. */
.hero h1 .ln span{ animation: none !important; transform: none !important; opacity: 1 !important; }
.hero-human, .spectrum-tick{ animation-duration: .34s !important; animation-delay: .04s !important; }
@media (max-width:860px){ .hero-human, .spectrum-tick{ animation-duration: .22s !important; } }
@media (prefers-reduced-motion: reduce){ .hero-human, .spectrum-tick{ animation: none !important; opacity: 1 !important; } }

/* No white flash between dark pages — keep root + transition backdrop on the MCC dark theme. */
html{ background-color: var(--floor, #15130F); }
::view-transition{ background-color: #15130F; }

/* Desktop only (>=1025px): a very subtle OPACITY cross-fade — no translate (no floating feel). */
@media (min-width:1025px) and (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: mccVTOut 140ms var(--motion-ease) both; }
  ::view-transition-new(root){ animation: mccVTIn  160ms var(--motion-ease) both; }
  @keyframes mccVTOut{ to   { opacity: 0; } }
  @keyframes mccVTIn { from { opacity: 0; } to { opacity: 1; } }
  /* Fixed header lifted out of the root snapshot so it never fades/translates with the body. */
  .topbar, .nav{ view-transition-name: mcc-header; }
  ::view-transition-group(mcc-header){ animation: none; }
}

/* --------------------------------------------------------------------------
   2. Reveal timing refinement — the reveal system + IntersectionObserver
   already exist (mcc.js / inline). Here we only refine timing to a premium
   range. One-shot behaviour and reduced-motion fallback are unchanged.
   -------------------------------------------------------------------------- */
.reveal{ transform: translateY(8px) !important; transition-duration: 360ms !important; }
.reveal.in{ transform: none !important; }
@media (max-width:860px){ .reveal{ transform: translateY(4px) !important; transition-duration: 220ms !important; } }

/* --------------------------------------------------------------------------
   3. Button / CTA arrow micro-interaction (consistent, directional, RTL-aware)
   -------------------------------------------------------------------------- */
.btn .arr, .arr{ transition: transform var(--motion-fast) var(--motion-ease); }
.btn:hover .arr, a:hover > .arr{ transform: translateX(3px); }
[dir="rtl"] .btn:hover .arr, [dir="rtl"] a:hover > .arr{ transform: translateX(-3px); }

/* Text links (View all / Download catalogue / Learn more) with an arrow */
.nav-mega-foot a .arr, .txt-arrow .arr{ transition: transform var(--motion-fast) var(--motion-ease); }
.nav-mega-foot a:hover .arr, .txt-arrow:hover .arr{ transform: translateX(3px); }
[dir="rtl"] .nav-mega-foot a:hover .arr, [dir="rtl"] .txt-arrow:hover .arr{ transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   4. Card hover — desktop pointer only (no hover simulation on touch).
   Applies to existing card classes; harmless no-op where absent.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .prod-card, .product-card, .pcard, .feat-card, .f-card{
    transition: transform var(--motion-base) var(--motion-ease),
                border-color var(--motion-base) var(--motion-ease),
                box-shadow var(--motion-base) var(--motion-ease);
  }
  .prod-card:hover, .product-card:hover, .pcard:hover, .feat-card:hover{ transform: translateY(-2px); }
  .prod-card img, .product-card img, .pcard img{ transition: transform var(--motion-base) var(--motion-ease); }
  .prod-card:hover img, .product-card:hover img, .pcard:hover img{ transform: scale(1.02); }
}

/* --------------------------------------------------------------------------
   5. Editorial image subtle zoom — only inside an explicit clip container.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .zoomable{ overflow: hidden; }
  .zoomable img{ transition: transform var(--motion-slow) var(--motion-ease); }
  .zoomable:hover img{ transform: scale(1.02); }
}

/* --------------------------------------------------------------------------
   6. Form focus polish — no layout shift (border + soft ring only).
   -------------------------------------------------------------------------- */
input[type=text], input[type=email], input[type=tel], input[type=search],
input[type=number], textarea, select{
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease);
}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(233,140,66,.15);
}

/* --------------------------------------------------------------------------
   7. Products Mega Menu reveal timing (structure/positions frozen — timing only)
   -------------------------------------------------------------------------- */
.nav-mega{ transition-duration: var(--motion-fast) !important; }

/* --------------------------------------------------------------------------
   8. Mobile (<=767px) — lighter motion profile. Immediate taps first.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  :root{ --motion-slow: 420ms; --motion-base: 260ms; }
  .prod-card:hover, .product-card:hover, .pcard:hover, .feat-card:hover{ transform: none; }
  .prod-card:hover img, .product-card:hover img, .pcard:hover img, .zoomable:hover img{ transform: none; }
}

/* --------------------------------------------------------------------------
   9. Reduced motion — near-instant, no choreography, no page-transition anim.
   Content never depends on animation.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
  .reveal{ transition: none !important; opacity: 1 !important; transform: none !important; }
  .btn:hover .arr, .nav-mega-foot a:hover .arr,
  .prod-card:hover, .product-card:hover, .pcard:hover, .feat-card:hover,
  .prod-card:hover img, .product-card:hover img, .pcard:hover img, .zoomable:hover img{
    transform: none !important;
  }
}