/* Proposta para "Por dentro": composição anterior com bordas definidas.
   Universos, entrada e transições preservam o tratamento do Claude. */
.loja-item .frame {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.loja-track { gap: 6vh; }
.loja-item,
.loja-item + .loja-item { margin: 0; width: 86%; }
.loja-item.is-wide { width: 100%; }
.loja-item.is-low { justify-self: end; }
.loja-track .loja-item .frame { aspect-ratio: 9 / 16; border-radius: 6px; }
.loja-track .loja-item.is-wide .frame { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .is-animated .loja-pin { align-items: center; }
  .is-animated .loja-track {
    align-items: center;
    gap: 5vw;
    height: auto;
    padding: 0 12vw 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  }
  .is-animated .loja-intro { width: min(34vw, 540px); margin-right: 0; }
  .is-animated .loja-item,
  .is-animated .loja-item + .loja-item { width: auto; height: auto; margin: 0; }
  .is-animated .loja-track .loja-item .frame { height: 70vh; width: calc(70vh * 9 / 16); }
  .is-animated .loja-track .loja-item.is-wide .frame {
    width: 58vw; height: auto; aspect-ratio: 16 / 9;
  }
  .is-animated .loja-item.is-low { margin-top: 12vh; }
}


/* Produto original sobre o cenário animado: os rótulos conservam seus pixels. */
.u-original-base,
.u-produto-fiel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.u-original-base { z-index: 0; }
.u-cena.is-protected video { z-index: 1; opacity: 0; }
.u-cena.is-protection-ready video { opacity: 1; }
.u-produto-fiel {
  z-index: 2;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.u-cena.is-original-only .u-produto-fiel { display: none; }

/* O movimento fica no vídeo de fundo; a embalagem não recebe zoom individual. */
.u-cena.is-protected {
  transform: none;
  transition: opacity 1.3s var(--ease), visibility 0s 1.3s;
}
.u-cena.is-protected.is-on {
  transform: none;
  transition: opacity 1.3s var(--ease), visibility 0s;
}


/* Prada oficial e Skelt Perfume Mists: fotos inteiras e estaticas. */
.u-cena.is-still-photo video { display: none; }
.u-cena.is-still-photo .u-original-base {
  --photo-inset: clamp(12px, 3vh, 32px);
  width: auto;
  height: auto;
  max-width: calc(100% - var(--photo-inset) - var(--photo-inset));
  max-height: calc(100% - var(--photo-inset) - var(--photo-inset));
  margin: auto;
  padding: 0;
  object-fit: contain;
  /* A mascara acompanha a borda real da foto, inclusive com contain. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* Fachada mais ampla: recorte sem calcada e continuidade pelo scroll. */
.hero { background: var(--paper); }
.hero-store-ambient {
  position: absolute; inset: -12%; width: 124%; height: 124%;
  filter: blur(52px) saturate(.85); opacity: .12; pointer-events: none;
}
.hero-store-frame {
  --pluma: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 84%, transparent);
  position: absolute; top: 0; bottom: 0; right: -2%; width: min(74vw, 72svh);
  opacity: .70;
  -webkit-mask-image: var(--pluma); mask-image: var(--pluma);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero .hero-store-fallback, .hero-store-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.hero .hero-store-fallback { height: 130%; }
.hero-store-canvas { z-index: 1; }
@media (min-width: 900px) {
  .hero { min-height: 92svh; }
  .hero-copy { padding-bottom: 9vh; }
  .is-animated .scroll-cue { bottom: 8vh; }
}
@media (max-width: 899px) {
  .hero-store-frame { left: 0; right: 0; width: 100%; opacity: .44; }
  .hero-store-ambient { opacity: .08; }
}
/* Foto permanente sob o video: nunca depender do poster nativo no trecho fixo. */
.loja-visual { position: absolute; inset: 0; isolation: isolate; }
.loja-visual .loja-poster, .loja-visual video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.loja-visual .loja-poster { z-index: 0; }
.loja-visual video { z-index: 1; opacity: 0; transition: opacity .25s ease; }
.loja-visual.is-video-ready video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .loja-visual video { display: none; }
}
/* Fundo da galeria: arquitetura real da loja, suave e com as cores da marca. */
.loja-pin { isolation: isolate; }
.loja-pin::before, .loja-pin::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.loja-pin::before {
  background: url('../media/parede.jpg') center 37% / cover no-repeat;
  opacity: .22; filter: saturate(.38) sepia(.22);
}
.loja-pin::after {
  background:
    linear-gradient(90deg, rgba(247, 243, 234, .87), rgba(247, 243, 234, .53) 32%, rgba(247, 243, 234, .12) 72%),
    linear-gradient(180deg, var(--paper), rgba(247, 243, 234, 0) 22%, rgba(247, 243, 234, 0) 78%, var(--paper));
}
.loja-track { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .loja-pin::before { background-size: auto 120svh; background-position: right top; opacity: .16; }
  .loja-pin::after {
    background: linear-gradient(180deg, var(--paper), rgba(247, 243, 234, .35) 12%, rgba(247, 243, 234, .55) 30%, var(--paper) 48%);
  }
}
/* Luz no monograma oficial: um fundo de marca discreto atras da abertura. */
.hero-atmosphere { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-brand-wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(191, 197, 168, .18), rgba(210, 199, 176, .10) 35%, rgba(235, 221, 185, .13) 52%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
}
.hero-brand-mark {
  position: absolute; left: -5%; top: 3%; width: min(47vw, 630px); height: 87%;
  overflow: hidden; opacity: .12; background: var(--gold); transform: rotate(-10deg);
  -webkit-mask: url('../img/fb.png') center / contain no-repeat;
  mask: url('../img/fb.png') center / contain no-repeat;
}
.hero-brand-light {
  position: absolute; inset: -15% -100% -15% -100%;
  background: linear-gradient(110deg, transparent 32%, var(--paper) 46%, var(--gold-light) 51%, transparent 62%);
  transform: translateX(-30%);
}
@media (max-width: 899px) {
  .hero-brand-wash { right: 0; opacity: .75; }
  .hero-brand-mark { width: 92vw; height: 70%; left: -17%; top: 4%; opacity: .08; }
}
/* Celular: fachada numa camada propria, entre o monograma e o texto. */
@media (max-width: 899px) {
  .hero { background: var(--paper); }
  .hero-media { display: contents; }
  .hero::after, .hero-store-ambient, .hero-store-canvas { display: none; }
  .hero-atmosphere { z-index: 1; }
  .hero-copy { z-index: 3; }
  .hero-actions .btn.is-ghost { background: rgba(247, 243, 234, .84); }
  .hero-store-frame {
    z-index: 2; top: 28svh; bottom: auto; left: 0; right: 0; width: 100%; height: auto;
    aspect-ratio: 900 / 1232; overflow: hidden; opacity: 1; -webkit-mask: none; mask: none;
  }
  .hero .hero-store-fallback { height: auto; object-fit: contain; object-position: center top; opacity: .76; }
  /* Dissolver a foto para o fundo existente evita a faixa de creme sobre o monograma. */
  .hero-store-frame {
    -webkit-mask-image: linear-gradient(180deg, transparent, transparent 8%, rgba(0, 0, 0, .25) 26%, #000 47%, #000 76%, transparent);
    mask-image: linear-gradient(180deg, transparent, transparent 8%, rgba(0, 0, 0, .25) 26%, #000 47%, #000 76%, transparent);
  }
  .hero-store-frame::after { content: none; }
}
/* Um unico recorte suave evita emendas entre as camadas da fachada. */
.hero-store-ambient { display: none; }
@media (min-width: 900px) {
  .hero-store-frame {
    -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  }
  .hero-store-frame > img, .hero-store-frame > canvas {
    -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 76%, transparent);
    mask: linear-gradient(180deg, transparent, #000 15%, #000 76%, transparent);
  }
  .hero-store-frame.is-sequence-ready .hero-store-fallback { visibility: hidden; }
}
/* O palco fica preso apenas dentro da secao dos universos, sem reposicionamento JS. */
.is-animated .u-scroll { position: relative; height: calc(100svh + var(--u-scroll-distance, 425svh)); }
.is-animated .u-scroll .u-stage { position: sticky; top: 0; isolation: isolate; }

/* Letras da marca preenchem o fundo da galeria no celular e acompanham o scroll. */
.loja-pin { position: relative; }
.loja-type-bg { display: none; }
@media (max-width: 899px) {
  .loja-type-bg {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
    justify-content: space-around; overflow: hidden; pointer-events: none;
    color: rgba(134, 103, 63, .13);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  }
  .loja-type-bg span {
    flex: none; width: max-content; max-width: none; font-family: var(--caps);
    font-size: 28vw; line-height: 1.15; letter-spacing: .08em; white-space: nowrap;
    transform: translateX(-10%);
  }
  .loja-track { z-index: 2; }
}

/* Dissolver os fundos no limite da secao, sem uma faixa opaca sobreposta. */
.hero {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 96px), transparent);
}
.u-fundo {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
@media (max-width: 899px) {
  .hero-store-frame > img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

/* Fundo e letras da galeria chegam ate a borda da tela, sem faixas laterais. */
@media (max-width: 899px) {
  .loja { padding-left: 0; padding-right: 0; }
  .loja-track { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* A arquitetura da galeria se dissolve no fundo, inclusive no inicio do pin. */
.loja-pin::before, .loja-pin::after {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 clamp(72px, 10svh, 120px), #000 calc(100% - clamp(72px, 10svh, 120px)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 clamp(72px, 10svh, 120px), #000 calc(100% - clamp(72px, 10svh, 120px)), transparent);
}
@media (max-width: 899px) {
  .hero-store-fallback { transform-origin: 50% 40%; }
}

/* Celular usa os mesmos quadros da cena, desenhados no canvas, em tamanho leve. */
@media (max-width: 899px) {
  .hero-store-canvas {
    display: block; opacity: .76;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .hero-store-frame.is-sequence-ready .hero-store-fallback { visibility: hidden; }
}

/* Primeiro a rolagem percorre a cena; depois o topo sai e libera a pagina. */
.hero-scroll { position: relative; }
@media (max-width: 899px) {
  .is-animated .hero-scroll { height: 230svh; }
  .is-animated .hero-scroll > .hero {
    position: sticky; top: 0; height: 100svh; min-height: 100svh;
  }
}

/* Desktop: um trecho curto de rolagem percorre a cena antes de liberar a pagina. */
@media (min-width: 900px) {
  .is-animated .hero-scroll { height: 180svh; }
  .is-animated .hero-scroll > .hero {
    position: sticky; top: 0; height: 100svh; min-height: 100svh;
  }
}
/* Botoes de vidro no topo: fachada visivel atraves do preenchimento leve. */
.hero-actions .btn {
  background: rgba(247, 243, 234, .16);
  color: var(--ink);
  border-color: rgba(44, 46, 36, .50);
  -webkit-backdrop-filter: blur(2px) saturate(1.08);
  backdrop-filter: blur(2px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 4px 12px rgba(44, 46, 36, .04);
}
.hero-actions .btn.is-ghost {
  background: rgba(247, 243, 234, .12);
  color: var(--ink);
  border-color: rgba(44, 46, 36, .30);
}
.hero-actions .btn:hover { background: rgba(247, 243, 234, .30); color: var(--ink); }
.hero-actions .btn.is-ghost:hover { background: rgba(247, 243, 234, .24); }
.hero-actions .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-actions .btn, .hero-actions .btn.is-ghost { background: rgba(247, 243, 234, .24); }
}

/* Celular: sem os botões da capa ("Ver produtos" e "Falar no WhatsApp"), que ficavam por cima do letreiro da fachada.
   O WhatsApp continua no botão do cabeçalho e os produtos vêm na rolagem (pedido do Vinicius, 01/11/2026). */
@media (max-width: 899px) {
  .hero-actions { display: none; }
}

/* Capa mais visível (01/11/2026): a fachada sem transparência, com o esfumado só nas bordas,
   e a câmera continua até dentro da loja (112 quadros em vez de 48), com um trecho preso um pouco maior. */
@media (min-width: 900px) {
  .hero-store-frame {
    opacity: 1; width: min(76vw, 80svh); right: -3%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    mask: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  }
  .hero-store-frame > img, .hero-store-frame > canvas {
    -webkit-mask: linear-gradient(180deg, transparent, #000 7%, #000 86%, transparent);
    mask: linear-gradient(180deg, transparent, #000 7%, #000 86%, transparent);
  }
  .is-animated .hero-scroll { height: 250svh; }
}
@media (max-width: 899px) {
  .hero-store-canvas, .hero .hero-store-fallback { opacity: 1; }
  /* A cena começa logo abaixo do texto, para o parágrafo não ficar por cima do letreiro nem do teto da loja. */
  .hero-store-frame {
    top: 38svh;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 84%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 11%, #000 84%, transparent);
  }
  .is-animated .hero-scroll { height: 300svh; }
}

/* Celular: recorte acima do letreiro, esfumado apenas no topo e cena abaixo do texto. */
@media (max-width: 899px) {
  .hero,
  .hero-store-frame > img,
  .hero-store-frame > canvas {
    -webkit-mask: none;
    mask: none;
  }
  .hero { grid-template-rows: auto 1fr; align-content: start; }
  .hero-copy { grid-row: 1; grid-column: 1; padding-bottom: 0; }
  .hero-store-frame {
    position: relative; grid-row: 2; grid-column: 1; align-self: start;
    top: auto; bottom: auto; left: auto; right: auto; margin-top: 20px;
    aspect-ratio: 900 / 960;
    -webkit-mask: linear-gradient(180deg, transparent, #000 20px, #000);
    mask: linear-gradient(180deg, transparent, #000 20px, #000);
  }
  .hero-store-frame > canvas { top: -28.333333%; bottom: auto; height: 128.333333%; }
  .hero-store-frame > img { top: -28.333333%; bottom: auto; }
}