/* Vibe Gênio — apresentação da loja em carrossel (página inicial). Usa os tokens de site.css. */
.apresentacao { position: relative; background: var(--ink); overflow: hidden; isolation: isolate; }
.apresentacao::before { content: ""; position: absolute; inset: 0; z-index: -2; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), oklch(1 0 0 / 0.045) calc(12.5% - 1px) 12.5%); }
.slides { display: grid; min-height: 100svh; }
.slide { grid-area: 1 / 1; position: relative; display: grid; align-items: center; padding: calc(var(--topo-h) + 2.5rem) var(--gutter) 6.5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.9s var(--ease-out), visibility 0s 0.9s; }
.slide.is-ativo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.9s var(--ease-out), visibility 0s; z-index: 2; }
.slide-inner { width: 100%; max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--space-xl); }
.slide-texto { display: grid; gap: var(--space-lg); justify-items: start; position: relative; z-index: 3; }
.slide .display { font-size: clamp(2.6rem, 6.3vw, 6rem); line-height: 0.98; }
.slide .display-menor { font-size: clamp(2.2rem, 4.8vw, 4.3rem); }
.slide .display .ponto { font-style: normal; color: var(--brass); }
.slide.is-ativo .slide-texto > * { animation: rise 0.9s var(--ease) both; }
.slide.is-ativo .slide-texto > *:nth-child(1) { animation-delay: 0.1s; }
.slide.is-ativo .slide-texto > *:nth-child(2) { animation-delay: 0.2s; }
.slide.is-ativo .slide-texto > *:nth-child(3) { animation-delay: 0.32s; }
.slide.is-ativo .slide-texto > *:nth-child(4) { animation-delay: 0.44s; }
.slide-visual { position: relative; z-index: 2; min-height: min(64svh, 640px); opacity: 0; transform: scale(0.96); transition: opacity 1s var(--ease-out), transform 1.4s var(--ease); }
.slide.is-ativo .slide-visual { opacity: 1; transform: none; transition-delay: 0.15s; }

/* luz atrás de cada slide */
.slide-glow { position: absolute; z-index: -1; right: -6%; top: 50%; width: min(80vw, 1060px); aspect-ratio: 1; translate: 0 -50%; }
.glow-brasa { background: radial-gradient(closest-side, color-mix(in oklch, var(--ember) 42%, transparent), color-mix(in oklch, var(--ember) 9%, transparent) 55%, transparent 72%); }
.glow-ameixa { background: radial-gradient(closest-side, color-mix(in oklch, var(--plum) 52%, transparent), color-mix(in oklch, var(--plum) 12%, transparent) 55%, transparent 72%); }
.glow-giz { background: radial-gradient(closest-side, color-mix(in oklch, var(--ivory) 20%, transparent), color-mix(in oklch, var(--ivory) 5%, transparent) 55%, transparent 72%); }
.glow-latao { background: radial-gradient(closest-side, color-mix(in oklch, var(--brass) 34%, transparent), color-mix(in oklch, var(--brass) 8%, transparent) 55%, transparent 72%); }
.glow-turquesa { background: radial-gradient(closest-side, color-mix(in oklch, var(--teal) 38%, transparent), color-mix(in oklch, var(--teal) 9%, transparent) 55%, transparent 72%); }

/* visual 1 e 5: dois modelos */
.v-modelos .mod { position: absolute; width: 52%; max-width: 330px; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--ink-3); background: #1d1b19; box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.7); }
.v-modelos .mod-a { left: 3%; top: 4%; width: 48%; }
.v-modelos .mod-b { right: 3%; bottom: 0; width: 42%; max-width: 290px; }
.slide.is-ativo .v-modelos .mod-a { animation: flutua 9s ease-in-out infinite; }
.slide.is-ativo .v-modelos .mod-b { animation: flutua 11s ease-in-out -3s infinite; }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* visual 2: as quatro estampas em leque */
.v-leque .leq { position: absolute; width: 44%; transform-origin: 50% 100%; filter: drop-shadow(0 24px 30px oklch(0 0 0 / 0.5)); }
.v-leque .leq-1 { left: 2%; top: 14%; rotate: -9deg; }
.v-leque .leq-2 { left: 22%; top: 4%; rotate: -3deg; }
.v-leque .leq-3 { left: 42%; top: 6%; rotate: 4deg; }
.v-leque .leq-4 { left: 56%; top: 18%; rotate: 10deg; }

/* visual 3: três produtos */
.v-produtos .prd { position: absolute; border: 1px solid oklch(0 0 0 / 0.35); box-shadow: 0 30px 60px -28px oklch(0 0 0 / 0.75); background: var(--ivory-2); }
.v-produtos .prd-poster { width: 28%; left: 2%; top: 8%; }
.v-produtos .prd-camisa { width: 38%; left: 32%; top: 28%; z-index: 2; }
.v-produtos .prd-caneca { width: 29%; right: 2%; top: 2%; }

/* visual 4: logo grande */
.v-logo { display: grid; place-items: center; }
.logo-slide { width: min(100%, 560px); aspect-ratio: 2691 / 2068; background-color: var(--ivory); -webkit-mask: url("../logo/vibe-genio-principal.svg") center / contain no-repeat; mask: url("../logo/vibe-genio-principal.svg") center / contain no-repeat; }

/* controles */
.car-ui { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: 1.75rem; max-width: var(--max); margin-inline: auto; display: flex; align-items: center; gap: var(--space-md); }
.car-seta, .car-pausa { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: color-mix(in oklch, var(--ink) 70%, transparent); color: var(--text); border: 1px solid color-mix(in oklch, var(--text) 30%, transparent); border-radius: 50%; cursor: pointer; transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out); }
.car-seta:hover, .car-pausa:hover { color: var(--brass); border-color: var(--brass); }
.car-seta svg, .car-pausa svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.car-pausa { margin-left: auto; }
.car-pausa .i-toca { display: none; fill: currentColor; stroke: none; }
.car-pausa[aria-pressed="true"] .i-pausa { display: none; }
.car-pausa[aria-pressed="true"] .i-toca { display: block; }
.car-pontos { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 0 var(--space-xs); }
.car-ponto { position: relative; width: 2.6rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; }
.car-ponto i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: oklch(1 0 0 / 0.22); overflow: hidden; }
.car-ponto i::after { content: ""; position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; }
.car-ponto.is-ativo i::after { transform: scaleX(1); }
.car-ponto.rodando i::after { animation: progresso var(--dur, 6800ms) linear forwards; }
.apresentacao.pausada .car-ponto.rodando i::after { animation-play-state: paused; }
@keyframes progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* introdução às coleções */
.intro-colecoes { background: var(--ink-2); padding: var(--space-4xl) var(--gutter) var(--space-2xl); display: grid; gap: var(--space-md); justify-items: start; }
.intro-colecoes > * { width: 100%; max-width: var(--max); margin-inline: auto; }
.intro-colecoes .sub { max-width: 52ch; margin-inline: 0; margin-left: max(0px, calc((100% - var(--max)) / 2)); }

/* canecas */
.v-canecas { display: grid; place-items: center; }
.v-canecas .can { width: min(100%, 600px); border: 1px solid var(--ink-3); background: #1d1b19; box-shadow: 0 30px 60px -28px oklch(0 0 0 / 0.75); }

@media (max-width: 960px) {
  .slides { height: 100svh; min-height: 620px; }
  .slide { align-items: stretch; padding: calc(var(--topo-h) + 1.1rem) var(--gutter) 5.2rem; }
  .slide-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-md); height: 100%; }
  .slide-texto { gap: var(--space-sm); }
  .slide .lead { font-size: 0.95rem; line-height: 1.5; }
  .slide .btn { min-height: 2.75rem; }
  .v-canecas .can { width: auto; max-width: 100%; max-height: 100%; }
  .slide .display, .slide .display-menor { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .slide-visual { min-height: 0; height: 100%; }
  .slide-glow { right: 50%; translate: 50% -20%; width: 120vw; top: 62%; }
  .v-modelos .mod-a { left: 6%; width: 50%; }
  .v-modelos .mod-b { right: 4%; width: 42%; }
  .car-seta { width: 2.5rem; height: 2.5rem; }
  .car-ponto { width: 1.7rem; }
  .car-ui { gap: var(--space-xs); bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide-visual { transition-duration: 0.001ms !important; }
  .slide.is-ativo .slide-texto > * { animation: none; opacity: 1; transform: none; }
  .slide.is-ativo .v-modelos .mod { animation: none; }
}