/* NÓVERA — MOVIMENTO, CONFIANÇA E DETALHES
   Estados iniciais escondidos só existem com html.motion (definido pelo js/motion.js).
   Sem JS ou com "reduzir movimento", tudo aparece na posição final. */

:root { --m-ease: cubic-bezier(.16, 1, .3, 1); --m-io: cubic-bezier(.76, 0, .24, 1); }

/* rolagem suave do motor: o CSS não pode animar cada quadro de novo */
html.smooth-on { scroll-behavior: auto !important; }

/* ---------- títulos palavra por palavra ---------- */
.rvw .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .08em .16em 0; margin: -.06em -.08em -.16em 0; }
.rvw .wi { display: inline-block; will-change: transform; }
html.motion .rvw:not(.is-in) .wi { transform: translate3d(0, 112%, 0) rotate(2deg); }
html.motion .rvw.is-in .wi { transform: none; transition: transform 1.15s var(--m-ease) var(--d, 0ms); }

/* ---------- blocos ---------- */
html.motion [data-rv]:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
html.motion [data-rv].is-in { opacity: 1; transform: none; transition: opacity 1s ease var(--d, 0ms), transform 1.2s var(--m-ease) var(--d, 0ms); }

/* ---------- cards ---------- */
html.motion .card.rv-card:not(.is-in) { opacity: 0; transform: translate3d(0, 38px, 0); }
html.motion .card.rv-card.is-in { opacity: 1; transform: none; transition: opacity .9s ease var(--d, 0ms), transform 1.15s var(--m-ease) var(--d, 0ms); }

/* foto alternativa e brilho no hover (desktop) */
.card-media .photo-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s ease, transform 1.2s var(--m-ease); z-index: 1; pointer-events: none; }
.experience #sob-encomenda .card-media .photo-alt { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card-media:hover .photo-alt.ready { opacity: 1; }
  .card .card-media::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, #fff1d81c 47%, #ffe7bf33 50%, #fff1d814 53%, transparent 62%);
    transform: translateX(-120%); transition: none;
  }
  .card .card-media:hover::before { transform: translateX(120%); transition: transform 1.1s var(--m-ease); }
  /* com o cursor contextual, a etiqueta "EXPLORAR" sai de cena */
  html.cursor-on .card .card-media::after { display: none; }
}

/* ---------- faixa de marcas ---------- */
.experience #brandStrip.is-marquee { display: block; overflow: hidden; padding-left: 0; padding-right: 0; justify-content: initial; }
#brandStrip .marquee-track { display: flex; width: max-content; animation: novera-marquee 46s linear infinite; }
#brandStrip .marquee-group { display: flex; align-items: center; flex: none; gap: clamp(36px, 5vw, 84px); padding-right: clamp(36px, 5vw, 84px); }
#brandStrip .marquee-group span::after { content: '✦'; display: inline-block; margin-left: clamp(36px, 5vw, 84px); font-size: .55em; color: #9c8466; vertical-align: middle; transform: translateY(-.1em); }
@keyframes novera-marquee { to { transform: translate3d(-25%, 0, 0); } }
#brandStrip:hover .marquee-track { animation-play-state: paused; }

/* ---------- cursor contextual ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; width: 0; height: 0; }
.cursor-label {
  position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; background: #f3eee4; color: #1d1712;
  font: 600 10px/1 Manrope, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  transform: scale(0); transition: transform .45s var(--m-ease); box-shadow: 0 10px 40px #0006;
}
.cursor.is-on .cursor-label { transform: scale(1); }
html.cursor-on .card-media, html.cursor-on .anatomy-figure { cursor: none; }

/* ---------- botões magnéticos ---------- */
[data-magnetic] { transition: transform .55s var(--m-ease), background-color .3s ease, color .3s ease, border-color .3s ease; }

/* ---------- assinatura do rodapé ---------- */
.footer-wordmark { overflow: hidden; }
.footer-wordmark span { display: inline-block; will-change: transform; }

/* ---------- grão de filme em toda a página ---------- */
body.experience::after {
  content: ''; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .035;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- foco visível consistente ---------- */
.experience :focus-visible { outline: 2px solid #e8cfa4; outline-offset: 4px; border-radius: 2px; }

/* ---------- prova de confiança (somente afirmações confirmadas pela loja) ---------- */
.trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font: 500 10px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #d9c7aa; }
.trust-line li { display: inline-flex; align-items: center; gap: 9px; }
.trust-line li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #d8b47c; box-shadow: 0 0 10px #e7b8708c; flex: none; }
.experience #hero .hero-proof { margin-top: 30px; }
.m-proof { margin-top: 2px; color: #cdbb9d; font-size: 10px; letter-spacing: .1em; }
.foot-proof { max-width: var(--max); margin: 56px auto 0; color: #cdbb9d; }

.hero-caption-link { color: inherit; text-decoration: none; }
.hero-caption-link small { transition: color .3s ease; }
.hero-caption-link:hover small, .hero-caption-link:focus-visible small { color: #f3e6ce; }

/* ---------- ficha do produto ---------- */
.m-twin:empty { display: none; }
.m-dock { display: none; }
@media (max-width: 600px) {
  /* barra de compra fixa no pé da ficha enquanto o botão principal está fora da tela */
  .experience .modal-info { padding-bottom: 0; }
  .m-dock {
    position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    margin: 6px -24px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 20px;
    background: linear-gradient(180deg, #131310e6, #131310 38%); border-top: 1px solid #e4d0ae2e;
    transform: translateY(105%); opacity: 0; transition: transform .5s var(--m-ease), opacity .3s ease; pointer-events: none;
  }
  .m-dock.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  .m-dock-price { font: 500 16px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: #f3eee4; white-space: nowrap; }
  .m-dock-price small { display: block; font-size: 10px; color: #b9ad9a; letter-spacing: .06em; font-weight: 400; }
  .m-dock .btn { min-height: 46px; padding-inline: 14px; font-size: 12px; justify-content: center; }
  .m-dock .m-dock-wa { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #e4d0ae55; color: #e9dcc5; }
  .m-dock .m-dock-wa svg { width: 20px; height: 20px; }
  .experience .modal-info > :last-child.m-dock { margin-bottom: 0; }
}

/* transição da foto do card para a ficha (View Transitions) */
.modal.vt, .modal.vt .modal-card, .modal.vt .modal-scrim { transition: none !important; }
::view-transition-group(novera-product) { animation-duration: .75s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(novera-product), ::view-transition-new(novera-product) { height: 100%; object-fit: contain; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* ---------- descoberta: a atmosfera muda com a família olfativa ---------- */
@property --disc-a { syntax: '<color>'; inherits: false; initial-value: #30372d; }
@property --disc-b { syntax: '<color>'; inherits: false; initial-value: #8e957331; }
.experience #discoveryRoot {
  --disc-a: #30372d; --disc-b: #8e957331;
  background:
    radial-gradient(ellipse at 4% 20%, var(--disc-b), transparent 56%),
    radial-gradient(ellipse at 95% 95%, #aa785420, transparent 58%),
    linear-gradient(125deg, var(--disc-a), #202823 65%, #2d3028);
  transition: --disc-a 1.4s ease, --disc-b 1.4s ease;
}
.experience #discoveryRoot[data-atmosphere="fresh"] { --disc-a: #24403e; --disc-b: #6fb3b02e; }
.experience #discoveryRoot[data-atmosphere="warm"] { --disc-a: #4a2c1b; --disc-b: #d7894433; }
.experience #discoveryRoot[data-atmosphere="floral"] { --disc-a: #47283a; --disc-b: #d48aa22e; }
.experience #discoveryRoot[data-atmosphere="wood"] { --disc-a: #3b2a1b; --disc-b: #b07a4a30; }
html.motion #discoveryRoot .discovery-panel > *, html.motion #discoveryRoot .discovery-results > * { animation: novera-step .8s var(--m-ease) both; }
html.motion #discoveryRoot .discovery-panel > :nth-child(2) { animation-delay: .06s; }
html.motion #discoveryRoot .discovery-panel > :nth-child(3) { animation-delay: .12s; }
html.motion #discoveryRoot .discovery-panel > :nth-child(4) { animation-delay: .18s; }
html.motion #discoveryRoot .discovery-results > :nth-child(2) { animation-delay: .1s; }
html.motion #discoveryRoot .discovery-results > :nth-child(3) { animation-delay: .2s; }
html.motion #discoveryRoot .discovery-atmospheres .discovery-choice { animation: novera-step .9s var(--m-ease) both; }
html.motion #discoveryRoot .discovery-atmospheres .discovery-choice:nth-child(2) { animation-delay: .07s; }
html.motion #discoveryRoot .discovery-atmospheres .discovery-choice:nth-child(3) { animation-delay: .14s; }
html.motion #discoveryRoot .discovery-atmospheres .discovery-choice:nth-child(4) { animation-delay: .21s; }
@keyframes novera-step { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.experience::after { display: none; }
  #brandStrip .marquee-track { animation: none; }
  .experience #brandStrip.is-marquee { overflow-x: auto; }
  .card-media .photo-alt { display: none; }
}