/*
================================================

Space Vanta Theme 1.0

Module:
Homepage On-Demand Entry

File:
public/on-demand/home/entry.css

Version:
HOME-ON-DEMAND-ENTRY-004

Purpose:
Spatial invitation for the independent
On-Demand experience.

Visual DNA:
Spatial / Geometric / Constructed
Silver / Gray / Cold Blue
Coordinate / Signal / Reflection

================================================
*/


/*
================================================
ROOT
================================================
*/

.sv-home-on-demand {
    position: relative;

    width: 100%;

    overflow: hidden;

    isolation: isolate;
}


.sv-home-on-demand__inner {
    position: relative;

    width: min(100%, 1440px);

    min-height: 680px;

    margin: 0 auto;

    padding:
        110px 48px 130px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;
}


/*
================================================
CONTENT
================================================

The content owns the central visual hierarchy.

The spatial field is always behind it.

A dedicated safe zone prevents the
icon from interfering with typography.
================================================
*/

.sv-home-on-demand__content {
    position: relative;

    z-index: 10;

    width: min(100%, 620px);

    margin: 0 auto;

    padding:
        58px 34px 86px;

    box-sizing: border-box;

    text-align: center;
}


/*
================================================
CONTENT HALO
================================================

This is not a box.

It creates a soft central spatial boundary
around the copy without visually enclosing it.
================================================
*/

.sv-home-on-demand__content::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: min(92%, 560px);
    height: 300px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(88, 105, 118, 0.08);

    border-radius: 50%;

    opacity: 0.72;

    pointer-events: none;

    z-index: -1;
}


.sv-home-on-demand__content::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: min(76%, 420px);
    height: 210px;

    transform:
        translate(-50%, -50%) rotate(-4deg);

    border:
        1px solid rgba(92, 116, 132, 0.055);

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


/*
================================================
EYEBROW
================================================
*/

.sv-home-on-demand__eyebrow {
    position: relative;

    display: inline-block;

    margin: 0 0 20px;

    font-size: 10px;
    line-height: 1.2;

    font-weight: 500;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: rgba(55, 65, 74, 0.56);
}


.sv-home-on-demand__eyebrow::before,
.sv-home-on-demand__eyebrow::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 28px;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(77, 101, 116, 0.22));
}


.sv-home-on-demand__eyebrow::before {
    right: calc(100% + 14px);
}


.sv-home-on-demand__eyebrow::after {
    left: calc(100% + 14px);

    transform:
        scaleX(-1);
}


/*
================================================
TITLE
================================================
*/

.sv-home-on-demand__title {
    position: relative;

    max-width: 580px;

    margin: 0 auto;

    font-size:
        clamp(38px, 5vw, 68px);

    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -0.045em;

    color: rgba(25, 30, 35, 0.96);

    text-wrap: balance;
}


/*
================================================
DESCRIPTION
================================================
*/

.sv-home-on-demand__description {
    position: relative;

    width: min(100%, 470px);

    margin:
        24px auto 0;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 400;

    letter-spacing: 0.005em;

    color: rgba(65, 73, 81, 0.66);

    text-wrap: balance;
}


/*
================================================
CTA
================================================

Different from Hero CTA.

Homepage uses a spatial entry marker,
not a conventional circular arrow button.
================================================
*/

.sv-home-on-demand__link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 34px;

    padding:
        8px 0 10px;

    color: rgba(32, 40, 47, 0.88);

    text-decoration: none;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.sv-home-on-demand__link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(67, 88, 101, 0.52),
            rgba(67, 88, 101, 0.08));

    transform-origin: left center;

    transition:
        transform 300ms ease,
        opacity 300ms ease;
}


.sv-home-on-demand__link-label {
    display: inline-block;
}


.sv-home-on-demand__link-mark {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border:
        1px solid rgba(70, 91, 105, 0.42);

    transform:
        rotate(45deg);

    transition:
        transform 300ms cubic-bezier(.16, .76, .2, 1),
        border-color 300ms ease,
        background-color 300ms ease;
}


.sv-home-on-demand__link-mark span {
    position: relative;

    display: block;

    width: 5px;
    height: 1px;

    background:
        rgba(66, 88, 103, 0.68);

    transform:
        rotate(-45deg);
}


.sv-home-on-demand__link-mark span::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 3px;
    height: 3px;

    border-top:
        1px solid rgba(66, 88, 103, 0.68);

    border-right:
        1px solid rgba(66, 88, 103, 0.68);

    transform:
        translateY(-50%) rotate(0deg);
}


.sv-home-on-demand__link:hover::after {
    transform:
        scaleX(0.42);

    opacity: 0.6;
}


.sv-home-on-demand__link:hover .sv-home-on-demand__link-mark {
    border-color:
        rgba(66, 101, 120, 0.68);

    background:
        rgba(197, 211, 220, 0.12);

    transform:
        rotate(45deg) translate(2px, -2px);
}


.sv-home-on-demand__link:focus-visible {
    outline:
        1px solid rgba(66, 91, 107, 0.42);

    outline-offset: 8px;
}


/*
================================================
SPATIAL FIELD
================================================

The field is intentionally independent from
the content layer.

It can move and breathe without affecting
layout or text.
================================================
*/

.sv-home-on-demand__field {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(1000px, 88vw);
    height: 520px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    z-index: 1;
}


/*
================================================
FIELD AXIS
================================================
*/

.sv-home-on-demand__field-axis {
    position: absolute;

    opacity: 0.34;
}


.sv-home-on-demand__field-axis--horizontal {
    left: 4%;
    right: 4%;

    top: 53%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(76, 99, 113, 0.12),
            rgba(76, 99, 113, 0.22),
            rgba(76, 99, 113, 0.12),
            transparent);
}


.sv-home-on-demand__field-axis--vertical {
    top: 8%;
    bottom: 4%;

    left: 50%;

    width: 1px;

    background:
        linear-gradient(180deg,
            transparent,
            rgba(76, 99, 113, 0.10),
            rgba(76, 99, 113, 0.18),
            transparent);
}


/*
================================================
ORBIT SYSTEM
================================================
*/

.sv-home-on-demand__orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid rgba(79, 100, 113, 0.10);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    transition:
        transform 1200ms cubic-bezier(.16, .76, .2, 1),
        opacity 900ms ease;
}


.sv-home-on-demand__orbit--outer {
    width: 720px;
    height: 310px;

    opacity: 0.48;

    transform:
        translate(-50%, -50%) rotate(-5deg);
}


.sv-home-on-demand__orbit--middle {
    width: 590px;
    height: 250px;

    opacity: 0.30;

    transform:
        translate(-50%, -50%) rotate(12deg);
}


.sv-home-on-demand__orbit--inner {
    width: 410px;
    height: 175px;

    opacity: 0.20;

    transform:
        translate(-50%, -50%) rotate(-8deg);
}


/*
================================================
FIELD LINES
================================================
*/

.sv-home-on-demand__field-line {
    position: absolute;

    height: 1px;

    transform-origin: center center;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(77, 101, 116, 0.18),
            transparent);

    opacity: 0.44;
}


.sv-home-on-demand__field-line--one {
    width: 280px;

    left: 11%;
    top: 27%;

    transform:
        rotate(-18deg);
}


.sv-home-on-demand__field-line--two {
    width: 250px;

    right: 9%;
    top: 70%;

    transform:
        rotate(16deg);
}


.sv-home-on-demand__field-line--three {
    width: 180px;

    left: 30%;
    bottom: 8%;

    transform:
        rotate(-4deg);
}


/*
================================================
NODES
================================================
*/

.sv-home-on-demand__node {
    position: absolute;

    width: 7px;
    height: 7px;

    border:
        1px solid rgba(69, 91, 105, 0.42);

    background:
        linear-gradient(135deg,
            rgba(231, 236, 239, 0.92),
            rgba(176, 194, 205, 0.72));

    transform:
        translate(-50%, -50%) rotate(45deg);

    box-shadow:
        0 0 0 3px rgba(92, 126, 148, 0.035);
}


.sv-home-on-demand__node--one {
    left: 16%;
    top: 30%;
}


.sv-home-on-demand__node--two {
    right: 15%;
    top: 24%;
}


.sv-home-on-demand__node--three {
    right: 18%;
    bottom: 18%;
}


.sv-home-on-demand__node--four {
    left: 21%;
    bottom: 15%;
}


/*
================================================
CENTRAL SIGNAL
================================================

This sits below the text-safe area.

It provides the visual connection between
copy and the lower spatial object.
================================================
*/

.sv-home-on-demand__signal {
    position: absolute;

    left: 50%;
    top: 62%;

    width: 18px;
    height: 18px;

    transform:
        translate(-50%, -50%);

    opacity: 0.76;
}


.sv-home-on-demand__signal-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    border:
        1px solid rgba(66, 94, 109, 0.56);

    background:
        rgba(199, 213, 221, 0.74);

    transform:
        translate(-50%, -50%) rotate(45deg);
}


.sv-home-on-demand__signal-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

    border:
        1px solid rgba(82, 112, 128, 0.14);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


/*
================================================
LOWER SPATIAL OBJECT
================================================
*/

.sv-home-on-demand__object {
    position: absolute;

    left: 50%;
    top: 78%;

    width: 120px;
    height: 70px;

    transform:
        translate(-50%, -50%) rotate(-6deg);

    opacity: 0.64;
}


.sv-home-on-demand__object-frame {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid rgba(75, 99, 113, 0.20);

    transform-origin: center center;
}


.sv-home-on-demand__object-frame--one {
    width: 72px;
    height: 72px;

    transform:
        translate(-50%, -50%) rotate(45deg);
}


.sv-home-on-demand__object-frame--two {
    width: 105px;
    height: 105px;

    opacity: 0.38;

    transform:
        translate(-50%, -50%) rotate(45deg);
}


.sv-home-on-demand__object-surface {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 52px;
    height: 36px;

    border:
        1px solid rgba(67, 91, 106, 0.25);

    background:
        linear-gradient(135deg,
            rgba(233, 237, 239, 0.42),
            rgba(183, 201, 211, 0.18));

    transform:
        translate(-50%, -50%) rotate(45deg);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


.sv-home-on-demand__object-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    border:
        1px solid rgba(59, 87, 103, 0.48);

    background:
        rgba(187, 204, 213, 0.62);

    transform:
        translate(-50%, -50%) rotate(45deg);

    box-shadow:
        0 0 18px rgba(87, 124, 145, 0.12);
}


/*
================================================
COORDINATES
================================================
*/

.sv-home-on-demand__coordinates {
    position: absolute;

    right: 42px;
    bottom: 34px;

    display: flex;

    align-items: center;

    gap: 18px;

    z-index: 5;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: rgba(75, 87, 96, 0.34);
}


.sv-home-on-demand__coordinates span {
    white-space: nowrap;
}


.sv-home-on-demand__coordinates span+span {
    position: relative;

    padding-left: 18px;
}


.sv-home-on-demand__coordinates span+span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 3px;

    border:
        1px solid rgba(73, 94, 108, 0.32);

    transform:
        translateY(-50%) rotate(45deg);
}


/*
================================================
DESKTOP MOTION
================================================

The spatial field responds lightly.

The copy itself remains stable.
================================================
*/

@media (hover: hover) and (pointer: fine) {

    .sv-home-on-demand__inner:hover .sv-home-on-demand__orbit--outer {
        opacity: 0.58;

        transform:
            translate(-50%, -50%) rotate(-2deg) scale(1.015);
    }


    .sv-home-on-demand__inner:hover .sv-home-on-demand__orbit--middle {
        opacity: 0.38;

        transform:
            translate(-50%, -50%) rotate(16deg) scale(1.018);
    }


    .sv-home-on-demand__inner:hover .sv-home-on-demand__orbit--inner {
        opacity: 0.26;

        transform:
            translate(-50%, -50%) rotate(-12deg) scale(1.025);
    }


    .sv-home-on-demand__inner:hover .sv-home-on-demand__signal-core {
        box-shadow:
            0 0 0 5px rgba(92, 126, 148, 0.045),
            0 0 22px rgba(88, 126, 150, 0.13);
    }


    .sv-home-on-demand__inner:hover .sv-home-on-demand__object {
        opacity: 0.78;

        transform:
            translate(-50%, -50%) rotate(-4deg) translateY(-3px);
    }


    .sv-home-on-demand__inner:hover .sv-home-on-demand__node--one {
        transform:
            translate(-50%, -50%) rotate(45deg) scale(1.12);
    }


    .sv-home-on-demand__inner:hover .sv-home-on-demand__node--two {
        transform:
            translate(-50%, -50%) rotate(45deg) scale(1.18);
    }

}


/*
================================================
TABLET
================================================
*/

@media (max-width: 1024px) {

    .sv-home-on-demand__inner {
        min-height: 620px;

        padding:
            100px 32px 120px;
    }


    .sv-home-on-demand__field {
        width: 90vw;
    }


    .sv-home-on-demand__orbit--outer {
        width: 650px;
        height: 290px;
    }


    .sv-home-on-demand__orbit--middle {
        width: 530px;
        height: 235px;
    }


    .sv-home-on-demand__orbit--inner {
        width: 370px;
        height: 165px;
    }

}


/*
================================================
MOBILE
================================================

Mobile is independently composed.

Do not simply scale the desktop field.

The content remains central and the spatial
object moves into a controlled lower field.
================================================
*/

@media (max-width: 767px) {

    .sv-home-on-demand__inner {
        min-height: 610px;

        padding:
            86px 22px 94px;
    }


    /*
    ---------------------------------------------
    Content
    ---------------------------------------------
    */

    .sv-home-on-demand__content {
        width: 100%;

        padding:
            42px 10px 142px;
    }


    .sv-home-on-demand__content::before {
        width: 96%;

        height: 270px;
    }


    .sv-home-on-demand__content::after {
        width: 82%;

        height: 205px;
    }


    .sv-home-on-demand__eyebrow {
        margin-bottom: 17px;

        font-size: 9px;

        letter-spacing: 0.20em;
    }


    .sv-home-on-demand__eyebrow::before,
    .sv-home-on-demand__eyebrow::after {
        width: 18px;
    }


    .sv-home-on-demand__eyebrow::before {
        right: calc(100% + 9px);
    }


    .sv-home-on-demand__eyebrow::after {
        left: calc(100% + 9px);
    }


    .sv-home-on-demand__title {
        max-width: 330px;

        font-size:
            clamp(34px, 10vw, 46px);

        line-height: 1.0;

        letter-spacing: -0.04em;
    }


    .sv-home-on-demand__description {
        width: min(100%, 330px);

        margin-top: 20px;

        font-size: 12px;

        line-height: 1.65;
    }


    .sv-home-on-demand__link {
        margin-top: 28px;

        font-size: 10px;

        letter-spacing: 0.13em;
    }


    .sv-home-on-demand__link-mark {
        width: 16px;
        height: 16px;
    }


    /*
    ---------------------------------------------
    Spatial Field
    ---------------------------------------------
    */

    .sv-home-on-demand__field {
        top: 51%;

        width: 100vw;
        height: 470px;
    }


    .sv-home-on-demand__field-axis--horizontal {
        left: 3%;
        right: 3%;

        top: 59%;
    }


    .sv-home-on-demand__field-axis--vertical {
        top: 10%;
        bottom: 4%;
    }


    /*
    ---------------------------------------------
    Orbit
    ---------------------------------------------
    */

    .sv-home-on-demand__orbit--outer {
        width: 92vw;
        height: 260px;

        opacity: 0.42;
    }


    .sv-home-on-demand__orbit--middle {
        width: 76vw;
        height: 215px;

        opacity: 0.27;
    }


    .sv-home-on-demand__orbit--inner {
        width: 58vw;
        height: 165px;

        opacity: 0.18;
    }


    /*
    ---------------------------------------------
    Lines
    ---------------------------------------------
    */

    .sv-home-on-demand__field-line--one {
        width: 150px;

        left: 4%;
        top: 29%;
    }


    .sv-home-on-demand__field-line--two {
        width: 145px;

        right: 2%;
        top: 72%;
    }


    .sv-home-on-demand__field-line--three {
        width: 110px;

        left: 26%;
        bottom: 8%;
    }


    /*
    ---------------------------------------------
    Nodes
    ---------------------------------------------
    */

    .sv-home-on-demand__node {
        width: 6px;
        height: 6px;
    }


    .sv-home-on-demand__node--one {
        left: 8%;
        top: 29%;
    }


    .sv-home-on-demand__node--two {
        right: 8%;
        top: 25%;
    }


    .sv-home-on-demand__node--three {
        right: 10%;
        bottom: 16%;
    }


    .sv-home-on-demand__node--four {
        left: 12%;
        bottom: 14%;
    }


    /*
    ---------------------------------------------
    Signal
    ---------------------------------------------
    */

    .sv-home-on-demand__signal {
        top: 62%;
    }


    /*
    ---------------------------------------------
    Lower Object
    ---------------------------------------------
    */

    .sv-home-on-demand__object {
        top: 76%;

        width: 100px;
        height: 62px;

        opacity: 0.60;
    }


    .sv-home-on-demand__object-frame--one {
        width: 62px;
        height: 62px;
    }


    .sv-home-on-demand__object-frame--two {
        width: 88px;
        height: 88px;
    }


    .sv-home-on-demand__object-surface {
        width: 45px;
        height: 31px;
    }


    /*
    ---------------------------------------------
    Coordinates
    ---------------------------------------------
    */

    .sv-home-on-demand__coordinates {
        left: 50%;
        right: auto;
        bottom: 24px;

        width: max-content;

        transform:
            translateX(-50%);

        gap: 12px;

        font-size: 7px;
    }


    .sv-home-on-demand__coordinates span+span {
        padding-left: 12px;
    }


    .sv-home-on-demand__coordinates span+span::before {
        width: 2px;
        height: 2px;
    }

}


/*
================================================
SMALL MOBILE
================================================
*/

@media (max-width: 390px) {

    .sv-home-on-demand__inner {
        min-height: 570px;

        padding:
            76px 18px 82px;
    }


    .sv-home-on-demand__content {
        padding:
            36px 6px 130px;
    }


    .sv-home-on-demand__title {
        font-size: 34px;
    }


    .sv-home-on-demand__description {
        max-width: 300px;

        font-size: 11.5px;
    }


    .sv-home-on-demand__field {
        height: 440px;
    }


    .sv-home-on-demand__orbit--outer {
        width: 94vw;
        height: 245px;
    }


    .sv-home-on-demand__orbit--middle {
        width: 79vw;
        height: 200px;
    }


    .sv-home-on-demand__orbit--inner {
        width: 60vw;
        height: 152px;
    }


    .sv-home-on-demand__object {
        top: 75%;
    }


    .sv-home-on-demand__coordinates {
        bottom: 19px;

        font-size: 6.5px;

        gap: 9px;
    }


    .sv-home-on-demand__coordinates span+span {
        padding-left: 9px;
    }

}


/*
================================================
REDUCED MOTION
================================================
*/

@media (prefers-reduced-motion: reduce) {

    .sv-home-on-demand__orbit,
    .sv-home-on-demand__object,
    .sv-home-on-demand__node,
    .sv-home-on-demand__link,
    .sv-home-on-demand__link::after,
    .sv-home-on-demand__link-mark {
        transition: none !important;
    }

}