/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 11 2026 | 06:47:23 */
/*
 * ZIM – Scroll Effects – CSS
 * What: animation keyframes for the homepage hero + band, image unveil on scroll
 *       (.zim-unveil), the smart-header slide,
 *       and the tablet/phone header logo slide-in.
 * Where: site-wide (header template 33, homepage 37, any page using these classes).
 *        Works together with "ZIM – Scroll Effects – JS".
 * Added: 2026-10-10
 */

/* ---------- Keyframes used by Bricks classes (Bricks can't store @keyframes) ---------- */
@keyframes zimLineUp { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: translateY(0); } }
@keyframes zimUnveilIn { from { clip-path: inset(12% 10% round 18px); opacity: .4; } to { clip-path: inset(0 round 18px); opacity: 1; } }
@keyframes zimZoomOut { from { scale: 1.18; } to { scale: 1; } }
@keyframes zimFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zimFloat { 0% { translate: 0 0; } 50% { translate: 0 -14px; } 100% { translate: 0 0; } }
@keyframes zimSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes zimBandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Smart header: hide on scroll down, slide back on scroll up ---------- */
.zim-header {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.zim-header.is-hidden {
  transform: translateY(-180px);
}
.zim-header .zim-nav {
  transition: box-shadow .4s ease;
}
.zim-header.is-scrolled .zim-nav {
  box-shadow: 0 14px 44px rgba(0, 0, 0, .12);
}

/* ---------- Image unveil on scroll (only when JS is running) ---------- */
/* Section fade-in (.zim-reveal) was removed on 2026-10-10 at Zin's request. */
html.zim-js .zim-unveil {
  clip-path: inset(12% 8% round 18px);
  opacity: .5;
  transition: clip-path 1.3s cubic-bezier(.2, .7, .2, 1), opacity 1.3s ease;
}
html.zim-js .zim-unveil.is-in {
  clip-path: inset(0 round 18px);
  opacity: 1;
}
/* ---------- Tablet + phone: header logo badge slides in from the right on page load ---------- */
/* Added 2026-10-10. Desktop is not affected. */
@keyframes zimLogoSlideIn {
  /* start 1/3 along the nav bar, rolled 135deg, and roll back to upright while sliding left */
  0%   { translate: calc((100vw - 24px) / 3) 0; rotate: 135deg; opacity: 0; }
  25%  { opacity: 1; }
  100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}
@media (max-width: 991px) {
  .zim-header .zim-logo {
    position: relative;
    z-index: 2;
    animation: zimLogoSlideIn 1.8s cubic-bezier(.22, 1, .36, 1) .25s both;
  }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  html.zim-js .zim-unveil {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .zim-header { transition: none; }
  .zim-intro__line, .zim-intro__text, .zim-intro__actions, .zim-intro__figures, .zim-intro__eyebrow,
  .zim-intro__main, .zim-intro__main-img, .zim-intro__small, .zim-intro__badge, .zim-intro__ring,
  .zim-band__track,
  .zim-collection__grid,
  .zim-header .zim-logo {
    animation: none !important;
  }
}