/* A quiet reading-position cue, with the same violet and mint used in the V. */
.site-header::after {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, #9a63f1, #d3a8ff 54%, #85edda);
  content: "";
  pointer-events: none;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}

.js .curated-card[data-reveal-card] {
  animation: none;
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity .5s var(--ease) var(--card-delay, 0ms),
    translate .58s var(--ease) var(--card-delay, 0ms),
    border-color .24s,
    box-shadow .24s;
}

.js .curated-card[data-reveal-card]:is(.is-visible, :focus-within) {
  opacity: 1;
  translate: none;
}

.hero-cta .button,
.brand-bottom .button,
.cart-summary .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-cta .button::after,
.brand-bottom .button::after,
.cart-summary .button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 28%, #fff9 50%, transparent 72%);
  content: "";
  pointer-events: none;
  transform: translateX(-115%);
}

@media (hover: hover) and (pointer: fine) {
  .hero-cta .button:hover::after,
  .brand-bottom .button:hover::after,
  .cart-summary .button:not(:disabled):hover::after {
    animation: vybe-light-pass .7s ease-out;
  }
}

.hero-cta .button:focus-visible::after,
.brand-bottom .button:focus-visible::after,
.cart-summary .button:focus-visible::after {
  animation: vybe-light-pass .7s ease-out;
}

@keyframes vybe-light-pass {
  to { transform: translateX(115%); }
}

.brand-art {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 67% 28%, #59298c88, transparent 62%),
    linear-gradient(147deg, #2b183f, #130f1d 72%);
}

.brand-art::before {
  animation: vybe-orbit-line 14s ease-in-out infinite alternate;
}

.brand-art .giant-v {
  animation: vybe-mark-float 8s ease-in-out infinite;
}

@keyframes vybe-orbit-line {
  from { transform: rotate(-33deg) scaleY(.58); }
  to { transform: rotate(23deg) scaleY(.72); }
}

@keyframes vybe-mark-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -13px; }
}

.site-footer {
  background:
    radial-gradient(ellipse at 72% 100%, #241836, transparent 62%),
    #120e1b;
}

.footer-wordmark {
  color: #332449;
  text-shadow: 1px 0 #a776e02e, 0 -1px #a776e02e;
}

.footer-wordmark > span {
  text-shadow: 0 0 24px #83ecd68c;
}

/* Keep decorative loops off the compositor while their section is out of view. */
[data-offscreen] [data-ambient-motion],
[data-offscreen] [data-ambient-motion]::before,
[data-offscreen] [data-ambient-motion]::after,
[data-offscreen][data-ambient-motion],
[data-offscreen][data-ambient-motion]::before,
[data-offscreen][data-ambient-motion]::after,
.hero[data-offscreen] :is(.hero-image-card, .floating-tag),
.shop-edit-hero[data-offscreen] .shop-edit-stamp,
.ticker[data-offscreen] .ticker-track,
.collection-tile[data-offscreen] .collection-art::after,
html .product-gallery[data-offscreen]::before,
.brand-art[data-offscreen]::before,
.brand-art[data-offscreen] :is(.giant-v, .art-spark) {
  animation-play-state: paused;
}

/* Carry the same surfaces and accent color through the shopping bag. */
.cart-dialog {
  color: #faf5ff;
  background: radial-gradient(ellipse at 94% 0%, #302045, transparent 55%), #15101f;
  border-left: 1px solid #614b7b;
  box-shadow: -16px 0 72px #0c061c8c;
}

.cart-dialog::backdrop {
  background: #100a1cc7;
  backdrop-filter: blur(6px);
}

.cart-header .eyebrow,
.cart-header h2 span,
.cart-dialog .empty-bag {
  color: #97ead8;
}

.cart-dialog .cart-close,
.cart-dialog .quantity-stepper button,
.cart-dialog .remove-item,
.cart-dialog .continue-shopping {
  color: #e4d0fa;
}

.cart-dialog .cart-close:hover,
.cart-dialog .quantity-stepper button:not(:disabled):hover {
  background: #39254d;
}

.cart-dialog .cart-close:focus-visible,
.cart-dialog .quantity-stepper button:focus-visible,
.cart-dialog .remove-item:focus-visible,
.cart-dialog .continue-shopping:focus-visible {
  outline: 2px solid #97ead8;
  outline-offset: 2px;
}

.cart-dialog .cart-item,
.cart-dialog .cart-extras,
.cart-dialog .quantity-stepper {
  border-color: #4d3a62;
}

.cart-dialog .cart-item img {
  border-radius: 9px;
}

.cart-dialog .cart-item p,
.cart-dialog .cart-summary p,
.cart-dialog .cart-status,
.cart-dialog .cart-empty p {
  color: #cdbedc;
}

.cart-dialog .cart-stock {
  color: #ffafd5;
}

.cart-dialog .cart-code input {
  color: #fff;
  background: #221830;
  border-color: #735a91;
}

.cart-dialog .cart-code .button {
  background: #49315f;
  color: #fff;
}

.cart-summary {
  background: linear-gradient(150deg, #2b1c3b, #1c1528);
  border-top: 1px solid #57436d;
}

.cart-summary .button,
.cart-empty .button {
  color: #14101c;
  background: #9aebd9;
  border-color: transparent;
}

.cart-summary .button:not(:disabled):hover,
.cart-empty .button:hover {
  background: #c2faee;
}

.cart-summary .button:disabled {
  color: #d1c5df;
  background: #423252;
}

.cart-dialog .continue-shopping {
  min-height: 44px;
}

/* A paused or reduced-motion experience shows complete, usable content immediately. */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.motion-paused .curated-card[data-reveal-card],
html.motion-paused .hero-enter {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .curated-card[data-reveal-card],
  .hero-enter {
    opacity: 1;
    translate: none;
    transition: none;
  }
}