/* ================================================================
   Vastra Vision — press and motion
   Loaded after each page stylesheet so this wins the cascade.
   Still pages. Buttons that answer the hand.
   ================================================================ */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* A single entrance for the opening copy, using the existing brand typography. */
.hero-left > *,
.about-hero > *,
.contact-hero > * {
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.hero-title { transition-delay: 50ms; }
.hero-desc { transition-delay: 100ms; }
.hero-ctas { transition-delay: 150ms; }
@starting-style {
  .hero-left > *,
  .about-hero > *,
  .contact-hero > * { opacity: 0; transform: translateY(10px); }
}

/* Thin visual indicators retain a comfortable 44px hit area. */
.hero-dots,
.slider-dots { gap: 0; align-items: center; }
.hero-dots { bottom: 0.65rem; }
.slider-dots { bottom: 0.75rem; }
.hero-dot,
.slider-dot {
  position: relative; width: 44px; height: 44px; background: transparent; flex: none;
  transition: none;
}
.hero-dot.active,
.slider-dot.active,
.hero-dot:hover,
.slider-dot:hover { width: 44px; background: transparent; }
.hero-dot::after,
.slider-dot::after {
  content: ''; position: absolute; width: 28px; height: 2px; left: 8px; top: 21px;
  background: rgba(245, 232, 208, 0.5);
  transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.hero-dot.active::after,
.slider-dot.active::after { background: var(--gold-light); transform: scaleY(2); }
.carousel-toggle {
  position: absolute; right: 1rem; bottom: 0.75rem; z-index: 4;
  width: 44px; height: 44px; padding: 11px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  color: #F5E8D0; background: rgba(26, 22, 18, 0.55);
  border: 1px solid rgba(245, 232, 208, 0.45);
  transition: background-color 180ms var(--ease-out);
}
.carousel-toggle[hidden] { display: none; }
.carousel-toggle svg { width: 20px; height: 20px; }
.carousel-toggle .play-icon,
.carousel-toggle[data-paused="true"] .pause-icon { display: none; }
.carousel-toggle[data-paused="true"] .play-icon { display: block; }
.hero > .carousel-toggle { right: var(--gutter-x); bottom: 0.65rem; }
.hero-arrow { top: auto; bottom: 0.65rem; transform: none; }
.hero-arrow.prev { left: auto; right: calc(var(--gutter-x) + 100px); }
.hero-arrow.next { right: calc(var(--gutter-x) + 50px); }
.hero .hero-dot:focus-visible,
.hero-arrow:focus-visible,
.slider-dot:focus-visible,
.carousel-toggle:focus-visible { outline-color: var(--gold-light); }
@media (max-width: 700px) {
  .hero-dots { left: var(--gutter-x); transform: none; bottom: 0.65rem; }
  .slider-dots { left: 0.5rem; transform: none; }
}

/* Pressable controls. Transform and paint only — never `all`. */
:is(
  .btn-primary,
  .btn-danger,
  .btn-ghost,
  .btn-meet-designer,
  .btn-style,
  .hero-cta-btn,
  .insta-follow,
  .add-btn,
  .add-cart-btn,
  .buy-now-btn,
  .qv-add-btn,
  .wl-add,
  .cart-btn,
  .nav-search-btn,
  .nav-burger,
  .search-close,
  .qv-close,
  .filter-pill,
  .acct-chip,
  .pick-size,
  .pick-swatch,
  .qv-pick,
  .qv-swatch,
  .qty-btn,
  .share-btn,
  .remove-btn,
  .shop-tools .reset
),
.qty-control button,
.nl-form button,
.contact-card a.btn-style,
.hero-left .btn-primary,
nav.acct-nav .cart-btn,
nav.legal-nav .cart-btn {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 140ms var(--ease-out),
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    opacity 180ms var(--ease-out);
}

.btn-ghost::after,
.btn-ghost.back::before {
  transition: transform 160ms var(--ease-out);
}

/* Quick view and search are occasional. Ease-out so they start immediately. */
.qv-overlay,
.search-overlay {
  transition: opacity 200ms var(--ease-out);
}
.qv-modal,
.search-panel {
  transition: transform 220ms var(--ease-out);
}

/* Lifts on hover fight the press and make the grid feel nervous.
   Colour and shadow changes from the page stay. The card stays put. */
@media (hover: hover) and (pointer: fine) {
  .category-card:hover img { transform: scale(1.035); }
  .category-card:hover .cat-arrow { opacity: 1; transform: translateX(0); }
  .carousel-toggle:hover { background: rgba(26, 22, 18, 0.85); }
  .btn-primary:hover,
  .btn-danger:hover,
  .btn-ghost:hover,
  .add-btn:hover,
  .add-cart-btn:hover,
  .buy-now-btn:hover,
  .qv-add-btn:hover,
  .wl-add:hover,
  .cart-btn:hover,
  .hero-cta-btn:hover,
  .btn-meet-designer:hover,
  .insta-follow:hover,
  .nav-search-btn:hover,
  .product-card:hover,
  .why-card:hover,
  .value-card:hover,
  .trust-card2:hover,
  .exp-card:hover,
  .contact-card:hover,
  .rel-card:hover,
  a.acct-stat:hover,
  .wl-card .wl-x:hover {
    transform: none;
  }

  .product-img-bg {
    transition: transform 420ms var(--ease-out);
  }
  .product-card:hover .product-img-bg {
    transform: scale(1.03);
  }
}

@media (hover: none), (pointer: coarse) {
  .btn-primary:hover,
  .btn-danger:hover,
  .btn-ghost:hover,
  .add-btn:hover,
  .add-cart-btn:hover,
  .buy-now-btn:hover,
  .qv-add-btn:hover,
  .wl-add:hover,
  .cart-btn:hover,
  .hero-cta-btn:hover,
  .btn-meet-designer:hover,
  .insta-follow:hover,
  .nav-search-btn:hover,
  .product-card:hover,
  .why-card:hover,
  .value-card:hover,
  .trust-card2:hover,
  .exp-card:hover,
  .contact-card:hover,
  .rel-card:hover,
  a.acct-stat:hover,
  .wl-card .wl-x:hover,
  .product-card:hover .product-img-bg {
    transform: none;
  }
}

/* Press. Comes after the hover rules so scale wins while the finger is down. */
:is(
  .btn-primary,
  .btn-danger,
  .btn-ghost,
  .btn-meet-designer,
  .btn-style,
  .hero-cta-btn,
  .insta-follow,
  .add-btn,
  .add-cart-btn,
  .buy-now-btn,
  .qv-add-btn,
  .wl-add,
  .cart-btn,
  .nav-search-btn,
  .nav-burger,
  .search-close,
  .qv-close,
  .filter-pill,
  .acct-chip,
  .pick-size,
  .pick-swatch,
  .qv-pick,
  .qv-swatch,
  .qty-btn,
  .share-btn,
  .remove-btn,
  .shop-tools .reset
):active:not(:disabled),
.qty-control button:active:not(:disabled),
.nl-form button:active:not(:disabled),
.contact-card a.btn-style:active,
.wl-card .wl-x:active {
  transform: scale(0.97);
}

:is(
  .btn-primary,
  .btn-danger,
  .add-btn,
  .add-cart-btn,
  .buy-now-btn,
  .qv-add-btn,
  .wl-add
):disabled {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up.vv-reveal:not(.visible) { opacity: 1; transform: none; }
  .hero-left > *, .about-hero > *, .contact-hero > *,
  .fade-up.vv-reveal { transition: none; }
  .category-card:hover img,
  .collections-slide.active img { transform: none; }

  :is(
    .btn-primary,
    .btn-danger,
    .btn-ghost,
    .btn-meet-designer,
    .btn-style,
    .hero-cta-btn,
    .insta-follow,
    .add-btn,
    .add-cart-btn,
    .buy-now-btn,
    .qv-add-btn,
    .wl-add,
    .cart-btn,
    .nav-search-btn,
    .nav-burger,
    .search-close,
    .qv-close,
    .filter-pill,
    .acct-chip,
    .pick-size,
    .pick-swatch,
    .qv-pick,
    .qv-swatch,
    .qty-btn,
    .share-btn,
    .remove-btn,
    .shop-tools .reset
  ):active:not(:disabled),
  .qty-control button:active:not(:disabled),
  .nl-form button:active:not(:disabled),
  .contact-card a.btn-style:active,
  .wl-card .wl-x:active,
  .product-card:hover .product-img-bg,
  .btn-ghost:hover::after,
  .btn-ghost.back:hover::before {
    transform: none;
  }
}