/* Double-text hover. Measured from the Alture Webflow template's IX2 config (a-24/25 nav link, a-12/13 menu link,
   a-14/15 button), rewritten as plain CSS transitions. The label is stacked twice; on hover both copies move up one
   line, so the copy underneath rolls into place.

   Link:   <a class="dt"><span class="dt__clip"><span class="dt__text">Studio</span><span class="dt__text dt__text--2" aria-hidden="true">Studio</span></span><span class="dt__dot"></span></a>
   Button: <a class="dtb"><span class="dtb__texts"><span class="dtb__text">Start</span><span class="dtb__text dtb__text--2" aria-hidden="true">Start</span></span><span class="dtb__space"></span><span class="dtb__dots"><span class="dtb__ripple"></span><span class="dtb__dot"></span></span></a>
   (part.js can build either from a plain <a class="dt">Label</a>.)  Add .is-hover to force the hover state. */

:root {
  --dt-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);   /* Webflow outCubic */
}

/* ---- link (nav a-24/25; menu a-12/13 is the same with a 6px dot) ---- */
.dt {
  --dt-dur: 350ms;            /* both copies, in and out */
  --dt-stagger: 50ms;         /* second copy starts later, on the way in only */
  --dt-ease: var(--dt-out-cubic);
  --dt-dot-in: 300ms;         /* dot scale (outCubic) + fade (ease) in */
  --dt-dot-out: 200ms;        /* dot scale + fade out, both ease */
  --dt-dot-size: 4px;         /* menu: 6px */
  --dt-dot-color: currentColor;
  --dt-dot-inset: .125rem -.4rem auto auto;   /* top right, just outside the word; menu: .125rem -.5rem */
  position: relative; display: inline-flex; align-items: flex-start;
  color: inherit; text-decoration: none;
}
.dt__clip { position: relative; display: block; overflow: clip; }
.dt__text { display: block; transform: translateY(0); transition: transform var(--dt-dur) var(--dt-ease); }
.dt__text--2 { position: absolute; left: 0; top: 100%; }
.dt__dot {
  position: absolute; inset: var(--dt-dot-inset);
  width: var(--dt-dot-size); height: var(--dt-dot-size); border-radius: 50%; background: var(--dt-dot-color);
  opacity: 0; transform: scale(0);
  transition: transform var(--dt-dot-out) ease, opacity var(--dt-dot-out) ease;
}
.dt.is-hover .dt__text, .dt:focus-visible .dt__text { transform: translateY(-100%); }
.dt.is-hover .dt__text--2, .dt:focus-visible .dt__text--2 { transition-delay: var(--dt-stagger); }
.dt.is-hover .dt__dot, .dt:focus-visible .dt__dot {
  opacity: 1; transform: scale(1);
  transition: transform var(--dt-dot-in) var(--dt-ease), opacity var(--dt-dot-in) ease;
}
@media (hover: hover) {
  .dt:hover .dt__text { transform: translateY(-100%); }
  .dt:hover .dt__text--2 { transition-delay: var(--dt-stagger); }
  .dt:hover .dt__dot {
    opacity: 1; transform: scale(1);
    transition: transform var(--dt-dot-in) var(--dt-ease), opacity var(--dt-dot-in) ease;
  }
}

/* ---- button (a-14/15): faster roll + blur crossfade + a ripple out of the dot ---- */
.dtb {
  --dtb-dur: 200ms;           /* roll, blur and fade, in and out */
  --dtb-ease: var(--dt-out-cubic);
  --dtb-blur: 5px;            /* the copy leaving blurs to this, the copy arriving sharpens from it */
  --dtb-ripple: 500ms;        /* ripple grows and fades (outCubic) */
  --dtb-ripple-size: 2rem;
  --dtb-ripple-reset: 200ms;  /* ripple snaps back this long after the pointer leaves */
  --dtb-dot-size: .25rem;
  --dtb-accent: #ff5a1f;
  --dtb-bg: #ececec; --dtb-fg: #000;
  display: inline-flex; align-items: center; overflow: clip;
  padding: .75rem 1rem; border-radius: 9rem;
  background: var(--dtb-bg); color: var(--dtb-fg);
  font-size: .875rem; line-height: 1.6; font-weight: 600; text-decoration: none;
}
.dtb__texts { position: relative; display: block; }
.dtb__text {
  display: block; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform var(--dtb-dur) var(--dtb-ease), filter var(--dtb-dur) ease, opacity var(--dtb-dur) ease;
}
.dtb__text--2 { position: absolute; left: 0; top: 100%; opacity: 0; filter: blur(var(--dtb-blur)); }
.dtb__space { width: 1.5rem; flex: none; }
.dtb__dots { position: relative; display: flex; align-items: center; justify-content: center; }
.dtb__dot { position: relative; z-index: 1; width: var(--dtb-dot-size); height: var(--dtb-dot-size); border-radius: 50%; background: var(--dtb-accent); }
.dtb__ripple {
  position: absolute; width: var(--dtb-ripple-size); height: var(--dtb-ripple-size); border-radius: 50%; background: var(--dtb-accent);
  transform: scale(0); opacity: 1; pointer-events: none;
  transition: transform 0s var(--dtb-ripple-reset), opacity 0s var(--dtb-ripple-reset);   /* hold, then snap back */
}
.dtb.is-hover .dtb__text, .dtb:focus-visible .dtb__text { transform: translateY(-100%); }
.dtb.is-hover .dtb__text:not(.dtb__text--2), .dtb:focus-visible .dtb__text:not(.dtb__text--2) { opacity: 0; filter: blur(var(--dtb-blur)); }
.dtb.is-hover .dtb__text--2, .dtb:focus-visible .dtb__text--2 { opacity: 1; filter: blur(0); }
.dtb.is-hover .dtb__ripple, .dtb:focus-visible .dtb__ripple {
  transform: scale(1); opacity: 0;
  transition: transform var(--dtb-ripple) var(--dtb-ease), opacity var(--dtb-ripple) var(--dtb-ease);
}
@media (hover: hover) {
  .dtb:hover .dtb__text { transform: translateY(-100%); }
  .dtb:hover .dtb__text:not(.dtb__text--2) { opacity: 0; filter: blur(var(--dtb-blur)); }
  .dtb:hover .dtb__text--2 { opacity: 1; filter: blur(0); }
  .dtb:hover .dtb__ripple {
    transform: scale(1); opacity: 0;
    transition: transform var(--dtb-ripple) var(--dtb-ease), opacity var(--dtb-ripple) var(--dtb-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt__text, .dt__dot, .dtb__text, .dtb__ripple { transition-duration: 0s !important; transition-delay: 0s !important; }
  .dtb__ripple { display: none; }
}