/* Girl animation */
.honmono-girl-animation {
  position: fixed !important;

  top: 18px;
  right: -8px;

  width: 275px;
  height: 355px;

  z-index: 2147483000 !important;

  opacity: 0;
  visibility: hidden;

  pointer-events: none !important;
  overflow: hidden;

  transform:
    translate3d(14px, 6px, 0)
    scale(.92);

  transform-origin: top right;

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .55s cubic-bezier(.22, 1, .36, 1);

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, .95) 74%,
      rgba(0, 0, 0, .68) 82%,
      rgba(0, 0, 0, .32) 90%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, .95) 74%,
      rgba(0, 0, 0, .68) 82%,
      rgba(0, 0, 0, .32) 90%,
      transparent 100%
    );
}

.honmono-girl-animation.is-visible {
  opacity: 0;
  visibility: hidden;

  transform:
    translate3d(14px, 6px, 0)
    scale(.92);
}

html.honmono-girl-stage-visible
.honmono-girl-animation.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}

.honmono-girl-animation-image {
  position: absolute !important;

  top: -2% !important;
  left: 50% !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;

  transform:
    translateX(-50%)
    scale(1.38)
    translateZ(0);

  transform-origin: top center;

  border: 0 !important;

  pointer-events: none !important;
  user-select: none !important;

  backface-visibility: hidden;
}

/* Girl mobile */
@media (max-width: 849px) {
  .honmono-girl-animation {
    position: fixed !important;

    top: 58px;
    right: -8px;

    width: 225px;
    height: 310px;

    z-index: 2147483000 !important;
  }

  .honmono-girl-animation-image {
    top: -1% !important;

    transform:
      translateX(-50%)
      scale(1.38)
      translateZ(0);
  }

  .honmono-girl-animation.is-visible {
    opacity: 0;
    visibility: hidden;
  }

  html.honmono-girl-stage-visible
  .honmono-girl-animation.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

/* Nav showcase */
@media (min-width: 850px) {
  #header .header-nav-main > li:not(.nav-icon) {
    transition:
      opacity .28s ease,
      transform .35s cubic-bezier(.22, 1, .36, 1),
      filter .28s ease !important;

    will-change:
      opacity,
      transform,
      filter;
  }

  html.honmono-nav-showcase
  #header
  .header-nav-main
  > li:not(.nav-icon) {
    opacity: 0 !important;

    transform:
      translate3d(14px, 0, 0) !important;

    filter:
      blur(3px) !important;

    pointer-events: none !important;
  }
}

/* GTranslate desktop */
@media (min-width: 850px) {
  #header .gtranslate_wrapper,
  #header [id^="gt-wrapper-"],
  #header li.html.custom_html_topbar_left {
    transition:
      opacity .25s ease,
      transform .32s cubic-bezier(.22, 1, .36, 1),
      filter .25s ease !important;

    will-change:
      opacity,
      transform,
      filter;
  }

  html.honmono-nav-showcase
  #header
  .gtranslate_wrapper,
  html.honmono-nav-showcase
  #header
  [id^="gt-wrapper-"],
  html.honmono-nav-showcase
  #header
  li.html.custom_html_topbar_left {
    opacity: 0 !important;

    transform:
      translate3d(12px, 0, 0) !important;

    filter:
      blur(3px) !important;

    pointer-events: none !important;
  }
}

/* Flatsome nav icon desktop */
@media (min-width: 850px) {
  #header .nav-icon > a,
  #header a[data-open="#main-menu"] {
    position: relative !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    background: transparent !important;
  }

  #header .nav-icon > a > i.icon-menu,
  #header a[data-open="#main-menu"] > i.icon-menu {
    display: inline-block !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter: blur(0);

    transform:
      translate3d(0, 0, 0)
      scale(1);

    transition:
      opacity .28s ease,
      transform .4s cubic-bezier(.22, 1, .36, 1),
      filter .28s ease !important;

    will-change:
      opacity,
      transform,
      filter;
  }

  html.honmono-nav-showcase
  #header
  .nav-icon
  > a
  > i.icon-menu,
  html.honmono-nav-showcase
  #header
  a[data-open="#main-menu"]
  > i.icon-menu {
    opacity: 0 !important;

    filter:
      blur(4px) !important;

    transform:
      translate3d(10px, 0, 0)
      scale(.55)
      rotate(8deg) !important;

    pointer-events: none !important;
  }
}

/* Mobile showcase */
@media (max-width: 849px) {
  #header .gtranslate_wrapper,
  #header [id^="gt-wrapper-"],
  #header li.html.custom_html_topbar_left {
    transition:
      opacity .25s ease,
      transform .32s cubic-bezier(.22, 1, .36, 1),
      filter .25s ease !important;
  }

  html.honmono-nav-showcase
  #header
  .gtranslate_wrapper,
  html.honmono-nav-showcase
  #header
  [id^="gt-wrapper-"],
  html.honmono-nav-showcase
  #header
  li.html.custom_html_topbar_left {
    opacity: 0 !important;
    visibility: hidden !important;

    transform:
      translate3d(-8px, 0, 0) !important;

    filter: blur(3px) !important;

    pointer-events: none !important;
  }

  #header .nav-icon > a,
  #header a[data-open="#main-menu"] {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;

    touch-action: manipulation;
  }

  #header .nav-icon > a > i.icon-menu,
  #header a[data-open="#main-menu"] > i.icon-menu {
    opacity: 1;
    visibility: visible;

    transition:
      opacity .25s ease,
      transform .35s cubic-bezier(.22, 1, .36, 1),
      filter .25s ease !important;
  }

  html.honmono-nav-showcase
  #header
  .nav-icon
  > a
  > i.icon-menu,
  html.honmono-nav-showcase
  #header
  a[data-open="#main-menu"]
  > i.icon-menu {
    opacity: 0 !important;
    visibility: hidden !important;

    filter: blur(3px) !important;

    transform:
      scale(.6)
      rotate(8deg) !important;
  }
}

/* Sakura layer */
.honmono-sakura-hover-layer {
  position: fixed !important;

  top: 20px;
  right: 0;

  width: 360px;
  height: 430px;

  z-index: 2147482999 !important;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  overflow: visible;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

html.honmono-nav-showcase
.honmono-sakura-hover-layer {
  opacity: 1;
  visibility: visible;
}

/* Sakura petals */
.honmono-sakura-petal {
  position: absolute;

  top: 52px;
  right: 42px;

  width: 16px;
  height: 12px;

  opacity: 0;

  background:
    radial-gradient(
      ellipse at 30% 35%,
      #fff9f6 0%,
      #ffdce0 36%,
      #f5a5af 70%,
      #e67585 100%
    );

  border-radius:
    78% 20% 72% 28%;

  transform:
    translate3d(0, 0, 0)
    rotate(0deg)
    scale(.3);

  transform-origin: center;

  box-shadow:
    0 1px 2px rgba(80, 20, 25, .12);

  will-change:
    transform,
    opacity;
}

html.honmono-nav-showcase
.honmono-sakura-petal {
  animation:
    honmonoPetalFly 1.35s
    cubic-bezier(.18, .7, .32, 1)
    infinite;
}

.honmono-sakura-petal:nth-child(1) {
  --x: -45px;
  --y: 45px;
  --r: 120deg;

  animation-delay: 0s !important;
}

.honmono-sakura-petal:nth-child(2) {
  --x: -95px;
  --y: 75px;
  --r: 220deg;

  animation-delay: .08s !important;
}

.honmono-sakura-petal:nth-child(3) {
  --x: -145px;
  --y: 105px;
  --r: 310deg;

  animation-delay: .15s !important;
}

.honmono-sakura-petal:nth-child(4) {
  --x: -70px;
  --y: 140px;
  --r: 180deg;

  animation-delay: .22s !important;
}

.honmono-sakura-petal:nth-child(5) {
  --x: -185px;
  --y: 165px;
  --r: 400deg;

  animation-delay: .3s !important;
}

.honmono-sakura-petal:nth-child(6) {
  --x: -115px;
  --y: 210px;
  --r: 270deg;

  animation-delay: .38s !important;
}

.honmono-sakura-petal:nth-child(7) {
  --x: -225px;
  --y: 235px;
  --r: 520deg;

  animation-delay: .46s !important;
}

.honmono-sakura-petal:nth-child(8) {
  --x: -55px;
  --y: 270px;
  --r: 310deg;

  animation-delay: .54s !important;
}

.honmono-sakura-petal:nth-child(9) {
  --x: -170px;
  --y: 290px;
  --r: 440deg;

  animation-delay: .62s !important;
}

.honmono-sakura-petal:nth-child(10) {
  --x: -275px;
  --y: 180px;
  --r: 570deg;

  animation-delay: .7s !important;
}

.honmono-sakura-petal:nth-child(11) {
  --x: -95px;
  --y: 325px;
  --r: 360deg;

  animation-delay: .78s !important;
}

.honmono-sakura-petal:nth-child(12) {
  --x: -245px;
  --y: 315px;
  --r: 600deg;

  animation-delay: .86s !important;
}

.honmono-sakura-petal:nth-child(13) {
  --x: -310px;
  --y: 125px;
  --r: 470deg;

  animation-delay: .94s !important;
}

.honmono-sakura-petal:nth-child(14) {
  --x: -205px;
  --y: 360px;
  --r: 680deg;

  animation-delay: 1.02s !important;
}

@keyframes honmonoPetalFly {
  0% {
    opacity: 0;

    transform:
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(.25);
  }

  12% {
    opacity: .5;
  }

  24% {
    opacity: 1;
  }

  68% {
    opacity: .88;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--x),
        var(--y),
        0
      )
      rotate(var(--r))
      scale(1);
  }
}

/* Sakura mobile */
@media (max-width: 849px) {
  .honmono-sakura-hover-layer {
    position: fixed !important;

    top: 40px;
    right: -5px;

    width: 270px;
    height: 340px;

    z-index: 2147482999 !important;
  }
}

/* Showcase ending */
html.honmono-nav-showcase-ending
.honmono-sakura-hover-layer {
  opacity: 0;
  visibility: hidden;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}

html.honmono-nav-showcase-ending
#header
.header-nav-main
> li:not(.nav-icon),
html.honmono-nav-showcase-ending
#header
.gtranslate_wrapper,
html.honmono-nav-showcase-ending
#header
[id^="gt-wrapper-"] {
  transition:
    opacity .28s ease,
    transform .35s cubic-bezier(.22, 1, .36, 1),
    filter .28s ease !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .honmono-girl-animation,
  #header .header-nav-main > li,
  #header .gtranslate_wrapper,
  #header [id^="gt-wrapper-"],
  #header i.icon-menu {
    transition: none !important;
  }

  .honmono-sakura-petal {
    animation: none !important;
  }
}

/* Mobile header item spacing */
@media (max-width: 849px) {
  #header li.html.custom_html_topbar_left {
    margin-left: 16px !important;
    margin-right: 0 !important;
    padding: 0 !important;

    width: auto !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #header li.html.custom_html_topbar_left .gtranslate_wrapper,
  #header li.html.custom_html_topbar_left [id^="gt-wrapper-"] {
    display: flex !important;
    align-items: center !important;

    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #header li.html.custom_html_topbar_left .glink {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
  }

  #header .nav-icon {
    margin-right: 16px !important;
    margin-left: 0 !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header .nav-icon > a,
  #header a[data-open="#main-menu"] {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile: giữ ở mọi section để chạy showcase */
@media (max-width: 849px) {
  #main,
  #main .section,
  #main .row,
  #main .col,
  #main .col-inner,
  #main .banner,
  #main .banner-bg,
  #main .banner-layers,
  #main .text,
  #main p,
  #main h1,
  #main h2,
  #main h3,
  #main h4,
  #main h5,
  #main h6,
  #main img {
    -webkit-touch-callout: none;
  }

  #main a,
  #main button,
  #main input,
  #main textarea,
  #main select,
  #main label {
    -webkit-touch-callout: default;
  }
}