/* Every top-level CMS widget participates automatically. GSAP controls a
   short, masked exit; widgets keep their natural geometry and readable text. */
:root {
  --ijc-motion-fast: 140ms;
  --ijc-motion-standard: 220ms;
  --ijc-motion-slow: 320ms;
  --ijc-motion-ease: cubic-bezier(.2,.72,.2,1);
  --ijc-motion-emphasised: cubic-bezier(.16,1,.3,1);
}
main > [data-cms-widget].ijc-motion-widget { transition: opacity 280ms var(--ijc-motion-ease); }
main > [data-cms-widget].ijc-motion-pending { opacity: .76; }
main > [data-cms-widget].ijc-motion-exit { transition: none; }
body:is([data-page="microcampers"],[data-page="wav"],[data-page="cars"])
  main > [data-cms-widget].ijc-motion-widget:not(.ijc-motion-pending) {
  --ijc-mask-feather: 0px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ijc-mask-feather)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ijc-mask-feather)), transparent 100%);
}
[data-motion-pinned-edge] {
  --ijc-pinned-edge: -72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--ijc-pinned-edge), #000 calc(var(--ijc-pinned-edge) + 72px));
  mask-image: linear-gradient(to bottom, transparent var(--ijc-pinned-edge), #000 calc(var(--ijc-pinned-edge) + 72px));
}

@property --ijc-motion-highlight {
  syntax: "<color>";
  inherits: false;
  initial-value: #d0d0d0;
}
html.ijc-vehicle-arriving [data-motion-shimmer] {
  --ijc-motion-highlight: #d0d0d0;
  color: transparent;
  background-image: linear-gradient(105deg,
    var(--ijc-motion-ink) 0%, var(--ijc-motion-ink) 32%,
    var(--ijc-motion-highlight) 46%, var(--ijc-motion-ink) 60%,
    var(--ijc-motion-ink) 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-background-clip: text;
  animation: ijc-motion-shimmer 900ms linear infinite;
  transition: --ijc-motion-highlight 280ms ease;
}
html.ijc-vehicle-arriving [data-motion-shimmer].eyebrow::before { color: var(--accent); }
html.ijc-vehicle-settling [data-motion-shimmer] { --ijc-motion-highlight: var(--ijc-motion-ink); }
@keyframes ijc-motion-shimmer { to { background-position: 0 0; } }
[data-motion-shimmer-surface]::after {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity 280ms ease;
}
html.ijc-vehicle-arriving [data-motion-shimmer-surface]::after {
  opacity: .55;
  background-image: linear-gradient(105deg, transparent 32%, rgba(208,208,208,.46) 46%, transparent 60%);
  background-size: 240% 100%;
  background-position: 100% 0;
  animation: ijc-motion-shimmer 900ms linear infinite;
}
html.ijc-vehicle-settling [data-motion-shimmer-surface]::after { opacity: 0; }
[data-loading-shimmer] { position:relative; isolation:isolate; overflow:hidden; }
[data-loading-shimmer]::after {
  position:absolute;
  z-index:1;
  inset:0;
  opacity:0;
  background:linear-gradient(105deg,rgba(205,211,216,.18) 20%,rgba(255,255,255,.8) 48%,rgba(205,211,216,.18) 76%);
  background-size:240% 100%;
  background-position:100% 0;
  pointer-events:none;
  content:"";
  transition:opacity 280ms ease;
}
[data-loading-shimmer].is-loading::after { opacity:1; animation:ijc-motion-shimmer 900ms linear infinite; }
[data-loading-shimmer].is-loading.is-settling::after { opacity:0; }
.ijc-image-shimmer[data-loading-shimmer] { position:absolute; z-index:1; display:block; pointer-events:none; background:#eef1f3; }
.ijc-image-shimmer.is-settling { opacity:0; transition:opacity 320ms ease; }
img.ijc-image-loading { opacity:0; transition:opacity 320ms ease; }
img.ijc-image-loading.ijc-image-settling { opacity:1; }

/* Existing tactile and stock feedback share the same motion tokens. */
.reveal,.reveal.show { opacity: 1; transform: none; }
.motion-card { transform-origin: 50% 56%; transition: transform 160ms var(--ijc-motion-ease); }
@media (hover:hover) and (pointer:fine) { .motion-card:hover { transform: translateY(-2px); } }
.motion-card.motion-pressed { transform: translateY(1px) scale(.986); }
.motion-card.motion-releasing { animation: ijc-motion-card-release 190ms var(--ijc-motion-emphasised); }
@keyframes ijc-motion-card-release { 0% { transform: translateY(1px) scale(.986); } 62% { transform: translateY(-.4px) scale(1.002); } 100% { transform: none; } }
.motion-tactile { transition: scale 90ms var(--ijc-motion-ease), translate 110ms var(--ijc-motion-ease) !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.motion-tactile.motion-pressed,.motion-tactile:active { scale: .97; translate: 0 1px; }
.motion-tactile.motion-releasing { animation: ijc-motion-button-release 180ms var(--ijc-motion-emphasised); }
@keyframes ijc-motion-button-release { 0% { scale: .97; translate: 0 1px; } 68% { scale: 1.008; translate: 0 -.3px; } 100% { scale: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  main > [data-cms-widget].ijc-motion-widget { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  [data-motion-pinned-edge] { -webkit-mask-image: none !important; mask-image: none !important; }
  html.ijc-vehicle-arriving [data-motion-shimmer] { animation: none !important; color: inherit !important; background-image: none !important; }
  [data-motion-shimmer-surface]::after { animation: none !important; content: none !important; }
  [data-loading-shimmer].is-loading::after { animation:none !important; }
  .ijc-image-shimmer.is-settling, img.ijc-image-loading { transition:none !important; }
  .motion-card,.motion-tactile { animation: none !important; transition: none !important; transform: none !important; translate: none !important; scale: none !important; }
}