:root{
	--accent:#6b3e8c;
	--muted:#777;
	--bg:#f5eff9;
	--card:#fff;
	--accent-light:#8f57b8;
	--accent-dark:#5b2fa6;
}
*{box-sizing:border-box}
body{font-family:Segoe UI, Roboto, Arial, sans-serif;margin:0;background:var(--bg);color:#222}
.site-header{background:#fff;padding:0 1rem 2rem;border-bottom:4px solid var(--accent);position:relative;overflow:visible}
.banner{width:100%;height:55vh;object-fit:cover;display:block;filter:brightness(0.95);animation:zoomIn .8s ease-out}
.title-row{position:relative;left:0;bottom:auto;display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,0.92);padding:1.2rem 1.5rem;margin:1rem auto 0;max-width:800px;border-radius:12px;box-shadow:0 12px 32px rgba(107,62,140,0.15);z-index:10;animation:slideUp .7s cubic-bezier(.34,.1,.68,1) 0.2s backwards}
.title-row h1{margin:0;font-size:2rem;animation:fadeInScale .6s ease 0.4s backwards}
.portrait{width:96px;height:96px;object-fit:cover;border-radius:8px;border:2px solid #eee;animation:rotateIn .6s ease 0.3s backwards}
.subtitle{margin:0;color:var(--muted)}
.main-nav{display:flex;gap:1rem;padding:0.5rem 0}
.main-nav a{color:var(--accent);text-decoration:none;font-weight:600}
.main-nav .quiz-link{background:linear-gradient(90deg,var(--accent),#8f57b8);color:#fff;padding:.45rem .6rem;border-radius:8px}
.panel{max-width:1000px;margin:1.25rem auto;background:var(--card);padding:1.25rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.08);border-left:5px solid var(--accent);animation:slideInRight .6s cubic-bezier(.34,.1,.68,1)}

#intro{border-left:5px solid #3498db}
#timeline{border-left:5px solid #9b59b6}
#biografie{border-left:5px solid #e74c3c}
.cta-panel{border-left:5px solid #f39c12}

/* Enhanced section headings */
.panel h2{color:var(--accent);border-bottom:2px solid #f0f0f0;padding-bottom:.5rem;margin-top:0}
.timeline{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.5rem;justify-content:center}
.tl-item{padding:.7rem .85rem;border-radius:8px;cursor:pointer;border:none;font-weight:600;transition:all .3s cubic-bezier(.34,.1,.68,1);box-shadow:0 4px 12px rgba(0,0,0,0.1);color:#fff;position:relative;overflow:hidden;animation:pulse 3s ease-in-out infinite}
.tl-item::before{content:'';position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,0.2),transparent);opacity:0;transition:opacity .3s ease}
.tl-item:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 10px 24px rgba(0,0,0,0.2);animation:none}
.tl-item:active{transform:translateY(-2px) scale(0.98)}

/* Colored timeline buttons */
.tl-1{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.tl-2{background:linear-gradient(135deg,#3498db,#2980b9)}
.tl-3{background:linear-gradient(135deg,#f39c12,#d68910)}
.tl-4{background:linear-gradient(135deg,#9b59b6,#8e44ad)}
.tl-5{background:linear-gradient(135deg,#1abc9c,#16a085)}

/* Timeline detail */
#tl-detail{padding:1rem;background:linear-gradient(135deg,rgba(107,62,140,0.05),rgba(155,89,182,0.05));border-radius:10px;transition:all .4s ease}
#tl-detail.active{background:linear-gradient(135deg,rgba(107,62,140,0.1),rgba(155,89,182,0.1));transform:scale(1.02)}
#tl-title{margin:0;color:var(--accent);font-size:1.3rem;margin-bottom:.5rem;animation:slideInLeft .5s ease}
#tl-text{color:#555;line-height:1.6;animation:fadeIn .5s ease}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.6rem}
.grid img{width:100%;height:120px;object-fit:cover;cursor:pointer;border-radius:6px;border:2px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,0.06)}
#quiz-area{display:grid;gap:.5rem}
.choices{display:flex;flex-direction:column;gap:.5rem}
.choice{padding:.5rem .75rem;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.choice:hover{background:#f6f0fb}
.small{padding:.35rem .6rem;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.muted{color:var(--muted)}
footer{max-width:1000px;margin:1rem auto;padding:.5rem;color:var(--muted);font-size:.9rem}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff;padding:1rem;border-radius:8px;max-width:90%;max-height:90%;overflow:auto;position:relative}
.modal-content img{max-width:100%;height:auto;display:block}
.modal-close{position:absolute;right:.6rem;top:.4rem;border:none;background:transparent;font-size:1.1rem;cursor:pointer}

@media (max-width:900px){
  .title-row{position:static;margin:0.6rem;background:transparent;padding:0;align-items:center}
  .banner{height:40vh}
  .panel{animation:none}
}

/* Timeline detail animation */
#tl-detail{animation:fadeInScale .5s ease 0.2s backwards}

/* Reveal animations */
.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:none}

/* Keyframe animations */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,0.1)}50%{box-shadow:0 6px 20px rgba(107,62,140,0.25)}}
@keyframes zoomIn{from{transform:scale(0.95);opacity:0.8}to{transform:scale(1);opacity:1}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeInScale{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rotateIn{from{transform:rotate(-10deg) scale(0.8);opacity:0}to{transform:rotate(0);opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glow{0%,100%{box-shadow:0 4px 12px rgba(91,47,166,0.1)}50%{box-shadow:0 8px 20px rgba(91,47,166,0.3)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* Quiz feedback colors */
.choice.correct{background:#d4f5dc;border-color:#2ea44f;color:#0b3b17}
.choice.wrong{background:#f7d7d9;border-color:#d6454a;color:#5a1a1f}

/* CTA button */
.cta-button{display:inline-block;padding:.85rem 1.2rem;background:linear-gradient(90deg,#5b2fa6,#8f57b8);color:#fff;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(91,47,166,0.2);transition:all .3s cubic-bezier(.34,.1,.68,1);border:none;cursor:pointer;position:relative;overflow:hidden;animation:slideUp .6s ease-out 0.3s backwards}
.cta-button::before{content:'';position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,0.3),transparent);opacity:0;transition:opacity .3s ease}
.cta-button:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(91,47,166,0.35);animation:glow .6s ease infinite}
.cta-button:hover::before{opacity:1}

/* CTA panel specialization */
.cta-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-left:5px solid #f39c12 !important}

/* Enhanced section headings */
.panel h2{color:var(--accent);border-bottom:2px solid #f0f0f0;padding-bottom:.5rem;margin-top:0}

/* More button styles */
.btn-secondary{display:inline-block;padding:.6rem 1rem;background:#fff;border:2px solid var(--accent);color:var(--accent);border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease;cursor:pointer;animation:slideUp .5s ease-out backwards}
.btn-secondary:nth-child(1){animation-delay:0.1s}
.btn-secondary:nth-child(2){animation-delay:0.2s}
.btn-secondary:nth-child(3){animation-delay:0.3s}
.btn-secondary:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(107,62,140,0.2);animation:glow .6s ease infinite}

/* Intro section buttons */
#intro::after{content:'↓ Explore ↓';display:block;text-align:center;margin-top:1.5rem;color:var(--accent);font-weight:700;animation:bounce 2s infinite}
#intro{animation:slideInRight .7s ease}
#intro p{animation:fadeIn .6s ease 0.2s backwards}

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



/* Quiz feedback colors */
.choice.correct{background:#d4f5dc;border-color:#2ea44f;color:#0b3b17}
.choice.wrong{background:#f7d7d9;border-color:#d6454a;color:#5a1a1f}