/* =========================================
   RITUAL LIVE OPERATIONS
   FRONTEND DISPLAY CSS
========================================= */

.ritual-updates{
max-width:1200px;
margin:20px auto;
padding:20px;
font-family:"Poppins",sans-serif;
text-align:center;
}

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

.ticker-title{

font-size:2rem;
color:#ffffff;
text-align:center;
margin-bottom:20px;
font-weight:600;

}

/* ========================================
   GLASS CARD STYLE
======================================== */

.glass{

background:rgba(255,255,255,0.12);
border-radius:18px;
border:1px solid rgba(255,255,255,0.25);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
margin:10px 0;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,0.25);

}

/* ========================================
   ROW 1 TICKER
======================================== */

.ticker-wrap{
overflow:hidden;
width:100%;
position:relative;
}

/* scrolling container */

.ticker-track{

display:flex;
white-space:nowrap;
overflow:hidden;
position:relative;
}
.ticker-track span{
padding-right:60px;
}

/* individual ritual */

.ticker-item{

margin-right:80px;
font-weight:500;
color:#ffffff;
font-size:16px;

}

/* animation */

@keyframes ticker-scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* pause on hover */

.auto-scroll:hover .ticker-track{
animation-play-state:paused;
}

/* ========================================
   ROW 2 UPCOMING TOUCH SCROLL
======================================== */

.touch-scroll .ticker-wrap{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.touch-content{

display:inline-flex;
white-space:nowrap;
padding:12px 0;
color:#ffffff;
font-weight:500;

}

.touch-content span{
margin-right:40px;
font-size:16px;
}

/* ========================================
   CARDS CONTAINER
======================================== */

.cards-container{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin-top:25px;

}

/* ========================================
   INFO CARD
======================================== */

.info-card{

flex:1 1 300px;
padding:20px;
text-align:left;
color:#ffffff;

}

.info-card h3{

margin-bottom:10px;
font-size:1.2rem;
color:#ffe57f;
font-weight:600;

}

.info-card p{

margin-bottom:6px;
font-size:15px;
line-height:1.6;

}

/* ========================================
   CROWD METER
======================================== */

.crowd-meter{

width:100%;
height:12px;
background:rgba(255,255,255,0.15);
border-radius:8px;
overflow:hidden;
margin:8px 0;

}

.meter-bar{

height:100%;
transition:width .4s ease;

}

.meter-bar.low{

width:30%;
background:linear-gradient(90deg,#43a047,#7cb342);

}

.meter-bar.medium{

width:65%;
background:linear-gradient(90deg,#ffa000,#ff7043);

}

.meter-bar.high{

width:90%;
background:linear-gradient(90deg,#e53935,#d50000);

}

.meter-bar.very-high{

width:100%;
background:linear-gradient(90deg,#b71c1c,#7f0000);

}

/* ========================================
   FESTIVAL IMAGE
======================================== */

.info-card img{

max-width:100%;
border-radius:12px;
margin-top:10px;

}

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

@media(max-width:768px){

.info-card{
flex:1 1 100%;
}

.ticker-title{
font-size:1.5rem;
}

.info-card h3{
font-size:1rem;
}

.ticker-item{
margin-right:40px;
font-size:14px;
}

}