/* ==========================================
   JOURNEY — CHAPTER ONE
========================================== */

#journey{

position:fixed;
inset:0;

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

overflow:hidden;

padding:28px;

box-sizing:border-box;

background:

radial-gradient(
circle at 50% 38%,
rgba(255,215,106,.10),
transparent 42%
),

linear-gradient(
180deg,
#030711 0%,
#08172a 50%,
#0b2038 100%
);

color:#fff;

text-align:center;

}

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

#journey::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

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

z-index:5;

}

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

.journey-content{

position:relative;

z-index:6;

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

display:flex;
flex-direction:column;
align-items:center;

animation:
journeyReveal 1.4s
cubic-bezier(.22,1,.36,1)
both;

}

/* ==========================================
   CHAPTER LABEL
========================================== */

.journey-kicker{

margin:0;

font-size:11px;

font-weight:600;

letter-spacing:5px;

color:#D9B65C;

opacity:.9;

}

/* ==========================================
   GOLD LINE
========================================== */

.journey-line{

width:70px;
height:1px;

margin:22px 0 28px;

background:

linear-gradient(
90deg,
transparent,
#FFD76A,
transparent
);

box-shadow:
0 0 10px rgba(255,215,106,.3);

}

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

.journey-title{

margin:0;

font-size:38px;

line-height:1.25;

font-weight:700;

letter-spacing:-.6px;

background:

linear-gradient(
180deg,
#ffffff 0%,
#fff9e8 48%,
#FFD76A 100%
);

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

background-clip:text;

text-shadow:
0 0 25px rgba(255,215,106,.08);

}

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

.journey-text{

margin:30px 0 0;

max-width:310px;

font-size:16px;

line-height:1.75;

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

}

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

.journey-button{

position:relative;

margin-top:36px;

height:52px;

min-width:190px;

padding:0 22px;

display:flex;

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

gap:14px;

border-radius:999px;

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

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

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

color:#FFE7A0;

font-size:15px;

font-weight:600;

letter-spacing:.4px;

cursor:pointer;

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

transition:

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

}

.journey-button b{

font-size:18px;

font-weight:400;

transition:
transform .25s ease;

}

.journey-button: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);

}

.journey-button:hover b{

transform:translateX(4px);

}

.journey-button:active{

transform:scale(.97);

}

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

.journey-note{

position:absolute;

z-index:6;

bottom:26px;

left:50%;

transform:translateX(-50%);

margin:0;

width:100%;

font-size:11px;

letter-spacing:2px;

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

}

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

.journey-stars{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.journey-stars span{

position:absolute;

width:2px;
height:2px;

border-radius:50%;

background:#fff;

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

opacity:.35;

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

}

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

.journey-stars span:nth-child(2){
top:22%;
left:82%;
animation-delay:1s;
}

.journey-stars span:nth-child(3){
top:48%;
left:8%;
animation-delay:2s;
}

.journey-stars span:nth-child(4){
top:64%;
left:91%;
animation-delay:.6s;
}

.journey-stars span:nth-child(5){
top:82%;
left:25%;
animation-delay:2.5s;
}

.journey-stars span:nth-child(6){
top:72%;
left:74%;
animation-delay:1.5s;
}

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

.journey-glow{

position:absolute;

left:50%;
top:42%;

width:390px;
height:390px;

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

border-radius:50%;

background:

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

filter:blur(32px);

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

pointer-events:none;

z-index:0;

}

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

@keyframes journeyReveal{

0%{

opacity:0;

transform:
translateY(30px)
scale(.97);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

@keyframes journeyTwinkle{

0%,100%{

opacity:.18;

transform:scale(1);

}

50%{

opacity:.8;

transform:scale(1.7);

}

}

@keyframes journeyGlow{

0%,100%{

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

opacity:.45;

}

50%{

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

opacity:.75;

}

}

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

@media (max-width:420px){

#journey{

padding:
24px 20px 70px;

}

.journey-title{

font-size:34px;

}

.journey-text{

font-size:15.5px;

max-width:300px;

}

.journey-button{

margin-top:32px;

}

.journey-note{

bottom:21px;

}

}

/* ==========================================
   SMALL HEIGHT
========================================== */

@media (max-height:650px){

.journey-line{

margin:
16px 0 20px;

}

.journey-text{

margin-top:22px;

}

.journey-button{

margin-top:26px;

}

.journey-note{

display:none;

}

}