/* ==========================================================================
   How It Works — Flowty features-page treatment
   --------------------------------------------------------------------------
   Page-specific pieces only. Everything shared with the homepage (preloader,
   buttons, CTA, footer, dock, tokens) comes from css/home-flow.css, which
   this file depends on and extends. Same scoping contract: every selector
   is prefixed (hiwx-), nothing global.

   Page anatomy, top to bottom, mirroring flowty.co/features:
     hero        giant left-aligned display title, sub + actions bottom-left
     stage       full-width violet gradient card, phone cropped by its edge
     statement   big centred lines, optional small line underneath
     trio        row of three dark cards (icon bubble, title, body)
     show        sticky phone on the left, full-height feature blocks on the
                 right; the phone's screenshot crossfades per block
     rail        horizontal snap-scroll row of half-visual half-text cards

   js/hiw-flow.js drives only the show crossfade. Everything else is CSS.
   ========================================================================== */

.hiwx-page {
    background: var(--uf-ink, #0a0a0b);
    color: var(--flow-text);
    font-family: var(--flow-display);
    overflow: clip;
}

.hiwx-page :focus-visible {
    outline: 2px solid var(--flow-accent-bright);
    outline-offset: 3px;
}

/* Shared icon button: the little QR / arrow squares Flowty repeats */
.hiwx-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #17171c;
    border: 1px solid var(--flow-hairline);
    color: var(--flow-text);
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.3s var(--uf-ease, ease), background 0.3s;
}

.hiwx-iconbtn:hover {
    background: var(--flow-accent);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Hero — the display title owns the top, sub + actions sit bottom-left
   -------------------------------------------------------------------------- */

.hiwx-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Short enough that the stage card's top edge peeks into the first
       viewport (Flowty reference: card top at ~70% of the fold). */
    min-height: 70svh;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: clamp(6.5rem, 14vh, 9rem) clamp(1.5rem, 3.5vw, 3.25rem) clamp(2.5rem, 6vh, 4rem);
}

/* Diagonal glow: a blurred violet-grey beam sweeping up across the right
   half of the dark hero (Flowty reference). Decorative only; the copy sits
   above it and .hiwx-page's overflow clip stops it causing sideways scroll. */
.hiwx-hero::before {
    content: '';
    position: absolute;
    top: 22%;
    right: -30vw;
    width: 112vw;
    height: 92%;
    transform: rotate(-34deg);
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(157, 144, 199, 0.55),
        rgba(104, 90, 158, 0.26) 55%,
        transparent 78%);
    filter: blur(56px);
    pointer-events: none;
}

.hiwx-hero__title,
.hiwx-hero__foot {
    position: relative;
    z-index: 1;
}

.hiwx-hero__title {
    margin: 0;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: clamp(3.3rem, 9vw, 9.5rem);
    line-height: 0.94;
    letter-spacing: -0.025em;
    color: #d3d3dc;
    max-width: 11ch;
}

.hiwx-hero__foot {
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    max-width: 560px;
}

.hiwx-hero__sub {
    margin: 0;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--flow-dim);
}

.hiwx-hero__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   Stage — the violet gradient card with the phone rising out of the bottom
   -------------------------------------------------------------------------- */

.hiwx-stage {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 2.5vw, 2.75rem) clamp(4.5rem, 9vw, 8rem);
}

.hiwx-stage__card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: clamp(420px, 82vh, 860px);
    border-radius: clamp(28px, 4vw, 60px);
    background:
        radial-gradient(90% 120% at 85% 10%, rgba(197, 178, 255, 0.55), transparent 55%),
        radial-gradient(70% 110% at 10% 90%, rgba(38, 16, 120, 0.85), transparent 60%),
        linear-gradient(115deg, #3b1fae 0%, #6c4cf1 48%, #8b5cf6 78%, #a78bfa 100%);
    overflow: hidden;
}

.hiwx-stage__phone {
    transform: translateY(14%);
    width: clamp(230px, 26vw, 350px);
}

/* --------------------------------------------------------------------------
   Phone frame — shared by stage, show and rail visuals
   -------------------------------------------------------------------------- */

.hiwx-phone {
    position: relative;
    border-radius: clamp(30px, 3vw, 46px);
    border: 9px solid #17171a;
    background: #0a0a0b;
    box-shadow: 0 40px 90px rgba(5, 3, 20, 0.5);
    overflow: hidden;
}

.hiwx-phone::after {
    /* pill notch */
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 22px;
    border-radius: 999px;
    background: #0a0a0b;
    pointer-events: none;
}

.hiwx-phone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Statements — the big centred interstitial lines
   -------------------------------------------------------------------------- */

.hiwx-statement {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(4.5rem, 11vw, 9.5rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}

.hiwx-statement__big {
    margin: 0;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.3vw, 4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: #d6d6de;
}

.hiwx-statement__small {
    margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    color: var(--flow-dim);
}

/* Slightly tighter variant for the short two-liner between sections */
.hiwx-statement--display .hiwx-statement__big {
    font-size: clamp(2.3rem, 5.4vw, 5.2rem);
    line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Trio — three quiet cards, icon bubble breathing room above the copy
   -------------------------------------------------------------------------- */

.hiwx-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.7rem);
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3rem);
}

.hiwx-trio__card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.8rem, 2.6vw, 2.8rem);
    border-radius: clamp(24px, 2.6vw, 36px);
    background: #121216;
    border: 1px solid rgba(255, 255, 255, 0.045);
}

.hiwx-trio__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
    border-radius: 50%;
    background: radial-gradient(120% 120% at 30% 20%, #221a44, #141018 70%);
    color: var(--flow-accent-bright);
    font-size: 1.45rem;
}

.hiwx-trio__card h3 {
    margin: 0;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(1.3rem, 1.7vw, 1.65rem);
    letter-spacing: -0.01em;
    color: #e8e8ee;
}

.hiwx-trio__card p {
    margin: 0.8rem 0 0;
    font-size: 0.98rem;
    line-height: 1.62;
    color: var(--flow-dim);
}

/* --------------------------------------------------------------------------
   Show — sticky phone left, full-height feature blocks right
   -------------------------------------------------------------------------- */

.hiwx-show {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 3vw, 2.75rem);
}

.hiwx-show__stickycol {
    position: relative;
    /* Start the device well below the section's top edge: without this its
       natural (pre-pin) position, lifted by the -50% centering shift, pokes
       up into the statement above. 50svh makes it pin at the viewport
       centre right as the first block's content centres. */
    padding-top: 50svh;
}

/* WebGL device mount (js/hiw-show-3d.js). Hidden until the module lands,
   then it replaces the flat CSS phone via .has-3d on the section. */
.hiwx-show__device {
    display: none;
    position: sticky;
    top: 50svh;
    translate: 0 -50%;
    width: 100%;
    height: clamp(420px, 76svh, 720px);
    pointer-events: none;
}

.hiwx-show__device canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hiwx-show.has-3d .hiwx-show__device {
    display: block;
}

.hiwx-show.has-3d .hiwx-show__phone {
    display: none;
}

.hiwx-show__phone {
    position: sticky;
    top: 50svh;
    /* Centering uses the `translate` property so the scrub in
       js/hiw-flow.js can own `transform` without clobbering it. */
    translate: 0 -50%;
    width: clamp(220px, 19vw, 300px);
    margin: 0 auto;
    aspect-ratio: 9 / 19;
    will-change: transform;
}

.hiwx-show__phone img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
}

.hiwx-show__phone img.is-active {
    opacity: 1;
}

.hiwx-show__block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.hiwx-show__inlinephone {
    display: none;
}

.hiwx-show__block h2 {
    margin: 0 0 clamp(1.4rem, 2.6vw, 2.1rem);
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 4.6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #d6d6de;
}

.hiwx-show__block p {
    margin: 0 0 1rem;
    max-width: 52ch;
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--flow-dim);
}

.hiwx-show__actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.3rem;
}

/* --------------------------------------------------------------------------
   Rail — horizontal snap row of big half-visual cards
   -------------------------------------------------------------------------- */

.hiwx-rail {
    padding-bottom: clamp(5rem, 11vw, 9rem);
}

.hiwx-rail__track {
    display: flex;
    gap: clamp(1rem, 1.8vw, 1.6rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 clamp(1.5rem, 3vw, 2.75rem) 1rem;
    scrollbar-width: none;
}

.hiwx-rail__track::-webkit-scrollbar {
    display: none;
}

.hiwx-rail__card {
    flex: 0 0 clamp(320px, 58vw, 880px);
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(320px, 36vw, 470px);
    border-radius: clamp(26px, 3vw, 44px);
    background: #121216;
    border: 1px solid rgba(255, 255, 255, 0.045);
    overflow: hidden;
}

.hiwx-rail__visual {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(108, 76, 241, 0.4), transparent 55%),
        radial-gradient(100% 120% at 90% 100%, rgba(50, 34, 120, 0.5), transparent 60%),
        #0d0d11;
}

.hiwx-rail__visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.hiwx-rail__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.8rem, 3vw, 3rem);
}

.hiwx-rail__copy h3 {
    margin: 0;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: clamp(1.55rem, 2.3vw, 2.2rem);
    letter-spacing: -0.015em;
    color: #e2e2ea;
}

.hiwx-rail__copy p {
    margin: 1rem 0 0;
    font-size: 0.99rem;
    line-height: 1.65;
    color: var(--flow-dim);
}

/* ---- Rail mock UIs (pure CSS stand-ins for app views) ------------------- */

.hiwx-mock {
    width: min(100%, 300px);
    padding: 1.4rem 1.5rem 1.6rem;
    border-radius: 22px;
    background: #101014;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 60px rgba(5, 3, 20, 0.45);
    font-family: var(--flow-display);
}

.hiwx-mock__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
}

.hiwx-mock__figure {
    font-size: 2.3rem;
    letter-spacing: -0.02em;
    color: #eef;
}

.hiwx-mock__figure small {
    font-size: 1rem;
    color: var(--flow-dim);
}

.hiwx-mock__chip {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
    font-size: 0.8rem;
    white-space: nowrap;
}

.hiwx-mock__chip--violet {
    background: rgba(139, 92, 246, 0.16);
    color: #b9a3f8;
}

.hiwx-mock__bar {
    height: 8px;
    margin-top: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.hiwx-mock__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--flow-accent), var(--flow-accent-bright));
}

.hiwx-mock__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--flow-dim);
}

.hiwx-mock__shop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.hiwx-mock__shop span {
    aspect-ratio: 1;
    border-radius: 14px;
    background:
        radial-gradient(100% 100% at 30% 20%, rgba(139, 92, 246, 0.35), transparent 70%),
        rgba(255, 255, 255, 0.06);
}

.hiwx-mock__orb {
    width: clamp(84px, 9vw, 116px);
    aspect-ratio: 1;
    margin: 0.2rem auto 1.3rem;
    border-radius: 50%;
    background:
        radial-gradient(70% 70% at 32% 26%, rgba(255, 255, 255, 0.5), transparent 60%),
        linear-gradient(150deg, var(--flow-accent-bright, #8b5cf6), var(--flow-accent, #6c4cf1) 55%, #4b31c4);
    box-shadow: 0 18px 44px rgba(108, 76, 241, 0.4);
}

.hiwx-mock__swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.hiwx-mock__swatches span {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(100% 100% at 30% 20%, rgba(139, 92, 246, 0.35), transparent 70%),
        rgba(255, 255, 255, 0.06);
}

.hiwx-mock__swatches span.is-on {
    border-color: rgba(185, 163, 248, 0.75);
    background:
        radial-gradient(100% 100% at 30% 20%, rgba(185, 163, 248, 0.55), transparent 70%),
        rgba(139, 92, 246, 0.28);
}

/* --------------------------------------------------------------------------
   Reveal (site.js [data-reveal] adds .is-in)
   -------------------------------------------------------------------------- */

:root.js-reveal .hiwx-page [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--uf-ease, ease), transform 0.9s var(--uf-ease, ease);
}

:root.js-reveal .hiwx-page [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .hiwx-trio {
        grid-template-columns: minmax(0, 1fr);
    }

    .hiwx-trio__icon {
        margin-bottom: 1.6rem;
    }
}

@media (max-width: 900px) {
    /* Mobile type can't fill the desktop hero's 70svh, so space-between
       left a ~350px hole between title and copy. Content-sized instead. */
    .hiwx-hero {
        min-height: 0;
        justify-content: flex-start;
        gap: 2.4rem;
        padding-top: clamp(5rem, 11vh, 7rem);
    }

    .hiwx-hero__title {
        font-size: clamp(2.9rem, 13vw, 5.2rem);
        max-width: none;
    }

    .hiwx-stage__card {
        min-height: clamp(360px, 68vh, 560px);
    }

    .hiwx-stage__phone {
        width: clamp(200px, 52vw, 280px);
    }

    .hiwx-rail__card {
        grid-template-columns: minmax(0, 1fr);
        flex-basis: 86vw;
        min-height: 0;
    }

    .hiwx-rail__visual {
        min-height: 240px;
    }
}

/* Portrait show: same scrub, different geometry. The sticky column becomes
   a full-height overlay so the phone keeps travelling and crossfading for
   the whole section; the copy owns the top of each screen and the phone
   performs in the lower half, mirroring the hero's portrait split. */
@media (max-width: 900px) {
    .hiwx-show {
        position: relative;
        display: block;
    }

    .hiwx-show__stickycol {
        position: absolute;
        inset: 0;
        padding-top: 0;
        pointer-events: none;
        z-index: 2;
    }

    .hiwx-show__phone {
        top: 66svh;
        width: min(46vw, 200px);
        margin: 0 auto;
    }

    .hiwx-show__block {
        position: relative;
        z-index: 1;
        justify-content: flex-start;
        padding-top: 16svh;
        min-height: 100svh;
    }

    .hiwx-show__inlinephone {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root.js-reveal .hiwx-page [data-reveal],
    .hiwx-show__phone img {
        transition: none;
    }

    :root.js-reveal .hiwx-page [data-reveal] {
        opacity: 1;
        transform: none;
    }
}