/* ============================================================
   Everkind — Passeio da loja
   Cenário fixo que muda conforme a rolagem: envelope que se abre,
   cartões em leque e envelopes em voo. Os textos rolam por cima.
   ============================================================ */

.passeio { position: relative; background: var(--oleo); color: var(--papel); }
.passeio-palco {
  position: sticky; top: var(--topo-altura); height: calc(100vh - var(--topo-altura)); height: calc(100svh - var(--topo-altura));
  overflow: hidden; isolation: isolate;
}

/* Camadas de fundo que se cruzam */
.pf { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.pf-oleo { opacity: 1; background: radial-gradient(60% 55% at 64% 45%, rgba(100, 19, 19, .55) 0%, transparent 70%), radial-gradient(45% 45% at 8% 95%, rgba(156, 97, 76, .2) 0%, transparent 70%), var(--oleo); }
.pf-vinho { background: radial-gradient(70% 70% at 64% 40%, #7a1c1c 0%, var(--vinho-escuro) 75%); }
.pf-pergaminho { background: radial-gradient(70% 70% at 62% 45%, #fbf1dc 0%, var(--pergaminho) 70%, #e2c48f 100%); }
.pf-vinho2 { background: radial-gradient(70% 70% at 60% 35%, #7a1c1c 0%, var(--vinho) 55%, var(--vinho-escuro) 100%); }
.pf-grao { position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.p-flor { position: absolute; width: min(62vmin, 620px); aspect-ratio: 1; right: -8vmin; bottom: -14vmin; opacity: 0; will-change: transform, opacity; }
.p-flor img { width: 100%; height: 100%; }

/* Área onde os objetos aparecem (à direita no computador) */
.p-cena { position: absolute; left: 58%; top: 50%; width: 0; height: 0; }

/* Envelope que se abre */
.p-envelope { position: absolute; width: min(46vmin, 460px); aspect-ratio: 3 / 2; left: 0; top: 0; transform: translate(-50%, -30%); perspective: 1600px; will-change: transform, opacity; }
.p-env-sombra { position: absolute; inset: 8% 4% -6%; background: rgba(0, 0, 0, .55); filter: blur(28px); border-radius: 50%; transform: translateY(18%); }
.p-env-fundo { position: absolute; inset: 0; background: var(--vinho-escuro); border-radius: 5px; }
.p-env-cartao {
  position: absolute; left: 7%; right: 7%; top: 5%; height: 90%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8%; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #fbf1dc 0%, var(--papel) 55%, #efdcb6 100%);
  border-radius: 3px; box-shadow: 0 -2px 14px rgba(61, 12, 12, .2); will-change: transform;
}
.p-env-cartao::before { content: ""; position: absolute; inset: 5%; border: 1px solid color-mix(in srgb, var(--vinho) 35%, transparent); }
.p-env-cartao img { width: 20%; height: auto; }
.p-env-cartao strong { font-family: var(--serif-display); font-weight: 400; color: var(--vinho); font-size: clamp(1rem, 3vmin, 1.9rem); letter-spacing: .06em; margin-top: .4em; line-height: 1; }
.p-env-cartao small { font-family: var(--sans-marca); font-size: clamp(.45rem, 1.1vmin, .65rem); letter-spacing: .3em; color: var(--rosa-antigo); margin-top: .7em; }
.p-env-bolso { position: absolute; inset: 0; z-index: 3; }
.p-env-bolso svg, .p-env-aba svg { width: 100%; height: 100%; display: block; }
.p-env-aba { position: absolute; left: 0; top: 0; width: 100%; height: 62%; z-index: 4; transform-origin: top center; transform-style: preserve-3d; will-change: transform; }
.p-lacre {
  position: absolute; left: 50%; top: 82%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9b37a 0%, #b98a4c 45%, #8a6230 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(255, 240, 210, .25);
  display: grid; place-items: center; backface-visibility: hidden;
}
.p-lacre img { width: 46%; opacity: .9; mix-blend-mode: multiply; }

/* Cartões em leque */
.p-cartoes { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.p-cartao {
  position: absolute; width: min(24vmin, 240px); aspect-ratio: 5 / 7; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; text-align: center; padding: 12%;
  background: radial-gradient(120% 90% at 50% 0%, #fffaf0 0%, var(--papel) 60%, #ecd7ae 100%);
  color: var(--vinho); box-shadow: 0 30px 45px rgba(61, 12, 12, .28), 0 4px 10px rgba(61, 12, 12, .18);
  border-radius: 2px; will-change: transform, opacity; opacity: 0;
}
.p-cartao::before { content: ""; position: absolute; inset: 6%; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); }
.p-cartao img { width: 34%; height: auto; }
.p-cartao img.flor { width: 58%; opacity: .8; }
.p-cartao strong { font-family: var(--serif-display); font-weight: 400; font-size: clamp(.8rem, 2.1vmin, 1.25rem); line-height: 1.15; }
.p-cartao small { font-family: var(--sans-marca); font-size: clamp(.4rem, .95vmin, .58rem); letter-spacing: .28em; opacity: .75; }
.p-cartao.vinho { background: radial-gradient(120% 90% at 50% 0%, #7a1c1c 0%, var(--vinho) 60%, var(--vinho-escuro) 100%); color: var(--ouro); }

/* Envelopes em voo */
.p-voo { position: absolute; inset: 0; pointer-events: none; }
.p-mini {
  position: absolute; width: var(--l, 15vmin); aspect-ratio: 3 / 2; left: var(--x); top: 0; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(180deg, #f6e6c4, #e9d3a6); border-radius: 3px;
  box-shadow: 0 18px 30px rgba(30, 10, 10, .35);
}
.p-mini::before { content: ""; position: absolute; inset: 0 0 auto; height: 58%; background: #efdcb6; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(61, 12, 12, .2)); }
.p-mini::after { content: ""; position: absolute; left: 50%; top: 52%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a3302a, var(--vinho) 60%, var(--vinho-escuro)); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.p-mini.escuro { background: linear-gradient(180deg, #4a1010, var(--vinho-escuro)); }
.p-mini.escuro::before { background: #5a1414; }
.p-mini.escuro::after { background: radial-gradient(circle at 35% 30%, #e6c795, #b98a4c 60%, #8a6230); }

/* Textos que rolam por cima */
.passeio-paineis { position: relative; margin-top: calc(-100vh + var(--topo-altura)); margin-top: calc(-100svh + var(--topo-altura)); z-index: 2; pointer-events: none; }
.painel { min-height: 125vh; display: flex; align-items: center; }
.painel-texto { pointer-events: auto; width: min(100% - 3rem, var(--largura)); margin-inline: auto; }
.painel-texto > div { max-width: 27rem; }
.painel .olho { font-family: var(--serif-display); font-style: italic; font-size: 1.15rem; margin: 0 0 .75rem; color: var(--ouro); }
.painel h1, .painel h2 { color: inherit; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; margin-bottom: 1.25rem; }
.painel p { font-size: 1.2rem; color: inherit; opacity: .85; }
.painel .numero { font-family: var(--sans-marca); font-size: .78rem; letter-spacing: .2em; opacity: .7; margin-bottom: 1rem; display: block; }
.painel a.seguir { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; font-family: var(--sans-marca); font-size: .9rem; letter-spacing: .05em; color: inherit; text-decoration: none; padding-bottom: .3rem; border-bottom: 1px solid currentColor; }
.painel a.seguir span { transition: transform .3s ease; }
.painel a.seguir:hover span { transform: translateX(4px); }
.painel-claro { color: var(--papel); }
.painel-escuro { color: var(--vinho); }
.painel-escuro .olho { color: var(--rosa-antigo); }
.painel-ouro { color: var(--ouro); }
.painel-ouro .olho { color: var(--papel); }
.rolar { display: inline-flex; align-items: center; gap: .75rem; margin-top: 2rem; font-family: var(--sans-marca); font-size: .78rem; letter-spacing: .2em; opacity: .75; }
.rolar i { display: block; width: 1px; height: 2.6rem; background: linear-gradient(currentColor, transparent); animation: rolar 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes rolar { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Índice lateral */
.p-indice { position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); z-index: 5; list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.p-indice button { display: flex; align-items: center; gap: .7rem; justify-content: flex-end; background: none; border: 0; padding: .2rem 0; cursor: pointer; color: inherit; font-family: var(--sans-marca); font-size: .72rem; letter-spacing: .12em; opacity: .55; transition: opacity .3s ease; }
.p-indice button::after { content: ""; width: 1.4rem; height: 1px; background: currentColor; transition: width .3s ease; }
.p-indice button[aria-current] { opacity: 1; }
.p-indice button[aria-current]::after { width: 2.6rem; }
.p-indice button span { opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.p-indice button[aria-current] span, .p-indice:hover button span { opacity: 1; transform: none; }
.passeio-palco { color: var(--papel); transition: color .4s ease; }
.passeio-palco.claro { color: var(--vinho); }

/* Celular: objetos no alto, texto embaixo */
@media (max-width: 760px) {
  .p-cena { left: 50%; top: 30%; }
  .p-envelope { width: min(68vw, 46vh); }
  .p-cartao { width: 34vw; }
  .p-flor { width: 90vw; right: -30vw; bottom: -20vw; }
  .painel { align-items: flex-end; padding-bottom: 14vh; }
  .painel:first-child { min-height: calc(100vh - var(--topo-altura)); min-height: calc(100svh - var(--topo-altura)); padding-bottom: 7vh; }
  .painel-texto > div { max-width: none; padding: 1.25rem 0 0; }
  .painel h1, .painel h2 { font-size: clamp(2.1rem, 9vw, 2.8rem); margin-bottom: .75rem; }
  .painel p { font-size: 1.05rem; }
  .p-indice { display: none; }
}
/* Celulares baixos: texto mais compacto para não encostar no envelope */
@media (max-width: 760px) and (max-height: 760px) {
  .painel h1, .painel h2 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .painel p { font-size: .98rem; line-height: 1.55; margin-bottom: .6em; }
  .painel .olho { font-size: 1rem; margin-bottom: .4rem; }
  .painel .numero { margin-bottom: .5rem; }
  .rolar { margin-top: .75rem; }
  .p-cartao { width: min(34vw, 22vh); }
}

@media (prefers-reduced-motion: reduce) {
  .rolar i { animation: none; }
}

/* Celular: um véu discreto atrás do texto para não brigar com os objetos */
@media (max-width: 760px) {
  .painel-texto > div { padding: 1.25rem 1.25rem 1rem; margin-inline: -1.25rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .painel-claro .painel-texto > div { background: rgba(30, 25, 23, .42); }
  .painel-escuro .painel-texto > div { background: rgba(251, 241, 220, .55); }
  .painel-ouro .painel-texto > div { background: rgba(61, 12, 12, .45); }
}