/* =========================================================
   MØDE — motion layer, modelled on the ONE store (Shopify "Impulse"):
   calm, quick and image-led. Video zoom-fades in, text rises out of a
   mask, images fade in as they scroll into view (staggered per row),
   product cards swap to the second photo on hover, menus cascade in.
   Everything is switched off for visitors who prefer reduced motion.
   ========================================================= */

:root {
  --one-ease: cubic-bezier(.26, .54, .32, 1);
  --one-appear: cubic-bezier(.165, .84, .44, 1);
}

@keyframes one-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes one-fade-safe { from { opacity: 0; } to { opacity: 1; } }
@keyframes one-rise-up { from { opacity: 1; transform: translateY(120%); } to { opacity: 1; transform: translateY(0); } }
@keyframes one-zoom-fade { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes one-shine { to { left: -200%; } }
@keyframes one-preloading {
  0%   { opacity: 0; transform: scaleX(0); transform-origin: 0% 50%; }
  40%  { opacity: 1; transform: scaleX(1); transform-origin: 0% 50%; }
  41%  { opacity: 1; transform: scaleX(1); transform-origin: 100% 50%; }
  100% { opacity: 1; transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- 1. Home film: zoom-fade in, then the button fades up ---------- */
.one-js .film__video { opacity: 0; }
.one-js .film.is-loaded .film__video { animation: one-zoom-fade 2.5s var(--one-ease) forwards; }
/* Safety net: show the film even if the script never runs. */
.one-js .film:not(.is-loaded) .film__video { animation: one-fade-safe .6s ease 4s forwards; }

.film__cta { position: absolute; left: 50%; bottom: 48px; z-index: 2; transform: translateX(-50%); }
.one-js .film__cta .btn { opacity: 0; }
.one-js .film.is-loaded .film__cta .btn { animation: one-fade-in 2s ease 1.3s forwards; }
.one-js .film:not(.is-loaded) .film__cta .btn { animation: one-fade-safe .6s ease 4s forwards; }

/* Light sweep across the button on hover (ONE's "shine") */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after {
  content: ""; position: absolute; top: 0; left: 150%; width: 200%; height: 100%;
  background-image: linear-gradient(80deg, transparent 45%, rgba(255, 255, 255, .55) 50%, transparent 55%);
  pointer-events: none;
}
.btn--shine:hover::after { animation: one-shine .75s cubic-bezier(.01, .56, 1, 1); }

/* ---------- 2. Text that rises out of a mask (intro headline) ---------- */
.one-crop { display: block; overflow: hidden; }
.one-crop > .one-rise { display: inline-block; }
.one-js .one-rise { transform: translateY(120%); }
.one-js .is-in .one-rise { animation: one-rise-up .8s var(--one-ease) .3s forwards; }
.one-js .one-after { opacity: 0; }
.one-js .is-in .one-after { animation: one-fade-in 1s var(--one-ease) .7s forwards; }
.one-js .is-in .one-after--late { animation: one-fade-in 2s ease 1.1s forwards; }

/* ---------- 3. Images fade in as they scroll into view ---------- */
.one-img > img:not(.mode-hover-img), img.one-img { opacity: 0; }
.one-img.is-in > img:not(.mode-hover-img), img.one-img.is-in { animation: one-fade-in 1s var(--one-ease) var(--one-d, 0s) forwards; }

/* Thin loading line while a photo is still downloading */
.one-img.is-loading::before, .one-img.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 4;
  width: 100px; height: 2px; margin: -1px 0 0 -50px; pointer-events: none;
}
.one-img.is-loading::before { background: rgba(243, 243, 241, .12); }
.one-img.is-loading::after { background: var(--text, #F3F3F1); opacity: 0; animation: one-preloading .5s ease .3s infinite; }

/* ---------- 4. Product cards: back photo fades in on hover (no zoom) ---------- */
.card-media, ul.products li.product .mode-img-wrap { position: relative; overflow: hidden; }
.card-media img, ul.products li.product img { transform: none !important; }
.mode-hover-img { position: absolute !important; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: 0; pointer-events: none; margin: 0 !important; }
.card-media:hover .mode-hover-img, ul.products li.product a:hover .mode-hover-img { animation: one-fade-in .2s var(--one-ease) forwards; }
ul.products li.product .mode-img-wrap { display: block; aspect-ratio: 4 / 5; background: var(--img-bg, #1A1A1A); margin-bottom: 6px; }
ul.products li.product .mode-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
@media (hover: none) { .mode-hover-img { display: none; } }

/* ---------- 5. Navigation underline grows from the left ---------- */
.main-nav a { position: relative; border-bottom: 0 !important; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 6px;
  border-bottom: 2px solid currentColor; transition: right .5s;
}
.main-nav a:hover::after, .main-nav .current-menu-item > a::after { right: 0; }

/* ---------- 6. Menus and cart drawer: items cascade up ---------- */
@keyframes one-appear { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
.main-nav.is-open .one-appear,
.drawer.is-open .one-appear { animation: one-appear 1s var(--one-appear) var(--one-t, .1s) both; }

/* ---------- 7. Product page: main photo fades when it changes ---------- */
.woocommerce-product-gallery__image img { transition: opacity .35s ease; }
.woocommerce-product-gallery.is-swapping .flex-active-slide img { opacity: .2; }

/* ---------- Reduced motion: turn everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .one-js .film__video, .one-js .film__cta .btn, .one-js .one-rise, .one-js .one-after,
  .one-img > img, img.one-img { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .one-img.is-loading::before, .one-img.is-loading::after { display: none; }
  .btn--shine::after { display: none; }
  .main-nav a::after { transition: none; }
  .main-nav.is-open .one-appear, .drawer.is-open .one-appear { animation: none !important; }
}