/**
 * CLASSIC Flagship Store — Motion & Interaction Architecture
 * Phase 6: Flagship Art Direction
 *
 * Core Principles:
 * 1. Progressive Enhancement First: Content is NEVER hidden if JS is disabled.
 * 2. Restrained Luxury: Controlled, fluid, physical motion; no gaming UI, no AI slop.
 * 3. Strict Boundary: Cinematic editorial motion on storefront; fast microinteractions (<200ms) on staff operations.
 * 4. Comprehensive Accessibility: Full prefers-reduced-motion and touch safeguards.
 */

:root {
  /* ── CLASSIC Motion Curves ── */
  --classic-ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --classic-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --classic-ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --classic-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── CLASSIC Duration Tokens ── */
  --classic-dur-micro: 120ms;
  --classic-dur-fast: 160ms;
  --classic-dur-standard: 280ms;
  --classic-dur-editorial: 640ms;
  --classic-dur-hero: 820ms;
}

/* ══════════════════════════════════════════════════════════
   1. PROGRESSIVE ENHANCEMENT ARCHITECTURE
   By default (without JS), every element is 100% visible and accessible.
   Animation classes ONLY arm when .classic-motion-ready is on <html>.
   ══════════════════════════════════════════════════════════ */
.classic-reveal-line,
.classic-reveal-fade,
.classic-reveal-image,
.classic-reveal-stagger > * {
  opacity: 1;
  transform: none;
}

html.classic-motion-ready .classic-reveal-line {
  overflow: hidden;
}

html.classic-motion-ready .classic-reveal-line > .line-inner {
  display: block;
  transform: translateY(105%);
  transition: transform var(--classic-dur-editorial) var(--classic-ease-editorial);
  will-change: transform;
}

html.classic-motion-ready .classic-reveal-line.is-revealed > .line-inner {
  transform: translateY(0);
}

html.classic-motion-ready .classic-reveal-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
              transform var(--classic-dur-standard) var(--classic-ease-editorial);
  will-change: opacity, transform;
}

html.classic-motion-ready .classic-reveal-fade.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
html.classic-motion-ready .classic-reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
              transform var(--classic-dur-standard) var(--classic-ease-editorial);
  will-change: opacity, transform;
}

html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0.04s; opacity: 1; transform: translateY(0); }
html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
html.classic-motion-ready .classic-reveal-stagger.is-revealed > *:nth-child(n+7) { transition-delay: 0.28s; opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   2. SIGNATURE #1: HERO LINE-MASK REVEAL & CONTROLLED DEPTH
   ══════════════════════════════════════════════════════════ */
.hero-headline-wrap {
  overflow: hidden;
  display: block;
}

.hero-ambient-layer {
  position: absolute;
  inset: -15px;
  pointer-events: none;
  transform: translate3d(var(--hero-ambient-x, 0px), var(--hero-ambient-y, 0px), 0);
  transition: transform 0.2s var(--classic-ease-out-quad);
  will-change: transform;
}

/* Subtle editorial headline morph between carousel slides */
.hero-headline.text-morphing {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
              transform var(--classic-dur-standard) var(--classic-ease-editorial);
}

.hero-subtext.text-morphing {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
              transform var(--classic-dur-standard) var(--classic-ease-editorial);
}

/* ══════════════════════════════════════════════════════════
   3. SIGNATURE #2: EDITORIAL COLLECTION TRANSITION
   ══════════════════════════════════════════════════════════ */
.section-head {
  position: relative;
  overflow: hidden;
}

.section-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--classic-border);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform var(--classic-dur-editorial) var(--classic-ease-editorial);
}

.editorial-band {
  will-change: transform, opacity;
}

.editorial-band::before {
  will-change: transform;
  transform: translate3d(var(--editorial-watermark-x, 0px), -50%, 0);
  transition: transform 0.15s var(--classic-ease-out-quad);
}

/* ══════════════════════════════════════════════════════════
   4. SIGNATURE #3: TACTILE PRODUCT CARD DISCOVERY
   Desktop pointer response capped at ~4–6px max offset.
   No 3D tilt, no rotation, no card bending.
   ══════════════════════════════════════════════════════════ */
.product-card {
  position: relative;
  transition: border-color var(--classic-dur-fast) ease,
              box-shadow var(--classic-dur-standard) var(--classic-ease-standard);
  will-change: transform;
}

.product-img-wrap {
  position: relative;
  overflow: hidden;
}

.product-img-wrap .product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1) translate3d(var(--card-pointer-x, 0px), var(--card-pointer-y, 0px), 0);
  transition: transform var(--classic-dur-editorial) var(--classic-ease-editorial),
              filter var(--classic-dur-standard) ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-img {
    transform: scale(1.028) translate3d(var(--card-pointer-x, 0px), var(--card-pointer-y, 0px), 0);
    filter: saturate(0.95);
  }

  .product-card:hover {
    border-color: var(--classic-walnut);
    box-shadow: 0 12px 32px rgba(26, 23, 20, 0.08);
  }
}

/* Size Chips: Crisp Tactile Feedback */
.card-size-chip {
  transition: background var(--classic-dur-micro) ease,
              color var(--classic-dur-micro) ease,
              border-color var(--classic-dur-micro) ease,
              transform var(--classic-dur-micro) var(--classic-ease-snappy);
}

.card-size-chip:active:not(:disabled) {
  transform: scale(0.94);
}

/* ══════════════════════════════════════════════════════════
   5. SIGNATURE #4: SPATIALLY CONNECTED CART
   Add-to-cart acknowledgement + badge pulse + drawer transition
   ══════════════════════════════════════════════════════════ */
@keyframes classicCartPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  65%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.cart-badge.is-pulsing,
.cart-count-badge.is-pulsing {
  animation: classicCartPulse 340ms var(--classic-ease-editorial) forwards;
}

/* Button click tactile state */
.add-to-cart-btn,
.pv-atc-btn,
.buy-now-btn {
  transition: transform var(--classic-dur-micro) var(--classic-ease-snappy),
              background var(--classic-dur-fast) ease,
              opacity var(--classic-dur-micro) ease;
  position: relative;
  overflow: hidden;
}

.add-to-cart-btn:active,
.pv-atc-btn:active,
.buy-now-btn:active {
  transform: scale(0.975);
}

/* Mobile Drawer & Modal Backdrop Transitions */
.drawer-overlay {
  transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
              backdrop-filter var(--classic-dur-standard) var(--classic-ease-standard);
  backdrop-filter: blur(0px);
}

.drawer-overlay.open {
  backdrop-filter: blur(4px);
}

.mobile-drawer {
  transition: transform var(--classic-dur-standard) var(--classic-ease-editorial);
  box-shadow: -8px 0 32px rgba(26, 23, 20, 0.16);
}

/* ══════════════════════════════════════════════════════════
   6. SIGNATURE #5: EDITORIAL PRODUCT DETAIL GALLERY
   High-quality image crossfade / mask reveal and thumbnail transition
   ══════════════════════════════════════════════════════════ */
.classic-gallery-stage {
  position: relative;
  overflow: hidden;
  background: var(--classic-surface);
  aspect-ratio: 3/4;
}

.classic-gallery-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
              transform var(--classic-dur-editorial) var(--classic-ease-editorial);
}

.classic-gallery-stage.is-swapping img {
  opacity: 0.35;
  transform: scale(0.99);
}

.modal-thumb-btn {
  transition: border-color var(--classic-dur-fast) ease,
              transform var(--classic-dur-fast) var(--classic-ease-snappy),
              opacity var(--classic-dur-fast) ease;
}

.modal-thumb-btn:hover {
  transform: translateY(-2px);
}

.modal-thumb-btn.active {
  border-color: var(--classic-ink) !important;
  box-shadow: 0 0 0 2px var(--classic-ink);
}

/* ══════════════════════════════════════════════════════════
   7. SUPPORTING TOP-LAYER ANIMATION WITH PROGRESSIVE FALLBACK
   Works natively with @starting-style where supported;
   degrades gracefully to instant display toggle if unsupported.
   ══════════════════════════════════════════════════════════ */
@supports (transition-behavior: allow-discrete) {
  .modal-overlay[open],
  .modal-overlay.open,
  .pv-backdrop.open {
    opacity: 1;
    transition: opacity var(--classic-dur-standard) var(--classic-ease-standard);
    transition-behavior: allow-discrete;

    @starting-style {
      opacity: 0;
    }
  }

  .modal-overlay[open] .modal-box,
  .modal-overlay.open .modal-box,
  .pv-backdrop.open .pv-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity var(--classic-dur-standard) var(--classic-ease-standard),
                transform var(--classic-dur-standard) var(--classic-ease-editorial);
    transition-behavior: allow-discrete;

    @starting-style {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
  }
}

/* ══════════════════════════════════════════════════════════
   8. SUPPORTING AUTH POLISH (Calm & Rock-Solid)
   Left brand panel reveals gently; right form is 100% static.
   Zero moving inputs, zero animation during typing.
   ══════════════════════════════════════════════════════════ */
.auth-brand {
  position: relative;
  overflow: hidden;
}

html.classic-motion-ready .auth-brand-image {
  transform: scale(1.02);
  transition: transform 1.2s var(--classic-ease-editorial);
}

/* Form inputs maintain absolute layout stability */
.auth-form-panel .form-control {
  transition: border-color var(--classic-dur-fast) ease,
              box-shadow var(--classic-dur-fast) ease;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════
   9. STAFF PORTALS MICROINTERACTIONS (< 200ms)
   Strictly FAST, LOW-DISTRACTION. Zero scroll parallax.
   ══════════════════════════════════════════════════════════ */
.classic-operations table tbody tr {
  transition: background var(--classic-dur-micro) var(--classic-ease-snappy);
}

.classic-operations table tbody tr:hover {
  background: rgba(26, 23, 20, 0.035);
}

.classic-operations .status-badge,
.classic-operations .badge {
  transition: background var(--classic-dur-fast) ease,
              color var(--classic-dur-fast) ease,
              border-color var(--classic-dur-fast) ease;
}

.classic-operations .sidebar-link {
  transition: background var(--classic-dur-micro) ease,
              color var(--classic-dur-micro) ease,
              padding-left var(--classic-dur-fast) var(--classic-ease-snappy);
}

.classic-operations .sidebar-link:hover {
  padding-left: 18px;
}

/* ══════════════════════════════════════════════════════════
   10. TOUCH DEVICE & COARSE POINTER SAFEGUARDS
   Completely disable hover-only zooms, pointer tracking & parallax.
   ══════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .product-img-wrap .product-img,
  .hero-ambient-layer,
  .editorial-band::before {
    transform: none !important;
    transition: none !important;
  }

  .product-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--classic-border) !important;
  }

  .modal-thumb-btn:hover {
    transform: none !important;
  }

  .classic-operations .sidebar-link:hover {
    padding-left: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   11. MANDATORY REDUCED MOTION SAFEGUARDS
   Neutralizes all non-essential movement while keeping states clear.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html.classic-motion-ready .classic-reveal-line > .line-inner,
  html.classic-motion-ready .classic-reveal-fade,
  html.classic-motion-ready .classic-reveal-stagger > *,
  .hero-ambient-layer,
  .editorial-band::before,
  .product-img-wrap .product-img,
  .cart-badge.is-pulsing,
  .cart-count-badge.is-pulsing {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}