/* ===============================
   CREATIVE JOURNEY PAGE
=============================== */

body.site{
background:#3d5a8a;
}


/* ===============================
   HERO SECTION
=============================== */

.journey-hero{
background:#3d5a8a;
padding:90px 5% 50px;
text-align:center;
}

.journey-hero-inner{
max-width:1200px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
}

.journey-title{
font-family:'Poppins',sans-serif;
font-size:clamp(2.8rem,6vw,5.5rem);
font-weight:900;
line-height:1;
letter-spacing:-0.02em;
color:#ffffff;
margin-bottom:18px;
text-transform:uppercase;
white-space:nowrap;
}

.journey-title span{
color:#f4c32f;
}

.journey-intro{
max-width:700px;
font-family:'Poppins',sans-serif;
font-size:1rem;
line-height:1.7;
color:#e4edf8;
margin:0 auto;
}


/* ===============================
   TIMELINE
=============================== */

.journey-timeline{
position:relative;
background:#3d5a8a;
padding-top:6vw;
}


/* floating year */

.year-display{
position:sticky;
top:110px;
z-index:20;
display:flex;
justify-content:center;
gap:8px;
margin-bottom:20px;
pointer-events:none;
}

.year-display .digit{
font-family:'Poppins',sans-serif;
font-size:clamp(4.5rem,10vw,9rem);
font-weight:900;
line-height:1;
color:rgba(244,195,47,.18);
transition:.3s ease;
}


/* each timeline section */

.year-section{
min-height:100vh;
display:flex;
align-items:center;
padding:40px 5% 90px;
}


/* layout */

.year-grid{
width:100%;
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}


/* text */

.year-copy h3{
font-family:'Poppins',sans-serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:800;
line-height:1;
color:#f28c28;
margin-bottom:18px;
text-transform:uppercase;
}

.year-copy p{
max-width:42ch;
font-family:'Poppins',sans-serif;
font-size:1rem;
line-height:1.7;
color:#f2f6fb;
margin:0;
}


/* ===============================
   IMAGE STACK
=============================== */

.media-stack{
position:relative;
min-height:520px;
display:flex;
align-items:center;
justify-content:center;
}

.media-item{
position:absolute;
width:min(100%,420px);
max-height:460px;
object-fit:contain;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.18);
opacity:0;
transition:
transform .35s ease,
box-shadow .35s ease,
z-index .35s ease,
filter .35s ease;
cursor:pointer;
}


/* default stack */

.media-item:nth-child(1){
transform:translate(-22px,-20px) rotate(-6deg);
border:4px solid #f4c32f;
z-index:1;
}

.media-item:nth-child(2){
transform:translate(14px,10px) rotate(5deg);
border:4px solid #1fb144;
z-index:2;
}

.media-item:nth-child(3){
transform:translate(0px,28px) rotate(-3deg);
border:4px solid #f28c28;
z-index:3;
}


/* stack spreads on hover */

.media-stack:hover .media-item:nth-child(1){
transform:translate(-95px,-30px) rotate(-10deg);
}

.media-stack:hover .media-item:nth-child(2){
transform:translate(0px,-10px) rotate(0deg) scale(1.03);
}

.media-stack:hover .media-item:nth-child(3){
transform:translate(95px,20px) rotate(8deg);
}


/* individual image hover */

.media-item:hover{
transform:translateY(-14px) scale(1.05) rotate(0deg) !important;
z-index:10;
box-shadow:0 24px 46px rgba(0,0,0,.28);
filter:brightness(1.04);
}


/* ===============================
   COLOR VARIATION PER YEAR
=============================== */

.year-section:nth-of-type(odd) .year-copy h3{
color:#f4c32f;
}

.year-section:nth-of-type(even) .year-copy h3{
color:#f28c28;
}

.year-section:nth-of-type(3n) .year-copy h3{
color:#1fb144;
}


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

.mute-button{
position:fixed;
right:22px;
bottom:22px;
width:56px;
height:56px;
border-radius:999px;
border:none;
background:#f28c28;
color:#ffffff;
font-size:1.2rem;
cursor:pointer;
box-shadow:0 12px 26px rgba(0,0,0,.18);
transition:.18s ease;
z-index:50;
}

.mute-button:hover{
transform:translateY(-3px);
box-shadow:0 16px 30px rgba(242,140,40,.35);
}

.mute-button:active{
transform:scale(.96);
box-shadow:none;
}


/* ===============================
   RESPONSIVE
=============================== */

@media(max-width:1000px){

.year-grid{
grid-template-columns:1fr;
gap:35px;
}

.year-copy p{
max-width:100%;
}

.media-stack{
min-height:360px;
}

.media-item{
width:min(100%,300px);
max-height:320px;
}

.media-stack:hover .media-item:nth-child(1){
transform:translate(-55px,-18px) rotate(-8deg);
}

.media-stack:hover .media-item:nth-child(2){
transform:translate(0px,-8px) rotate(0deg) scale(1.02);
}

.media-stack:hover .media-item:nth-child(3){
transform:translate(55px,12px) rotate(6deg);
}

.year-display{
top:90px;
}

.journey-title{
white-space:normal;
}

}


@media(max-width:600px){

.journey-hero{
padding:70px 7% 40px;
}

.journey-title{
font-size:clamp(2.4rem,9vw,3.2rem);
}

.year-display .digit{
font-size:clamp(3.5rem,12vw,5rem);
}

.year-section{
padding-bottom:70px;
}

.media-stack{
min-height:300px;
}

.media-item{
width:min(100%,240px);
max-height:260px;
}

.media-stack:hover .media-item:nth-child(1){
transform:translate(-32px,-10px) rotate(-6deg);
}

.media-stack:hover .media-item:nth-child(2){
transform:translate(0px,-5px) rotate(0deg) scale(1.01);
}

.media-stack:hover .media-item:nth-child(3){
transform:translate(32px,8px) rotate(4deg);
}

}

.social-link{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-family:'Poppins',sans-serif;
font-size:.9rem;
font-weight:600;
color:#f4c32f;
transition:.2s;
}

.social-link img{
width:22px;
height:22px;
}

.social-link:hover{
color:#f28c28;
transform:translateY(-2px);
}