/* ==========================================
   PERSONAL INTRO
   PREMIUM INTERACTIVE EXPERIENCE
========================================== */

#movieIntro{

position:fixed;
inset:0;

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

width:100%;
height:100%;

padding:24px;

box-sizing:border-box;

overflow:hidden;

background:
radial-gradient(
circle at 50% 42%,
rgba(255,215,106,.12) 0%,
rgba(255,215,106,.035) 30%,
transparent 62%
),

linear-gradient(
180deg,
#030711 0%,
#071426 48%,
#0b1c32 100%
);

color:#fff;

text-align:center;

}

/* ==========================================
   VIGNETTE
========================================== */

#movieIntro::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

z-index:10;

background:

radial-gradient(
circle,
transparent 42%,
rgba(0,0,0,.18) 72%,
rgba(0,0,0,.58) 100%
);

}

/* ==========================================
   MAIN INTRO CONTAINER
========================================== */

.movie-intro{

position:relative;

z-index:20;

width:100%;
max-width:390px;

margin:0 auto;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

box-sizing:border-box;

}

/* ==========================================
   TOP LABEL
========================================== */

.movie-tag{

display:block;

width:100%;

margin:0;

font-size:11px;

font-weight:600;

line-height:1.5;

letter-spacing:4px;

color:#D9B65C;

text-align:center;

}

/* ==========================================
   DIVIDER
========================================== */

.movie-divider{

display:flex;

align-items:center;

justify-content:center;

width:180px;

height:20px;

margin:20px auto 22px;

flex-shrink:0;

}

.movie-divider span{

display:block;

width:55px;

height:1px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,215,106,.65)
);

}

.movie-divider span:last-child{

background:
linear-gradient(
90deg,
rgba(255,215,106,.65),
transparent
);

}

.movie-divider i{

display:block;

width:28px;

font-size:15px;

font-style:normal;

line-height:1;

color:#FFD76A;

text-shadow:
0 0 12px rgba(255,215,106,.8);

}

/* ==========================================
   NAME
========================================== */

.movie-title{

display:block;

width:100%;

margin:0;

font-size:clamp(58px,17vw,76px);

font-weight:700;

line-height:1.05;

letter-spacing:-2px;

text-align:center;

background:

linear-gradient(
180deg,
#ffffff 0%,
#fff8df 45%,
#FFD76A 100%
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-clip:text;

text-shadow:
0 0 30px rgba(255,215,106,.10);

}

/* ==========================================
   PERSONAL MESSAGE
========================================== */

.movie-sub{

display:block;

width:100%;

max-width:310px;

margin:28px auto 0;

padding:0;

box-sizing:border-box;

font-size:16px;

font-weight:400;

line-height:1.75;

letter-spacing:.1px;

text-align:center;

color:rgba(255,255,255,.72);

}

/* ==========================================
   CONTINUE BUTTON
========================================== */

.movie-continue{

display:flex;

align-items:center;

justify-content:center;

width:190px;

height:52px;

margin:32px auto 0;

padding:0 20px;

box-sizing:border-box;

gap:14px;

border:1px solid rgba(255,215,106,.32);

border-radius:999px;

background:
rgba(255,255,255,.055);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

color:#FFE7A0;

font-family:inherit;

font-size:15px;

font-weight:600;

letter-spacing:.4px;

white-space:nowrap;

cursor:pointer;

box-shadow:
0 0 20px rgba(255,215,106,.06);

transition:

transform .25s ease,
background .3s ease,
border-color .3s ease,
box-shadow .3s ease;

}

.movie-continue span{

display:block;

}

.movie-continue b{

display:block;

font-size:18px;

font-weight:400;

line-height:1;

transition:
transform .25s ease;

}

.movie-continue:hover{

transform:translateY(-2px);

background:
rgba(255,215,106,.08);

border-color:
rgba(255,215,106,.55);

box-shadow:
0 8px 28px rgba(255,215,106,.12);

}

.movie-continue:hover b{

transform:translateX(4px);

}

.movie-continue:active{

transform:scale(.97);

}

/* ==========================================
   BOTTOM NOTE
========================================== */

.intro-bottom-note{

position:absolute;

left:50%;

bottom:24px;

z-index:20;

width:100%;

margin:0;

transform:translateX(-50%);

font-size:11px;

line-height:1.5;

letter-spacing:1.8px;

text-align:center;

color:rgba(255,255,255,.32);

}

/* ==========================================
   GOLDEN GLOW
========================================== */

.intro-glow{

position:absolute;

left:50%;

top:43%;

width:380px;

height:380px;

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

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,215,106,.13),
transparent 68%
);

filter:blur(32px);

pointer-events:none;

z-index:1;

animation:introGlow 6s ease-in-out infinite;

}

/* ==========================================
   MIST
========================================== */

.intro-mist{

position:absolute;

left:-15%;

bottom:-90px;

width:130%;

height:220px;

border-radius:50%;

background:
radial-gradient(
ellipse,
rgba(255,255,255,.055),
transparent 70%
);

filter:blur(50px);

pointer-events:none;

z-index:2;

}

/* ==========================================
   STARS
========================================== */

.intro-stars{

position:absolute;

inset:0;

width:100%;
height:100%;

overflow:hidden;

pointer-events:none;

z-index:3;

}

.intro-stars span{

position:absolute;

display:block;

width:2px;

height:2px;

border-radius:50%;

background:#fff;

box-shadow:
0 0 8px rgba(255,255,255,.75);

opacity:.35;

animation:introTwinkle 4s ease-in-out infinite;

}

.intro-stars span:nth-child(1){
top:12%;
left:16%;
}

.intro-stars span:nth-child(2){
top:20%;
left:78%;
animation-delay:.8s;
}

.intro-stars span:nth-child(3){
top:34%;
left:28%;
animation-delay:1.6s;
}

.intro-stars span:nth-child(4){
top:27%;
left:91%;
animation-delay:2.4s;
}

.intro-stars span:nth-child(5){
top:63%;
left:12%;
animation-delay:1.1s;
}

.intro-stars span:nth-child(6){
top:72%;
left:83%;
animation-delay:2.8s;
}

.intro-stars span:nth-child(7){
top:82%;
left:36%;
animation-delay:1.9s;
}

.intro-stars span:nth-child(8){
top:48%;
left:68%;
animation-delay:3.2s;
}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes introGlow{

0%,100%{

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

opacity:.45;

}

50%{

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

opacity:.75;

}

}

@keyframes introTwinkle{

0%,100%{

opacity:.2;

transform:scale(1);

}

50%{

opacity:.8;

transform:scale(1.7);

}

}

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

@media (max-width:420px){

#movieIntro{

padding:
24px 20px 70px;

}

.movie-intro{

max-width:340px;

}

.movie-tag{

font-size:10px;

letter-spacing:3.5px;

}

.movie-divider{

margin:
18px auto 20px;

}

.movie-title{

font-size:58px;

}

.movie-sub{

max-width:300px;

margin-top:24px;

font-size:15.5px;

line-height:1.7;

}

.movie-continue{

width:185px;

height:50px;

margin-top:30px;

}

.intro-bottom-note{

bottom:20px;

}

}

/* ==========================================
   SHORT MOBILE SCREENS
========================================== */

@media (max-height:700px){

.movie-divider{

margin-top:14px;

margin-bottom:16px;

}

.movie-sub{

margin-top:20px;

}

.movie-continue{

margin-top:24px;

}

.intro-bottom-note{

display:none;

}

}

/* ==========================================
   MOVIE INTRO — FINAL MOBILE LAYOUT FIX
   FORCE SINGLE CENTERED COLUMN
========================================== */

#movieIntro .movie-intro{

    position:relative !important;

    width:100% !important;
    max-width:340px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;

    flex-direction:column !important;

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

    text-align:center !important;

    box-sizing:border-box !important;

    left:auto !important;
    right:auto !important;

    top:auto !important;
    bottom:auto !important;

    transform:none;

}


/* TOP LABEL */

#movieIntro .movie-tag{

    display:block !important;

    width:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    text-align:center !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;

}


/* DIVIDER */

#movieIntro .movie-divider{

    display:flex !important;

    width:180px !important;
    height:20px !important;

    margin:20px auto 22px !important;
    padding:0 !important;

    flex-direction:row !important;

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

    position:relative !important;

    left:auto !important;
    right:auto !important;

}


/* NAME */

#movieIntro .movie-title{

    display:block !important;

    width:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    text-align:center !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;

}


/* MESSAGE */

#movieIntro .movie-sub{

    display:block !important;

    width:100% !important;

    max-width:300px !important;

    margin:24px auto 0 !important;
    padding:0 !important;

    text-align:center !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;

    float:none !important;

    column-count:1 !important;
    columns:1 !important;

    white-space:normal !important;

}


/* BUTTON */

#movieIntro .movie-continue{

    display:flex !important;

    width:185px !important;
    min-width:185px !important;
    max-width:185px !important;

    height:50px !important;

    margin:30px auto 0 !important;
    padding:0 20px !important;

    flex-direction:row !important;

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

    position:relative !important;

    left:auto !important;
    right:auto !important;

    float:none !important;

    box-sizing:border-box !important;

}


/* BOTTOM NOTE */

#movieIntro .intro-bottom-note{

    position:absolute !important;

    left:50% !important;
    right:auto !important;

    transform:translateX(-50%) !important;

    width:100% !important;

    text-align:center !important;

}


/* MOBILE */

@media (max-width:420px){

    #movieIntro .movie-intro{

        width:100% !important;

        max-width:340px !important;

    }

    #movieIntro .movie-title{

        font-size:58px !important;

    }

    #movieIntro .movie-sub{

        width:100% !important;

        max-width:300px !important;

        font-size:15.5px !important;

        line-height:1.7 !important;

    }

}