/* ===================================================================
   PASSLY HERO ENGINE
   -------------------------------------------------------------------
   Version : 2.2
   Story   : Discover
   Status  : Production Build

   Floating widgets are controlled through per-component variables.
   Each widget (phone, ticket, event card, sales card) positions and
   scales independently. Responsive breakpoints should only override
   tokens, not selectors.
=================================================================== */

/* ===================================================================
   01. HERO TOKENS
=================================================================== */

:root{
    /* --------------------------------------------------------------
       Layout
    -------------------------------------------------------------- */
    --hero-max-width: 1400px;
    --hero-min-height: 100vh;
    --hero-padding-top: 90px;
    --hero-padding-inline: 80px;
    --hero-content-width: 520px;
    --hero-gap: 36px;

    /* --------------------------------------------------------------
       Phone (now positioned independently on .hero-phone-wrapper)
    -------------------------------------------------------------- */
    --phone-width: 580px;
    --phone-scale: 1;
    --phone-top: 40%;
    --phone-right: 7%;
    --phone-translate-y: -50%;
    --phone-z: 15;

    /* --------------------------------------------------------------
       Floating Engine Defaults
    -------------------------------------------------------------- */
    --float-duration: 6s;
    --float-ease: ease-in-out;
    --float-distance: 12px;

    /* --------------------------------------------------------------
       Ticket
    -------------------------------------------------------------- */
    --ticket-width: 240px;
    --ticket-height: 150px;
    --ticket-x: -35px;
    --ticket-y: 180px;
    --ticket-scale: 1;
    --ticket-rotation: -8deg;
    --ticket-float-distance: 8px;
    --ticket-float-duration: 7s;

    /* --------------------------------------------------------------
       Event Card
    -------------------------------------------------------------- */
    --event-card-x: 0px;
    --event-card-y: 180px;
    --event-card-width: auto;
    --event-card-height: auto;
    --event-card-scale: 1;
    --event-card-rotation: 0deg;
    --event-card-float-distance: 12px;
    --event-card-float-duration: 6s;

    /* --------------------------------------------------------------
       Sales Card
    -------------------------------------------------------------- */
    --sales-card-x: -260px;
    --sales-card-y: 40px;
    --sales-card-width: auto;
    --sales-card-height: auto;
    --sales-card-scale: 1;
    --sales-card-rotation: 0deg;
    --sales-card-float-distance: 12px;
    --sales-card-float-duration: 6s;

    /* --------------------------------------------------------------
       Floating Cards
    -------------------------------------------------------------- */
    --card-radius: 22px;
    --card-padding: 20px;

    /* --------------------------------------------------------------
       Glass
    -------------------------------------------------------------- */
    --glass-background: rgba(15,18,38,.82);
    --glass-border: rgba(255,255,255,.08);
    --glass-highlight: rgba(255,255,255,.18);

    /* --------------------------------------------------------------
       Brand Colours
    -------------------------------------------------------------- */
    --color-primary: #6F3CFF;
    --color-primary-light: #8F46FF;
    --color-accent: #B13EFF;
    --color-primary-dark: #7A2EFF;
    --color-button-start: #4F7DFF;
    --color-button-end: #A12CFF;
    --color-text: #FFFFFF;
    --color-text-soft: rgba(255,255,255,.75);
    --color-tag: #7CC8FF;

    /* --------------------------------------------------------------
       Shadows
    -------------------------------------------------------------- */
    --shadow-soft: 0 35px 80px rgba(0,0,0,.35);
    --shadow-phone: 0 50px 90px rgba(0,0,0,.45);

    /* --------------------------------------------------------------
       Animation
    -------------------------------------------------------------- */
    --transition-fast: .3s;
    --transition-normal: .45s;
}

/* ===================================================================
   02. HERO ENGINE
=================================================================== */

.hero-engine{
    position: relative;
    min-height: var(--hero-min-height);
    padding-top: var(--hero-padding-top);
    background: #050816;
    overflow: hidden;
}

/* ===================================================================
   03. HERO BACKGROUND
=================================================================== */

.hero-background{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.03);
    z-index: 0;
}

/* ===================================================================
   04. HERO OVERLAY
=================================================================== */

.hero-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(5,8,20,.92) 0%,
            rgba(8,12,28,.78) 45%,
            rgba(8,12,28,.42) 100%
        );
    z-index: 1;
}

/* ===================================================================
   05. HERO LAYOUT
=================================================================== */

.hero-content{
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: var(--hero-max-width);
    min-height: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-left: var(--hero-padding-inline);
}

/* ===================================================================
   06. HERO CONTENT
=================================================================== */

.hero-left{
    width: var(--hero-content-width);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ===================================================================
   07. HERO TAG
=================================================================== */

.hero-tag{
    width: fit-content;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--color-tag);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 2px;
}

/* ===================================================================
   08. HERO TYPOGRAPHY
=================================================================== */

.hero-left h1{
    margin: 0;
    color: var(--color-text);
    font-size: clamp(3rem,4.8vw,5rem);
    line-height: 1.05;
    font-weight: 800;
}

.hero-left p{
    margin: 0;
    color: var(--color-text-soft);
    font-size: 1.15rem;
    line-height: 1.8;
}

/* ===================================================================
   09. HERO ACTIONS
=================================================================== */

.hero-buttons{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.btn-primary,
.btn-secondary{
    width: 190px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    text-decoration: none;
}

.btn-primary{
    color: #FFFFFF;
    font-weight: 700;
    background:
        linear-gradient(
            135deg,
            var(--color-button-start),
            var(--color-button-end)
        );
    transition: var(--transition-fast);
}

.btn-secondary{
    color: #FFFFFF;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
    transition: var(--transition-fast);
}

.btn-primary:hover,
.btn-secondary:hover{
    transform: translateY(-3px);
}

/* ===================================================================
   10. PHONE AREA
   -------------------------------------------------------------------
   This is now a neutral, full-bleed canvas only. It contributes NO
   position/offset of its own — it just establishes the positioning
   context so the phone + widgets inside can each be positioned
   independently via their own top/right/bottom/left + transforms.
=================================================================== */

.hero-phone-area{
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.hero-phone-area > *{
    pointer-events: auto;
}

/* --------------------------------------------------------------
   Phone — independently positioned/scaled via its own vars
-------------------------------------------------------------- */

.hero-phone-wrapper{
    position: absolute;
    top: var(--phone-top);
    right: var(--phone-right);
    z-index: var(--phone-z);
    width: var(--phone-width);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(var(--phone-translate-y)) scale(var(--phone-scale));
    transform-origin: center;
}

.hero-phone-wrapper img{
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(var(--shadow-phone));
}

/* ===================================================================
   11. HERO SPACING UTILITIES
=================================================================== */

.hero-stack{
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap);
}

.hero-inline{
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ===================================================================
   12. HERO VISUAL FOUNDATION
=================================================================== */

.hero-engine::before,
.hero-engine::after{
    content: "";
    position: absolute;
    pointer-events: none;
}

.hero-engine::before{
    inset: 0;
    z-index: 0;
}

.hero-engine::after{
    inset: 0;
    z-index: 2;
}

/* ===================================================================
   13. FLOATING ENGINE

   Base architecture for every current and future hero widget.
   Position, size, scale and motion are controlled by variables only.
   Each widget anchors to a corner of .hero-phone-area (now neutral)
   and is placed via its own --float-x/--float-y offset — fully
   independent of the phone and of every other widget.
=================================================================== */

.hero-float{
    position: absolute;
    z-index: var(--float-z, 20);
    transform-origin: var(--float-origin, center);
    animation: heroFloat var(--float-duration-current, var(--float-duration)) var(--float-ease-current, var(--float-ease)) infinite;
    will-change: transform;
}

.hero-float--top-left{
    top: 0;
    left: 0;
    transform:
        translate(var(--float-x, 0px), var(--float-y, 0px))
        rotate(var(--float-rotation, 0deg))
        scale(var(--float-scale, 1));
}

.hero-float--bottom-right{
    right: 0;
    bottom: 0;
    transform:
        translate(var(--float-x, 0px), var(--float-y, 0px))
        rotate(var(--float-rotation, 0deg))
        scale(var(--float-scale, 1));
}

.hero-float--sized{
    width: var(--float-width, auto);
    height: var(--float-height, auto);
}

@keyframes heroFloat{
    0%{
        transform:
            translate(var(--float-x, 0px), var(--float-y, 0px))
            rotate(var(--float-rotation, 0deg))
            scale(var(--float-scale, 1));
    }

    50%{
        transform:
            translate(
                var(--float-x, 0px),
                calc(var(--float-y, 0px) - var(--float-distance-current, var(--float-distance)))
            )
            rotate(var(--float-rotation, 0deg))
            scale(var(--float-scale, 1));
    }

    100%{
        transform:
            translate(var(--float-x, 0px), var(--float-y, 0px))
            rotate(var(--float-rotation, 0deg))
            scale(var(--float-scale, 1));
    }
}

/* ===================================================================
   14. FLOATING CARD FOUNDATION
=================================================================== */

.floating-card,
.sales-card{
    z-index: 20;
    padding: var(--card-padding);
    color: var(--color-text);
    border-radius: var(--card-radius);
    background: var(--glass-background);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(22px);
    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 var(--glass-highlight);
}

.floating-card small,
.sales-card small{
    display: block;
    margin-bottom: 8px;
    color: #9AA7D5;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.floating-card h3,
.floating-card h4,
.sales-card h3,
.sales-card h4{
    margin: 0;
}

.floating-card p,
.sales-card p{
    margin: 8px 0;
    color: #B9C2E4;
}

.floating-card span,
.sales-card span{
    color: #D6DFFF;
}

/* ===================================================================
   15. COMPONENT UTILITIES
=================================================================== */

.status-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38FF7A;
    box-shadow: 0 0 10px #38FF7A;
}

/* ===================================================================
   16. QR FINDER
=================================================================== */

.finder{
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    border: 4px solid #000;
    background: #FFFFFF;
}

.finder::after{
    content: "";
    position: absolute;
    inset: 4px;
    background: #000;
}

.finder-tl{
    top: 6px;
    left: 6px;
}

.finder-tr{
    top: 6px;
    right: 6px;
}

.finder-bl{
    bottom: 6px;
    left: 6px;
}

/* ===================================================================
   17. PASSLY DIGITAL TICKET
=================================================================== */
.floating-ticket{
    --float-x: var(--ticket-x);
    --float-y: calc(var(--ticket-y) * -1);
    --float-width: var(--ticket-width);
    --float-height: var(--ticket-height);
    --float-scale: var(--ticket-scale);
    --float-rotation: var(--ticket-rotation);
    --float-distance-current: var(--ticket-float-distance);
    --float-duration-current: var(--ticket-float-duration);
    --float-z: 25;

    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 25% 15%,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.08) 20%,
            transparent 45%
        ),
        linear-gradient(
            135deg,
            var(--color-primary) 0%,
            var(--color-primary-light) 35%,
            var(--color-accent) 70%,
            var(--color-primary-dark) 100%
        );
    box-shadow: var(--shadow-soft);
}

.ticket-shine{
    position: absolute;
    top: -60px;
    left: -180px;
    width: 90px;
    height: 300px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transform: rotate(25deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            rgba(255,255,255,.42),
            rgba(255,255,255,.28),
            transparent
        );
    animation: ticketShine 12s ease-in-out infinite;
}

.ticket-content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    color: #FFFFFF;
}

.ticket-content small{
    font-size: 1rem;
    letter-spacing: .14em;
    opacity: .9;
}

.ticket-content h3{
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
}

.ticket-content p{
    margin: 0;
    font-size: .95rem;
}

.ticket-notch{
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0B0F22;
    transform: translateY(-50%);
}

.ticket-notch-left{
    left: -12px;
}

.ticket-notch-right{
    right: -12px;
}

.ticket-divider{
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 40px;
    z-index: 5;
    border-left: 2px dashed rgba(255,255,255,.35);
}

.ticket-stub{
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: rgba(255,255,255,.05);
}

.ticket-stub::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,.35);
    transform: translate(-50%,-50%) rotate(90deg);
}

.ticket-barcode{
    margin-top: 12px;
    height: 22px;
}

.ticket-barcode span{
    display: block;
    width: 82%;
    height: 100%;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.95) 0 2px,
            transparent 2px 4px,
            rgba(255,255,255,.95) 4px 5px,
            transparent 5px 8px
        );
}

@keyframes ticketShine{
    0%,
    82%{
        left: -180px;
        opacity: 0;
    }

    85%{
        opacity: .9;
    }

    100%{
        left: 320px;
        opacity: 0;
    }
}

/* ===================================================================
   18. STORY COMPONENTS
=================================================================== */

.hero-event-card{
    --float-x: var(--event-card-x);
    --float-y: var(--event-card-y);
    --float-width: var(--event-card-width);
    --float-height: var(--event-card-height);
    --float-scale: var(--event-card-scale);
    --float-rotation: var(--event-card-rotation);
    --float-distance-current: var(--event-card-float-distance);
    --float-duration-current: var(--event-card-float-duration);
    --float-z: 22;
}

.attendance{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-weight: 600;
}

/* ===================================================================
   SALES CARD

   Story 1 — Tickets Sold

   NOTE: merged from two previously-duplicated .sales-card rules.
   Positioning/animation come ONLY from .hero-float +
   .hero-float--bottom-right (position, right/bottom, z-index,
   transform, transform-origin, animation) — do not re-declare those
   here or the float animation breaks again.
=================================================================== */

.sales-card{
    /* engine hookup — feeds .hero-float's transform/animation */
    --float-x: var(--sales-card-x);
    --float-y: calc(var(--sales-card-y) * -1);
    --float-width: var(--sales-card-width);
    --float-height: var(--sales-card-height);
    --float-scale: var(--sales-card-scale);
    --float-rotation: var(--sales-card-rotation);
    --float-distance-current: var(--sales-card-float-distance);
    --float-duration-current: var(--sales-card-float-duration);
    --float-z: 24;

    /* visual styling only — no position/z-index/animation here */
    width: var(--sales-card-width);
    min-height: 92px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-sizing: border-box;
    color: var(--color-text);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(20,24,48,.92),
            rgba(12,15,34,.84)
        );
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 25px 55px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.10);
}

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

.sales-card-content{
    min-width: 0;
    flex: 1;
}

.sales-card small{
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.sales-card-main{
    display: flex;
    align-items: baseline;
    gap: 9px;
    white-space: nowrap;
}

.sales-card h3{
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}

/* ---------------------------------------------------------------
   Growth
--------------------------------------------------------------- */

.sales-card .growth{
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #63e6a5;
}

/* ---------------------------------------------------------------
   Icon
--------------------------------------------------------------- */

.sales-card-icon{
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #9b6cff;
    background:
        linear-gradient(
            145deg,
            rgba(111,60,255,.24),
            rgba(177,62,255,.13)
        );
    border: 1px solid rgba(143,70,255,.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 20px rgba(111,60,255,.12);
}

.sales-card-icon svg{
    width: 23px;
    height: 23px;
    display: block;
}

/* ===================================================================
   19. HERO METRICS
=================================================================== */

.hero-metrics{
    position: relative;
    z-index: 3;
    width: min(var(--hero-max-width),92%);
    margin: 0 auto 30px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.metric{
    padding: 28px;
    border-radius: 20px;
    background: rgba(12,16,35,.72);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
}

.metric h2{
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: 2rem;
}

.metric span{
    color: rgba(255,255,255,.65);
}

/* ===================================================================
   20. RESPONSIVE SYSTEM

   Breakpoints are configuration-only. Do not rewrite widget selectors.
   Every widget below (phone, ticket, event card, sales card) can be
   repositioned/rescaled per breakpoint completely independently of
   the other three.
=================================================================== */

@media (max-width:1440px){
    :root{
        --event-card-x: 960px;
        --event-card-y: 90px;
        --event-card-width: 180px;
        --event-card-scale: 1;

        --ticket-x: -230px;
        --ticket-y: 260px;
        --ticket-scale: .75;

        --sales-card-x: -550px;
        --sales-card-y: 400px;
        --sales-card-width: 250px;
        --sales-card-scale: .75;

        --phone-width: 660px;
        --phone-top: 40%;
        --phone-right: 15%;
        --phone-translate-y: -50%;
    }
}


@media (max-width:1200px){
    :root{
        --event-card-x: 800px;
        --event-card-y: 90px;
        --event-card-width: 180px;
        --event-card-scale: .8;

        --ticket-x: -10px;
        --ticket-y: 260px;
        --ticket-scale: .55;

        --sales-card-x: -100px;
        --sales-card-y: 350px;
        --sales-card-width: 220px;
        --sales-card-scale: .7;

        --phone-width: 600px;
        --phone-top: 40%;
        --phone-right: -1%;
        --phone-translate-y: -50%;
    }
}

@media (max-width:1000px){
    :root{
        --phone-width: 460px;
        --phone-top: 38%;
        --phone-right: 10%;

        --ticket-x: -10px;
        --ticket-y: 120px;

        --event-card-x: 100px;
    }

    .hero-content{
        min-height: auto;
        padding: 80px 40px;
        justify-content: center;
        text-align: center;
    }

    .hero-left{
        margin: auto;
        align-items: center;
    }

    .hero-metrics{
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:768px){
    :root{
        --phone-width: 700px;
        --phone-top: 45%;
        --phone-right: 15%;
        --phone-translate-y: -50%;

        --hero-padding-inline: 20px;

        --ticket-rotation: -5deg;
        --ticket-scale: .85;
        --ticket-x: -140px;
        --ticket-y: 70px;

        --event-card-x: 390px;
        --event-card-y: -10px;
        --event-card-scale: .9;

        --sales-card-x: -250px;
        --sales-card-y: 190px;
        --sales-card-width: 220px;
        --sales-card-scale: .7;
    }

    .hero-content{
        padding: 60px 24px;
    }

    .hero-left{
        width: 100%;
    }

    .hero-left h1{
        font-size: clamp(2.6rem,8vw,3.6rem);
    }

    .hero-left p{
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons{
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary{
        width: 100%;
        max-width: 320px;
    }

    .hero-phone-area{
        position: relative;
        inset: auto;
        margin-top: 10px;
        min-height: 480px;
    }
    .hero-metrics{
        grid-template-columns: repeat(4,1fr);
    }
}

@media (max-width:650px){
    :root{
        --phone-width: 600px;
        --phone-top: 50%;
        --phone-right: -20%;
        --phone-translate-y: -50%;

        --ticket-width: 200px;
        --ticket-height: 128px;
        --ticket-x: 0px;
        --ticket-y: 85px;
        --ticket-scale: .75;

        --event-card-x: 250px;
        --event-card-y: -10px;
        --event-card-scale: .85;

        --sales-card-x: -220px;
        --sales-card-y: 190px;
        --sales-card-scale: .6;
    }

    .hero-metrics{
        grid-template-columns: repeat(2,1fr);
    }
}

/* ==========================================================
   Story Hooks
========================================================== */