/* Abertura da marca — carregado antes do React. Motions via data-mm. */

html.vyner-opening,
html.vyner-opening body {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.vyner-open {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  /* O fundo do tema guardado (index.html, 07/10/2026): no escuro a abertura não pisca clara. */
  background: var(--vyner-open-bg, #f7f8fa);
  pointer-events: none;
  --vyner-mark-src: url('/vyner-mark.png');
}

.vyner-open.is-done {
  opacity: 0;
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.vyner-open.vyner-open--preview,
.vyner-open.vyner-open--preview-sm {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: 240px;
  border-radius: 12px;
  overflow: visible;
  pointer-events: none;
}

.vyner-open.vyner-open--preview-sm {
  height: 156px;
  border-radius: 10px 10px 0 0;
}

.vyner-open--preview .vyner-open__field,
.vyner-open--preview-sm .vyner-open__field {
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.vyner-open__field {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse 70% 55% at 32% 38%, #ffffff 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 74% 64%, #eef1f4 0%, transparent 52%),
    #f7f8fa;
}

/*
 * ANTI-REGRESSION (marca / abertura): logo dá um “ajuste” no primeiro instante
 * Causa: palco 118px centrava a caixa, não a marca; keyframes 0% ≠ transform none.
 * Correção: palco = 92px; origem 50% 50%; 0%/100% no repouso.
 * Se voltar: não repor height 118px nem translateY no frame 0.
 * Ver `.cursor/rules/vyner-mark-loader.mdc`
 */
.vyner-open__stage {
  position: relative;
  width: 92px;
  height: 92px;
  perspective: 920px;
  perspective-origin: 50% 50%;
}

.vyner-open--preview-sm .vyner-open__stage {
  width: 72px;
  height: 72px;
}

.vyner-open__shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 64px;
  height: 10px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.09) 0%, transparent 72%);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}

.vyner-open--preview-sm .vyner-open__shadow {
  width: 36px;
  margin-left: -18px;
  height: 7px;
}

.vyner-open__mark {
  position: relative;
  display: block;
  width: 92px;
  height: 92px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation-fill-mode: backwards;
}

.vyner-open--preview-sm .vyner-open__mark {
  width: 72px;
  height: 72px;
}

.vyner-open__slab {
  position: absolute;
  inset: 0;
  background: var(--vyner-mark-src) center / contain no-repeat;
  transform-origin: 50% 50%;
  animation-fill-mode: backwards;
}

.vyner-open__slab--a { clip-path: inset(0 66.507% 0 0); }
.vyner-open__slab--b { clip-path: inset(0 33.813% 0 33.493%); }
.vyner-open__slab--c { clip-path: inset(0 0 0 66.187%); }

.vyner-open__asset {
  display: none;
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.vyner-open--preview-sm .vyner-open__asset {
  width: 72px;
  height: 72px;
}

.vyner-open--asset .vyner-open__slab { display: none; }
.vyner-open--asset .vyner-open__asset { display: block; }

.vyner-open__ring {
  display: none;
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.14);
  pointer-events: none;
}

/* ——— motions ——— */

.vyner-open[data-mm="studio"] .vyner-open__field,
.vyner-open[data-mm="studio-field"] .vyner-open__field,
.vyner-open[data-mm="grain"] .vyner-open__field {
  animation: vyner-open-drift 16s ease-in-out infinite alternate;
}

.vyner-open[data-mm="float-3d"] .vyner-open__field {
  animation: vyner-open-drift 16s ease-in-out infinite alternate;
}

.vyner-open[data-mm="hold"] .vyner-open__field {
  animation: vyner-open-hold-field 10s ease-in-out infinite;
}

.vyner-open[data-mm="veil"] .vyner-open__field {
  animation: vyner-open-veil 18s ease-in-out infinite alternate;
}

.vyner-open[data-mm="studio"] .vyner-open__mark {
  animation: vyner-open-tilt 11s ease-in-out infinite;
}

.vyner-open[data-mm="quiet-tilt"] .vyner-open__mark {
  animation: vyner-open-tilt-2 18s ease-in-out infinite;
}

.vyner-open[data-mm="nod"] .vyner-open__mark {
  animation: vyner-open-nod 7s ease-in-out infinite;
}

.vyner-open[data-mm="mist"] .vyner-open__mark {
  animation: vyner-open-mist 5.5s ease-in-out infinite;
}

.vyner-open[data-mm="tick"] .vyner-open__mark {
  animation: vyner-open-tick 3.8s ease-in-out infinite;
}

.vyner-open[data-mm="settle"] .vyner-open__mark {
  animation: vyner-open-settle 5.2s ease-in-out infinite;
}

.vyner-open[data-mm="count"] .vyner-open__mark {
  animation: vyner-open-count 1.6s steps(1, end) infinite;
}

.vyner-open[data-mm="draw"] .vyner-open__mark {
  animation: vyner-open-draw 3.4s ease-in-out infinite;
}

.vyner-open[data-mm="unfold"] .vyner-open__mark {
  animation: vyner-open-unfold 3.8s ease-in-out infinite;
}

/*
 * ANTI-REGRESSION (marca / 3D): catálogo 3D parece o mesmo tilt da mesa
 * Causa: preview 48px + overflow hidden achatava preserve-3d; “3D” era tilt 10–14°.
 * Correção: perspectiva no palco, lâminas como planos (clip-path + rotateY).
 * Sem Three.js / API. Catálogo 3D pode ter pose no frame 0; studio continua none.
 * Se voltar: não recortar o card do Master nem repor tilt-10/14 como 3D.
 * Ver `.cursor/rules/vyner-mark-loader.mdc`
 */
.vyner-open[data-mm="card"] .vyner-open__stage,
.vyner-open[data-mm="depth"] .vyner-open__stage,
.vyner-open[data-mm="tilt-wide"] .vyner-open__stage,
.vyner-open[data-mm="float-3d"] .vyner-open__stage,
.vyner-open[data-mm="spin-y"] .vyner-open__stage {
  perspective: 340px;
  transform-style: preserve-3d;
  overflow: visible;
}
.vyner-open[data-mm="card"] .vyner-open__mark,
.vyner-open[data-mm="depth"] .vyner-open__mark,
.vyner-open[data-mm="tilt-wide"] .vyner-open__mark,
.vyner-open[data-mm="float-3d"] .vyner-open__mark,
.vyner-open[data-mm="spin-y"] .vyner-open__mark {
  transform-style: preserve-3d;
}

.vyner-open[data-mm="card"] .vyner-open__mark {
  animation: vyner-open-card 5.5s ease-in-out infinite;
}

.vyner-open[data-mm="tilt-wide"] .vyner-open__mark {
  animation: vyner-open-swing 4.8s ease-in-out infinite;
}

.vyner-open[data-mm="spin-y"] .vyner-open__mark {
  animation: vyner-open-spin-y 8s linear infinite;
}

.vyner-open[data-mm="float-3d"] .vyner-open__mark {
  animation: vyner-open-piece 5s ease-in-out infinite;
}

.vyner-open[data-mm="depth"] .vyner-open__mark {
  transform: rotateX(10deg);
}

.vyner-open[data-mm="depth"] .vyner-open__slab--a,
.vyner-open[data-mm="float-3d"] .vyner-open__slab--a {
  transform-origin: 33.5% 50%;
  animation: vyner-open-triptych-a 6s ease-in-out infinite;
}
.vyner-open[data-mm="depth"] .vyner-open__slab--c,
.vyner-open[data-mm="float-3d"] .vyner-open__slab--c {
  transform-origin: 66.2% 50%;
  animation: vyner-open-triptych-c 6s ease-in-out infinite;
}

.vyner-open[data-mm="breathe"] .vyner-open__mark,
.vyner-open[data-mm="bloom"] .vyner-open__mark {
  animation: vyner-open-breathe 4.2s ease-in-out infinite;
}

.vyner-open[data-mm="bloom"] .vyner-open__mark {
  animation: vyner-open-bloom 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(34, 211, 238, 0.55));
}

.vyner-open[data-mm="cascade"] .vyner-open__slab {
  animation: vyner-open-cascade 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.vyner-open[data-mm="ribbon"] .vyner-open__slab {
  animation: vyner-open-ribbon 1.8s ease-in-out infinite;
}

.vyner-open[data-mm="flare"] .vyner-open__slab,
.vyner-open[data-mm="flare"] .vyner-open__asset {
  animation: vyner-open-flare 1.6s ease-in-out infinite;
}

.vyner-open[data-mm="pulse-ring"] .vyner-open__ring {
  display: block;
  inset: -28px;
  border-width: 2px;
  border-color: rgba(15, 23, 42, 0.28);
  animation: vyner-open-ring 1.8s ease-out infinite;
}

.vyner-open[data-mm="rise"] .vyner-open__mark,
.vyner-open[data-mm="lift"] .vyner-open__mark {
  animation: vyner-open-rise 3.2s ease-in-out infinite;
}

.vyner-open[data-mm="paper"] .vyner-open__mark {
  animation: vyner-open-paper 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vyner-open[data-mm="studio"] .vyner-open__slab,
.vyner-open[data-mm="wave"] .vyner-open__slab,
.vyner-open[data-mm="lift"] .vyner-open__slab {
  animation: vyner-open-wave 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.vyner-open[data-mm="wave-soft"] .vyner-open__slab {
  animation: none;
  transform-origin: 50% 100%;
}
.vyner-open[data-mm="wave-soft"] .vyner-open__slab--a {
  animation: vyner-open-fan-a 3.6s ease-in-out infinite;
}
.vyner-open[data-mm="wave-soft"] .vyner-open__slab--c {
  animation: vyner-open-fan-c 3.6s ease-in-out infinite;
}

.vyner-open[data-mm="wave-slow"] .vyner-open__slab--a {
  animation: vyner-open-solo 3.6s ease-in-out infinite;
}
.vyner-open[data-mm="wave-slow"] .vyner-open__slab--b {
  animation: vyner-open-solo 3.6s ease-in-out infinite 1.2s;
}
.vyner-open[data-mm="wave-slow"] .vyner-open__slab--c {
  animation: vyner-open-solo 3.6s ease-in-out infinite 2.4s;
}

.vyner-open[data-mm="ink"] .vyner-open__slab {
  animation: vyner-open-ink 5s ease-in-out infinite;
}

.vyner-open[data-mm="dim"] .vyner-open__slab {
  animation: none;
  opacity: 1;
}
.vyner-open[data-mm="dim"] .vyner-open__slab--b {
  animation: vyner-open-ink 2.8s ease-in-out infinite;
}

.vyner-open[data-mm="sheen"] .vyner-open__slab--a {
  animation: vyner-open-sheen 2.4s ease-in-out infinite;
}
.vyner-open[data-mm="sheen"] .vyner-open__slab--b {
  animation: vyner-open-sheen 2.4s ease-in-out infinite 0.35s;
}
.vyner-open[data-mm="sheen"] .vyner-open__slab--c {
  animation: vyner-open-sheen 2.4s ease-in-out infinite 0.7s;
}

.vyner-open[data-mm="align"] .vyner-open__slab--a {
  animation: vyner-open-align-a 3.2s ease-in-out infinite;
}
.vyner-open[data-mm="align"] .vyner-open__slab--c {
  animation: vyner-open-align-c 3.2s ease-in-out infinite;
}

.vyner-open[data-mm="switch"] .vyner-open__slab--a {
  animation: vyner-open-switch-a 2.8s ease-in-out infinite;
}
.vyner-open[data-mm="switch"] .vyner-open__slab--c {
  animation: vyner-open-switch-c 2.8s ease-in-out infinite;
}

.vyner-open[data-mm="letter"] .vyner-open__slab--a {
  animation: vyner-open-letter 3s ease-in-out infinite;
}
.vyner-open[data-mm="letter"] .vyner-open__slab--b {
  animation: vyner-open-letter 3s ease-in-out infinite 0.22s;
}
.vyner-open[data-mm="letter"] .vyner-open__slab--c {
  animation: vyner-open-letter 3s ease-in-out infinite 0.44s;
}

.vyner-open[data-mm="stagger"] .vyner-open__slab {
  animation: vyner-open-stagger 2.8s ease-in-out infinite;
}

.vyner-open[data-mm="studio"] .vyner-open__slab--a,
.vyner-open[data-mm="wave"] .vyner-open__slab--a,
.vyner-open[data-mm="lift"] .vyner-open__slab--a,
.vyner-open[data-mm="stagger"] .vyner-open__slab--a,
.vyner-open[data-mm="cascade"] .vyner-open__slab--a,
.vyner-open[data-mm="ribbon"] .vyner-open__slab--a { animation-delay: 0ms; }

.vyner-open[data-mm="studio"] .vyner-open__slab--b,
.vyner-open[data-mm="wave"] .vyner-open__slab--b,
.vyner-open[data-mm="lift"] .vyner-open__slab--b,
.vyner-open[data-mm="stagger"] .vyner-open__slab--b,
.vyner-open[data-mm="cascade"] .vyner-open__slab--b,
.vyner-open[data-mm="ribbon"] .vyner-open__slab--b { animation-delay: 180ms; }

.vyner-open[data-mm="studio"] .vyner-open__slab--c,
.vyner-open[data-mm="wave"] .vyner-open__slab--c,
.vyner-open[data-mm="lift"] .vyner-open__slab--c,
.vyner-open[data-mm="stagger"] .vyner-open__slab--c,
.vyner-open[data-mm="cascade"] .vyner-open__slab--c,
.vyner-open[data-mm="ribbon"] .vyner-open__slab--c { animation-delay: 360ms; }

.vyner-open[data-mm="studio"] .vyner-open__shadow,
.vyner-open[data-mm="desk"] .vyner-open__shadow,
.vyner-open[data-mm="float-3d"] .vyner-open__shadow,
.vyner-open[data-mm="depth"] .vyner-open__shadow,
.vyner-open[data-mm="card"] .vyner-open__shadow,
.vyner-open[data-mm="spin-y"] .vyner-open__shadow,
.vyner-open[data-mm="tilt-wide"] .vyner-open__shadow {
  opacity: 1;
  animation: vyner-open-shadow 11s ease-in-out infinite;
}

.vyner-open[data-mm="halo"] .vyner-open__mark {
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.18));
}

@keyframes vyner-open-drift {
  from { transform: translate3d(-1.6%, -0.8%, 0) scale(1.03); }
  to { transform: translate3d(1.8%, 1.2%, 0) scale(1.07); }
}
@keyframes vyner-open-tilt {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  50% { transform: rotateY(5deg) rotateX(-1.5deg); }
}
@keyframes vyner-open-tilt-2 {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  50% { transform: rotateY(2deg) rotateX(-0.8deg); }
}
@keyframes vyner-open-card {
  0%, 100% { transform: rotateY(0deg) rotateX(8deg); }
  50% { transform: rotateY(-38deg) rotateX(8deg); }
}
@keyframes vyner-open-swing {
  0%, 100% { transform: rotateY(-26deg) rotateX(4deg); }
  50% { transform: rotateY(26deg) rotateX(-4deg); }
}
@keyframes vyner-open-piece {
  0%, 100% { transform: translateY(0) rotateX(6deg); }
  50% { transform: translateY(-8px) rotateX(10deg); }
}
@keyframes vyner-open-triptych-a {
  0%, 100% { transform: rotateY(28deg); }
  50% { transform: rotateY(48deg); }
}
@keyframes vyner-open-triptych-c {
  0%, 100% { transform: rotateY(-28deg); }
  50% { transform: rotateY(-48deg); }
}
@keyframes vyner-open-spin-y {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes vyner-open-shadow {
  0%, 100% { transform: translateX(-3px) scaleX(0.96); opacity: 0.85; }
  50% { transform: translateX(3px) scaleX(1.04); opacity: 1; }
}
@keyframes vyner-open-hold-field {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes vyner-open-veil {
  from { transform: translateY(-3%); }
  to { transform: translateY(4%); }
}
@keyframes vyner-open-nod {
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(3deg); }
}
@keyframes vyner-open-mist {
  0%, 100% { filter: blur(0); opacity: 1; }
  50% { filter: blur(0.45px); opacity: 0.9; }
}
@keyframes vyner-open-tick {
  0%, 82%, 100% { opacity: 1; }
  88% { opacity: 0.42; }
}
@keyframes vyner-open-settle {
  0%, 28%, 100% { transform: scale(1); }
  12% { transform: scale(1.028); }
}
@keyframes vyner-open-count {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.68; }
}
@keyframes vyner-open-draw {
  0%, 100% { clip-path: inset(0); }
  50% { clip-path: inset(0 0 16% 0); }
}
@keyframes vyner-open-unfold {
  0%, 100% { clip-path: inset(0); }
  50% { clip-path: inset(0 16% 0 16%); }
}
@keyframes vyner-open-fan-a {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
}
@keyframes vyner-open-fan-c {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}
@keyframes vyner-open-solo {
  0%, 22%, 100% { opacity: 1; }
  8%, 16% { opacity: 0.22; }
}
@keyframes vyner-open-sheen {
  0%, 100% { filter: brightness(1); }
  18% { filter: brightness(1.22); }
  34% { filter: brightness(1); }
}
@keyframes vyner-open-align-a {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}
@keyframes vyner-open-align-c {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
@keyframes vyner-open-switch-a {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}
@keyframes vyner-open-switch-c {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.28; }
}
@keyframes vyner-open-letter {
  0%, 100% { opacity: 1; }
  22% { opacity: 0.18; }
  40% { opacity: 1; }
}

@keyframes vyner-open-wave {
  0%, 100% { transform: translateY(0); opacity: 0.82; }
  50% { transform: translateY(-2px); opacity: 1; }
}
@keyframes vyner-open-wave-soft {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-1px); opacity: 1; }
}
@keyframes vyner-open-ink {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
@keyframes vyner-open-stagger {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  40%, 70% { opacity: 1; transform: translateY(-2px); }
}
@keyframes vyner-open-cascade {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(-10px); opacity: 1; }
}
@keyframes vyner-open-ribbon {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
@keyframes vyner-open-flare {
  0%, 100% { filter: brightness(0.75); }
  50% { filter: brightness(1.35); }
}
@keyframes vyner-open-bloom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@keyframes vyner-open-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes vyner-open-rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes vyner-open-paper {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vyner-open-ring {
  0% { transform: scale(0.72); opacity: 0.45; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vyner-open__field,
  .vyner-open__mark,
  .vyner-open__shadow,
  .vyner-open__slab,
  .vyner-open__ring,
  .vyner-open__asset {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .vyner-open.is-done { transition-duration: 0.28s; }
}