/**
 * WORLD WIDE FAITH — Estilos & Animações Suaves (Apple-Inspired Design System)
 */

/* ==========================================================================
   TIPOGRAFIA OFICIAL DA MARCA // TRASH WAX DEMO
   ========================================================================== */
@font-face {
  font-family: 'Trash Wax DEMO';
  src: url('../fonts/TrashWaxDEMO.ttf') format('truetype'),
       url('../fonts/Trash%20Wax%20DEMO.ttf') format('truetype'),
       url('../fonts/Trash Wax DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Classes utilitárias da marca */
.font-brand,
.font-logo {
  font-family: 'Trash Wax DEMO', 'Syne', sans-serif !important;
  letter-spacing: 0.04em;
}

/* 1. Curva de Aceleração Apple Signature */
:root {
  --apple-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --apple-duration: 0.6s;
  --apple-duration-slow: 0.9s;
}

/* 2. Suavização de Rolagem Global */
html {
  scroll-behavior: smooth;
}

/* 3. Efeito Liquid Glass Apple (Header & Painéis de Vidro Líquido Refrefrativo) */
.apple-glass {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(28px) saturate(200%) contrast(105%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.04),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
  transition: background-color var(--apple-duration) var(--apple-ease),
              backdrop-filter var(--apple-duration) var(--apple-ease),
              box-shadow var(--apple-duration) var(--apple-ease);
}

.apple-glass-dark {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 4. Scroll Reveal Suave estilo Apple (Entrada fluida ao rolar) */
.apple-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity var(--apple-duration-slow) var(--apple-ease),
              transform var(--apple-duration-slow) var(--apple-ease);
  will-change: opacity, transform;
}

.apple-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Delays para animação sequencial em cascata */
.apple-reveal-delay-1 { transition-delay: 0.1s; }
.apple-reveal-delay-2 { transition-delay: 0.2s; }
.apple-reveal-delay-3 { transition-delay: 0.3s; }
.apple-reveal-delay-4 { transition-delay: 0.4s; }

/* 5. Hover Tátil em Cards e Produtos */
.apple-card {
  transition: transform 0.5s var(--apple-ease),
              box-shadow 0.5s var(--apple-ease),
              border-color 0.4s var(--apple-ease);
  will-change: transform;
}

.apple-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.07);
}

/* Imagens com zoom sutil interno no hover */
.apple-zoom-img {
  transition: transform 0.8s var(--apple-ease), filter 0.6s var(--apple-ease);
  will-change: transform;
}

.group:hover .apple-zoom-img {
  transform: scale(1.04);
}

/* 6. Feedback Háptico / Tátil ao Clicar em Botões */
.apple-button {
  transition: transform 0.25s var(--apple-ease),
              background-color 0.25s var(--apple-ease),
              box-shadow 0.25s var(--apple-ease);
}

.apple-button:active {
  transform: scale(0.975);
}

/* 7. Modais & Popups Fluídos Estilo Apple */
.apple-modal-content {
  animation: appleModalIn 0.35s var(--apple-ease) forwards;
}

@keyframes appleModalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.apple-modal-backdrop {
  opacity: 0;
  backdrop-filter: blur(0px);
  transition: opacity 0.32s var(--apple-ease), backdrop-filter 0.32s var(--apple-ease);
}

.apple-modal-backdrop.is-open {
  opacity: 1;
  backdrop-filter: blur(16px);
}

.apple-modal-card {
  opacity: 0;
  transform: scale(0.92) translateY(18px);
  transition: opacity 0.32s var(--apple-ease), transform 0.32s var(--apple-ease);
  box-shadow: 
    0 35px 80px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.apple-modal-backdrop.is-open .apple-modal-card {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Toast de Confirmação de Sacola Estilo Apple */
#cartToastContainer {
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efeito Reveal Editorial: Preto & Branco Puro -> Cores Normais no Hover (Sem alterar opacidade) */
.apple-reveal-hover,
.apple-negative-hover,
.apple-bw-hover,
img.apple-reveal-hover,
img.apple-negative-hover {
  opacity: 1 !important;
  filter: grayscale(100%) !important;
  transition: filter 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: filter, transform;
}

.group:hover .apple-reveal-hover,
.group:hover .apple-negative-hover,
.group:hover .apple-bw-hover,
.group:hover img.apple-reveal-hover,
.group:hover img.apple-negative-hover,
.apple-reveal-hover:hover,
.apple-negative-hover:hover,
.apple-bw-hover:hover {
  opacity: 1 !important;
  filter: grayscale(0%) saturate(100%) !important;
}

/* Dropdown Menu Fluído Apple */
.apple-dropdown {
  transform-origin: top right;
  border-radius: 1.25rem;
  box-shadow: 
    0 25px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  animation: appleDropdownIn 0.25s var(--apple-ease) forwards;
}

@keyframes appleDropdownIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 8. Badge de Desconto & Cupons */
.coupon-badge {
  background: linear-gradient(135deg, #0a0a0a 0%, #262626 100%);
  position: relative;
  overflow: hidden;
}

.coupon-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  animation: couponShine 4s infinite linear;
}

@keyframes couponShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ==========================================================================
   9. LIQUID GLASS EFFECT (Apple VisionOS / Glassmorphism de Alta Refração)
   ========================================================================== */

/* Superfície de vidro líquido sobre o GIF ou Vídeo */
.liquid-glass-surface {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px) saturate(140%) brightness(0.72);
  background: 
    radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(0, 0, 0, 0.82) 100%);
  pointer-events: none;
}

/* Brilho líquido fluido e iridescente em movimento */
.liquid-glass-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.02) 75%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: liquidGlassSheenFlow 10s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes liquidGlassSheenFlow {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 30% 100%;
  }
}

/* Painel / Card em Vidro Líquido Físico com borda refrativa */
.liquid-glass-panel {
  background: rgba(18, 18, 18, 0.45);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 
    0 30px 60px -15px rgba(0, 0, 0, 0.75),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--apple-ease), 
              box-shadow 0.4s var(--apple-ease), 
              border-color 0.4s var(--apple-ease);
}

.liquid-glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 
    0 35px 75px -15px rgba(0, 0, 0, 0.85),
    inset 0 1px 2.5px 0 rgba(255, 255, 255, 0.45);
}

.liquid-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.9s var(--apple-ease);
  pointer-events: none;
  z-index: 10;
}

.liquid-glass-panel:hover::before {
  left: 200%;
}