/* ================================================================
   ROTA.CSS — Rotation Button Hover (Framer-style)
   Reference: https://rota-buta-hova.learnframer.site/

   How it works:
   - Element becomes a clipping container (overflow:hidden, perspective)
   - Inside: two stacked text layers (.rota-line)
   - Default: layer 1 visible, layer 2 below the clip
   - Hover: both translate up + slight rotation = "rolling wheel" feel
   ================================================================ */

/* The outer wrapper — applied to <button>, <a class="btn">, nav links, etc.

   `align-items: center` works correctly here because both flex children
   (.rota-text and the [data-convert-price] sibling) share line-height: 1.4
   below — so they have the same computed height, and centring equal-height
   boxes is identical to baseline-aligning their inner text.

   We tried `align-items: baseline` earlier and it FAILED. CSS spec: an
   inline-block whose overflow is anything other than `visible` uses its
   **bottom margin edge** as its baseline, not the inner text baseline.
   `.rota-text` requires `overflow: hidden` for the rolling-text duplicate
   (.rota-line:nth-child(2) at translateY(110%)) to clip — so its baseline
   is its bottom edge. Baseline-aligning then pushed the rota label upward
   relative to the price chip. Center-aligning equal heights side-steps the
   issue entirely. */
.rota-hover {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

/* Inner text wrapper — used when the element has mixed children (text + icon).
   In that case the JS wraps just the text portion in this.

   `height: 1em` was clipping ascenders/descenders on letters like P / g / S$
   (visible on nav tabs and Web Packages buttons). Using line-height: 1.4 on
   the wrapper + line-height: inherit on the .rota-line gives enough vertical
   room for full glyphs while still clipping the duplicate line below.

   `vertical-align: baseline` matches the default for inline content so the
   wrapped portion aligns flush with sibling inline elements like the
   <span data-convert-price>$29</span> price chip. With `middle` the wrapped
   "Get Started —" used to sit on a different vertical line from the
   "— S$109" price beside it. */
.rota-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 1.4;
    vertical-align: baseline;
    /* No fixed height — let the wrapper size to its inherited line-box. The
       absolute-positioned .rota-line:nth-child(2) uses inset: 0 so it always
       fills the wrapper, regardless of actual height. */
}

/* Sibling price chip should match — same line-height + baseline so the
   leading rota-text and the trailing price sit on the same line and don't
   jitter when chrome.js replaces the price's innerHTML on currency switch. */
.rota-hover [data-convert-price],
[data-rota-hover="1"] [data-convert-price] {
    display: inline-block;
    line-height: 1.4;
    vertical-align: baseline;
}

/* Both lines share base styles */
.rota-line {
    display: inline-block;
    line-height: inherit;
    white-space: pre;            /* preserve the leading/trailing whitespace
                                    that rota.js now keeps inside the wrap so
                                    "Add to Site — " always renders with its
                                    trailing space, no matter the browser's
                                    inline-block whitespace rules */
    transition:
        transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        opacity   0.40s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform, opacity;
    transform-origin: 50% 100%;
}

/* Layer 1 — original text, visible by default. */
.rota-line:nth-child(1) {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

/* Layer 2 — duplicate text, parked below the clip. */
.rota-line:nth-child(2) {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(110%) rotate(-15deg);
    opacity: 0;
}

/* Hover / focus — line 1 rolls up and out, line 2 rolls in. */
.rota-hover:hover .rota-line:nth-child(1),
.rota-hover:focus-visible .rota-line:nth-child(1),
.rota-text:hover .rota-line:nth-child(1),
a:hover .rota-text .rota-line:nth-child(1),
a:focus-visible .rota-text .rota-line:nth-child(1),
button:hover .rota-text .rota-line:nth-child(1),
button:focus-visible .rota-text .rota-line:nth-child(1) {
    transform: translateY(-110%) rotate(15deg);
    opacity: 0;
}

.rota-hover:hover .rota-line:nth-child(2),
.rota-hover:focus-visible .rota-line:nth-child(2),
.rota-text:hover .rota-line:nth-child(2),
a:hover .rota-text .rota-line:nth-child(2),
a:focus-visible .rota-text .rota-line:nth-child(2),
button:hover .rota-text .rota-line:nth-child(2),
button:focus-visible .rota-text .rota-line:nth-child(2) {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

/* Reduced motion — no rotation, just instant text swap. */
@media (prefers-reduced-motion: reduce) {
    .rota-line {
        transition: none !important;
    }
    .rota-line:nth-child(2) {
        display: none !important;
    }
    .rota-line:nth-child(1) {
        transform: none !important;
        opacity: 1 !important;
    }
}