/* ===== Reset & Basic Styles ===== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Arial', sans-serif; }
body { background-color: #f5f4f1; color: #222; line-height: 1.6; overflow-y: scroll; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ===== Header ===== */
header { 
  position: sticky; top: 0; background-color: #f5f4f1; padding: 20px 50px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; border-bottom: 1px solid #ddd; transform: translateY(-100px); opacity:0; animation: slideDown 1s forwards; transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; 
}
@keyframes slideDown { to { transform: translateY(0); opacity:1; } }
header nav a { margin-left: 25px; font-weight: bold; color: #222; transition: color 0.3s, text-shadow 0.3s; }
header nav a:hover { color: #ff6600; text-shadow: 0 0 10px rgba(255,102,0,0.7); }
header.scrolled { background-color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.15); transform: translateY(-5px); }

/* Logo */
.logo img { height: 70px; width: auto; object-fit: contain; transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s; }
.logo img:hover { transform: scale(1.12) rotate(-2deg); opacity:0.95; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); }
header.scrolled .logo img { transform: scale(0.9) rotate(-5deg); filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2)); }

/* ===== Introduction ===== */
#introduction { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:60px 20px; gap:40px; }
#introduction img { width:450px; border-radius:10px; box-shadow:0 15px 30px rgba(0,0,0,0.15); animation: float 6s ease-in-out infinite, zoomIn 1s forwards; }
@keyframes float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-15px); } }
@keyframes zoomIn { from{transform:scale(0.8);opacity:0;} to{transform:scale(1);opacity:1;} }
.intro-text { max-width:500px; }
.intro-text h1 { font-size:2.5rem; margin-bottom:20px; animation: bounceIn 1s forwards; }
@keyframes bounceIn { 0%{transform:translateY(-50px);opacity:0;} 60%{transform:translateY(10px);opacity:1;} 80%{transform:translateY(-5px);} 100%{transform:translateY(0);} }
.intro-text p { font-size:1rem; margin-bottom:25px; }

/* CV Wrapper & Buttons */
.cv-wrapper { display:flex; gap:15px; flex-wrap:wrap; margin-top:15px; }
.cv-button { display:inline-block; padding:10px 25px; border:2px solid #222; border-radius:25px; font-weight:bold; transition:0.3s, transform 0.3s; }
.cv-button:hover { background-color:#222; color:#fff; transform:scale(1.05) translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,0.2); }
.cv-preview-button { padding:10px 25px; border:2px solid #ff6600; border-radius:25px; background-color:#fff; font-weight:bold; cursor:pointer; transition:0.3s, transform 0.3s, box-shadow 0.3s; }
.cv-preview-button:hover { background-color:#ff6600; color:#fff; transform: scale(1.05) translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* CV Modal */
.cv-modal { display:none; position: fixed; z-index:2000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color: rgba(0,0,0,0.7); }
.cv-modal-content { position: relative; margin:5% auto; width:90%; max-width:900px; height:80%; background-color:#fff; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.cv-modal-content iframe { width:100%; height:100%; border:none; }
.cv-close { position:absolute; top:10px; right:20px; font-size:2rem; color:#222; cursor:pointer; transition: color 0.3s; }
.cv-close:hover { color:#ff6600; }

/* ===== Projects ===== */
#projects { padding:60px 20px; text-align:center; }
#projects h2 { font-size:2rem; margin-bottom:10px; }
.carousel { position:relative; max-width:400px; margin:0 auto; border:1px solid #ddd; border-radius:10px; background-color:#fff; padding:20px; box-shadow:0 10px 20px rgba(0,0,0,0.1); transition:transform 0.3s; }
.project-card { opacity:0; transform: rotateY(90deg); transition:transform 0.8s, opacity 0.8s; }
.project-card.show { opacity:1; transform: rotateY(0); }
.project-card img { width:100%; border-radius:10px; transition: transform 0.5s ease, filter 0.5s ease; }
.project-card img:hover { transform:scale(1.08); filter: brightness(1.1) drop-shadow(0 5px 15px rgba(0,0,0,0.3)); }
.arrow { position:absolute; top:50%; transform:translateY(-50%); background-color: rgba(0,0,0,0.1); border:none; font-size:2rem; cursor:pointer; border-radius:50%; width:50px; height:50px; transition: background-color 0.3s, transform 0.3s; }
.arrow.left { left:-25px; } 
.arrow.right { right:-25px; }
.arrow:hover { background-color: rgba(0,0,0,0.25); transform:scale(1.1); }

/* ===== Skills ===== */
#skills { padding: 60px 20px; text-align:center; }
.skills-container { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
.skill { display:flex; flex-direction:column; text-align:left; }
.skill span { font-weight:bold; margin-bottom:5px; }
.progress-bar { width:100%; height:20px; background-color:#ddd; border-radius:15px; overflow:hidden; }
.progress { width:0; height:100%; background-color:#ff6600; border-radius:15px; transition: width 1.5s ease-in-out; }

/* ===== Contact ===== */
#contact { padding:60px 20px; text-align:center; }
#contact h2 { font-size:2rem; margin-bottom:10px; }
#contact form { max-width:500px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
#contact input, #contact textarea { padding:10px; border:1px solid #ccc; border-radius:10px; font-size:1rem; width:100%; transition:border 0.3s, box-shadow 0.3s, transform 0.3s; }
#contact input:focus, #contact textarea:focus { transform:translateY(-5px) scale(1.02); border-color:#222; box-shadow:0 0 15px rgba(0,0,0,0.2); }
#contact button { padding:10px 25px; border:2px solid #222; border-radius:25px; font-weight:bold; cursor:pointer; transition:0.3s; }
#contact button:hover { background-color:#222; color:#fff; animation:pulse 0.6s infinite alternate; }
@keyframes pulse {0%{transform:scale(1);}100%{transform:scale(1.05);}}

/* ===== Footer ===== */
footer { background-color:#f5f4f1; text-align:center; padding:30px 20px; border-top:1px solid #ddd; }
footer p { opacity:0; animation:fadeInText 1s forwards 1s; }
@keyframes fadeInText { from{opacity:0;} to{opacity:1;} }
.social a { margin:0 10px; display:inline-block; transition:0.3s; }
.social a img { width:30px; height:30px; transition: transform 0.3s, filter 0.3s; }
.social a:hover img { transform:rotate(-15deg) scale(1.3); filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4)); }

/* ===== Scroll Reveal Sections ===== */
section { opacity:0; transform: translateY(30px); transition:opacity 0.8s, transform 0.8s; }
section.show { opacity:1; transform:translateY(0); }

/* ===== Responsive ===== */
@media (max-width:900px) { 
  #introduction { flex-direction:column; } 
  .arrow.left{left:10px;} 
  .arrow.right{right:10px;} 
  .skills-container { gap: 12px; }
  .progress-bar { height: 18px; }
  #skills h2 { font-size: 1.8rem; }
}