/* 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);
  }
}

/* ---- spring mode: <a class="dtb" data-dt-mode="spring"> (Forerunner, a Framer layout gesture) ----
   No blur, no fade, no dot: the label rolls up 32px (its 24px line + an 8px gap to the copy waiting below) while the
   copy rises into place, a trailing arrow slides 14px off to the right as its twin arrives from the left, all on one
   soft spring 1.3 s / bounce .2 (1.5% overshoot = 0.5px past on the roll), and the whole button presses to .98 on a
   quicker spring .45 s / bounce .25. Hover out mirrors it. Springs baked by spring-to-linear (motion's maths).
   Markup: <a class="dtb" data-dt-mode="spring"><span class="dtb__texts"><span class="dtb__text">Label</span><span
   class="dtb__text dtb__text--2" aria-hidden="true">Label</span></span><span class="dtb__arrows" aria-hidden="true">
   <span class="dtb__arrow"><svg/></span><span class="dtb__arrow dtb__arrow--2"><svg/></span></span></a>
   (part.js builds it from <a class="dtb" data-dt-mode="spring">Label</a>). The default .dtb is untouched. */
.dtb[data-dt-mode="spring"] {
  --dtb-dur: 1300ms;
  --dtb-ease: linear(0, 0.0027, 0.0104, 0.0224, 0.0383, 0.0574, 0.0794, 0.1038, 0.1301, 0.1581, 0.1873, 0.2176, 0.2486, 0.2801, 0.3118, 0.3435, 0.3752, 0.4066, 0.4375, 0.468, 0.4978, 0.5269, 0.5553, 0.5827, 0.6093, 0.635, 0.6596, 0.6833, 0.706, 0.7277, 0.7484, 0.768, 0.7867, 0.8044, 0.8211, 0.8369, 0.8518, 0.8657, 0.8788, 0.8911, 0.9025, 0.9132, 0.9231, 0.9323, 0.9409, 0.9487, 0.956, 0.9627, 0.9688, 0.9744, 0.9795, 0.9841, 0.9883, 0.9921, 0.9954, 0.9985, 1.0012, 1.0036, 1.0057, 1.0075, 1.0091, 1.0104, 1.0116, 1.0125, 1.0133, 1.0139, 1.0144, 1.0148, 1.015, 1.0151, 1.0152, 1.0151, 1.015, 1.0148, 1.0145, 1.0142, 1.0139, 1.0135, 1.0131, 1.0127, 1.0123, 1.0118, 1.0113, 1.0108, 1.0104, 1.0099, 1.0094, 1.0089, 1.0085, 1.008, 1.0076, 1.0071, 1.0067, 1.0063, 1.0059, 1.0055, 1.0051, 1.0048, 1.0044, 1.0041, 1.0038, 1.0035, 1.0032, 1.0029, 1.0027, 1.0024, 1.0022, 1.002, 1.0018, 1.0016, 1.0015, 1.0013, 1.0011, 1.001, 1.0009, 1.0008, 1.0007, 1.0006, 1.0005, 1.0004, 1);
  --dtb-gap: 8px;             /* label to its waiting copy: roll = line height + gap (24 + 8 = 32px) */
  --dtb-arrow-size: 16px;     /* arrow box (clips) */
  --dtb-arrow-shift: 14px;    /* outgoing arrow slides this far right, its twin starts this far left */
  --dtb-arrow-gap: 4px;       /* label to arrow */
  --dtb-arrow-color: currentColor;
  --dtb-press: .98;           /* whole-button press on hover */
  --dtb-press-dur: 450ms;
  --dtb-press-ease: linear(0, 0.0195, 0.0703, 0.142, 0.2263, 0.3167, 0.4082, 0.4972, 0.581, 0.6578, 0.7268, 0.7873, 0.8396, 0.8837, 0.9204, 0.9501, 0.9737, 0.992, 1.0056, 1.0154, 1.022, 1.026, 1.028, 1.0283, 1.0276, 1.026, 1.0239, 1.0214, 1.0188, 1.0163, 1.0138, 1.0114, 1.0093, 1.0074, 1.0057, 1.0043, 1.0031, 1.0021, 1.0013, 1.0006, 1.0001, 0.9998, 0.9995, 0.9993, 0.9992, 1);
  padding: 8px 16px; border-radius: 32px;
  font-size: 16px; line-height: 24px; letter-spacing: -.5px;
  transition: scale var(--dtb-press-dur) var(--dtb-press-ease);
}
@supports not (transition-timing-function: linear(0, 1)) {
  .dtb[data-dt-mode="spring"] { --dtb-ease: cubic-bezier(.22, 1, .36, 1); --dtb-press-ease: cubic-bezier(.22, 1.2, .36, 1); }
}
.dtb[data-dt-mode="spring"] .dtb__texts { overflow-x: visible; overflow-y: clip; }
.dtb[data-dt-mode="spring"] .dtb__text { opacity: 1; filter: none; transition: transform var(--dtb-dur) var(--dtb-ease); }
.dtb[data-dt-mode="spring"] .dtb__text--2 { top: calc(100% + var(--dtb-gap)); }
.dtb__arrows {
  position: relative; flex: none; display: block; overflow: clip;
  width: var(--dtb-arrow-size); height: var(--dtb-arrow-size); margin-left: var(--dtb-arrow-gap); color: var(--dtb-arrow-color);
}
.dtb__arrow { position: absolute; inset: 0; display: block; transition: transform var(--dtb-dur) var(--dtb-ease); }
.dtb__arrow > svg { display: block; width: 100%; height: 100%; }
.dtb__arrow--2 { transform: translateX(calc(-1 * var(--dtb-arrow-shift))); }
.dtb[data-dt-mode="spring"].is-hover, .dtb[data-dt-mode="spring"]:focus-visible { scale: var(--dtb-press); }
.dtb[data-dt-mode="spring"].is-hover .dtb__text, .dtb[data-dt-mode="spring"]:focus-visible .dtb__text { transform: translateY(calc(-100% - var(--dtb-gap))); opacity: 1; filter: none; }
.dtb[data-dt-mode="spring"].is-hover .dtb__arrow, .dtb[data-dt-mode="spring"]:focus-visible .dtb__arrow { transform: translateX(var(--dtb-arrow-shift)); }
.dtb[data-dt-mode="spring"].is-hover .dtb__arrow--2, .dtb[data-dt-mode="spring"]:focus-visible .dtb__arrow--2 { transform: translateX(0); }
@media (hover: hover) {
  .dtb[data-dt-mode="spring"]:hover { scale: var(--dtb-press); }
  .dtb[data-dt-mode="spring"]:hover .dtb__text { transform: translateY(calc(-100% - var(--dtb-gap))); opacity: 1; filter: none; }
  .dtb[data-dt-mode="spring"]:hover .dtb__arrow { transform: translateX(var(--dtb-arrow-shift)); }
  .dtb[data-dt-mode="spring"]:hover .dtb__arrow--2 { transform: translateX(0); }
}

@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; }
  .dtb[data-dt-mode="spring"], .dtb__arrow { transition-duration: 0s !important; }
}