/* Styles for static-animations.js + smooth-scroll.js (offline animation layer) */

/* Cover only for hero / main-view fill images — not product cards or UI icons */
[class*="MainView_container"] img[data-nimg="fill"],
[class*="SubPageTitle_hero"] img[data-nimg="fill"],
[class*="MaskImage_container"] img[data-nimg="fill"],
[class*="HeroBg"] img[data-nimg="fill"] {
  object-fit: cover !important;
}

/* Product cards: keep Next.js contain for bottle photos; plus SVG must not crop */
[class*="ProductCard_container"] img[data-nimg="fill"],
[class*="ProductCard_container"] [class*="ProductCard_plus"] {
  object-fit: contain !important;
}

/* Product detail gallery */
[class*="ProductDetail_imageContainer"] img[data-nimg="fill"],
[class*="ProductDetail_imageArea"] img[data-nimg="fill"] {
  object-fit: contain !important;
}

[class*="MainView_container"],
[class*="SubPageTitle_hero"],
[class*="MaskImage_container"],
[class*="HeroBg"] {
  overflow: hidden;
}

[class*="SubPageTitle_hero"] {
  background-color: #010202;
}

[class*="SubPageTitle_hero"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 2, 2, 0.15) 0%, rgba(1, 2, 2, 0.55) 100%);
  opacity: calc(var(--static-hero-progress, 0) * 0.85);
  transition: opacity 0.15s linear;
}

[class*="SubPageTitle_hero"] > div:last-child {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  img[data-nimg="fill"].static-hero-animate {
    transform: scale(1.05);
    animation: static-hero-zoom 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    will-change: transform;
  }
}

@keyframes static-hero-zoom {
  to {
    transform: scale(1);
  }
}

@keyframes static-page-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

:root {
  --pageTransitionVisibility: visible;
}

.js_split_chars:not(.static-char-visible) {
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  filter: blur(4px) !important;
}

.js_split_chars {
  will-change: opacity, transform, filter;
}

.js_split_chars.static-char-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: blur(0) !important;
  transition:
    opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1.2s cubic-bezier(0.33, 1, 0.68, 1),
    filter 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js_split_chars:not(.static-char-visible),
  .js_split_chars.static-char-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none;
  }
}

.static-fade-target {
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  filter: blur(12px);
  transition:
    opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1.2s cubic-bezier(0.33, 1, 0.68, 1),
    filter 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform, filter;
}

.static-fade-target.static-fade-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .static-fade-target {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

[class*="SubPageTitle_buttonContainer"] .static-fade-target:nth-child(1) {
  transition-delay: 0ms;
}
[class*="SubPageTitle_buttonContainer"] .static-fade-target:nth-child(2) {
  transition-delay: 80ms;
}
[class*="SubPageTitle_buttonContainer"] .static-fade-target:nth-child(3) {
  transition-delay: 160ms;
}
[class*="page_list"] .static-fade-target:nth-child(n),
[class*="_ShopList_areaBlock"] .static-fade-target:nth-child(n) {
  transition-delay: calc(var(--static-fade-index, 0) * 80ms);
}

[class*="SubPageTitle_content"] {
  transition:
    opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: calc(1 - var(--static-hero-progress, 0));
  transform: translate3d(0, calc(var(--static-hero-progress, 0) * -16px), 0);
}

[class*="SubPageTitle_buttonContainer"] .js_button,
[class*="SubPageTitle_buttonContainer"] [class*="SubPageTitle_button"] {
  will-change: opacity, transform;
}

[class*="MainView_container"] img[data-nimg="fill"] {
  transition: opacity 0.05s linear;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, scale;
}

[class*="MainView_container"] [style*="--scale0"] {
  background-color: #010202;
  isolation: isolate;
  transform: translateZ(0);
}

[class*="MainView_container"] img[data-static-product-layer] {
  transform-origin: center center;
  pointer-events: none;
}

[class*="MainView_container"] img.static-mainview-product-active {
  filter: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

[class*="MainView_container"] img.static-mainview-product-behind {
  transform-origin: center center;
}

[class*="Lineup_wrapper"] .js_front,
[class*="Lineup_wrapper"] .js_back,
[class*="Lineup_wrapper"] .js_third {
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  [class*="MainView_container"] .static-mainview-zoom {
    transform: scale(1.05);
    animation: static-mainview-enter 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    will-change: transform;
  }

  [class*="MainView_container"] .static-mainview-scale {
    will-change: transform;
  }
}

@keyframes static-mainview-enter {
  to {
    transform: scale(1);
  }
}

html.menu-open [class*="Hamburger_menuWrapper"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

html.menu-open [class*="Hamburger_menuWrapper"] [class*="navigation_link"] {
  animation: static-menu-link-in 0.6s cubic-bezier(0.33, 1, 0.68, 1) both;
}

html.menu-open [class*="Hamburger_menuWrapper"] [class*="navigation_link"]:nth-child(1) {
  animation-delay: 0.05s;
}
html.menu-open [class*="Hamburger_menuWrapper"] [class*="navigation_link"]:nth-child(2) {
  animation-delay: 0.1s;
}
html.menu-open [class*="Hamburger_menuWrapper"] [class*="navigation_link"]:nth-child(3) {
  animation-delay: 0.15s;
}
html.menu-open [class*="Hamburger_menuWrapper"] [class*="navigation_link"]:nth-child(4) {
  animation-delay: 0.2s;
}
html.menu-open [class*="Hamburger_menuWrapper"] [class*="navigation_link"]:nth-child(5) {
  animation-delay: 0.25s;
}

@keyframes static-menu-link-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.static-page-ready) body,
  html.static-page-ready body {
    opacity: 1;
    animation: none;
  }

  [class*="SubPageTitle_content"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

[class*="ProductCard_container"] [class*="ProductCard_image"] {
  transition:
    transform 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    scale 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

[class*="ProductCard_container"] [class*="ProductCard_plus"] {
  z-index: 2;
  transition:
    transform 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) {
  [class*="ProductCard_container"]:hover [class*="ProductCard_image"],
  [class*="ProductCard_container"].static-product-card-hover [class*="ProductCard_image"] {
    transform: scale(0.96);
  }

  [class*="ProductCard_container"]:hover [class*="ProductCard_plus"],
  [class*="ProductCard_container"].static-product-card-hover [class*="ProductCard_plus"] {
    transform: translate3d(-12px, 0, 0);
    opacity: 1;
  }
}

[class*="ProductCard_static-disabled"] {
  cursor: default;
  text-decoration: none;
  color: inherit;
}