/* ==========================================================================
   CHILLI6 PRELANDER
   - every element on the stage is an image (swap the src, nothing else)
   - the only real text is the 4 feature lines inside the popup
   - the whole stage is sized from the viewport HEIGHT, so desktop / laptop
     never scrolls : the images just get smaller on a short screen
   ========================================================================== */

:root {
    /* master sizes : min(height based, width based) = never overflows either axis */
    --logo-w: min(10vh, 26vw);
    --head-w: min(54vh, 90vw);
    --phone-w: min(35vh, 54vw);
    --dragon-w: min(52vh, 46vw);
    --model-w: min(46vh, 36vw);

    /* how far the side art tucks in behind the phone */
    --side-tuck: 7vw;

    /* the side art bleeds this far past the phone, down to the screen edge */
    --side-drop: 2vh;

    /* screen cut-out inside images/mobile.png (348 x 716) */
    --scr-l: 4.023%;
    --scr-t: 17.737%;
    --scr-w: 92.529%;
    --scr-h: 58.520%;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background-image: url(../images/body-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #1b0630;
    background-attachment: fixed;
    font-family: "Oswald", Helvetica, sans-serif;
    overflow: hidden;
}

img {
    max-width: 100%;
}

.main-wrapper {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage {
    width: 100%;
    height: 100%;
}

/* the stack is bottom anchored : the phone + side art always sit on the
   bottom edge of the screen, spare height opens up above the phone */
.main-part {
    text-align: center;
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 1.5vh 0 var(--side-drop);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* ==========================================================================
   1. LOGO
   ========================================================================== */

.main-part .logo {
    width: var(--logo-w);
    margin: 0 auto;
    line-height: 0;
}

.main-part .logo img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   2. MAIN HEADING
   ========================================================================== */

.text-wrapper.text-01 {
    width: var(--head-w);
    margin: 1vh auto 0;
    line-height: 0;
}

.text-wrapper.text-01 img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 .6vh 1.2vh rgba(0, 0, 0, .55));
}

/* ==========================================================================
   3. HERO : dragon / phone / model
   ========================================================================== */

.hero {
    position: relative;
    width: 100%;
    margin: auto auto 0;
    /* pushed to the bottom of the stack */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* the dragon and the model drop past the phone so they run off the
   bottom edge of the screen, exactly like the reference */
.hero-side {
    position: absolute;
    bottom: calc(-1 * var(--side-drop));
    line-height: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-side img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 1.2vh 3vh rgba(0, 0, 0, .55));
}

.hero-left {
    width: var(--dragon-w);
    right: 48%;
    margin-right: calc(var(--phone-w) / 2 - var(--side-tuck));
    transform-origin: 100% 100%;
    top: 16%;
}

.hero-right {
    width: var(--model-w);
    left: 52%;
    margin-left: calc(var(--phone-w) / 2 - var(--side-tuck));
    z-index: 2;
    transform-origin: 0% 100%;
}

/* ---------- the phone ----------
   .phone-wrap carries the intro animation, .phone carries the spin shake,
   so the two never fight over the same animation property                */

.phone-wrap {
    position: relative;
    z-index: 3;
    width: var(--phone-w);
    flex: 0 0 auto;
}

.phone {
    position: relative;
    width: 100%;
    aspect-ratio: 348 / 716;
    filter: drop-shadow(0 1.6vh 3vh rgba(0, 0, 0, .6));
}

.phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* screen cut-out : the reels live here */
.phone-screen {
    position: absolute;
    left: var(--scr-l);
    top: var(--scr-t);
    width: var(--scr-w);
    height: var(--scr-h);
    z-index: 3;
    overflow: hidden;
    background: #192b0d;
}

.spinner {
    position: absolute;
    inset: 0;
}

/* ---------- 4 reels ---------- */

.spinner-col {
    position: absolute;
    top: 0;
    width: 25%;
    height: 100%;
    overflow: hidden;
}

.spinner-col1 {
    left: 0;
}

.spinner-col2 {
    left: 25%;
}

.spinner-col3 {
    left: 50%;
}

.spinner-col4 {
    left: 75%;
}

.spinner-col .img {
    width: 100%;
    height: 1200%;
    /* 12 strips of scroll room */
    margin-top: 0;
    background-image: url(../images/az2-nowild.png);
    background-repeat: repeat-y;
    background-size: 100% calc(100% / 12);
    /* 1 strip = 1 screen = 4 tiles */
    will-change: margin-top;
    transition: margin-top 2.6s cubic-bezier(.16, .68, .28, 1), filter .35s ease;
}

.spinner-col2 .img,
.spinner-col4 .img {
    background-image: url(../images/az1.png);
}

.spinner-col2 .img {
    transition-duration: 3.2s;
}

.spinner-col3 .img {
    transition-duration: 3.8s;
}

.spinner-col4 .img {
    transition-duration: 4.4s;
}

/* reel stays sharp while rolling (no motion blur) */
.spinner-col.rolling .img {
    filter: brightness(1.06);
}

/* little pop when a reel locks in */
.spinner-col.locked {
    animation: reelLock .4s ease;
}

@keyframes reelLock {
    0% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(1.2%);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---------- wild ----------
   when the reels stop, the whole 3rd row merges into gold tiles :
   all four columns of row 3, nothing else                          */

.wild-symbol {
    position: absolute;
    top: 50%;            /* row 3 */
    left: 0;
    width: 100%;
    height: 25%;
    z-index: 5;
    display: flex;
    align-items: stretch;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

/* every cell is cropped straight out of the reel strip (images/az2.png,
   4 tiles tall) : row 2 is the gold fa tile, row 3 is the gold win tile */
.wild-symbol .wild-cell {
    position: relative;
    flex: 0 0 25%;
    width: 25%;
    opacity: 0;
    background-image: url(../images/az2.png);
    background-repeat: no-repeat;
    background-size: 100% 400%;
    background-position: 0 33.3333%;
    /* gold fa */
}

/* the 2nd column opens the win badge on top of its gold tile */
.wild-symbol .wild-cell.is-win {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wild-symbol .wild-cell.is-win img {
    position: relative;
    z-index: 2;
    width: 88%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(120, 60, 0, .8));
}

/* gold glow on top of the tile */
.wild-symbol .wild-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            rgba(255, 205, 70, .45) 0%,
            rgba(255, 190, 40, .22) 45%,
            rgba(255, 190, 40, 0) 72%);
}

.wild-symbol.show {
    visibility: visible;
}

.wild-symbol.show .wild-cell {
    animation: wildIn .45s cubic-bezier(.18, .89, .32, 1.28) forwards;
}

.wild-symbol.show .wild-cell.is-win img {
    animation: wildPulse .7s ease-in-out .45s infinite alternate;
}

.wild-symbol.out .wild-cell {
    animation: wildOut .4s ease forwards;
}

@keyframes wildIn {
    0% { opacity: 0; transform: scale(.3) rotate(-25deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes wildPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

@keyframes wildOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* winning row : the bottom row, where all four reels show the dot tile */
.win-line {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 25%;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 236, 120, 0) 0%, rgba(255, 236, 120, .35) 50%, rgba(255, 236, 120, 0) 100%);
    box-shadow: inset 0 0 30px rgba(255, 210, 60, .9);
}

.win-line.show {
    animation: winFlash .45s ease 5 alternate;
}

@keyframes winFlash {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.phone.is-spinning {
    animation: shake .35s ease-in-out infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(-.35%, .2%, 0);
    }

    75% {
        transform: translate3d(.35%, -.2%, 0);
    }
}

.phone.is-win .phone-screen {
    animation: winGlow .5s ease 4 alternate;
}

@keyframes winGlow {
    0% {
        box-shadow: inset 0 0 0 rgba(255, 210, 60, 0);
    }

    100% {
        box-shadow: inset 0 0 6vh rgba(255, 210, 60, .8);
    }
}

/* ---------- spin button ---------- */

.phone .btn-spin {
    position: absolute;
    left: 50%;
    bottom: 6%;
    margin-left: -20%;
    width: 40%;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
    z-index: 4;
    transition: opacity .4s ease;
}

.phone .btn-spin img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 1.4vh rgba(255, 210, 60, .85));
}

.phone .btn-spin.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   INTRO SEQUENCE (one time, gated on body.loaded)
   logo -> heading -> sub heading -> phone -> dragon + model -> spin button
   ========================================================================== */

.anim-logo,
.anim-text01,
.anim-phone,
.anim-dragon,
.anim-lady,
.phone .btn-spin {
    opacity: 0;
}

/* everything enters together : no staggered delays */
/* 1. logo : top -> position */
body.loaded .anim-logo {
    animation: dropInTop 250ms cubic-bezier(.18, .89, .32, 1.28) 0s both;
}

@keyframes dropInTop {
    0% {
        opacity: 0;
        transform: translate3d(0, -30vh, 0) scale(.7);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* 2. heading : fade in, then zoom in / zoom out forever */
body.loaded .anim-text01 {
    animation: fadeInSoft 250ms ease 0s both,
        zoom-in-zoom-out 2s ease-in-out .25s infinite;
}

@keyframes fadeInSoft {
    0% {
        opacity: 0;
        transform: scale(.82);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.93);
    }

    100% {
        transform: scale(1);
    }
}

/* 3. phone : bottom -> position */
body.loaded .anim-phone {
    animation: phoneUp 250ms cubic-bezier(.18, .89, .32, 1.14) 0s both;
}

@keyframes phoneUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 60vh, 0) scale(.9);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* 4. dragon opens to the left, model opens to the right */
body.loaded .anim-dragon {
    animation: openLeft 350ms cubic-bezier(.2, .8, .25, 1) 0s both;
}

body.loaded .anim-lady {
    animation: openRight 350ms cubic-bezier(.2, .8, .25, 1) 0s both;
}

@keyframes openLeft {
    0% {
        opacity: 0;
        transform: translate3d(62%, 10%, 0) scale(.7) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes openRight {
    0% {
        opacity: 0;
        transform: translate3d(-62%, 10%, 0) scale(.7) rotate(-10deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* 5. spin button : appears last, then pulses */
body.loaded .phone .btn-spin.active {
    animation: fadeInSoft .25s ease 0s both,
        zoom-in-zoom-out 1.1s ease .25s infinite;
}


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

    body.loaded *,
    body.loaded *::before,
    body.loaded *::after {
        animation-duration: 0ms !important;
        animation-iteration-count: 0.5 !important;
    }

    .anim-logo,
    .anim-text01,
    .anim-phone,
    .anim-dragon,
    .anim-lady,
    .phone .btn-spin {
        opacity: 1;
    }
}

/* ==========================================================================
   JACKPOT POPUP
   ========================================================================== */

.spin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 2, 26, .55);
    backdrop-filter: blur(9px) saturate(1.15);
    -webkit-backdrop-filter: blur(9px) saturate(1.15);
    opacity: 0;
    z-index: 1071;
    display: none;
    transition: opacity .35s ease;
}

.spin-modal-backdrop.open {
    opacity: 1;
}

.spin-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(80vh, 94vw);
    aspect-ratio: 1 / 1;
    z-index: 1072;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.55) rotateX(35deg);
    transition: transform .6s cubic-bezier(.18, .89, .32, 1.28), opacity .4s ease, visibility .6s;
    -webkit-transition: transform .6s cubic-bezier(.18, .89, .32, 1.28), opacity .4s ease, visibility .6s;
    -moz-transition: transform .6s cubic-bezier(.18, .89, .32, 1.28), opacity .4s ease, visibility .6s;
    -ms-transition: transform .6s cubic-bezier(.18, .89, .32, 1.28), opacity .4s ease, visibility .6s;
    -o-transition: transform .6s cubic-bezier(.18, .89, .32, 1.28), opacity .4s ease, visibility .6s;
}

.spin-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1) rotateX(0deg);
}

.popup-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: drop-shadow(0 0 4vh rgba(40, 90, 220, .55));
}

/* the portrait frame only shows on small phones */
.popup-frame.frame-mob {
    display: none;
}

.spin-modal-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 19% 15% 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jackpot-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 5%;
    text-align: center;
    line-height: 0;
}

.jackpot-img img {
    width: 34%;
    height: auto;
    animation: zoom-in-zoom-out 1.4s ease infinite;
    filter: drop-shadow(0 .8vh 1.6vh rgba(0, 0, 0, .6));
    -webkit-filter: drop-shadow(0 .8vh 1.6vh rgba(0, 0, 0, .6));
}

.jackpot-list ul {
    padding: 20px;
    margin: 0;
    list-style: none;
}

.jackpot-list ul li {
    display: flex;
    align-items: center;
    gap: min(2.2vh, 3.4vw);
    margin: 0 0 min(2.5vh, 5.2vw);
    opacity: 0;
    transform: translateX(-26px);
}

.spin-modal.open .jackpot-list ul li {
    animation: listIn .5s ease forwards;
}

.spin-modal.open .jackpot-list ul li:nth-child(1) {
    animation-delay: .45s;
}

.spin-modal.open .jackpot-list ul li:nth-child(2) {
    animation-delay: .60s;
}

.spin-modal.open .jackpot-list ul li:nth-child(3) {
    animation-delay: .75s;
}

.spin-modal.open .jackpot-list ul li:nth-child(4) {
    animation-delay: .90s;
}

@keyframes listIn {
    0% {
        opacity: 0;
        transform: translateX(-26px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.jackpot-list ul li:last-child {
    margin-bottom: 0;
}

.jackpot-list ul li .ico {
    flex: 0 0 auto;
    width: min(4vh, 10%);
    min-width: 58px;
    line-height: 0;
}

.jackpot-list ul li .ico img {
    width: 100%;
    height: auto;
    display: block;
}

.jackpot-list ul li p {
    font-family: "Inter", Helvetica, sans-serif;
    font-weight: 500;
    font-size: min(2.25vh, 4.1vw);
    line-height: 1.3;
    color: #fff;
    margin: 0;
    text-align: left;
}

.jackpot-list ul li p span {
    color: #ece90f;
}

.jackpot-btn {
    text-align: center;
    margin: min(2.4vh, 3.6vw) 0 0;
    line-height: 0;
    opacity: 0;
}

.spin-modal.open .jackpot-btn {
    animation: fadeInSoft .5s ease 1.05s forwards;
}

.jackpot-btn a {
    display: inline-block;
    line-height: 0;
    animation: zoom-in-zoom-out 1.1s ease infinite;
}

.jackpot-btn img {
    width: 78%;
    height: auto;
    filter: drop-shadow(0 1vh 2vh rgba(0, 0, 0, .55));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .hero-left {
        right: 30%;
    }
    .hero-right {
        left: 42%;
    }
}

/* tablets */
@media (max-width: 991px) {
    :root {
        --head-w: min(52vh, 92vw);
        --phone-w: min(36vh, 58vw);
        --dragon-w: min(56vh, 58vw);
        --model-w: min(44vh, 46vw);
        --side-tuck: 9vw;
    }
}

/* phones : more room in height, so the phone can grow */
@media (max-width: 767px) {
    .hero-left {
        right: 23%;
        top: 25%;
    }
    :root {
        --logo-w: min(9vh, 22vw);
        --head-w: min(48vh, 90vw);
        --phone-w: min(38vh, 66vw);
        --dragon-w: min(46vh, 64vw);
        --model-w: min(42vh, 54vw);
        --side-tuck: 14vw;
    }

    .spin-modal {
        width: min(72vh, 96vw);
    }

    .spin-modal-inner {
        padding: 18% 15% 15%;
    }

    .jackpot-list ul li p {
        font-size: min(2vh, 3.3vw);
    }

    .jackpot-list ul li {
        gap: min(1.8vh, 2.8vw);
        margin: 0 0 min(3vh, 4.6vw);
    }

    .jackpot-list ul li .ico {
        width: min(4.4vh, 9%);
        min-width: 44px;
    }
}

/* ==========================================================================
   SMALL PHONES  (<= 575px)
   the phone lifts off the bottom edge and the dragon / model drop into the
   band underneath it, in front of the phone, running off the screen bottom.
   the popup also swaps to the portrait frame.
   ========================================================================== */

@media (max-width: 575px) {

    :root {
        --logo-w: min(9vh, 22vw);
        --head-w: min(48vh, 90vw);
        --phone-w: min(25vh, 56vw);
        /* art is sized off the phone so the trio keeps its proportions
           whatever the screen shape is */
        --dragon-w: calc(var(--phone-w) * .95);
        --model-w: calc(var(--phone-w) * .85);

        /* how deep the art band under the phone is */
        --side-drop: 27vh;
    }

    /* side art is pinned to the screen edges, not to the phone, and sits
       in front of it so it overlaps the lower corners */
    .hero-left {
	left: 2vw;
	right: auto;
	margin-right: 0;
	z-index: 4;
	top: auto;
}

    .hero-right {
        right: 2vw;
        left: auto;
        margin-left: 0;
        z-index: 4;
    }

    /* ---------- popup : portrait frame, desktop row layout inside ---------- */

    .popup-frame.frame-desk {
        display: none;
    }

    .popup-frame.frame-mob {
        display: block;
    }

    .spin-modal {
        width: min(88vw, 51vh);
        aspect-ratio: 800 / 1070;
    }

    .spin-modal-inner {
        padding: 26% 12% 14%;
    }

    .jackpot-list ul {
        padding: 0;
    }

    .jackpot-img {
        top: 1%;
    }

    .jackpot-img img {
        width: 46%;
    }

    .jackpot-list ul li {
        gap: 3vw;
        margin: 0 0 6vw;
    }

    .jackpot-list ul li .ico {
        width: 16%;
        min-width: 0;
    }

    .jackpot-list ul li p {
        font-size: 3.4vw;
        line-height: 1.3;
    }

    .jackpot-btn {
        margin: 6vw 0 0;
    }

    .jackpot-btn img {
        width: 92%;
        max-width: none;
    }
}

/* very short landscape screens (phones on their side) : shrink everything */
@media (max-height: 520px) and (orientation: landscape) {
    :root {
        --logo-w: min(9vh, 14vw);
        --head-w: min(46vh, 62vw);
        --phone-w: min(33vh, 36vw);
        --dragon-w: min(40vh, 30vw);
        --model-w: min(34vh, 24vw);
        --side-tuck: 3vw;
    }
}