/* ── Mobile UX polish ───────────────────────────────────────── */

/* Remove blue flash on tap (iOS/Android) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Disable double-tap zoom on interactive elements */
a, button, [role="button"] {
  touch-action: manipulation;
}

/* Prevent iOS auto-zoom on input focus (triggers when font-size < 16px) */
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}


/* ── Product glass cubes ───────────────────────────────────── */

.product-cube {
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Color Match overlay ──────────────────────────────────── */

.color-match-results {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.color-match-results.color-match-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Toast notification ─────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Smart Filter / Mobile Filter overlays ────────────────────── */

.smart-filter-box {
  opacity: 0;
  scale: 0.97;
  transition: opacity 200ms ease, scale 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smart-filter-box.smart-filter-visible {
  opacity: 1;
  scale: 1;
}

/* Hide scrollbar on mood pills */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── Mood Orb chips ───────────────────────────────────────── */

.mood-chip {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  cursor: pointer;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 300ms ease;
}

.mood-chip:active {
  transform: scale(1.08) !important;
}

.mood-chip-selected {
  background: rgba(255, 255, 255, 0.3);
  border-color: white;
}

.mood-chip-emoji {
  font-size: 18px;
  line-height: 1;
}

.mood-chip-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── View Transitions API ───────────────────────────────────── */

/* Bottom nav e sidebar: rimangono fermi durante le transizioni */
nav[data-view-transition="fixed"] {
  view-transition-name: bottom-nav;
}

@keyframes slide-from-right {
  from { transform: translateX(6%); opacity: 0; }
}

@keyframes slide-to-left {
  to { transform: translateX(-3%); opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* Transizione pagina: slide leggero come app nativa */
::view-transition-old(root) {
  animation: 220ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 220ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Bottom nav: cross-fade senza slide */
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
  animation: 150ms ease both fade-in;
}

/* Riduce le animazioni se l'utente le ha disabilitate */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: 150ms ease both fade-in;
  }

  .mood-chip,
  .story-orb,
  .smart-filter-box,
  .color-match-results {
    transition-duration: 0.01ms !important;
  }

  .flip-hint {
    animation: none;
  }

  .animate-spin {
    animation-duration: 1.5s;
  }
}

/* ── Story Orbs — glass spheres ─────────────────────────────── */

.story-orb {
  transform: scale(1);
  transition: transform 150ms ease;
}

.story-orb:active {
  transform: scale(0.92) !important;
}

/* ── Trading Card 3D ─────────────────────────────────────────── */

.trading-card-perspective {
  perspective: 1200px;
}

.trading-card {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  /* transition set via JS to avoid conflicts with preserve-3d */
}

.trading-card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.trading-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
}

/* Holographic shimmer overlay */
.trading-card-shimmer {
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg) at var(--shimmer-x, 50%) var(--shimmer-y, 50%),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(200, 220, 255, 0.3) 20%,
    rgba(255, 200, 255, 0.2) 30%,
    rgba(255, 255, 200, 0.3) 40%,
    rgba(200, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  mix-blend-mode: overlay;
  transition: opacity 300ms ease;
}

.trading-card-shimmer.shimmer-active {
  opacity: 1;
}

/* Card appear/close: driven by JS transitions to avoid
   CSS animation conflicts with preserve-3d on WebKit */

/* Flip hint fade */
@keyframes flip-hint-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.flip-hint {
  animation: flip-hint-fade 2.5s ease forwards;
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .trading-card-shimmer {
    display: none;
  }
}

/* ── Bottom nav button tap feedback ─────────────────────────── */

/* Spring-like scale on tap — exclude the Orb wrapper (has its own gesture animations) */
.fixed a:active,
.fixed button:active {
  transform: scale(0.90) !important;
  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}