/* VYBE's violet and mint, expressed through light and restrained movement. */
.desktop-nav a::after {
  background: linear-gradient(90deg, #b48aef, #a3eed9);
  transform-origin: right;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

.desktop-nav a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(1);
  transform-origin: left;
}

.editorial-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .22s ease, box-shadow .3s ease, scale .2s ease;
}

.editorial-button::after {
  position: absolute;
  inset: -40% -15%;
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #ffffff75 50%, transparent 62%);
  translate: -110% 0;
}

.editorial-collection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.editorial-collection > * {
  position: relative;
  z-index: 1;
}

.editorial-collection::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at var(--experience-x, 90%) var(--experience-y, 5%),
    color-mix(in srgb, var(--collection-accent, #c7abfb) 12%, transparent), transparent 74%);
  opacity: .65;
  transition: opacity .3s ease;
}

.editorial-collection::after {
  position: absolute;
  right: -36px;
  bottom: -56px;
  inline-size: 112px;
  block-size: 112px;
  border: 1px solid var(--collection-accent, #c7abfb);
  border-radius: 50%;
  box-shadow: 0 0 0 11px #c7abfb09, 0 0 0 23px #c7abfb06;
  content: "";
  opacity: .12;
  pointer-events: none;
  transform: rotate(-32deg) scaleX(.7);
  transition: opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

.editorial-collection[data-tone="move"]::after {
  border-radius: 14px;
  transform: rotate(-32deg) scale(.8);
}

.editorial-collection[data-tone="create"]::after {
  border-radius: 5px;
  transform: rotate(35deg) scale(.75);
}

.editorial-collection:is(.experience-pointed, :focus-visible)::before {
  opacity: 1;
}

.editorial-collection:is(:hover, :focus-visible)::after {
  opacity: .27;
  transform: rotate(0) scaleX(.8) translateY(-5px);
}

.daily-spotlight {
  transition: transform .38s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .35s ease;
}

.daily-spotlight:focus-within {
  border-color: #8e79a5;
}

.product-thumbnails button:focus-visible {
  outline-offset: 4px;
}

/* Keep a readable solid accent if text clipping is unsupported or motion is off. */
.vybe-experience .editorial-hero h1 em {
  background: none;
  color: var(--edit-lavender, #c7abfb);
  -webkit-text-fill-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .editorial-button:is(:hover, :focus-visible)::after {
    animation: experience-light-pass .72s ease-out;
  }

  .editorial-button:active {
    scale: .975;
  }

  .editorial-button:focus-visible {
    box-shadow: 0 0 0 4px #a3eed918;
  }

  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .vybe-experience .editorial-hero h1 em {
      background-image: linear-gradient(105deg, #d4b9ff 5%, #a87af1 40%, #a3eed9 70%, #d4b9ff 95%);
      background-size: 230% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: experience-wordmark-light 11s ease-in-out infinite alternate;
      animation-play-state: paused;
    }

    .vybe-experience .editorial-hero.experience-inview h1 em {
      animation-play-state: running;
    }
  }

  .product-accordion[open] > .product-description,
  .mobile-nav:not([hidden]) > a {
    animation: experience-detail-in .28s ease-out;
  }

  .mobile-nav:not([hidden]) > a:nth-child(2) { animation-duration: .33s; }
  .mobile-nav:not([hidden]) > a:nth-child(3) { animation-duration: .38s; }
  .mobile-nav:not([hidden]) > a:nth-child(4) { animation-duration: .43s; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .daily-spotlight.experience-pointed {
    transform: perspective(1100px) rotateX(var(--experience-rx, 0deg)) rotateY(var(--experience-ry, 0deg));
    border-color: #857196;
    box-shadow: 0 14px 40px #08060c44;
  }
}

@keyframes experience-light-pass {
  to { translate: 110% 0; }
}

@keyframes experience-wordmark-light {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes experience-detail-in {
  from { opacity: .5; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

html.experience-hidden .editorial-hero h1 em {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .editorial-collection::after,
  .daily-spotlight,
  .desktop-nav a::after,
  .editorial-button {
    transition: none;
  }

  .editorial-collection:is(:hover, :focus-visible)::after {
    transform: rotate(-32deg) scaleX(.7);
  }
}