/* ===== Premium Effects / Animations (Mono Premium v2) ===== */

/* HERO cover background */
.hero.hero-cover{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(120,230,178,.10), transparent 45%),
    radial-gradient(120% 80% at 10% -20%, rgba(54,163,255,.12), transparent 42%),
    url("/assets/img/cover/home-cover.webp") center/cover no-repeat;
  min-height: clamp(300px, 36vh, 520px);
  padding: clamp(28px, 6vh, 56px) 0 16px;
}
.hero.hero-cover::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,5,12,.75), rgba(2,5,12,.45) 30%, transparent 60%);
  pointer-events:none;
}
.hero.hero-cover::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.26), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  opacity:.8;
}

/* Header shadow when scrolled */
.header.scrolled{ box-shadow: 0 12px 28px rgba(0,0,0,.32); }

/* Glassy tiles */
.tiles .tile{
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent),
    var(--surface-2);
  border:1px solid color-mix(in oklab, var(--line) 80%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
}
.tiles .tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.36);
  border-color: color-mix(in oklab, var(--accent) 18%, var(--line));
}

/* Vehicle cards */
.card-vehicle{
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.card-vehicle:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,.40);
  border-color: color-mix(in oklab, var(--accent) 16%, var(--line));
}
.card-vehicle img{
  transition: transform .5s ease, filter .5s ease, opacity .3s ease;
  opacity:.98;
}
.card-vehicle:hover img{ transform: scale(1.04); filter: contrast(1.04) saturate(1.02); }

/* Buttons highlight */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:auto -30% 0 -30%; height:55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%); transition: transform .6s ease;
}
.btn:hover::after{ transform: translateX(100%); }

/* Reveal blocks */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-in{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s }
.reveal.d3{ transition-delay:.18s } .reveal.d4{ transition-delay:.24s }

/* Skeleton shimmer */
@keyframes shimmer{ to{ transform:translateX(100%) } }
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; min-height:220px }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform:translateX(-100%); animation:shimmer 1.15s infinite;
}

/* Trust ticker */
@media (prefers-reduced-motion: reduce){
  .tiles .tile, .card-vehicle, .btn::after{ transition:none!important }
}
.trust-ticker{
  overflow: hidden;
  height: var(--ticker-h, auto);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.trust-ticker .ticker-track{
  position: absolute; top:0; left:0;
  display: inline-flex; gap: 10px;
  will-change: transform;
  animation: tickerMove var(--ticker-dur, 18s) linear infinite;
}
.trust-ticker .ticker-track.is-dup{ left: var(--ticker-w, 100%); }

@keyframes tickerMove {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--ticker-w, 100%)), 0, 0); }
}

/* Cinematic snow, but subtle */
.snow-layer{
  position:fixed;
  inset:0;
  z-index:var(--z-snow, 5);
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}

.snowflake{
  position:absolute;
  top:-12vh;
  will-change:transform, opacity;
  animation-name:snow-fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.snowflake__core{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.22) 40%, transparent 70%);
  box-shadow:0 0 6px rgba(255,255,255,.55);
  animation-name:snow-spin;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

.snowflake__core.snowflake--dot{
  filter:blur(.2px);
}
.snowflake__core.snowflake--soft{
  filter:blur(.7px);
  box-shadow:0 0 9px rgba(255,255,255,.65);
}
.snowflake__core.snowflake--star{
  position:relative;
  border-radius:0;
  background:none;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.9);
  text-shadow:0 0 3px rgba(15,23,42,.5);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.snowflake__core.snowflake--star::before{
  content:"❄";
  font-size:1.3em;
}

@keyframes snow-fall{
  0%{
    transform:translate3d(0,-12vh,0);
    opacity:0;
  }
  10%{
    opacity:1;
  }
  25%{
    transform:translate3d(calc(var(--snow-sway, 40px) * -.35), 25vh, 0);
  }
  50%{
    transform:translate3d(calc(var(--snow-sway, 40px) * .45), 50vh, 0);
  }
  75%{
    transform:translate3d(calc(var(--snow-sway, 40px) * -.75), 78vh, 0);
  }
  100%{
    transform:translate3d(calc(var(--snow-sway, 40px) * 1.05), 110vh, 0);
    opacity:0;
  }
}

@keyframes snow-spin{
  0%{
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
  }
  50%{
    transform:translate3d(0,-4px,0) rotate(7deg) scale(1.05);
  }
  100%{
    transform:translate3d(0,1px,0) rotate(-5deg) scale(.98);
  }
}

@media (prefers-reduced-motion: reduce){
  .tiles .tile, .card-vehicle, .btn::after{ transition:none!important }
  .snow-layer{ display:none!important; }
}