/* =========================================================================
   Flam & Luce — Scroll FX
   -------------------------------------------------------------------------
   Reveal suave + parallax vertical + scroll horizontal dirigido pelo scroll
   vertical. CSS pareado com /lejournal/scroll-fx.js.

   Princípios:
   - Anima apenas `transform` e `opacity` (GPU, sem reflow).
   - Respeita `prefers-reduced-motion: reduce`.
   - Mobile: hscroll sticky cai para scroll horizontal nativo com snap.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) REVEAL — aparecimento suave ao entrar no viewport
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes direcionais */
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.96); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible { transform: none; }

/* Atrasos encadeados — para galerias e listas */
.reveal[data-delay="100"] { transition-delay: 0.10s; }
.reveal[data-delay="200"] { transition-delay: 0.20s; }
.reveal[data-delay="300"] { transition-delay: 0.30s; }
.reveal[data-delay="400"] { transition-delay: 0.40s; }


/* -------------------------------------------------------------------------
   2) PARALLAX — imagens que se movem mais devagar que o scroll
   -------------------------------------------------------------------------
   O JS injeta `--py` (em pixels) na cada frame. A imagem usa transform
   translate3d para garantir compositing.
   ------------------------------------------------------------------------- */
.parallax {
  overflow: hidden;
  position: relative;
}
.parallax__img {
  transform: translate3d(0, var(--py, 0), 0) scale(var(--ps, 1.08));
  will-change: transform;
  transition: transform 60ms linear;
}


/* -------------------------------------------------------------------------
   3) SCROLL-FADE — trio de objetos com fade + blur + zoom ao entrar
   -------------------------------------------------------------------------
   Substitui o carrossel horizontal sticky. Cada peça aparece com:
     - opacity   0  ->  1
     - blur(12px) -> blur(0)
     - scale(0.94) -> scale(1)
   O JS adiciona .is-visible quando o item está ≥18% no viewport.
   Em mobile a grelha empilha (1 coluna); em desktop fica 3 colunas.
   ------------------------------------------------------------------------- */

/* Wrapper que substitui o antigo .hscroll: grelha responsíva normal */
.scroll-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .scroll-trio {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Item: estado escondido */
.scroll-fade {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.94) translateY(20px);
  transition:
    opacity   1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter    1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
.scroll-fade.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateY(0);
}

/* Atrasos encadeados (mesmo padrão do .reveal) */
.scroll-fade[data-delay="100"] { transition-delay: 0.10s; }
.scroll-fade[data-delay="200"] { transition-delay: 0.20s; }
.scroll-fade[data-delay="300"] { transition-delay: 0.30s; }
.scroll-fade[data-delay="400"] { transition-delay: 0.40s; }

/* Variante para ecrãs escuros: blur ligeiramente mais forte ajuda contraste */
.scroll-fade--dark { filter: blur(14px); }
.scroll-fade--dark.is-visible { filter: blur(0); }


/* -------------------------------------------------------------------------
   3c) PARALLAX DE GRELHA — padrões distintos por trend
   -------------------------------------------------------------------------
   Cada padrão anima 5 cross-merch + 1 ambiente quando entram em vista.
   Pareados com .scroll-fade (fade + blur leve) para tom editorial.

   A · BURST     - 5 direções diferentes (cima, cima-esq, cima-dir,
                   baixo-esq, baixo-dir)  -> energia, saída multidirecional
   B · ALTERNATE - alternado esquerda/direita por inteiro
                   (-x, +x, -x, +x, -x)  -> ritmo cadenciado marítimo
   C · RISE      - todos de baixo para cima, com stagger
                   -> ascensão serena, evoca terra a aquecer
   ------------------------------------------------------------------------- */

/* Estado inicial comum a todas as variantes (deslocamento mais forte
   que o .scroll-fade base, porque são peças de catálogo, não cards densos) */
.scroll-burst > *,
.scroll-alternate > *,
.scroll-rise > * {
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity   1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter    1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
.scroll-burst.is-visible > *,
.scroll-alternate.is-visible > *,
.scroll-rise.is-visible > * {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* === A · BURST (Muskmelon) ============================================ */
.scroll-burst > :nth-child(1) { transform: translate(-60px, -40px); }
.scroll-burst > :nth-child(2) { transform: translate(  0, -70px); }
.scroll-burst > :nth-child(3) { transform: translate( 60px, -40px); }
.scroll-burst > :nth-child(4) { transform: translate(-50px,  60px); }
.scroll-burst > :nth-child(5) { transform: translate( 50px,  60px); }
.scroll-burst > :nth-child(1) { transition-delay: 0.00s; }
.scroll-burst > :nth-child(2) { transition-delay: 0.08s; }
.scroll-burst > :nth-child(3) { transition-delay: 0.16s; }
.scroll-burst > :nth-child(4) { transition-delay: 0.24s; }
.scroll-burst > :nth-child(5) { transition-delay: 0.32s; }

/* === B · ALTERNATE (Marina) =========================================== */
.scroll-alternate > :nth-child(1) { transform: translateX(-90px); }
.scroll-alternate > :nth-child(2) { transform: translateX( 90px); }
.scroll-alternate > :nth-child(3) { transform: translateX(-90px); }
.scroll-alternate > :nth-child(4) { transform: translateX( 90px); }
.scroll-alternate > :nth-child(5) { transform: translateX(-90px); }
.scroll-alternate > :nth-child(1) { transition-delay: 0.00s; }
.scroll-alternate > :nth-child(2) { transition-delay: 0.10s; }
.scroll-alternate > :nth-child(3) { transition-delay: 0.20s; }
.scroll-alternate > :nth-child(4) { transition-delay: 0.30s; }
.scroll-alternate > :nth-child(5) { transition-delay: 0.40s; }

/* === C · RISE (Burnt Sienna) ========================================== */
.scroll-rise > * { transform: translateY(80px); }
.scroll-rise > :nth-child(1) { transition-delay: 0.00s; }
.scroll-rise > :nth-child(2) { transition-delay: 0.08s; }
.scroll-rise > :nth-child(3) { transition-delay: 0.16s; }
.scroll-rise > :nth-child(4) { transition-delay: 0.24s; }
.scroll-rise > :nth-child(5) { transition-delay: 0.32s; }

/* Grelha responsíva para os três padrões: 1 col mobile, 5 col desktop
   (porque agora são 5 cross-merch por trend, não 3) */
.scroll-burst,
.scroll-alternate,
.scroll-rise {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .scroll-burst,
  .scroll-alternate,
  .scroll-rise { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
  .scroll-burst,
  .scroll-alternate,
  .scroll-rise { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
}



/* -------------------------------------------------------------------------
   3b) Compatibilidade retroativa
   -------------------------------------------------------------------------
   Se a marcação ainda usar .hscroll (de uma versão anterior), neutralizamos
   o comportamento sticky/horizontal e tratamos como grelha simples.
   ------------------------------------------------------------------------- */
.hscroll,
.hscroll__sticky,
.hscroll__track {
  position: static;
  height: auto;
  width: auto;
  transform: none;
  overflow: visible;
}
.hscroll__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  scroll-snap-type: none;
}
@media (min-width: 768px) {
  .hscroll__track {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
.hscroll__item { flex: initial; width: auto; max-width: none; }
.hscroll__bar { display: none; }


/* -------------------------------------------------------------------------
   4) REDUCED MOTION — anular tudo se o utilizador pediu
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .scroll-fade,
  .scroll-fade--dark,
  .scroll-burst > *,
  .scroll-alternate > *,
  .scroll-rise > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .parallax__img {
    transform: none !important;
    transition: none !important;
  }
}



/* -------------------------------------------------------------------------
   6) HERO OVERLAY SQUARES — quadrados de cor sobrepostos ao ambiente,
   posições deslocadas a partir do progresso de scroll do hero (var --p)
   ------------------------------------------------------------------------- */
.trend-hero-overlay {
  position: relative;
  --p: 0;
}
.trend-hero-overlay > .parallax {
  position: relative;
  z-index: 2;
}
.overlay-square {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
/* Quadrado 1: lado esquerdo, 20% do topo, entra da direita para a esquerda
   Posição base = posição final (85% visível, 15% sobreposto à esquerda).
   --p vai de 0 (inicial, 70% sobreposto) a 1 (final, 15% sobreposto). */
.overlay-sq-1 {
  width: 26%;
  aspect-ratio: 4 / 5;
  left: -15%;
  top: 20%;
  transform: translateX(calc(55% * (1 - var(--p))));
}
/* Quadrado 2: lado direito, 50% do topo, entra de baixo para cima */
.overlay-sq-2 {
  width: 26%;
  aspect-ratio: 4 / 5;
  right: -15%;
  top: 50%;
  transform: translateY(calc(55% * (1 - var(--p))));
}
/* Quadrado 3: base centrada, entra da esquerda para a direita */
.overlay-sq-3 {
  width: 32%;
  aspect-ratio: 1.6 / 1;
  bottom: -10%;
  left: 50%;
  transform: translate(-50%, 0) translateX(calc(-55% * (1 - var(--p))));
}

@media (max-width: 640px) {
  .overlay-sq-1, .overlay-sq-2 { width: 30%; }
  .overlay-sq-3 { width: 38%; }
}

/* -------------------------------------------------------------------------
   7) PALETTE GRID
   Mobile: 4 linhas com cells de tamanhos variados (grid-template-areas).
   Desktop (≥768px): 2 linhas × 5 colunas com larguras únicas que
   oscilam (±5-8%) com o scroll via var --shift (-1..+1).
   ------------------------------------------------------------------------- */
.palette-grid {
  --shift: 0;
  width: 100%;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "mag mag mag mag mag mag mag foa foa foa foa foa"
    "bre bre bre bre att att att att tim tim tim tim"
    "sul sul sul mar mar mar mar mar gra gra gra gra"
    "lee lee lee lee lee dun dun dun dun dun dun dun";
  grid-auto-rows: 110px;
}
.palette-row { display: contents; }
.palette-cell--magmatic    { grid-area: mag; }
.palette-cell--foam        { grid-area: foa; }
.palette-cell--breath      { grid-area: bre; }
.palette-cell--attraction  { grid-area: att; }
.palette-cell--timid       { grid-area: tim; }
.palette-cell--sulfury     { grid-area: sul; }
.palette-cell--marshmellow { grid-area: mar; }
.palette-cell--grain       { grid-area: gra; }
.palette-cell--lee         { grid-area: lee; }
.palette-cell--dune        { grid-area: dun; }

@media (min-width: 768px) {
  .palette-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-template-rows: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 1.25rem;
    height: 60vh;
    min-height: 420px;
  }
  .palette-row { display: grid; gap: 1.25rem; }
  /* Linha 1: cada coluna com largura única (Foam mais larga, Attraction mais estreita) */
  .palette-row--1 {
    grid-template-columns:
      var(--r1-c1, 1.07fr)
      var(--r1-c2, 1.15fr)
      var(--r1-c3, 1.04fr)
      var(--r1-c4, 0.85fr)
      var(--r1-c5, 0.89fr);
  }
  /* Linha 2: cada coluna com largura única (Grain dominante, Sulfury mais estreita) */
  .palette-row--2 {
    grid-template-columns:
      var(--r2-c1, 0.77fr)
      var(--r2-c2, 1.13fr)
      var(--r2-c3, 1.20fr)
      var(--r2-c4, 1.06fr)
      var(--r2-c5, 0.84fr);
  }
  .palette-cell--magmatic,
  .palette-cell--foam,
  .palette-cell--breath,
  .palette-cell--attraction,
  .palette-cell--timid,
  .palette-cell--sulfury,
  .palette-cell--marshmellow,
  .palette-cell--grain,
  .palette-cell--lee,
  .palette-cell--dune { grid-area: auto; }
}

.palette-cell {
  position: relative;
  overflow: hidden;
  transition: filter 0.4s ease;
}
/* Todos os nomes em branco */
.palette-cell { color: #FFFFFF; }
.palette-cell__inner {
  position: absolute;
  inset: 0;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.palette-cell__name {
  font-family: var(--font-serif, 'Optima', 'Optima Nova', serif);
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
@media (min-width: 768px) {
  .palette-cell__inner { padding: 1.4rem 1.5rem; }
  .palette-cell__name { font-size: 1.35rem; }
}
@media (min-width: 1280px) {
  .palette-cell__name { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .palette-cell__inner { padding: 0.7rem 0.8rem; }
  .palette-cell__name { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay-sq-1, .overlay-sq-2, .overlay-sq-3 { transform: none !important; }
  .palette-grid { --shift: 0 !important; }
}


/* -------------------------------------------------------------------------
   8) CAROUSEL — carrossel infinito com setas (sem dots)
   Desktop: 3 slides visiveis. Mobile: 1 slide visivel.
   ------------------------------------------------------------------------- */
.carousel {
  position: relative;
  --per-view: 1;
  --current: 0;
  --gap: 0.75rem;
}
@media (min-width: 768px) {
  .carousel { --per-view: 2; --gap: 1.25rem; }
}
.carousel__viewport {
  overflow: hidden;
  margin: 0 calc(-1 * var(--gap) / 2);
}
.carousel__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(calc(-1 * var(--current) * (100% / var(--per-view))));
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 calc(100% / var(--per-view));
  padding: 0 calc(var(--gap) / 2);
  box-sizing: border-box;
}
.carousel__btn {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(34, 31, 31, 0.08);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  padding: 0;
  transform: translateY(-50%);
}
.carousel__btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.carousel__btn:active { transform: translateY(-50%) scale(0.97); }
.carousel__btn:focus-visible {
  outline: 2px solid #F9AC71;
  outline-offset: 2px;
}
.carousel__btn--prev { left: -22px; }
.carousel__btn--next { right: -22px; }
.carousel__btn svg {
  width: 18px;
  height: 18px;
  stroke: #221F1F;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Variante para fundos escuros (Trend B) */
.carousel--on-dark .carousel__btn {
  background: rgba(34, 31, 31, 0.85);
  border-color: rgba(253, 230, 213, 0.18);
}
.carousel--on-dark .carousel__btn:hover { background: rgba(34, 31, 31, 1); }
.carousel--on-dark .carousel__btn svg { stroke: #FDE6D5; }

@media (max-width: 767px) {
  .carousel__btn--prev { left: 8px; }
  .carousel__btn--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* -------------------------------------------------------------------------
   Carousel modifier · estático em desktop
   Esconde botões prev/next acima de 768px. Útil quando o número de
   slides == --per-view (3 slides desktop = todos visíveis lado a lado).
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .carousel--static-desktop .carousel__btn { display: none; }
  .carousel--static-desktop .carousel__track { transform: none; }
}

/* -------------------------------------------------------------------------
   EDIÇÃO VERÃO 2026 — botões sharp em Magmatic
   Override local de base.css/.btn (não afecta o resto do site)
   ------------------------------------------------------------------------- */
.btn { border-radius: 0; }
.btn-primary {
  background-color: #F19134;
  color: #221F1F;
}
.btn-primary:hover {
  background-color: #D67A1F;
  color: #FFFFFF;
}