/* Acabamento adaptado do CSS enviado: compartilha a linha do tempo da intro. */
.jewel-intro { height: 315svh; }
.jewel-intro__wordmark { top: 86%; }

.jewel-intro__fallback { --jewel-css-size: min(21rem, 29vw, 48svh); }

/* Um único plano composto na chegada; o scroll assume imediatamente ao tocar. */
.jewel-intro__arrival { position: absolute; z-index: 2; inset: 0; }
.jewel-medallion__reflection {
  position: absolute;
  inset: 2.25%;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(calc(var(--t) / 2 + 0.015rem));
  pointer-events: none;
}
.jewel-medallion__reflection > span {
  position: absolute;
  inset: -20%;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 244, 216, 0.14) 43%, rgba(255, 250, 234, 0.8) 50%, rgba(255, 244, 216, 0.14) 57%, transparent 68%);
  transform: translateX(-130%);
  opacity: 0;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .jewel-intro__arrival { transform: none !important; transition: none !important; }
  .jewel-medallion__reflection { display: none; }
}

/* A mesma marca completa do pingente, sem um segundo nome ao lado. */
.site-header .brand { width: max-content; min-height: 44px; }
.site-header .brand > img { width: 4.5rem; height: 4.5rem; }
.site-header { min-height: 5.25rem; }
.site-header .brand::before { display: none; }

.jewel-intro__stage::before {
  clip-path: none;
  opacity: var(--jewel-bg-opacity, 1);
  will-change: opacity;
  background:
    radial-gradient(ellipse at 50% 44%, #382720 0, #201814 40%, #100d0b 82%),
    #100d0b;
}

.jewel-intro__stage::after {
  background: radial-gradient(ellipse at var(--jewel-halo-x, 50%) var(--jewel-halo-y, 42%), rgba(239, 183, 143, 0.22), transparent 52%);
  transform: none;
}

.jewel-intro__lighting {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: var(--jewel-bg-opacity, 1);
  background: radial-gradient(ellipse at 50% 46%, transparent 26%, rgba(6, 4, 3, 0.48) 100%);
  pointer-events: none;
}

.jewel-intro__lighting::before {
  position: absolute;
  top: -22%;
  left: 8%;
  width: 84%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(236, 200, 157, 0.13), rgba(236, 200, 157, 0.025) 43%, transparent 72%);
  opacity: var(--jewel-softbox-opacity, 0.7);
  transform-origin: 50% 0;
  transform: rotate(var(--jewel-light-angle, -12deg));
  content: "";
}

.jewel-intro__lighting::after {
  position: absolute;
  top: 68%;
  left: var(--jewel-shadow-x, 50%);
  width: clamp(10rem, 24vw, 22rem);
  height: clamp(2rem, 6vh, 4rem);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.48), transparent 68%);
  transform: translateX(-50%) scaleX(var(--jewel-shadow-width, 1));
  opacity: var(--jewel-object-opacity, 1);
  content: "";
}

.jewel-medallion {
  --t: 0.75rem;
  width: var(--jewel-css-size);
  transform:
    translate3d(var(--jewel-exit-x, 0px), calc(var(--jewel-fallback-lift, 0px) + var(--jewel-exit-y, 0px)), 0)
    scale(calc(var(--jewel-exit-scale, 1) * var(--jewel-shot-scale, 1)))
    rotateZ(var(--jewel-fallback-swing, 0deg))
    rotateX(calc(var(--jewel-fallback-tilt, -3deg) + var(--jewel-my, 0deg)))
    rotateY(calc(var(--jewel-fallback-turn, -24deg) + var(--jewel-mx, 0deg)));
}

.jewel-intro__chain {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--jewel-css-size) * 3.55);
  height: auto;
  overflow: visible;
  opacity: var(--jewel-chain-opacity, 1);
  transform:
    translate(-50%, -73.3333%)
    translate3d(var(--jewel-exit-x, 0px), calc(var(--jewel-fallback-lift, 0px) + var(--jewel-exit-y, 0px)), 0)
    scale(calc(var(--jewel-exit-scale, 1) * var(--jewel-shot-scale, 1)))
    rotateZ(calc(var(--jewel-fallback-swing, 0deg) * 0.3))
    rotateY(var(--jewel-chain-y, 0deg));
  pointer-events: none;
  will-change: transform, opacity;
}

.jewel-medallion__bail {
  position: absolute;
  top: -13%;
  left: 44%;
  width: 12%;
  height: 15%;
  border: 0.11rem solid #e3be80;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #8d6136, 0 0 0 1px rgba(255, 234, 185, 0.55);
  transform: translateZ(0);
}

.jewel-medallion__slice {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(var(--jewel-metal-angle, 125deg), #b98f61, #f3dbb5 42%, #9b7447 78%, #dfc296);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 196, 0.28);
  transform: translateZ(calc(var(--slice-ratio) * var(--t)));
  pointer-events: none;
}

.jewel-medallion__front {
  transform: translateZ(calc(var(--t) / 2));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.24'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 28% 16%, rgba(255, 244, 230, 0.5), transparent 48%),
    linear-gradient(var(--jewel-metal-angle, 125deg), #edc5b7, #f6ddd2 20%, #e9bcab 36%, #dba593 54%, #f1d0c0 72%, #cc9682);
  background-size: 180px 180px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 207, 0.55),
    inset 0 0.35rem 0.9rem rgba(255, 246, 232, 0.32),
    inset 0 -0.6rem 1.8rem rgba(60, 25, 20, 0.18);
}

.jewel-medallion__face { inset: 2.25%; }

.jewel-medallion__back {
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  background:
    radial-gradient(120% 90% at 72% 16%, rgba(255, 236, 210, 0.18), transparent 50%),
    linear-gradient(145deg, #211714, #6e3a31);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 207, 0.35),
    inset 0 -1rem 1.8rem rgba(0, 0, 0, 0.3);
}

.jewel-medallion::before,
.jewel-medallion::after {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--jewel-ring-angle, 40deg), #f6e3b5, #b88a45, #fbeccb, #8f6a2f, #d9b66f, #f6e3b5);
  content: "";
  transform: translateZ(calc(var(--t) / 2 - 0.06rem));
}

.jewel-medallion::after {
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2 - 0.06rem));
}

.jewel-medallion__face::before {
  position: absolute;
  inset: 5.5%;
  border: 1px solid rgba(255, 236, 207, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(70, 32, 26, 0.22), inset 0 0 0 1px rgba(70, 32, 26, 0.16);
  content: "";
  pointer-events: none;
}

.jewel-medallion__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0.025rem 0.05rem 0.015rem rgba(46, 23, 12, 0.8));
  transform: translateZ(0.01rem);
}

/* A versão leve usa uma única logo elevada, sem contornos duplicados. */
.jewel-intro.has-fallback .jewel-medallion__face img { opacity: 0; }

.jewel-medallion__relief {
  position: absolute;
  inset: 2.25%;
  background: url("./assets/medallion-logo-relief.svg?v=20") center / 100% 100% no-repeat;
  backface-visibility: hidden;
  transform: translateZ(calc(var(--t) / 2 + 0.025rem));
  pointer-events: none;
}
.jewel-medallion__relief--back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2 + 0.025rem)); }

.jewel-medallion__front img,
.jewel-medallion__relief--front {
  filter: brightness(0.34) saturate(0.6) drop-shadow(0.012rem 0.02rem 0.008rem rgba(32, 17, 9, 0.4));
}

.jewel-medallion__front::after {
  background: linear-gradient(105deg, transparent 34%, rgba(255, 247, 229, 0.38) 48%, rgba(255, 247, 229, 0.52) 51%, transparent 64%);
}

.jewel-medallion__back::after {
  position: absolute;
  inset: -25%;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 239, 205, 0.18) 49%, transparent 63%);
  opacity: var(--jewel-back-shine-opacity, 0);
  transform: translateX(var(--jewel-shine, -130%));
  content: "";
  pointer-events: none;
}

@media (max-width: 47.999rem) {
  .jewel-intro { height: 305svh; }
  .jewel-intro__wordmark { top: 80%; }
  .jewel-intro__fallback { --jewel-css-size: min(15rem, 59vw, 43svh); }
  .jewel-medallion { --t: 0.55rem; }
}

@media (min-width: 48rem) {
  .site-header .brand > img { width: 5rem; height: 5rem; }
  .site-header { min-height: 5.75rem; }
}

@media (max-height: 30rem) and (orientation: landscape) {
  .jewel-intro__fallback { --jewel-css-size: min(11rem, 34svh); }
  .jewel-intro__wordmark { top: 86%; }
  .jewel-intro__wordmark strong { font-size: 2rem; }
  .jewel-intro__wordmark small { margin-top: 0.5rem; font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jewel-intro .jewel-medallion {
    --jewel-mx: 0deg !important;
    --jewel-my: 0deg !important;
    --jewel-fallback-tilt: 0deg !important;
    --jewel-fallback-swing: 0deg !important;
  }
  .jewel-intro .jewel-intro__chain { --jewel-chain-y: 0deg; }
  .jewel-intro__wordmark strong,
  .jewel-intro__wordmark span,
  .jewel-intro__wordmark small { animation: none; opacity: 1; transform: none; }
}

/* Mobile: composição de camadas 3D, sem filtros e fundos repintados por frame. */
@media (max-width: 47.999rem), (pointer: coarse) {
  .site-ambient,
  .rosah-particles,
  .blob-field,
  .jewel-intro__lighting { display: none; }

  .jewel-intro__stage::after { background: none; }
  .jewel-intro__chain { --jewel-chain-y: 0deg; }

  .jewel-medallion__front {
    background:
      radial-gradient(120% 90% at 28% 16%, rgba(255, 244, 230, 0.35), transparent 48%),
      linear-gradient(125deg, #edc5b7, #f6ddd2 20%, #e9bcab 36%, #dba593 54%, #f1d0c0 72%, #cc9682);
    background-blend-mode: normal;
  }

  .jewel-medallion__front::after,
  .jewel-medallion__back::after { display: none; }

  .jewel-medallion__relief--front { filter: brightness(0.34) saturate(0.6); }
  .jewel-medallion__slice {
    background: linear-gradient(125deg, #b98f61, #f3dbb5 42%, #9b7447 78%, #dfc296);
  }
  .jewel-medallion::before,
  .jewel-medallion::after {
    background: conic-gradient(from 40deg, #f6e3b5, #b88a45, #fbeccb, #8f6a2f, #d9b66f, #f6e3b5);
  }

  .site-header,
  .atelier-shell,
  .button-outline-light,
  .selection-constellation__core,
  .cart-dialog::backdrop,
  .product-dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header { background: var(--bg); }
  .reveal { filter: none; transition-property: opacity, transform; }
  .motion-mask { clip-path: none; }
  .instagram-orbit::before,
  .instagram-swipe span,
  .selection-constellation__core,
  .jewel-intro__scroll::before { animation: none; }
}