/* ==========================================================================
   home-polish.css
   Interaction and motion layer for the homepage. Loaded after
   site-fixes.css, on index.html only. Every rule here changes how something
   moves, responds or lines up - none of it changes the shop's colours, type
   or layout. Behaviour that needs script lives in assets/js/home-polish.js.

   The built-in CSS curves are too weak to feel intentional, so everything
   below uses one of these three.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entering, responding */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* moving on screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-style sheet */
}

/* --------------------------------------------------------------------------
   1. Name the properties that transition
   The platform wrote `transition: .3s` / `.5s` / `.6s`, which animates every
   property that changes, for up to twice as long as UI motion should take.
   Hover colour changes get a short plain ease.
   -------------------------------------------------------------------------- */
.top_header ul li a,
footer a,
footer a:visited,
.mega_menu > li > a,
.mega_menu > li > ul > li > a {
  transition: color 150ms ease;
}

input,
textarea {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* --------------------------------------------------------------------------
   2. Press feedback
   Nothing on the page acknowledged a tap or click. A 3% scale on :active
   tells the user the button heard them; round icon buttons take 5%. The
   grey tap flash is replaced by the press itself.
   -------------------------------------------------------------------------- */
.btn,
.fixed-navbar.navbar-header button,
.footer_fixed_sidebar .tran3s {
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
              box-shadow 200ms ease, opacity 200ms ease, transform 160ms var(--ease-out);
}

.btn:active,
.fixed-navbar.navbar-header button:active {
  transform: scale(0.97);
}

.footer_fixed_sidebar .tran3s:active {
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   3. Product photos
   Hovering zoomed the photo to 125% over half a second, and on phones the
   zoom stuck after a tap because :hover wasn't limited to real pointers.
   Now: 4%, 300ms, mouse and trackpad only.
   -------------------------------------------------------------------------- */
.featured-product .default-item .single-item .image-box a {
  transition: transform 300ms var(--ease-out);
}

.featured-product .default-item .single-item .image-box a:hover {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .featured-product .default-item .single-item .image-box a:hover {
    transform: scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   4. 全部類別 dropdown (desktop)
   It snapped into place. It now settles 4px down from its trigger as it
   fades in; the series flyouts settle in from the left. Closing stays
   instant. The platform positions these menus with `transform`, so the
   motion uses the separate `translate` property, which adds to that
   positioning instead of replacing it.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #customMenu .navbar-nav > li > .dropdown-menu {
    transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out);
  }

  #customMenu .navbar-nav .dropdown-menu li > ul {
    transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out);
  }

  @starting-style {
    #customMenu .navbar-nav > li > .dropdown-menu {
      opacity: 0;
      translate: 0 -4px;
    }

    #customMenu .navbar-nav .dropdown-menu li > ul {
      opacity: 0;
      translate: -4px 0;
    }
  }
}

/* --------------------------------------------------------------------------
   5. Menu drawer (992px and below)
   It slid by animating `left`, a layout property, for 500ms on the default
   ease. It now moves on the GPU with an iOS-style sheet curve: 420ms in,
   260ms out. Closed, it leaves the tab order instead of sitting off-screen
   where keyboard focus could still reach it.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  #homeCustomMenu.main-menu {
    left: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
  }

  #homeCustomMenu.main-menu.active {
    transform: none;
    visibility: visible;
    transition: transform 420ms var(--ease-drawer), visibility 0s;
  }

  /* The dimmer fades instead of blinking on and off */
  .nav-overlay {
    opacity: 0;
    transition: opacity 200ms ease, display 200ms allow-discrete;
  }

  .nav-overlay.in {
    opacity: 1;
    transition: opacity 280ms var(--ease-out), display 280ms allow-discrete;
  }

  @starting-style {
    .nav-overlay.in {
      opacity: 0;
    }
  }
}

/* From 993 to 1199px the full menu bar is already on screen, yet the drawer
   button still floated over the page and did nothing when tapped. */
@media (min-width: 993px) {
  .fixed-navbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. Back to top
   It showed at the very top of the page, where it can't do anything, and
   ran a 1.5s jQuery tween that fought any scroll made during it. It now
   appears after most of a screen of scrolling, growing in from 90%, and
   sits above the button stack so the cart and LINE buttons never shift.
   -------------------------------------------------------------------------- */
.footer_fixed_sidebar .icon_s_scrolltop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
}

.footer_fixed_sidebar .scroll-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.9);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
              box-shadow 200ms ease, visibility 0s linear 200ms;
}

.footer_fixed_sidebar .scroll-top.is-visible {
  opacity: 0.88;
  visibility: visible;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
              box-shadow 200ms ease, visibility 0s;
}

.footer_fixed_sidebar .scroll-top.is-visible:active {
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   7. Dialogs
   Bootstrap 3 dropped dialogs in from a quarter of their height above. They
   now grow from 96% at the centre - nothing appears from nothing - on a
   curve that front-loads the movement. Both durations stay inside
   Bootstrap's own timers (300ms dialog, 150ms backdrop).
   -------------------------------------------------------------------------- */
.modal.fade .modal-dialog {
  transform: scale(0.96);
  transition: transform 220ms var(--ease-out);
}

.modal.in .modal-dialog {
  transform: none;
}

.modal.fade,
.modal-backdrop.fade {
  transition: opacity 150ms ease-out;
}

/* --------------------------------------------------------------------------
   8. Announcement ticker (今日優惠 / 免運門檻 / 會員優惠)
   The old script scrolled 20px of each 30px line one pixel at a time on a
   25ms timer, then snapped the last 10px. It now slides exactly one line on
   the GPU and waits while hovered, focused or in a background tab.
   -------------------------------------------------------------------------- */
#marquee {
  transition: opacity 180ms ease;
}

#marquee > .item {
  transition: none;
}

#marquee.is-sliding > .item {
  transform: translateY(-100%);
  transition: transform 450ms var(--ease-in-out);
}

#marquee.is-swapping {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   9. The long story banner
   Six full-width images cut from one tall design were stacked with 6px
   white seams (each sat on a text baseline), and the middle four were inset
   5px a side from the hero and the reviews image. They now meet edge to
   edge. Lazy-loaded ones fade in instead of popping, into space the markup
   now reserves with width and height.
   -------------------------------------------------------------------------- */
.cutom_page_image1 {
  vertical-align: top;
}

.axo-row > [class*="col-"]:has(> .cutom_page_image1) {
  padding-left: 0;
  padding-right: 0;
}

.cutom_page_image1 img {
  transition: opacity 300ms var(--ease-out);
}

.cutom_page_image1 img.is-pending {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   10. Mobile header (767px and below)
   The shop's own customstyle.css asks for a floating, 84%-wide, rounded,
   translucent bar. It rendered as a square dark block sitting off-centre
   (6% left, 10% right) with the text faded to 88% along with the
   background. This makes it render as designed: centred, clipped to the
   pill, translucent behind the text rather than through it.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  header {
    left: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    opacity: 1;
    background-color: transparent;
  }

  header .top_header {
    padding-top: 5px;       /* was 6px / 4px, which sat the row 1px low */
    padding-bottom: 5px;
    background-color: rgba(38, 50, 56, 0.88);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}

/* site-fixes.css makes these links 44px tall for thumbs, but the platform
   keeps them inline-block, so the number and icons sat at the top of the
   bar with empty space under them. Centre them in the height they now have. */
@media (max-width: 991px) {
  header .top_header .header_left ul li {
    display: flex;
    align-items: center;
  }

  header .top_header .header_left ul li > a {
    display: inline-flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   site-fixes.css cuts every transition to zero for these visitors. Reduced
   motion means fewer and gentler, not none: the movement goes, the fades
   come back, and the drawer fades in place instead of sliding.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .featured-product .default-item .single-item .image-box a:hover,
  .btn:active,
  .fixed-navbar.navbar-header button:active,
  .footer_fixed_sidebar .tran3s:active,
  .footer_fixed_sidebar .scroll-top,
  .modal.fade .modal-dialog,
  #marquee.is-sliding > .item {
    transform: none !important;
  }

  #customMenu .navbar-nav > li > .dropdown-menu,
  #customMenu .navbar-nav .dropdown-menu li > ul {
    transition: opacity 150ms ease !important;
  }

  .footer_fixed_sidebar .scroll-top,
  .footer_fixed_sidebar .scroll-top.is-visible,
  .cutom_page_image1 img,
  #marquee {
    transition-duration: 200ms !important;
  }

  .modal.fade,
  .modal-backdrop.fade {
    transition-duration: 150ms !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 992px) {
  #homeCustomMenu.main-menu {
    transform: none;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms !important;
  }

  #homeCustomMenu.main-menu.active {
    opacity: 1;
    transition: opacity 200ms ease, visibility 0s !important;
  }

  .nav-overlay,
  .nav-overlay.in {
    transition-duration: 200ms !important;
  }
}