/*
 * GTI Car Care — motion layer
 * Short, quiet transitions on top of the base design. Visitors whose system asks for reduced
 * motion get the same feedback as plain fades, without movement.
 */

:root {
  --motion-ease: cubic-bezier(.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
  --motion-sheet: cubic-bezier(.32, .72, 0, 1);
}

html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role=combobox], [role=checkbox], [role=tab], [role=option] { touch-action: manipulation; }

/* Page to page ------------------------------------------------------------------ */
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
.whatsapp-float { view-transition-name: whatsapp-float; }
::view-transition-group(site-header),
::view-transition-group(whatsapp-float) { animation: none; }
::view-transition-old(site-header),
::view-transition-old(whatsapp-float) { display: none; }
::view-transition-new(site-header),
::view-transition-new(whatsapp-float) { animation: none; }
::view-transition-old(root) { animation: motion-fade-out .2s var(--motion-ease-in) both; }
::view-transition-new(root) { animation: motion-fade .32s var(--motion-ease) both; }

/* Browsers without cross-document view transitions get the same fade from site.js. */
html.page-enter #main-content { animation: motion-fade .32s var(--motion-ease) both; }
html.page-leave #main-content { opacity: 0; transition: opacity .16s var(--motion-ease-in); }

.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 200;
  pointer-events: none;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(246, 223, 0, .5);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: motion-progress 2.4s cubic-bezier(.1, .7, .2, 1) forwards;
}

/* Entrance of the first screen --------------------------------------------------- */
.revision-hero .hero-heading > div:first-child > .eyebrow { animation: motion-rise .7s var(--motion-ease-out) .05s both; }
.revision-hero .hero-heading h1 { animation: motion-rise .9s var(--motion-ease-out) .12s both; }
.revision-hero .hero-summary { animation: motion-rise .9s var(--motion-ease-out) .24s both; }
.revision-hero .hero-slider { animation: motion-rise-soft 1s var(--motion-ease-out) .32s both; }
.page-hero > * { animation: motion-rise .8s var(--motion-ease-out) both; }
.page-hero > :nth-child(2) { animation-delay: .06s; }
.page-hero > :nth-child(3) { animation-delay: .12s; }
.page-hero > :nth-child(4) { animation-delay: .18s; }
.page-hero > :nth-child(n+5) { animation-delay: .24s; }
.product-breadcrumb { animation: motion-fade .5s var(--motion-ease) both; }
.product-detail > * { animation: motion-rise .85s var(--motion-ease-out) both; }
.product-detail > :nth-child(2) { animation-delay: .1s; }
.admin > .section-heading { animation: motion-rise .6s var(--motion-ease-out) both; }

/* Interactive elements ----------------------------------------------------------- */
.button {
  transition: background-color .2s var(--motion-ease), color .2s var(--motion-ease), border-color .2s var(--motion-ease), transform .16s var(--motion-ease), opacity .2s var(--motion-ease);
}
.button:active:not(:disabled) { transform: scale(.975); }
.header nav a,
.footer-main > div > a,
.footer-bottom a,
.small-link,
.plain-link,
.product-links a,
.download-list a,
.breadcrumb { transition: color .18s var(--motion-ease), background-color .18s var(--motion-ease), opacity .18s var(--motion-ease); }
.footer-main > div > a:hover,
.footer-bottom a:hover { color: #fff; }
.download-list a:hover,
.product-links a:hover { opacity: .78; }

.product-card { transition: transform .35s var(--motion-ease-out), border-color .35s var(--motion-ease); }
.product-card:hover { transform: translateY(-4px); border-color: #4b4b4b; }
.line-card { transition: transform .35s var(--motion-ease-out), border-color .35s var(--motion-ease); }
.product-image img,
.product-detail-image img { transition: transform .5s var(--motion-ease-out); }

.whatsapp-float { transition: transform .25s var(--motion-ease-out), box-shadow .25s var(--motion-ease); }
.whatsapp-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 30px #0006; }
.whatsapp-float:active { transform: scale(.96); }

.menu-button { transition: border-color .2s var(--motion-ease), background-color .2s var(--motion-ease), transform .16s var(--motion-ease); }
.menu-button:hover { border-color: #777; }
.menu-button:active { transform: scale(.94); }

.slider-dots button::after { transition: background-color .3s var(--motion-ease), transform .3s var(--motion-ease-out); }
.slider-dots button[aria-current=true]::after { transform: scale(1.3); }
.slider-controls > button { transition: opacity .2s var(--motion-ease), transform .16s var(--motion-ease); }
.slider-controls > button:active { transform: scale(.92); }

/* Form fields */
.form-grid input,
.form-grid textarea,
.search-field,
.choice [data-slot=select-trigger] { transition: border-color .18s var(--motion-ease), box-shadow .18s var(--motion-ease), background-color .18s var(--motion-ease); }
.form-grid input:focus,
.form-grid textarea:focus { outline: none; border-color: #8d7f2a; box-shadow: 0 0 0 3px rgba(246, 223, 0, .12); }
.search-field:focus-within { border-bottom-color: #8d7f2a; }
.choice [data-slot=select-trigger][data-state=open] { border-color: #8d7f2a; box-shadow: 0 0 0 3px rgba(246, 223, 0, .1); }
.form-grid input:read-only:focus { border-color: #484844; box-shadow: none; }
.consent > button[role=checkbox] { transition: background-color .15s var(--motion-ease), border-color .15s var(--motion-ease); }
.consent > button[role=checkbox] [data-slot=checkbox-indicator] { animation: motion-pop .22s var(--motion-ease-out); }

.form-error,
.save-message { animation: motion-rise-sm .3s var(--motion-ease-out) both; }
.inquiry-success { animation: motion-rise .5s var(--motion-ease-out) both; }
.inquiry-success > svg { animation: motion-pop .5s .12s var(--motion-ease-out) both; }
.button[disabled] { cursor: progress; }

/* Mobile navigation sheet */
[data-slot=sheet-overlay] { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-slot=sheet-overlay][data-state=open] { animation: motion-fade .3s var(--motion-ease) both; }
[data-slot=sheet-overlay][data-state=closed] { animation: motion-fade-out .26s var(--motion-ease-in) both; }
.mobile-sheet[data-state=open] { animation: motion-sheet-in .46s var(--motion-sheet) both; }
.mobile-sheet[data-state=closed] { animation: motion-sheet-out .28s var(--motion-ease-in) both; }
.mobile-sheet[data-state=open] > a,
.mobile-sheet[data-state=open] > h2,
.mobile-sheet[data-state=open] > p { animation: motion-slide-in .45s var(--motion-ease-out) both; animation-delay: calc(var(--motion-index, 0) * 30ms + 100ms); }
.mobile-sheet > a { transition: color .18s var(--motion-ease), padding-left .25s var(--motion-ease-out); }
.mobile-sheet > a:not(.button):hover { color: var(--gold); padding-left: 16px; }

/* Select menus */
[data-slot=select-content][data-state=open] { animation: motion-pop-soft .18s var(--motion-ease-out) both; }
[data-slot=select-item] { transition: background-color .12s var(--motion-ease), color .12s var(--motion-ease); }

/* Content editor */
.admin [role=tabpanel]:not([hidden]) { animation: motion-fade .22s var(--motion-ease) both; }
.admin-layout aside > button:not(.button) { transition: border-color .18s var(--motion-ease), color .18s var(--motion-ease), background-color .18s var(--motion-ease); }
.admin-layout aside > button:not(.button):hover { border-color: #4d4d4d; color: #eee; }
.lead { transition: border-color .2s var(--motion-ease); }
.lead:hover { border-color: #444; }
.lead[open] > dl { animation: motion-rise-sm .25s var(--motion-ease-out) both; }

/* Scroll reveal (added by site.js only for content below the first screen) */
[data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--motion-ease-out), transform .8s var(--motion-ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}
img[data-fade] { opacity: 0; }
img[data-fade].is-loaded { opacity: 1; transition: opacity .5s var(--motion-ease); }

@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes motion-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes motion-rise-soft { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes motion-rise-sm { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes motion-slide-in { from { opacity: 0; transform: translate3d(16px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes motion-sheet-in { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }
@keyframes motion-sheet-out { from { transform: none; } to { transform: translate3d(100%, 0, 0); } }
@keyframes motion-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes motion-pop-soft { from { opacity: 0; transform: scale(.97) translateY(-2px); } to { opacity: 1; transform: none; } }
@keyframes motion-progress { 0% { transform: scaleX(0); } 100% { transform: scaleX(.85); } }

@media (hover: none) {
  .product-card:hover { transform: none; }
  .whatsapp-float:hover { transform: none; box-shadow: 0 5px 25px #0004; }
}

/* Reduced motion: keep the fades, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revision-hero .hero-heading > div:first-child > .eyebrow,
  .revision-hero .hero-heading h1,
  .revision-hero .hero-summary,
  .revision-hero .hero-slider,
  .page-hero > *,
  .product-detail > *,
  .admin > .section-heading,
  .inquiry-success,
  .form-error,
  .save-message,
  .lead[open] > dl,
  .mobile-sheet[data-state=open] > a,
  .mobile-sheet[data-state=open] > h2,
  .mobile-sheet[data-state=open] > p,
  [data-slot=select-content][data-state=open] { animation-name: motion-fade; animation-duration: .25s; animation-delay: 0s; }
  .mobile-sheet[data-state=open] { animation-name: motion-fade; animation-duration: .25s; }
  .mobile-sheet[data-state=closed] { animation-name: motion-fade-out; animation-duration: .2s; }
  [data-reveal] { transform: none; }
  [data-reveal].is-revealed { transition: opacity .5s var(--motion-ease); transition-delay: 0s; }
  .product-card:hover, .whatsapp-float:hover, .button:active:not(:disabled), .menu-button:active, .slider-controls > button:active { transform: none; }
  .product-image:hover img { transform: none; }
}