/* styles.css - ENHANCED INTERACTIVE STORYTELLING VERSION */

:root{
  --bg-0:#070007; --bg-1:#12021a; --lav-1:#a78bfa; --lav-2:#6d28d9; --pink:#ff6fa3;
  --muted:rgba(255,255,255,0.85); --glass:rgba(255,255,255,0.04);
  --accent: linear-gradient(90deg,var(--pink),#ffb3d6);
  --ease: cubic-bezier(.22,.9,.27,1); --lav: #a78bfa; --card-bg: rgba(255,255,255,0.03);
}

*{box-sizing:border-box;margin:0;padding:0;cursor:none !important}
html{ scroll-behavior: smooth; }
html,body{ height:100%; background-color: var(--bg-0); color:#fff;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto;
  overflow-x:hidden; margin:0; cursor:none !important;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(18, 2, 26, 0.5); }
::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 4px; transition: background 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: var(--lav-1); }

/* SCROLL INDICATOR - HIDE AT QUIZ */
.scroll-indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 1;
  animation: fadeInOut 3s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.scroll-arrow {
  font-size: 2rem;
  color: var(--pink);
  animation: bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 111, 163, 0.6));
}

.scroll-indicator span {
  color: var(--pink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 111, 163, 0.4);
}

@keyframes fadeInOut { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* STORY SECTIONS */
.section{
  min-height:100vh; height: auto; position:relative; display:flex; align-items:center; 
  justify-content:center; padding: 10vh 6%; transition: all 0.6s var(--ease);
}

.section.story{ 
  display:flex; position:relative; overflow:hidden; opacity: 0; 
  transform: translateY(80px) scale(0.98); 
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); 
  padding: 0; min-height: 100vh;
}

.section.story.active { opacity: 1; transform: translateY(0) scale(1); }

.section.story.transition-in {
  animation: titleTransition 1.2s var(--ease) forwards;
}

@keyframes titleTransition {
  from { opacity: 0; transform: translateY(-40px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* TYPEWRITER EFFECT */
.typewriter-effect {
  overflow: visible;
  white-space: normal;
  margin: 0;
  font-size: 1.15rem;
  color: #e7e0f7;
  line-height: 1.9;
  max-width: 60ch;
  display: block;
  word-break: break-word;
}

/* PROGRESSIVE STORY SECTION */
.progressive-story {
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.1), transparent 70%);
}

.story-revealer {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.story-line {
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.story-line.hidden { display: none; }
.story-line.active { display: block !important; opacity: 1; transform: translateY(0); }

.typewriter-text {
  font-size: 1.8rem;
  line-height: 2;
  color: #fff;
  margin: 0 auto;
}

.continue-btn {
  padding: 1rem 2.5rem;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  color: #000;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(255,111,163,0.3);
  animation: pulse 2s infinite;
}

.continue-btn:hover { transform: scale(1.1); box-shadow: 0 15px 40px rgba(255,111,163,0.5); }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ATMOSPHERE */
body::before { 
  content: ''; position: fixed; inset: 0; z-index: -1; 
  transition: background 1.5s ease, opacity 1.5s ease; 
  opacity: 0; pointer-events: none;
}

body.mood-nostalgia::before { 
  opacity: 1; 
  background: radial-gradient(circle at 50% 50%, rgba(255, 223, 186, 0.15), rgba(20, 10, 0, 1) 90%); 
}

body.mood-sick::before { 
  opacity: 1; 
  background: radial-gradient(circle at 50% 50%, rgba(42, 60, 50, 0.4), rgba(5, 10, 15, 1) 90%); 
}

body.mood-void::before { 
  opacity: 1; 
  background: #000; 
}

body.mood-sick .story-bg-improved { 
  filter: grayscale(0.8) contrast(1.2) brightness(0.6) blur(2px) !important; 
}

/* ==================== MEMORIAL SECTION (ONE SCREEN FIX) ==================== */

.memorial-section {
    /* FORCE FULL SCREEN */
    width: 100%;
    height: 100vh; /* Exactly 100% of viewport height */
    margin: 0;
    padding: 0;
    
    /* Center Content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: #000; /* Start Pitch Black */
    position: relative;
    overflow: hidden; /* Prevents scrollbars */
    transition: background 2s ease-in-out;
}

/* THE "LIT" STATE: Warm light fills ONLY this section */
.memorial-section.lit-background {
    background: radial-gradient(circle at center, #3d2208 0%, #1a0d00 45%, #000000 90%);
}

.memorial-container {
    text-align: center;
    position: relative;
    z-index: 2;
    /* Ensure content doesn't stretch the section */
    max-width: 600px;
    padding: 20px;
}

/* --- TEXT STYLING --- */
.memorial-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
     font-weight: bold;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    opacity: 0.9;
    transition: opacity 1s ease, color 1s ease;
}

.memorial-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 18; 
    color: var(--pink);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-bottom: 3rem; /* Space between text and candle */
    transition: opacity 1s ease;
}

.fade-out { opacity: 0; }

/* --- CANDLE STYLING --- */
.candle-wrapper {
    position: relative;
    width: 50px;
    height: 140px;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.candle-wrapper:hover { transform: scale(1.05); }

/* The Wax */
.wax {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #e0e0e0, #fff, #e0e0e0);
    border-radius: 4px;
    box-shadow: inset 0 -20px 20px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

/* The Wick */
.wick {
    width: 3px;
    height: 15px;
    background: #555;
    margin: 0 auto;
    position: relative;
    top: 5px;
    z-index: 0;
}

/* The Flame (Hidden initially) */
.flame {
    width: 20px;
    height: 35px;
    background: radial-gradient(ellipse at bottom, #fff 0%, #ffeb3b 40%, #ff9800 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    top: -30px; 
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- LIT STATE --- */
.candle-wrapper.lit .flame {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: flicker 0.1s infinite alternate;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.6), 0 0 60px rgba(255, 100, 0, 0.4);
}

.candle-wrapper.lit .wax {
    background: linear-gradient(to right, #fffdf5, #fff, #fffdf5);
    box-shadow: 0 0 40px rgba(255, 160, 0, 0.2);
}

@keyframes flicker {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.05, 0.95); opacity: 0.9; }
}
/* CHOICE SECTION */
.choice-container { display: flex; gap: 20px; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

.choice-btn { 
  padding: 1rem 2rem; font-size: 1.1rem; border: 1px solid var(--pink); 
  color: #fff; background: rgba(255,255,255,0.05); 
  transition: all 0.3s ease; cursor: pointer;
}

.choice-btn:hover { background: var(--pink); color: #000; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255, 111, 163, 0.4); }

/* BASIC LAYOUT */
.custom-cursor { 
  position: fixed; left: 0; top: 0; width: 30px; height: 30px; 
  border: 2px solid var(--pink); border-radius: 50%; transform: translate(-50%, -50%); 
  pointer-events: none; z-index: 99999; transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}

.custom-cursor.hover { 
  width: 50px; height: 50px; background-color: rgba(255, 111, 163, 0.3);
}

.cinematic-panel{
  max-width:1100px;
  margin:0 auto;
  text-align:left;
  padding:4rem;
  backdrop-filter:blur(6px);
  border-radius:12px;
  position:relative;
  z-index:3;
  animation: panelFadeIn 1s ease;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-bar{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:6px;
  background:rgba(255,255,255,0.03);
  z-index:9999;
}

.progress-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--pink),var(--lav-1));
  box-shadow:0 6px 30px rgba(167,139,250,0.12);
  transition:width .25s linear;
}

.controls{
  position:fixed;
  top:18px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
  z-index:2000;
  pointer-events:none;
}

.controls .left-controls{
  pointer-events:all;
  display:flex;
  gap:.5rem;
  align-items:center;
}

.btn-ghost{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  padding:.5rem .75rem;
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:all .25s var(--ease);
}

.btn-ghost:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  background:rgba(255,255,255,0.08);
}

.btn-primary{ 
  background:var(--accent); 
  border:none; 
  padding:.8rem 1.1rem; 
  border-radius:10px; 
  color:#101018; 
  cursor:pointer; 
  font-weight:700; 
  transition:transform .2s var(--ease); 
  box-shadow:0 10px 30px rgba(183,148,244,0.18); 
  font-size: 1rem;
}

.btn-primary:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(183,148,244,0.3);
}

/* HERO */
.hero {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.35) saturate(.85);
  transform-origin:center;
  z-index:0;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.45),rgba(10,0,20,0.7));
  z-index:1;
}

.hero-inner{
  position:relative;
  z-index:4;
  text-align:center;
  padding:6vw 5%;
  transition: all 0.8s var(--ease);
}

.title { 
  font-family: 'Playfair Display', serif; 
  font-size: clamp(4rem, 10vw, 8rem); 
  margin-bottom: .6rem; 
  line-height: 1.2; 
  color: #fff; 
  display: inline-block; 
  transition: all 1.2s var(--ease); 
  white-space: nowrap; 
  overflow: visible; 
  text-shadow: 0 4px 30px rgba(0,0,0,0.5); 
  padding-bottom: 10px;
}

.her-story-main > span { 
  display: inline-block; 
  transition: transform 0.2s ease, color 0.2s ease; 
  position: relative;
}

.her-story-main:hover > span:hover { 
  transform: scale(1.3) translateY(-5px); 
  color: var(--pink); 
  z-index: 10;
}

.subtitle{ 
  font-size:clamp(1rem,2.4vw,1.6rem); 
  color:#e9def9; 
  margin-bottom:1.6rem;
}

.hero-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:center;
}

/* BACKGROUND ZOOM */
.story-bg-improved { 
  position:absolute; 
  inset:0; 
  background-position:center; 
  background-size:cover; 
  background-repeat: no-repeat; 
  transform-origin:center; 
  z-index:0; 
  filter: brightness(0.6) blur(0); 
  transform: scale(1); 
  transition: transform 0.15s linear, filter 2.5s ease;
  will-change: transform;
}

.section.story.active .story-bg-improved { 
  filter: brightness(0.75) blur(0); 
  transform: scale(1.02);
}

.section.story-left .content{ 
  position:relative; 
  z-index: 3; 
  text-align: left; 
  padding:8rem 6vw; 
  max-width: 50%; 
  margin-left: 5%; 
  margin-right: auto;
}

.section.story-right .content{ 
  position:relative; 
  z-index: 3; 
  text-align: right; 
  padding:8rem 6vw; 
  max-width: 50%; 
  margin-right: 5%; 
  margin-left: auto;
}

.section.story-center .content { 
  position:relative; 
  z-index: 3; 
  text-align: center; 
  padding:8rem 6vw; 
  max-width: 90%; 
  margin: 0 auto;
}

.chap-num{
  font-weight:900;
  font-size:6rem;
  color: Pink;
  opacity:.08;
  margin-bottom:1.2rem;
  animation: numberSlide 1s ease;
}

@keyframes numberSlide {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: .08; }
}

.chap-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.chap-title span {
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
}

.chap-title span:hover {
    color: var(--pink);
    transform: scale(1.3) translateY(-5px);
    text-shadow: 0 0 15px var(--pink);
}

.chap-text{ 
  font-size:1.15rem; 
  color:#e7e0f7; 
  line-height:1.9; 
  max-width:60ch;
}

[data-scramble] { 
  font-family: 'Courier New', monospace; 
  color: var(--pink); 
  font-weight: bold;
}

.section.story.active .chap-title { 
  animation: glowFade 2.5s ease-in-out forwards;
}

@keyframes glowFade { 
  0% {opacity: 0; text-shadow: none; transform: translateY(20px);} 
  50% {opacity: 1; text-shadow: 0 0 20px rgba(167,139,250,0.4);} 
  100% {opacity: 1; transform: translateY(0); text-shadow: 0 0 40px rgba(255,111,163,0.3);}
}

.section.story::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at 50% 40%, rgba(167,139,250,0.08), transparent 60%); 
  z-index: 1; 
  opacity: 0; 
  transition: opacity 1.5s ease;
}

.section.story.active::before { 
  opacity: 1;
}

#story-4.active::after {
    content: '💔';
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-size: 2.5rem;
    animation: heartbeat-pulse 1.2s infinite;
    z-index: 10;
    filter: drop-shadow(0 0 20px rgba(255, 111, 163, 0.8));
}

@keyframes heartbeat-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    25% { transform: scale(1.3); opacity: 1; }
    50% { transform: scale(1); opacity: 0.7; }
}

body {
  margin: 0;
  background: #0b0214;
  color: #fff;
  font-family: Arial, sans-serif;
}

.cancer-section {
  text-align: center;
  padding: 60px 0;
}

.swiper {
  width: 100%;
  padding: 60px 0;
}

.swiper-slide {
  width: 260px;
  height: 340px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

.swiper-slide.locked {
  filter: grayscale(1) brightness(0.4);
  cursor: not-allowed;
}

.slide-card-new {
  width: 100%;
  background: rgba(0,0,0,0.65);
  padding: 15px;
  border-radius: 0 0 20px 20px;
}

.details {
  max-width: 900px;
  margin: 60px auto;
  padding: 30px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
}

.hidden {
  display: none;
}

.detail-header-cancer {
  display: flex;
  justify-content: space-between;
}

.mark-read-btn {
  background: linear-gradient(135deg, #ff6fa3, #a78bfa);
  border: none;
  padding: 10px 16px;
  color: white;
  border-radius: 20px;
  cursor: pointer;
}

.stages-content-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 20px;
}

.chart-container-inner {
  height: 260px;
}
/* EDUCATION TIMELINE - ENHANCED */
/* EDUCATION TIMELINE - FIXED ALIGNMENT */
/* ==================== FIXED ZIG-ZAG TIMELINE CSS (FULL IMAGES) ==================== */

.timeline-section {

    padding: 6rem 2rem;

    background: #000;

    position: relative;

    display: flex;

    flex-direction: column; /* Forces vertical stacking */

    align-items: center;    /* Centers everything horizontally */

    overflow: hidden;

}

/* 1. Header Styling (Full Width & Centered) */
.timeline-container-top {
    width: 100%;
    text-align: center;
    margin-bottom: 5rem; /* Pushes timeline down */
    position: relative;
    z-index: 5;
}

.mega-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 0.8rem;
}

.subtitle {
    color: var(--pink);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* 2. Wrapper (The Timeline itself) */
.zigzag-wrapper {
    width: 100%;
    max-width: 1000px;
    position: relative;
}

/* Center Line Track */
.center-line-track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-50%);
    z-index: 0;
}

/* 3. Grid Rows (Left | Line | Right) */
.timeline-row {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    margin-bottom: 60px; /* Space between cards */
    position: relative;
    z-index: 2;
}

/* Column Alignment */
.col-content { position: relative; min-width: 0; }
.col-content.left { display: flex; justify-content: flex-end; padding-right: 30px; }
.col-content.right { display: flex; justify-content: flex-start; padding-left: 30px; }
.col-center { display: flex; justify-content: center; align-items: center; }

/* 4. The Card Design */
.t-card {
    width: 320px; /* Fixed width */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, border-color 0.4s ease;
    
    /* Animation Start */
    opacity: 0;
    transform: translateY(30px);
}

.timeline-row.active .t-card {
    opacity: 1;
    transform: translateY(0);
}

.t-card:hover {
    transform: translateY(-5px);
    border-color: var(--pink);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* --- IMAGE FIX HERE --- */
.t-image {
    width: 100%;
    height: 200px; /* Slightly taller to accommodate images better */
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.2); /* Dark background for any empty space */
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-image img {
    width: 100%;
    height: 100%;
    /* CHANGED FROM 'cover' TO 'contain' so the full image is seen */
    object-fit: contain; 
    transition: transform 0.5s;
}

.t-card:hover .t-image img { transform: scale(1.05); }

.step-badge {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    background: var(--pink);
    color: #000;
    font-weight: bold;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    z-index: 5;
}

/* Text on Bottom */
.t-content {
    padding: 1.5rem;
    text-align: left;
}

.t-content h3 {
    color: var(--pink);
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.t-content p {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Center Dot */
.dot {
    width: 16px; height: 16px;
    background: #000;
    border: 2px solid var(--pink);
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 5;
}
.timeline-row.active .dot {
    background: var(--pink);
    box-shadow: 0 0 15px var(--pink);
    transform: scale(1.3);
}

/* 5. Mobile Responsive */
@media (max-width: 768px) {
    .center-line-track { left: 30px; transform: none; }
    
    .timeline-row {
        grid-template-columns: 60px 1fr; /* Line | Content */
        gap: 0;
        margin-bottom: 40px;
    }

    .col-content.left {
        grid-column: 2;
        justify-content: flex-start;
        padding-right: 0; padding-left: 0;
    }
    
    .col-content.right {
        grid-column: 2;
        padding-left: 0;
    }

    .col-center {
        grid-column: 1;
        justify-content: center;
    }

    .t-card { width: 100%; }
}

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

/* 1. The Cards (Hidden Initially) */
.t-card {
    opacity: 0;
    transform: translateY(50px); /* Pushed down */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. The Dots (Hidden Initially) */
.dot {
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy pop */
}

/* 3. The Line (Draws downwards) */
.center-line-track {
    height: 0%; /* Starts with 0 height */
    transition: height 1.5s ease-out;
    top: 0;
}

/* --- THE ACTIVE STATE (Triggered by JS) --- */

/* When row is active, reveal card */
.timeline-row.active .t-card {
    opacity: 1;
    transform: translateY(0);
}

/* When row is active, pop the dot */
.timeline-row.active .dot {
    transform: scale(1);
    box-shadow: 0 0 20px var(--pink);
}

/* Special class for the line to grow */
.zigzag-wrapper.active .center-line-track {
    height: 100%;
}

/* ==================== PREVENTION SECTION TYPOGRAPHY FIX ==================== */
/* Replace the existing prevention section CSS with this improved version */

.prevention-section {
  padding: 15vh 6%;
  position: relative;
  background: 
    linear-gradient(135deg, rgba(7, 0, 7, 0.9), rgba(18, 2, 26, 0.8)),
    url('prevention.jpg'); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.prevention-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* ==================== IMPROVED TYPOGRAPHY ==================== */

/* Main Title */
.prevention-section .section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: -0.02em; /* Tighter spacing for elegance */
  line-height: 1.2;
  color: #fff;
}

/* Subtitle */
.prevention-subtitle {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: #c9b5e5;
  margin-bottom: 2.5rem;
  font-weight: 400; /* Lighter weight */
  letter-spacing: 0.02em; /* Slight spacing for readability */
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Instruction Text */
.prevention-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2rem auto 3rem;
  padding: 1rem 2rem;
  background: rgba(255, 111, 163, 0.15);
  border: 2px solid rgba(255, 111, 163, 0.4);
  border-radius: 50px;
  max-width: fit-content;
  backdrop-filter: blur(10px);
  animation: instructionPulse 2s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(255, 111, 163, 0.2);
}

.instruction-icon {
  font-size: 1.5rem;
  animation: pointDown 1.5s ease-in-out infinite;
  line-height: 1;
}

.instruction-text {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  margin: 0;
  text-shadow: 0 0 10px rgba(255, 111, 163, 0.5);
  line-height: 1.4;
}

/* Path Selector Buttons */
.prevention-path-selector {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.path-btn {
  padding: 0.9rem 1.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(167, 139, 250, 0.3);
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s ease;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
  line-height: 1.5;
}

.path-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--pink), var(--lav-1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.path-btn:hover::before,
.path-btn.active::before {
  opacity: 1;
}

.path-btn.active {
  color: #000;
  border-color: var(--pink);
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 111, 163, 0.4);
}

/* Prevention Cards */
.prevention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  min-height: 400px;
}

.prevention-card {
  background: linear-gradient(135deg, rgba(18, 2, 26, 0.9), rgba(45, 10, 65, 0.8));
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s var(--ease);
  opacity: 0;
  transform: translateY(30px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}

.prevention-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,111,163,0.2), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.prevention-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.prevention-card.explored {
  border-color: var(--pink);
  box-shadow: 0 10px 40px rgba(255, 111, 163, 0.3);
}

.prevention-card.explored::after {
  content: '✓';
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.5rem;
  color: #2ecc71;
  filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.8));
}

.prevention-card:hover {
  transform: translateY(-15px) scale(1.05);
  box-shadow: 0 20px 60px rgba(255,111,163,0.4);
  border-color: var(--pink);
  background: linear-gradient(135deg, rgba(18, 2, 26, 0.95), rgba(60, 15, 85, 0.9));
}

.prevention-card:hover::before {
  opacity: 1;
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1.2rem;
  display: inline-block;
  animation: iconFloat 3s ease-in-out infinite;
  line-height: 1;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Card Title */
.prevention-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.prevention-card:hover h3 {
  color: var(--pink);
  text-shadow: 0 0 10px var(--pink);
}

/* Card Description */
.prevention-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #d0c7e5;
  position: relative;
  z-index: 2;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* Progress Section */
.prevention-progress {
  margin-top: 3rem;
  text-align: center;
}

.progress-text {
  font-size: 1.1rem;
  color: var(--pink);
  margin-bottom: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.progress-bar-container {
  width: 100%;
  max-width: 600px;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

.prevention-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pink), var(--lav-1));
  transition: width 0.5s ease;
  box-shadow: 0 0 20px rgba(255, 111, 163, 0.5);
}

/* Animations */
@keyframes instructionPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(255, 111, 163, 0.2);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(255, 111, 163, 0.4);
  }
}

@keyframes pointDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* Hide instruction smoothly */
.prevention-instruction.hidden-smooth {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease;
  pointer-events: none;
}

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

@media (max-width: 968px) {
  .prevention-section {
    padding: 10vh 4%;
  }
  
  .prevention-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .path-btn {
    font-size: 0.95rem;
    padding: 0.8rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .prevention-instruction {
    padding: 0.9rem 1.5rem;
    gap: 10px;
  }
  
  .instruction-icon {
    font-size: 1.3rem;
  }
  
  .instruction-text {
    font-size: 0.9rem;
    letter-spacing: 0.03em;
  }
  
  .prevention-card {
    padding: 2rem;
  }
  
  .prevention-card h3 {
    font-size: 1.2rem;
  }
  
  .card-icon {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .prevention-grid {
    grid-template-columns: 1fr;
  }
  
  .prevention-instruction {
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 8px;
  }
  
  .instruction-text {
    font-size: 0.85rem;
    text-align: center;
    letter-spacing: 0.02em;
  }
  
  .path-btn {
    font-size: 0.85rem;
    padding: 0.7rem 1.2rem;
  }
}
/* ==================== CENTERED IMMERSIVE RISK SECTION ==================== */
.risk-factors {
    min-height: 100vh;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    background: #000;
}

/* BIG CENTERED TITLE */
.risk-factors .section-title {
    font-size: 30px; /* Large cinematic title */
    font-weight: 800;
    letter-spacing: 10px;
    text-transform: uppercase;
    margin-bottom: 50px;
    color: #fff;
    text-align: center;
}

/* WIDE CONTAINER USES SIDE SPACE */
.risk-cards-container { 
    display: flex;
    flex-direction: column;
    gap: 15px; /* Tight gaps for one-section view */
    width: 95%; 
    max-width: 1200px; 
    margin: 0 auto;
}

/* THE WIDE CINEMATIC CARD */
.risk-card-new { 
    width: 100%;
    height: 120px; 
    border-radius: 8px; 
    overflow: hidden; 
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    border: 1px solid rgba(255, 111, 163, 0.3); /* Subtle Pink Border */
    position: relative;
    background: #000;
}

.risk-card-new:hover { 
    border-color: #ff6fa3; /* Vibrant Pink Glow */
    transform: translateX(15px);
}

/* SHARP BACKGROUND IMAGE FOR CARD */
.risk-image { 
    position: absolute;
    inset: 0;
    width: 100%; 
    height: 100%; 
    background-size: cover !important;
    background-position: center !important;
    filter: brightness(0.4); /* Darker so text is readable */
    transition: 0.6s ease;
}

.risk-card-new:hover .risk-image {
    filter: brightness(0.6);
    transform: scale(1.03);
}

/* CARD TITLE */
.risk-title { 
    position: relative;
    z-index: 2;
    padding-left: 60px;
    line-height: 120px; 
    font-size: 2.2rem; 
    font-weight: 700; 
    color: #fff; 
    letter-spacing: 6px;
    text-transform: uppercase;
}

/* ==================== THE EXPANDED DETAIL BOX ==================== */
.risk-expanded-detail { 
    width: 100%;
    border-radius: 12px;
    border: 2px solid #ff6fa3; /* Stronger Pink Border */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    background-size: cover !important; /* Sharp Background Image */
    background-position: center !important;
    background-attachment: fixed; /* Parallax effect */
    position: relative;
    margin-bottom: 25px;
}

.risk-expanded-detail.visible {
    opacity: 1;
    max-height: 1000px; 
}

/* SIDE-BY-SIDE GLASS CONTENT */
.detail-glass-content {
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    gap: 40px;
    padding: 80px 60px;
    background: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.8)); /* Solid overlay prevents blur */
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
    z-index: 2;
}

/* LEFT SIDE: EDUCATIONAL TEXT */
.detail-left {
    flex: 1; 
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* RIGHT SIDE: VIBRANT STATISTICS */
.detail-right {
    flex: 1; 
    min-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* Slight glass lift */
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 111, 163, 0.1);
}

.chart-wrapper {
    width: 100%;
    height: 400px; 
    position: relative;
}

.hidden { display: none !important; }

/* CLOSE BUTTON */
.close-chapter-btn {
    margin-top: 40px; 
    background: none; 
    border: 1px solid #fff; 
    color: #fff; 
    padding: 12px 35px; 
    cursor: pointer; 
    border-radius: 50px; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    transition: 0.3s;
}

.close-chapter-btn:hover {
    background: #fff;
    color: #000;
}



/* ==================== CINEMATIC STATS DASHBOARD ==================== */

.stats-animated {
    padding: 6rem 0;
    position: relative;
    perspective: 1000px; /* Enables 3D effects */
}

/* 1. The Floating Glass Control Deck */
.stats-toggles {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 60px;
    padding: 6px;
    margin: 0 auto 3rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10;
    overflow: hidden;
}

/* 2. The Buttons */
.toggle-btn {
    padding: 14px 32px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    z-index: 2;
    transition: color 0.4s ease;
    outline: none;
}

.toggle-btn:hover {
    color: #fff;
}

.toggle-btn.active {
    color: #000;
    text-shadow: none;
}

/* 3. The "Sliding Pill" Background */
/* We use a pseudo-element on the container or just style the active state. 
   For simplicity and robustness, we'll style the active state heavily. */
.toggle-btn.active {
    background: var(--pink);
    box-shadow: 0 0 20px rgba(255, 111, 163, 0.5);
    transform: scale(1.05);
    color: #000;
}

/* 4. The Holographic View Container */
.view-container {
    opacity: 0;
    transform: translateY(30px) scale(0.96) rotateX(5deg);
    filter: blur(10px);
    transition: all 0.01s; /* JS handles the animation class */
    transform-origin: center top;
}

/* The Active Animation State */
.view-container.animate-in {
    animation: hologramReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hologramReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96) rotateX(10deg);
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

/* Map & Chart Styling */
#mapContainer, #chartContainer {
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 5, 15, 0.6);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    position: relative;
}

/* Add a cool "Scan line" overlay */
#mapContainer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 111, 163, 0.05), transparent);
    transform: translateY(-100%);
    animation: scanline 4s linear infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* QUIZ SECTION */
.quiz-bg { 
  background: linear-gradient(135deg, #1a0033 0%, #330033 50%, #1a0033 100%);
  position: relative; 
  min-height: 100vh; 
  padding: 4rem 2rem 60px;
}

.quiz-bg::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.1), transparent 70%); 
  animation: quizGlow 4s ease-in-out infinite; 
  pointer-events: none; 
  z-index: 0;
}

@keyframes quizGlow { 
  0%, 100% { opacity: 0.3; } 
  50% { opacity: 0.6; } 
}

.quiz-inner { 
  position: relative; 
  z-index: 2; 
  max-width: 900px; 
  margin: 0 auto;
}

.quiz-game-title { 
  font-size: 3rem; 
  text-align: center; 
  background: linear-gradient(90deg, var(--pink), var(--lav-1)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  margin-bottom: 1rem; 
  filter: drop-shadow(0 0 20px rgba(255, 107, 157, 0.3));
}

.quiz-game-header::before {
    content: "Test what you learned from her journey.";
    display: block;
    font-size: 0.85rem;
    color: var(--pink);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
    opacity: 0.85;
    font-weight: 700;
    text-align: center;
}

.quiz-game-card { 
  background: rgba(18, 2, 26, 0.95); 
  backdrop-filter: blur(20px); 
  border: 2px solid rgba(167, 139, 250, 0.4); 
  border-radius: 20px; 
  overflow: hidden; 
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.quiz-game-header { 
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.3), rgba(255, 107, 157, 0.3)); 
  padding: 1.5rem; 
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.game-progress { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 1.1rem; 
  font-weight: 600; 
  color: #fff;
}

.game-start-screen { 
  text-align: center; 
  padding: 3rem 2rem;
}

.game-icon { 
  font-size: 5rem; 
  margin-bottom: 1.5rem; 
  animation: bounce-icon 2s ease-in-out infinite;
}

@keyframes bounce-icon { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-20px); } 
}

.game-start-screen h3 { 
  font-size: 2rem; 
  margin-bottom: 1rem;
}

.game-start-btn { 
  padding: 1.2rem 3rem; 
  font-size: 1.3rem; 
  border-radius: 50px;
}

.game-question-container { 
  padding: 2rem;
}

.game-question { 
  font-size: 1.5rem; 
  font-weight: 600; 
  margin-bottom: 2rem; 
  text-align: center; 
  color: #fff; 
  line-height: 1.6;
}

.game-options { 
  display: grid; 
  gap: 1rem;
}

.game-option { 
  padding: 1.5rem; 
  background: rgba(255, 255, 255, 0.08); 
  border: 2px solid rgba(255, 255, 255, 0.2); 
  border-radius: 12px; 
  cursor: pointer; 
  transition: all 0.3s ease; 
  font-size: 1.1rem; 
  text-align: left; 
  position: relative; 
  overflow: hidden; 
  color: #fff;
}

.game-option:hover { 
  background: rgba(167, 139, 250, 0.2); 
  border-color: var(--lav); 
  transform: translateX(8px);
}

.game-option.correct { 
  background: rgba(46, 204, 113, 0.3); 
  border-color: #2ecc71; 
  color: #fff;
}

.game-option.wrong { 
  background: rgba(231, 76, 60, 0.3); 
  border-color: #e74c3c; 
  color: #fff;
}

.game-feedback { 
  margin-top: 2rem; 
  padding: 1rem; 
  border-radius: 10px; 
  text-align: center; 
  font-size: 1.2rem; 
  font-weight: 600; 
  opacity: 0; 
  transform: translateY(20px); 
  transition: all 0.4s ease;
}

.game-feedback.show { 
  opacity: 1; 
  transform: translateY(0);
}

.game-feedback.correct { 
  background: rgba(46, 204, 113, 0.2); 
  color: #2ecc71;
}

.game-feedback.wrong { 
  background: rgba(231, 76, 60, 0.2); 
  color: #e74c3c;
}

.game-result-screen { 
  text-align: center; 
  padding: 3rem 2rem;
}

.result-trophy { 
  font-size: 6rem; 
  margin-bottom: 1rem; 
  animation: trophy-bounce 1s ease-in-out;
}

@keyframes trophy-bounce { 
  0%, 100% { transform: translateY(0) rotate(0deg); } 
  25% { transform: translateY(-30px) rotate(-10deg); } 
  50% { transform: translateY(-40px) rotate(10deg); } 
}

.game-result-screen h3 { 
  font-size: 2.5rem; 
  margin-bottom: 1rem;
}

.final-score { 
  font-size: 5rem; 
  font-weight: bold; 
  background: linear-gradient(90deg, var(--pink), var(--lav-1)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  margin-bottom: 1rem;
}

.result-performance { 
  margin: 2rem 0; 
  padding: 1.5rem; 
  background: rgba(255, 255, 255, 0.08); 
  border-radius: 12px; 
  border: 1px solid rgba(167, 139, 250, 0.3); 
  color: #fff; 
  font-size: 1.1rem;
}

.result-actions { 
  display: flex; 
  gap: 1rem; 
  justify-content: center; 
  margin-top: 2rem; 
  flex-wrap: wrap;
}

.quiz-state-view { 
  min-height: 400px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.quiz-state-view.hidden { 
  display: none !important;
}

.quiz-body { 
  padding: 0;
}

/* NARRATIVE BUTTONS */
.narrative-wrapper { 
  margin-top: 2rem; 
  display: flex; 
  align-items: center; 
  gap: 1rem;
}

.narrative-btn { 
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 111, 163, 0.3); 
  color: var(--pink); 
  padding: 0.6rem 1.2rem; 
  border-radius: 50px; 
  font-size: 0.9rem; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  cursor: pointer; 
  transition: all 0.3s var(--ease); 
  backdrop-filter: blur(5px);
}

.narrative-btn:hover { 
  background: rgba(255, 111, 163, 0.15); 
  transform: translateX(5px); 
  box-shadow: 0 0 15px rgba(255, 111, 163, 0.2);
}

.narrative-btn.playing { 
  background: var(--pink); 
  color: #000; 
  box-shadow: 0 0 20px rgba(255, 111, 163, 0.6); 
  border-color: var(--pink);
}

/* OVERLAY EFFECTS */
section.story {
    position: relative;
    overflow: hidden;
}

.overlay-gif {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.steam-effect {
    position: absolute;
    bottom: 15%;
    left: 4%;
    width: 800px;
    height: auto;
    opacity: 0.8;
    mix-blend-mode: screen;
    pointer-events: none;
}

.rain-effect {
    position: absolute;
    bottom: 58%;
    left: -23%;
    width: 600px;
    height: auto;
    opacity: 0.8;
    mix-blend-mode: screen;
    pointer-events: none;
}

.vignette-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, black 150%);
    animation: pulsePain 3s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
}

@keyframes pulsePain {
    0% { box-shadow: inset 0 0 50px rgba(0,0,0,0.2); }
    50% { box-shadow: inset 0 0 200px rgba(0,0,0,0.8); }
    100% { box-shadow: inset 0 0 50px rgba(0,0,0,0.2); }
}

.grain-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: repeating-radial-gradient( circle at 17% 32%, white, black 0.00085px );
    background-size: 100% 100%;
    opacity: 0.15;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}

.ecg-effect {
    top: 50%;
    left: 0;
    width: 100%;
    height: 150px;
    transform: translateY(-50%);
    mix-blend-mode: screen;
    opacity: 0.8;
}

.shake-trigger {
    animation: violentShake 0.5s infinite;
}

@keyframes violentShake {
    0% { transform: translate(0, 0) rotate(0deg); filter: blur(0px); }
    25% { transform: translate(-15px, 15px) rotate(-5deg); filter: blur(4px); }
    50% { transform: translate(15px, -15px) rotate(5deg); filter: blur(0px); }
    75% { transform: translate(-15px, 15px) rotate(-5deg); filter: blur(4px); }
    100% { transform: translate(0, 0) rotate(0deg); filter: blur(0px); }
}

.rays-effect { top: 0; right: 0; width: 70%; opacity: 0.6; mix-blend-mode: screen; }
.clock-effect { top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; mix-blend-mode: multiply; }
.particles-effect { top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; }

.typing-bubble {
    position: absolute;
    top: 30%;
    left: 43%;
    background-color: #e5e5ea;
    padding: 15px 20px;
    border-radius: 30px;
    border-bottom-left-radius: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    z-index: 100;
    opacity: 1;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #8e8e93;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* RESPONSIVE */
@media (max-width:1080px) { 
  .story-left .content, .story-right .content { max-width: 70%; }
  .step { flex-direction: column !important; width: 70%; }
  .step-image-container { flex: 0 0 300px; width: 100%; }
  .step .content-wrap { flex: 1; width: 100%; }
}

@media (max-width:980px){
  .swiper-slide { width: 300px; height: 380px; }
  .step { width: 100%; text-align: left; left: 0; transform: translateX(0); margin-left: 40px; }
  .timeline-steps::before { left: 15px; transform: translateX(0); }
  .step-left .circle, .step-right .circle { left: 15px; right: auto; transform: translate(-50%, -50%); }
  .step-left, .step-right { left: 0; padding-left: 50px; }
  .story-left .content, .story-right .content { max-width: 90%; text-align: center; margin: 0 auto; }
  .prevention-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .path-btn { font-size: 0.95rem; padding: 0.8rem 1.5rem; }
}

@media (max-width:600px){
  .title { font-size: 3rem; }
  .game-question { font-size: 1.2rem; }
  .final-score { font-size: 3.5rem; }
  .section-title { font-size: 2.5rem; }
  .step { min-height: 350px; margin-left: 20px; }
  .step h3 { font-size: 1.5rem; }
  .step p { font-size: 1rem; }
  .swiper-slide { width: 260px; height: 340px; }
  .prevention-grid { grid-template-columns: 1fr; }
  .prevention-card { padding: 2rem; }
  .prevention-card h3 { font-size: 1.3rem; }
  .card-icon { font-size: 2.5rem; }
  .candle-instruction { font-size: 1.8rem !important; }
  .path-btn { font-size: 0.85rem; padding: 0.7rem 1.2rem; }
}

@media (prefers-reduced-motion:reduce){ 
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ==================== WOW FACTOR ENHANCEMENTS ==================== */

/* PARTICLE CANVAS */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}

/* MEGA TEXT STYLES */
.mega-opener {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--pink) !important;
    text-shadow: 0 0 30px rgba(255, 111, 163, 0.8) !important;
    animation: textGlow 2s ease-in-out infinite;
}

.mega-warning {
    font-size: 2.2rem !important;
    color: #ff4444 !important;
    font-weight: 700 !important;
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 111, 163, 0.6); }
    50% { text-shadow: 0 0 40px rgba(255, 111, 163, 1), 0 0 60px rgba(255, 111, 163, 0.8); }
}

/* DRAMATICALLY FIXED CANDLE SECTION */
.tribute-candle-wrapper {
    text-align: center;
    padding: 4rem 2rem;
    margin: 3rem 0;
    position: relative;
    z-index: 10;
}

.candle-instruction {
    font-size: 3rem !important;
    font-weight: 900 !important;
    color: var(--pink) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 3rem !important;
    text-shadow: 
        0 0 20px rgba(255, 111, 163, 0.8),
        0 0 40px rgba(255, 111, 163, 0.6),
        0 0 60px rgba(255, 111, 163, 0.4);
    animation: megaGlow 2s ease-in-out infinite;
    line-height: 1.4;
}

@keyframes megaGlow {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(255, 111, 163, 0.8),
                     0 0 40px rgba(255, 111, 163, 0.6);
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 30px rgba(255, 111, 163, 1),
                     0 0 60px rgba(255, 111, 163, 0.8),
                     0 0 90px rgba(255, 111, 163, 0.6);
        transform: scale(1.02);
    }
}

.candle-stage {
    position: relative;
    width: 200px;
    height: 250px;
    margin: 0 auto 3rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.candle-container {
    width: 60px;
    height: 150px;
    position: relative;
    cursor: pointer !important;
    transition: all 0.4s ease;
    animation: candleFloat 3s ease-in-out infinite;
}

.candle-container:hover {
    transform: scale(1.15) translateY(-10px);
}

.wax {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f5f5dc 0%, #e8e8c8 50%, #d4d4b8 100%);
    border-radius: 8px 8px 4px 4px;
    box-shadow: 
        inset -8px 0 12px rgba(0,0,0,0.15),
        0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.wax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    width: 30%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
    border-radius: 4px;
}

.wax-drip {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 12px;
    background: #d4d4b8;
    border-radius: 50%;
    opacity: 0.8;
}

.wick {
    width: 6px;
    height: 20px;
    background: #1a1a1a;
    margin: 0 auto;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
    z-index: 1;
}

.flame-wrapper {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.flame {
    width: 35px;
    height: 50px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 100, 0.9) 0%,
        rgba(255, 200, 50, 0.95) 30%,
        rgba(255, 140, 0, 1) 70%,
        rgba(255, 69, 0, 0.8) 100%);
    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
    box-shadow: 
        0 0 20px rgba(255, 140, 0, 0.8),
        0 0 40px rgba(255, 100, 0, 0.6),
        0 0 60px rgba(255, 69, 0, 0.4);
    animation: flameFlicker 0.3s infinite alternate;
    position: relative;
}

.flame::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 30px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 200, 0.9) 0%,
        rgba(255, 220, 100, 0.7) 50%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(2px);
}

.flame-glow {
    position: absolute;
    top: -10px;
    left: -15px;
    width: 65px;
    height: 70px;
    background: radial-gradient(circle, 
        rgba(255, 200, 100, 0.4) 0%,
        rgba(255, 140, 0, 0.2) 50%,
        transparent 100%);
    border-radius: 50%;
    animation: glowPulse 1s ease-in-out infinite;
}

@keyframes flameFlicker {
    0% { transform: scaleY(1) scaleX(1); }
    25% { transform: scaleY(1.05) scaleX(0.95); }
    50% { transform: scaleY(0.98) scaleX(1.02); }
    75% { transform: scaleY(1.03) scaleX(0.97); }
    100% { transform: scaleY(1) scaleX(1); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.tribute-message {
    font-size: 1.5rem;
    color: rgba(255, 200, 100, 1);
    font-weight: 600;
    text-shadow: 0 0 15px rgba(255, 140, 0, 0.8);
    margin-top: 2rem;
    opacity: 0;
    animation: messageReveal 2s ease forwards;
    animation-delay: 0.5s;
}

@keyframes messageReveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.memorial-counter {
    margin-top: 2rem;
    text-align: center;
}

.counter-number {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(90deg, var(--pink), #ffb3d6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
}

.counter-label {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* SPECTACULAR DEVELOPMENT SECTION */
.development-section {
    background: linear-gradient(180deg, 
        rgba(7, 0, 7, 1) 0%,
        rgba(18, 2, 26, 0.98) 50%,
        rgba(7, 0, 7, 1) 100%);
    padding: 10vh 4%;
    position: relative;
}

.step {
    display: flex;
    align-items: stretch;
    gap: 3rem;
    margin-bottom: 8rem;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.22, 0.9, 0.27, 1);
    padding: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(167, 139, 250, 0.05) 100%);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(167, 139, 250, 0.2);
}

.step.active {
    opacity: 1;
    transform: translateY(0);
}

.step-visual-wrapper {
    flex: 0 0 500px;
    position: relative;
    overflow: hidden;
}

.step-image-container {
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.step-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.step:hover .step-image {
    transform: scale(1.15);
}

.step .content-wrap {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step .circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--pink), #ff8dc7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2rem;
    box-shadow: 
        0 0 30px rgba(255, 111, 163, 0.6),
        0 10px 30px rgba(255, 111, 163, 0.3);
    animation: circlePulse 2s ease-in-out infinite;
}

@keyframes circlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.step h3 {
    font-size: 2.5rem;
    color: var(--lav-1);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.step p {
    font-size: 1.3rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.95);
}

.step-right {
    flex-direction: row;
}

.step-left {
    flex-direction: row-reverse;
}

/* ACHIEVEMENT BADGE */
.achievement-unlock {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement-unlock.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.achievement-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #2ecc71;
    font-weight: 700;
    animation: badgeShine 2s ease-in-out infinite;
}

.badge-icon {
    font-size: 3rem;
    animation: badgeSpin 3s linear infinite;
}

@keyframes badgeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes badgeShine {
    0%, 100% { text-shadow: 0 0 20px rgba(46, 204, 113, 0.6); }
    50% { text-shadow: 0 0 40px rgba(46, 204, 113, 1); }
}

/* RESPONSIVE MOBILE */
@media (max-width: 980px) {
    .candle-instruction { font-size: 2rem !important; }
    .education-title { font-size: 2.5rem; }
    .section-narrative { font-size: 1.5rem; }
    
    .step {
        flex-direction: column !important;
        gap: 0;
    }
    
    .step-visual-wrapper {
        flex: 0 0 350px;
        width: 100%;
    }
    
    .step-image-container {
        height: 350px;
    }
    
    .progress-circles {
        gap: 1rem;
    }
    
    .progress-circle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .candle-instruction { font-size: 1.5rem !important; }
    .mega-opener { font-size: 1.8rem !important; }
    .lock-message { font-size: 1.2rem; }
    .progress-count { font-size: 2rem; }
    
    .step .circle {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .step h3 { font-size: 1.8rem; }
    .step p { font-size: 1.1rem; }
}/* ===== BEAUTIFUL STORYTELLING ADDITIONS ===== */

/* EMOTIONAL PAUSE SECTION */
.emotional-pause-section {
  background: #000;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pause-content {
  text-align: center;
  padding: 0 2rem;
}

.pause-line {
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  animation: pauseReveal 2s ease forwards;
  animation-delay: 0.5s;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.mega-pause {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@keyframes pauseReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* STORY CONTEXT */
.story-context-before {
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: contextReveal 1.5s ease forwards;
}

.context-line {
  font-size: 1.4rem;
  color: var(--pink);
  margin-bottom: 0.8rem;
  font-style: italic;
  opacity: 0;
  animation: lineReveal 1s ease forwards;
}

.context-line:first-child {
  animation-delay: 0.3s;
}

.context-line.delay-1 {
  animation-delay: 1.5s;
}

@keyframes contextReveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes lineReveal {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* TRANSITION SECTIONS */
.transition-to-education {
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.15), #000 80%);
  min-height: 100vh;
}

.transition-revealer {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.transition-line {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2rem;
  opacity: 0;
  animation: transitionReveal 1.5s ease forwards;
  animation-delay: 0.5s;
}

.transition-line-sub {
  font-size: 1.8rem;
  color: var(--lav-1);
  margin-bottom: 3rem;
  opacity: 0;
  animation: transitionReveal 1.5s ease forwards;
  animation-delay: 2s;
}

.continue-edu-btn {
  padding: 1.2rem 3rem;
  background: linear-gradient(135deg, var(--pink), var(--lav-1));
  border: none;
  border-radius: 50px;
  color: #000;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 10px 40px rgba(255,111,163,0.4);
  opacity: 0;
  animation: transitionReveal 1.5s ease forwards;
  animation-delay: 3.5s;
}

.continue-edu-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 50px rgba(255,111,163,0.6);
}

@keyframes transitionReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* STATS INTRO */
.stats-intro-section {
  background: #000;
  min-height: 80vh;
}

.stats-context {
  text-align: center;
  padding: 0 2rem;
}

.stats-line {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2rem;
  opacity: 0;
  animation: statsReveal 1.5s ease forwards;
  animation-delay: 0.5s;
}

.stats-line-sub {
  font-size: 1.5rem;
  color: var(--muted);
  opacity: 0;
  animation: statsReveal 1.5s ease forwards;
  animation-delay: 2s;
}

@keyframes statsReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* QUIZ INTRO */
.quiz-intro-section {
  background: radial-gradient(circle at 50% 50%, rgba(109,40,217,0.2), #000 70%);
  min-height: 80vh;
}

.quiz-context {
  text-align: center;
  padding: 0 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.quiz-line {
  font-size: 2.3rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2rem;
  opacity: 0;
  animation: quizReveal 1.5s ease forwards;
  animation-delay: 0.5s;
  line-height: 1.5;
}

.quiz-line-sub {
  font-size: 1.6rem;
  color: var(--lav-1);
  font-weight: 500;
  opacity: 0;
  animation: quizReveal 1.5s ease forwards;
  animation-delay: 2s;
}

@keyframes quizReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main section: 300vh tall for long scroll */
.final-closure {
    position: relative;
    height: 300vh;
    background: #000;
}

/* Sticky container: stays in viewport while parent scrolls */
.sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Content wrapper */
.content {
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
}

/* Text lines */
.closure-line {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
}

/* Animation state */
.closure-line.visible {
    animation: fadeInUp 1.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.closure-line.visible:nth-child(2) {
    animation: fadeInUp 1.5s cubic-bezier(0.2, 1, 0.3, 1) 0.8s forwards, 
               pinkPurplePulse 3s ease-in-out 2.5s infinite;
}

.closure-line:nth-child(2) {
    color: #ff6fa3;
}

/* Fade in animation */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pink to purple pulse animation */
@keyframes pinkPurplePulse {
    0%, 100% {
        color: #ff6fa3;
        text-shadow: 0 0 20px rgba(255, 111, 163, 0.6),
                     0 0 40px rgba(255, 111, 163, 0.4);
    }
    50% {
        color: #b794f6;
        text-shadow: 0 0 20px rgba(183, 148, 246, 0.6),
                     0 0 40px rgba(183, 148, 246, 0.4);
    }
}
/* ========== BEAUTIFUL CANCER EXPLORER ========== */
.cancer-explorer-section {
  min-height: 100vh;
  padding: 6rem 2rem;
  background: radial-gradient(circle at 50% 20%, rgba(167,139,250,0.08), transparent 60%);
}

.cancer-explorer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cancer-progress-indicator {
  text-align: center;
  font-size: 1.5rem;
  color: var(--pink);
  margin: 2rem 0;
  font-weight: 600;
}

.cancer-showcase {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin: 4rem 0;
}

.cancer-card-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  background: rgba(255,255,255,0.02);
  border-radius: 20px;
  padding: 3rem;
  min-height: 500px;
  opacity: 0.3;
  transform: scale(0.95);
  transition: all 0.6s ease;
}

.cancer-card-showcase.unlocked {
  opacity: 1;
  transform: scale(1);
}

.cancer-card-showcase.active {
  box-shadow: 0 20px 60px rgba(255,111,163,0.3);
}

.lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: opacity 0.5s ease;
}

.cancer-card-showcase.unlocked .lock-overlay {
  opacity: 0;
  pointer-events: none;
}

.lock-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.lock-overlay p {
  font-size: 1.3rem;
  color: var(--pink);
}

.cancer-visual {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.cancer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.cancer-card-showcase.unlocked .cancer-img {
  transform: scale(1.05);
}

.cancer-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.cancer-info-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cancer-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cancer-icon-big {
  font-size: 3rem;
}

.cancer-header h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--pink);
}

.cancer-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stat-item {
  background: rgba(167,139,250,0.1);
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.cancer-detail-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
}

.cancer-detail-text p {
  margin-bottom: 1rem;
}

.cancer-detail-text strong {
  color: var(--lav-1);
}

.cancer-nav-hint {
  text-align: center;
  margin-top: 3rem;
  color: var(--pink);
  font-size: 1.2rem;
  animation: bounce 2s ease-in-out infinite;
}

/* ========== BEAUTIFUL QUIZ DESIGN ========== */
.quiz-beautiful {
  min-height: 100vh;
  padding: 4rem 2rem;
  background: radial-gradient(circle at 50% 50%, rgba(109,40,217,0.15), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-beautiful-container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.quiz-header-beautiful {
  text-align: center;
  margin-bottom: 3rem;
}

.quiz-title-beautiful {
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, var(--pink));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}


.quiz-subtitle-beautiful {
  font-size: 1.3rem;
  color: var(--muted);
}

.quiz-card-beautiful {
  background: rgba(255,255,255,0.03);
  border-radius: 25px;
  padding: 3rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.quiz-state-view.hidden {
  display: none;
}

.quiz-start-visual {
  text-align: center;
  padding: 3rem 0;
}

.quiz-start-icon {
  font-size: 5rem;
  margin-bottom: 2rem;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.quiz-start-visual h3 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: #fff;
}

.quiz-start-description {
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 3rem;
}

.btn-quiz-start {
  padding: 1.5rem 4rem;
  background: linear-gradient(135deg, var(--pink), var(--lav-1));
  border: none;
  border-radius: 50px;
  color: #000;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(255,111,163,0.4);
}

.btn-quiz-start:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(255,111,163,0.6);
}

.quiz-progress-beautiful {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.question-counter,
.score-display {
  font-size: 1.1rem;
  color: var(--muted);
}

.timer-circle {
  position: relative;
  width: 80px;
  height: 80px;
}

.timer-circle svg {
  transform: rotate(-90deg);
}

.timer-bg {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 8;
}

.timer-progress {
  fill: none;
  stroke: var(--pink);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.question-beautiful {
  margin-bottom: 3rem;
}

.question-text-beautiful {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #fff;
  text-align: center;
}

.options-beautiful {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.option-button-beautiful {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(167,139,250,0.1), rgba(255,111,163,0.1));
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.option-button-beautiful:hover {
  border-color: var(--pink);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255,111,163,0.3);
}

.option-button-beautiful.correct {
  background: linear-gradient(135deg, rgba(76,175,80,0.3), rgba(76,175,80,0.1));
  border-color: #4caf50;
  animation: correctPulse 0.5s ease;
}

.option-button-beautiful.wrong {
  background: linear-gradient(135deg, rgba(244,67,54,0.3), rgba(244,67,54,0.1));
  border-color: #f44336;
  animation: shake 0.5s ease;
}

@keyframes correctPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.feedback-beautiful {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
  font-size: 1.1rem;
}

.feedback-beautiful.correct {
  background: rgba(76,175,80,0.2);
  color: #4caf50;
}

.feedback-beautiful.wrong {
  background: rgba(244,67,54,0.2);
  color: #f44336;
}

.quiz-result-beautiful {
  text-align: center;
  padding: 2rem 0;
}

.result-visual {
  margin-bottom: 2rem;
}

.result-icon {
  font-size: 6rem;
  margin-bottom: 1rem;
  animation: bounce 2s ease-in-out infinite;
}

.result-visual h3 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.result-score-beautiful {
  margin: 3rem 0;
}

.final-score-number {
  font-size: 5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--lav-1));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


.score-label {
  font-size: 1.5rem;
  color: var(--muted);
}

.result-message {
  font-size: 1.3rem;
  color: var(--muted);
  margin-bottom: 3rem;
  line-height: 1.8;
}

.result-actions-beautiful {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.btn-restart,
.btn-back-to-top {
  padding: 1.2rem 3rem;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-restart {
  background: linear-gradient(135deg, var(--pink), var(--lav-1));
  color: #000;
}

.btn-restart:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(255,111,163,0.4);
}

.btn-back-to-top {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
}

.btn-back-to-top:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--pink);
}

/* RESPONSIVE */
@media (max-width: 968px) {
  .cancer-card-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
  
  .cancer-stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pause-line,
  .mega-pause {
    font-size: 1.8rem !important;
  }
  
  .transition-line {
    font-size: 2rem;
  }
  
  .transition-line-sub {
    font-size: 1.3rem;
  }
  
  .stats-line,
  .quiz-line {
    font-size: 1.8rem;
  }
  
  .stats-line-sub,
  .quiz-line-sub {
    font-size: 1.2rem;
  }
  
  .closure-line {
    font-size: 2rem !important;
  }
  
  .context-line {
    font-size: 1.1rem;
  }
  
  .quiz-title-beautiful {
    font-size: 2.5rem;
  }
  
  .options-beautiful {
    grid-template-columns: 1fr;
  }
  
  .result-actions-beautiful {
    flex-direction: column;
  }
}
/* FIXED SLIDER DETAILS */
.active-detail-view {
    width: 90%; max-width: 1000px; margin: 20px auto 50px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: slideUpFade 0.5s ease-out;
}
@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.active-detail-view.hidden { display: none; }
.detail-header { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.detail-header h2 { font-family: 'Playfair Display'; font-size: 2.5rem; color: var(--pink); margin: 0; }
.unlocked-badge { background: rgba(46, 204, 113, 0.2); color: #2ecc71; padding: 5px 15px; border-radius: 20px; font-weight: bold; border: 1px solid #2ecc71; }

.detail-body { display: flex; gap: 40px; flex-wrap: wrap; }
.stages-column { flex: 1; min-width: 300px; }
.stats-column { flex: 1; min-width: 300px; display: flex; flex-direction: column; align-items: center; }

.stages-list p { background: rgba(255,255,255,0.05); padding: 12px; margin-bottom: 8px; border-radius: 8px; border-left: 3px solid var(--pink); animation: fadeIn 0.5s ease forwards; opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }

.chart-container-inner { width: 100%; max-width: 350px; height: 350px; position: relative; }
.chart-controls { display: flex; gap: 10px; margin-bottom: 10px; }
.chart-toggle { background: transparent; border: 1px solid #fff; color: #fff; padding: 5px 15px; cursor: pointer; border-radius: 20px; }
.chart-toggle.active { background: var(--pink); border-color: var(--pink); color: #000; }



/* ===== TIMELINE ZIG-ZAG LAYOUT ===== */
.timeline-steps {
  max-width: 1200px;
  margin: 4rem auto;
  position: relative;
}

.timeline-steps::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pink), var(--lav-1), var(--pink));
  transform: translateX(-50%);
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.5);
}

.step {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 4rem;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
  position: relative;
}

.step.active {
  opacity: 1;
  transform: translateY(0);
}

.step-left {
  flex-direction: row;
}

.step-left .content-wrap {
  flex: 1;
  text-align: right;
  padding-right: 3rem;
}

.step-left .step-image-container {
  flex: 0 0 400px;
}

.step-right {
  flex-direction: row-reverse;
}

.step-right .content-wrap {
  flex: 1;
  text-align: left;
  padding-left: 3rem;
}

.step-right .step-image-container {
  flex: 0 0 400px;
}

.step .content-wrap h3 {
  font-size: 2rem;
  color: var(--lav-1);
  margin-bottom: 1rem;
  font-weight: 700;
}

.step .content-wrap p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.step-image-container {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(167, 139, 250, 0.3);
  background: rgba(0, 0, 0, 0.5);
}

.step-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.step:hover .step-image {
  transform: scale(1.05);
}

.step-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--pink), var(--lav-1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 111, 163, 0.8);
  z-index: 10;
}

@media (max-width: 968px) {
  .timeline-steps::before {
    left: 30px;
  }
  
  .step-left, .step-right {
    flex-direction: column !important;
    padding-left: 60px;
  }
  
  .step-left .content-wrap,
  .step-right .content-wrap {
    text-align: left;
    padding: 0;
  }
  
  .step-image-container {
    width: 100%;
    flex: 1 !important;
  }
  
  .step-image {
    height: 250px;
  }
}
/* ===== QUIZ PROPER LAYOUT - QUESTION & TIMER TOP, OPTIONS BELOW ===== */
/* ==================== FIXED PINK/PURPLE QUIZ CSS ==================== */

.modern-quiz-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 20px;
}

/* 1. Background (Low Layer) */
.quiz-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Lowest */
    filter: blur(8px) brightness(0.6);
    transform: scale(1.1);
    pointer-events: none; /* Click pass-through */
}

.quiz-overlay-layer {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(109, 40, 217, 0.3), rgba(0, 0, 0, 0.7));
    z-index: 2;
    pointer-events: none; /* Click pass-through */
}

/* 2. Content Wrapper (Middle Layer) */
.quiz-content-wrapper {
    position: relative;
    z-index: 100 !important;
    width: 100%;
    max-width: 750px;
}

.glass-quiz-card {
    position: relative;
    background: rgba(20, 5, 30, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 111, 163, 0.3);
    border-radius: 30px;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    text-align: center;
    color: white;
}

.quiz-view.hidden { display: none !important; }
.quiz-view.active { display: block !important; animation: fadeIn 0.5s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 3. Buttons (Top Layer - Forced) */
.btn-quiz-primary {
    position: relative;
    z-index: 9999 !important; /* Forces it to be clickable */
    background: linear-gradient(135deg, #ff6fa3, #a78bfa);
    color: white;
    padding: 1.2rem 3.5rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer !important;
    border: none;
    box-shadow: 0 10px 30px rgba(255, 111, 163, 0.3);
    transition: transform 0.2s;
    user-select: none;
}

.btn-quiz-primary:hover { 
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 111, 163, 0.5);
}

.btn-quiz-secondary {
    position: relative;
    z-index: 9999 !important; /* Forces it to be clickable */
    background: transparent;
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin-right: 15px;
    transition: all 0.3s;
}

.btn-quiz-secondary:hover {
    border-color: #ff6fa3;
    background: rgba(255, 111, 163, 0.1);
}

/* Typography */
.quiz-badge {
    display: inline-block;
    background: rgba(255, 111, 163, 0.15);
    color: #ff6fa3;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 111, 163, 0.3);
}

.quiz-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff, #ff6fa3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}

.quiz-subtext {
    font-size: 1.1rem;
    color: #a78bfa;
    margin-bottom: 3rem;
}

/* Options */
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 768px) { .options-grid { grid-template-columns: 1fr; } }

.option-card {
    position: relative;
    z-index: 9999 !important; /* Ensure clickable */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.3);
    padding: 1.5rem;
    border-radius: 16px;
    cursor: pointer !important;
    text-align: left;
    font-size: 1.1rem;
    transition: all 0.2s;
    color: rgba(255,255,255,0.9);
}

.option-card:hover {
    background: rgba(167, 139, 250, 0.15);
    border-color: #ff6fa3;
    transform: translateY(-3px);
}

.option-card.correct { background: rgba(46, 204, 113, 0.2); border-color: #2ecc71; color:white; }
.option-card.wrong { background: rgba(231, 76, 60, 0.2); border-color: #e74c3c; color:white; }

/* HUD & Results */
.quiz-hud {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hud-label { display: block; font-size: 0.7rem; color: #a78bfa; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px; }
.hud-value { font-size: 1.5rem; font-weight: 700; color: #fff; font-family: monospace; }
#question-text-modern { font-size: 1.8rem; margin-bottom: 2.5rem; line-height: 1.5; color: #fff; }

.timer-container { width: 75px; height: 75px; position: relative; }
.timer-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.timer-circle-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 5; }
.timer-circle-fg { 
    fill: none; stroke: #ff6fa3; stroke-width: 5; 
    stroke-dasharray: 283; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; stroke-linecap: round; 
}
#timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.4rem; color: #fff; }

.result-icon { font-size: 5rem; margin-bottom: 1rem; }
.final-score-box { background: rgba(255,255,255,0.05); padding: 2rem; border-radius: 24px; margin: 2rem 0; display: inline-block; border: 1px solid rgba(255,255,255,0.1); }
.score-number { display: block; font-size: 4rem; font-weight: 900; color: #ff6fa3; line-height: 1; }
.result-msg { font-size: 1.3rem; margin-bottom: 2.5rem; color: #eee; }
.result-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ==================== AUTO-HIDE STORY CSS ==================== */

.portal-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #000;
}

/* --- LAYER 1: COVER --- */
.portal-cover {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.8s ease;
}

.portal-cover.open {
    opacity: 0;
    transform: scale(2); /* Zoom effect */
    pointer-events: none;
}

.cover-bg { position: absolute; inset: 0; background-size: cover; opacity: 0.6; }
.cover-overlay { position: absolute; inset: 0; background: radial-gradient(circle, transparent 20%, #000 95%); }
.cover-content { position: relative; z-index: 2; text-align: center; }

.mega-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: #fff;
    margin-bottom: 2rem;
    text-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.portal-btn {
    padding: 1.2rem 3rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    position: relative;
}
.portal-btn:hover { background: var(--pink); color: #000; transform: scale(1.05); }

/* --- LAYER 2: INTERFACE --- */
.story-interface {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.story-interface.active { opacity: 1; }

.video-wrapper { position: absolute; inset: 0; z-index: 0; }
.bg-video { width: 100%; height: 100%; object-fit: cover; }

/* The Dark Overlay - Fades out when watching video */
.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7); /* Darken bg so text is readable */
    transition: opacity 0.5s ease;
}

.video-overlay.clear-view {
    opacity: 0; /* Becomes transparent when video plays */
}

/* --- THE GLASS CARD --- */
.glass-story-card {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 500px;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    color: #fff;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    
    /* Animation Transition */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: scale(1);
    opacity: 1;
}

/* HIDDEN STATE (When watching video) */
.glass-story-card.hidden {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    pointer-events: none;
}

.chapter-badge { color: var(--pink); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 1rem; }
.story-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2; }
.story-text { font-size: 1.1rem; line-height: 1.6; color: #ddd; margin-bottom: 2rem; }

.next-beat-btn {
    padding: 1rem 2rem;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.next-beat-btn:hover { background: var(--pink); transform: translateY(-3px); }

/* Progress Dots */
.progress-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 15px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: 0.3s; }
.dot.active { background: var(--pink); transform: scale(1.2); }

/* ==================== REALIZATION SECTION (MOTION GUARANTEED) ==================== */

.realization-section {
    height: 300vh; 
    background: #000;
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0;
    padding: 0;
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.regret-text-container {
    text-align: center;
    padding: 0 20px;
}

/* --- TEXT STYLES --- */

.regret-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 400;
    margin-bottom: 1rem;
    color: #fff;

    /* 1. Start Hidden & Pushed Down */
    opacity: 0;
    transform: translateY(50px);
    filter: blur(10px);
    
    /* Smooth Transition for the "Reveal" */
    transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.regret-sub {
    font-family: 'Courier New', monospace;
    color: var(--pink);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;

    /* 1. Start Hidden */
    opacity: 0;
    transform: translateY(30px);
    
    /* Smooth Transition */
    transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; /* 0.5s delay */
}

/* --- THE "ACTIVE" CLASS (Added by JS) --- */
/* When JS adds this class, the text slides up and appears */
.regret-text-container.in-view .regret-text {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    /* 2. CONTINUOUS FLOATING MOVEMENT */
    animation: floatText 6s ease-in-out infinite; 
}

.regret-text-container.in-view .regret-sub {
    opacity: 1;
    transform: translateY(0);
}

/* --- CONTINUOUS MOVEMENT KEYFRAMES --- */
@keyframes floatText {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* Moves up and down gently */
}

/* FINAL FIX: Stop animation & force hide */
.scroll-indicator.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;      /* Removes it from layout completely */
    animation: none !important;    /* STOPS the pulse animation */
    pointer-events: none !important;
}

/* ==================== 🟢 CANCER SLIDER STYLES ==================== */

/* 1. SECTION CONTAINER */
.cancer-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    background: radial-gradient(circle at center, #1a051a 0%, #000 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cancer-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 111, 163, 0.5);
}

/* 2. SWIPER CONTAINER */
.cancer-swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    z-index: 10;
}

/* 3. SLIDES (The Cards) */
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 320px;       /* Fixed width for nice 3D effect */
    height: 450px;      /* Fixed height */
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: transform 0.4s ease, filter 0.4s ease;
    
    /* Layout for the text overlay */
    display: flex;
    align-items: flex-end; 
}

/* Active Slide Effect (Zoom in) */
.swiper-slide-active {
    transform: scale(1.05);
    z-index: 20;
    box-shadow: 0 20px 60px rgba(255, 111, 163, 0.4); /* Pink glow */
    border: 2px solid rgba(255, 111, 163, 0.5);
}

/* 4. LOCKED STATE */
.swiper-slide.locked {
    filter: grayscale(1) brightness(0.3);
    pointer-events: none; /* Prevents clicking */
}

.swiper-slide.locked::after {
    content: "🔒 LOCKED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #888;
    border: 2px solid #888;
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(0,0,0,0.8);
}

/* 5. CARD TEXT OVERLAY */
.slide-card-new {
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    padding: 30px 20px;
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.slide-card-new h3 {
    margin: 0 0 10px 0;
    color: #ff6fa3; /* Pink Title */
    font-size: 1.8rem;
    font-weight: 700;
}

.slide-card-new p {
    margin: 0;
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.4;
}

/* 6. NAVIGATION BUTTONS */
.swiper-button-next,
.swiper-button-prev {
    color: #ff6fa3 !important;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(255, 111, 163, 0.3);
}

.swiper-pagination-bullet-active {
    background: #ff6fa3 !important;
}

/* 7. PROGRESS TEXT */
.progress {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #a78bfa; /* Lavender */
    font-family: monospace;
    letter-spacing: 2px;
}

/* ==================== CANCER SLIDER STYLES ==================== */

.cancer-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    background: radial-gradient(circle at center, #1a051a 0%, #000 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* AUTO-PLAY INDICATOR */
.cancer-swiper::before {
    content: '↻ AUTO-SLIDING';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 111, 163, 0.2);
    color: #ff6fa3;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 111, 163, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.cancer-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 111, 163, 0.5);
}

/* SWIPER CONTAINER */
.cancer-swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* ENHANCED 3D CURVED SLIDES */
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 350px;  /* Slightly wider for better view */
    height: 480px; /* Taller cards */
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    
    /* 3D Transform */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* ACTIVE SLIDE (CENTER) - LARGER & BRIGHTER */
.swiper-slide-active {
    transform: scale(1.15) translateZ(0) !important;
    z-index: 50 !important;
    box-shadow: 
        0 25px 70px rgba(255, 111, 163, 0.5),
        0 0 50px rgba(255, 111, 163, 0.3) !important;
    border: 3px solid rgba(255, 111, 163, 0.8);
    filter: brightness(1.1);
}

/* SIDE SLIDES - SMALLER & DARKER */
.swiper-slide-prev,
.swiper-slide-next {
    filter: brightness(0.6) grayscale(0.3);
    transform: scale(0.85) !important;
}

/* LOCKED STATE */
.swiper-slide.locked {
    filter: grayscale(1) brightness(0.3) blur(2px);
    pointer-events: none;
    cursor: not-allowed;
}

.swiper-slide.locked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 5;
}

.swiper-slide.locked::after {
    content: "🔒 LOCKED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: 900;
    color: #888;
    border: 3px solid #666;
    padding: 15px 30px;
    border-radius: 15px;
    background: rgba(0,0,0,0.9);
    z-index: 10;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    letter-spacing: 3px;
}

/* HOVER EFFECT (ONLY FOR UNLOCKED) */
.swiper-slide:not(.locked):hover {
    transform: scale(1.05) translateY(-10px) !important;
    box-shadow: 0 30px 80px rgba(255, 111, 163, 0.6);
    filter: brightness(1.2);
}

/* CARD TEXT */
.slide-card-new {
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    padding: 30px 20px;
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.slide-card-new h3 {
    margin: 0 0 10px 0;
    color: #ff6fa3;
    font-size: 1.8rem;
    font-weight: 700;
}

.slide-card-new p {
    margin: 0;
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.4;
}

/* NAVIGATION */
.swiper-button-next,
.swiper-button-prev {
    color: #ff6fa3 !important;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(255, 111, 163, 0.3);
}

.swiper-pagination-bullet-active {
    background: #ff6fa3 !important;
}

/* PROGRESS TEXT */
.progress {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #a78bfa;
    font-family: monospace;
    letter-spacing: 2px;
}

/* DETAILS PANEL */
.details {
    width: 90%;
    max-width: 1100px;
    background: rgba(20, 5, 25, 0.95);
    border: 1px solid #ff6fa3;
    border-radius: 30px;
    padding: 50px;
    margin: 40px auto;
    box-shadow: 0 0 100px rgba(0,0,0,0.8);
    animation: slideUp 0.6s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

.detail-header-cancer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.detail-header-cancer h2 {
    font-size: 3rem;
    margin: 0;
    background: linear-gradient(90deg, #fff, #ff6fa3);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mark-read-btn {
    background: linear-gradient(135deg, #ff6fa3, #a78bfa);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(255, 111, 163, 0.3);
}

.mark-read-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 111, 163, 0.5);
}

.stages-content-inline {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
}

.stages-list p {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 12px;
    border-left: 4px solid #ff6fa3;
    animation: fadeInList 0.5s ease forwards;
}

@keyframes fadeInList {
    to { opacity: 1; }
}

.chart-container-inner {
    height: 350px;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    padding: 20px;
}

.hidden {
    display: none !important;
}

.cancer-instruction-text {
    text-align: center;
    color: red;
    font-size: 1.5rem;
    font-weight: 900; /* Extra bold */
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 
        0 0 15px rgba(255, 111, 163, 0.8),
        0 0 30px rgba(255, 111, 163, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.5);
    animation: glowPulse 2s ease-in-out infinite;
    background: linear-gradient(90deg, #ff6fa3, #ff8dc7, #ff6fa3);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes glowPulse {
    0%, 100% { 
        filter: brightness(1);
        transform: scale(1);
    }
    50% { 
        filter: brightness(1.3);
        transform: scale(1.02);
    }
}
 /* ==================== QUIZ SUMMARY STYLES ==================== */

.summary-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.summary-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.summary-list::-webkit-scrollbar {
    width: 8px;
}

.summary-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.summary-list::-webkit-scrollbar-thumb {
    background: var(--pink);
    border-radius: 10px;
}

.summary-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.summary-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.summary-item.correct {
    border-left: 4px solid #2ecc71;
}

.summary-item.wrong {
    border-left: 4px solid #e74c3c;
}

.summary-question-number {
    display: inline-block;
    background: linear-gradient(135deg, var(--pink), var(--lav-1));
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

.summary-question-text {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.summary-answer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.summary-answer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
}

.summary-label {
    font-weight: 600;
    min-width: 120px;
}

.summary-label.your-answer {
    color: #ffb74d;
}

.summary-label.correct-answer {
    color: #2ecc71;
}

.summary-answer-text {
    color: #ddd;
}

.summary-answer-row.correct-response {
    background: rgba(46, 204, 113, 0.1);
}

.summary-answer-row.wrong-response {
    background: rgba(231, 76, 60, 0.1);
}

.summary-icon {
    font-size: 1.2rem;
}

.summary-icon.correct {
    color: #2ecc71;
}

.summary-icon.wrong {
    color: #e74c3c;
}

@media (max-width: 768px) {
    .summary-list {
        max-height: 50vh;
        padding: 0 0.5rem;
    }
    
    .summary-item {
        padding: 1rem;
    }
    
    .summary-question-text {
        font-size: 1rem;
    }
    
    .summary-answer {
        font-size: 0.9rem;
    }
    
    .summary-label {
        min-width: 100px;
        font-size: 0.85rem;
    }
}