/* =========================================================
   TOOGO — Camada de refinamento visual e movimento
   Carregada depois de style.css. Só estética: não altera
   a lógica da loja. Para desligar tudo, remova o <link>.
   ========================================================= */

:root {
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --ease-float: cubic-bezier(.45, 0, .55, 1);
}

/* ---------- 1. Layout ------------------------------------ */

/* Cards de produto: sem vão entre descrição e preço, preço alinhado na base */
.product-card { display: flex; flex-direction: column; }
.product-card__info { min-height: 0; }
.product-card__description { margin-bottom: 0; }
.product-card__pricing { margin-top: auto; padding-top: 18px; }

/* Categorias: foto se funde ao fundo do card, texto sempre por cima */
.category-card { overflow: hidden; }
.category-card__index,
.category-card__title,
.category-card__subtitle,
.category-card__link { position: relative; z-index: 2; }
.category-card__graphic {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.category-card__graphic img,
.category-card__photo { transition: transform 1.1s var(--ease-premium); }

/* Oferta relâmpago: produto maior, com halo de luz por trás */
@media (min-width: 768px) {
  .flash-sale__media { width: min(66%, 320px); }
}
.flash-sale__media {
  border-radius: 22px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
}
.flash-sale__feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 203, 62, .2) 0%, rgba(178, 203, 62, 0) 62%);
  pointer-events: none;
}

/* Newsletter: título com mais largura (antes quebrava em 4 linhas) */
.newsletter__text h2 { max-width: 15ch; }

/* Barra de progresso de leitura no topo (criada pelo motion.js) */
.scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, #5E9442, #B2CB3E);
  pointer-events: none;
}

/* ---------- 2. Movimento --------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* Entradas ao rolar: mais presença e em cascata */
  .js .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
  }
  .js .reveal {
    transition: opacity .9s var(--ease-premium), transform 1s var(--ease-premium);
    transition-delay: calc(min(var(--i, 0), 6) * 80ms);
  }

  /* Hero: conteúdo entra linha a linha no carregamento */
  .hero__content > * {
    animation: rise 1s var(--ease-premium) backwards;
  }
  .hero__content > :nth-child(1) { animation-delay: .05s; }
  .hero__content > :nth-child(2) { animation-delay: .15s; }
  .hero__content > :nth-child(3) { animation-delay: .3s; }
  .hero__content > :nth-child(4) { animation-delay: .42s; }
  .hero__content > :nth-child(5) { animation-delay: .54s; }
  .hero__eyebrow-line { transform-origin: left; animation: lineGrow 1.2s .2s var(--ease-premium) backwards; }

  /* Hero: cartões entram em sequência e reagem ao mouse (parallax) */
  .hero-product,
  .delivery-preview {
    translate: calc(var(--mx, 0) * var(--depth, 0) * 1px) calc(var(--my, 0) * var(--depth, 0) * 1px);
    transition: translate .8s var(--ease-premium), transform .35s var(--ease-premium), border-color .35s ease;
  }
  .hero-product--large { --depth: 6; animation: cardIn 1.1s .25s var(--ease-premium) backwards; }
  .hero-product--lamp { --depth: 11; animation: cardIn 1.1s .4s var(--ease-premium) backwards; }
  .hero-product--bottle { --depth: 9; animation: cardIn 1.1s .52s var(--ease-premium) backwards; }
  .delivery-preview { --depth: 16; animation: cardIn 1.1s .75s var(--ease-premium) backwards; }

  /* Produtos do hero levitando, cada um no seu ritmo */
  .hero-product__visual { animation: levitate 7s var(--ease-float) infinite; }
  .hero-product--lamp .hero-product__visual { animation-duration: 8s; animation-delay: -2.5s; }
  .hero-product--bottle .hero-product__visual { animation-duration: 6.5s; animation-delay: -4s; }

  /* Rastreio: barra de progresso em ciclo contínuo + brilho */
  .delivery-preview__progress { overflow: hidden; position: relative; }
  .delivery-preview__progress span {
    width: 100%;
    transform-origin: left;
    animation: deliver 5.5s var(--ease-float) infinite;
  }
  .delivery-preview__progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: shimmer 2.4s ease-in-out infinite;
  }
  .delivery-preview__icon { animation: truck 1.8s ease-in-out infinite; }

  /* Pixels do logo: fluxo contínuo em direção aos produtos */
  .hero__pixels i {
    animation: pixelStream 3.6s var(--ease-float) infinite;
  }
  .hero__pixels i:nth-child(2) { animation-delay: -.6s; }
  .hero__pixels i:nth-child(3) { animation-delay: -1.2s; }
  .hero__pixels i:nth-child(4) { animation-delay: -1.8s; }
  .hero__pixels i:nth-child(5) { animation-delay: -2.4s; }
  .hero__pixels i:nth-child(6) { animation-delay: -3s; }

  /* Pixels ao lado dos títulos de seção: onda suave */
  .brand-pixels span { animation: pixelWave 2.4s var(--ease-float) infinite; }
  .brand-pixels span:nth-child(2) { animation-delay: .18s; }
  .brand-pixels span:nth-child(3) { animation-delay: .36s; }

  /* Newsletter: pixels flutuando */
  .newsletter__pixels i { animation: drift 6s var(--ease-float) infinite; }
  .newsletter__pixels i:nth-child(2) { animation-delay: -1.5s; animation-duration: 7s; }
  .newsletter__pixels i:nth-child(3) { animation-delay: -3s; animation-duration: 5.5s; }
  .newsletter__pixels i:nth-child(4) { animation-delay: -4.5s; animation-duration: 8s; }

  /* Oferta relâmpago: produto levitando e halo respirando */
  .flash-sale__media { animation: levitate 6s var(--ease-float) infinite; }
  .flash-sale__feature::before { animation: breathe 5s var(--ease-float) infinite; }
  .flash-sale__accent { animation: spin 14s linear infinite; }

  /* Botões: brilho que atravessa e seta que avança */
  .btn { position: relative; overflow: hidden; }
  .btn svg { transition: transform .45s var(--ease-premium); }
  .btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover svg { transform: translate(3px, -1px); }
    .btn--primary:hover::after { left: 120%; transition: left .9s var(--ease-premium); }

    .hero-product:hover { transform: translateY(-6px); }

    .category-card { transition: transform .6s var(--ease-premium), box-shadow .6s var(--ease-premium); }
    .category-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(20, 22, 20, .35); }
    .category-card:hover .category-card__graphic { transform: none; }
    .category-card:hover .category-card__graphic img,
    .category-card:hover .category-card__photo { transform: scale(1.06); }
    .category-card__link svg { transition: transform .45s var(--ease-premium); }
    .category-card:hover .category-card__link svg { transform: translate(3px, -3px); }

    .product-card__image .visual-media__image { transition: opacity .6s var(--ease-premium), transform 1.1s var(--ease-premium); }
    .product-card:hover .product-card__image .visual-media__image { transform: scale(1.045); }

    .benefit__icon { transition: transform .5s var(--ease-premium); }
    .benefit:hover .benefit__icon { transform: translateY(-3px); }
  }
}

/* ---------- 3. Keyframes --------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes levitate { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes deliver {
  0% { transform: scaleX(.12); }
  70% { transform: scaleX(1); }
  88% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes shimmer { from { translate: -120% 0; } to { translate: 300% 0; } }
@keyframes truck { 0%, 100% { translate: 0 0; } 50% { translate: 2px 0; } }
@keyframes pixelStream {
  0% { translate: -28px 0; opacity: 0; }
  25% { opacity: .55; }
  75% { opacity: .4; }
  100% { translate: 34px 0; opacity: 0; }
}
@keyframes pixelWave { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 33% { translate: 5px -6px; } 66% { translate: -4px 4px; } }
@keyframes breathe { 0%, 100% { opacity: .7; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
@keyframes spin { to { rotate: 375deg; } }

/* Conta: indicador de sessão ativa no ícone do header */
.icon-button.is-logged::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--off-white);
  border-radius: 50%;
  background: var(--verde-folha);
}