/*
Theme Name: Final Examination Portfolio
Theme URI: http://localhost/Portfolio-design
Author: Student
Description: Minimal, glassmorphism-style portfolio theme with animated interactions for Final Examination.
Version: 1.0.0
Tags: portfolio, glass, minimal, responsive
*/

/* Import fonts (WordPress should enqueue these in functions.php, fallback here) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Poppins:wght@700;800;900&family=Fira+Code:wght@400;700&display=swap');

:root{
  --neon-blue:#00C8FF;
  --purple-glow:#7A3AFF;
  --neon-cyan:#7EF0D6;
  --soft-white:#F5F7FA;
  --charcoal:#0C0F14;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --transition: 0.4s cubic-bezier(0.4,0,0.2,1);
  --bg: var(--charcoal);
  --text: var(--soft-white);
  --card-bg: rgba(255,255,255,0.02);
  --accent: var(--neon-blue);
  --accent-2: var(--purple-glow);
}

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter, Roboto, system-ui, -apple-system, 'Segoe UI', Arial;
  color:var(--text);
  background:linear-gradient(135deg,#071021 0%, #0d0f14 50%, #071022 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Container */
.site-wrap{min-height:100vh;display:flex;flex-direction:column}

/* Sticky Navigation */
.site-header{position:sticky;top:12px;z-index:1000;padding:10px 20px;display:flex;justify-content:center}
.nav-inner{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:12px;padding:10px}
.brand{font-family:Poppins, sans-serif;font-weight:800;color:var(--soft-white);letter-spacing:0.5px}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:var(--soft-white);text-decoration:none;padding:8px 12px;border-radius:8px;position:relative;transition:var(--transition)}
.main-nav a::after{content:'';position:absolute;left:8px;right:8px;bottom:6px;height:3px;background:linear-gradient(90deg,var(--neon-blue),var(--purple-glow));opacity:0;transform:translateY(6px);transition:var(--transition)}
.main-nav a:hover::after{opacity:1;transform:translateY(0)}

/* Hero */
.hero{padding:60px 20px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-inner{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:20px}
.hero-title{font-family:Poppins, sans-serif;font-size:clamp(28px,6vw,56px);line-height:1;letter-spacing:-1px}
.hero-sub{font-size:clamp(14px,2.2vw,20px);opacity:0.95}
.typing{color:var(--neon-blue);font-weight:700}
.hero-cta{margin-top:10px}
.scroll-arrow{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);animation:bounce 2s infinite}

/* Dynamic background text */
.bg-words{position:fixed;inset:0;pointer-events:none;z-index:0;display:flex;align-items:center;justify-content:center}
.bg-words .word{font-size:18vw;opacity:0.04;font-weight:800;color:var(--text);transform:translateY(8vh);transition:opacity 0.6s,var(--transition)}
.bg-words .word.active{opacity:0.08;transform:translateY(0);filter:drop-shadow(0 0 20px rgba(122,58,255,0.06))}

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

/* Animated cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);border-radius:14px;padding:18px;transition:transform var(--transition),box-shadow var(--transition);cursor:pointer}
.card:hover{transform:translateY(-10px);box-shadow:0 10px 30px rgba(122,58,255,0.12)}
.card:focus{outline:none;box-shadow:0 0 0 6px rgba(0,200,255,0.08)}

/* Profile avatar */
.profile-avatar{width:140px;height:140px;border-radius:50%;overflow:hidden;display:inline-block;border:6px solid transparent;position:relative}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-ring{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;box-shadow:0 0 30px rgba(0,200,255,0.12);transition:transform 0.6s,box-shadow 0.6s}
.profile-avatar:hover .avatar-ring{transform:scale(1.06);box-shadow:0 0 40px rgba(122,58,255,0.18)}
.avatar-animate{animation:spin 12s linear infinite, pulse 3s ease-in-out infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes pulse{0%{filter:drop-shadow(0 0 0 rgba(122,58,255,0.06))}50%{filter:drop-shadow(0 0 30px rgba(0,200,255,0.12))}100%{filter:drop-shadow(0 0 0 rgba(122,58,255,0.06))}}

/* Activity page elements */
.activity-hero{padding:40px 20px;background:linear-gradient(90deg, rgba(122,58,255,0.06), rgba(0,200,255,0.04));border-radius:12px;margin-bottom:20px}
.activity-screenshot{width:100%;height:300px;background:linear-gradient(180deg,#09121a,#071020);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.screenshot-caption{margin-top:8px;color:rgba(245,247,250,0.7)}

/* Accordion */
.accordion{border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));overflow:hidden;border:1px solid var(--glass-border)}
.accordion summary{list-style:none;padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.accordion[open] summary{background:linear-gradient(90deg,var(--neon-blue),var(--purple-glow));color:#071021}
.accordion div{padding:12px 18px}

/* Code block */
.code-block{background:#071021;padding:12px;border-radius:8px;font-family:'Fira Code', monospace;color:var(--soft-white);position:relative}
.copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.06);border:none;padding:6px 8px;border-radius:6px;color:var(--soft-white);cursor:pointer}

/* Lightbox overlay */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,12,0.7);z-index:2000}
.lightbox.open{display:flex}
.lightbox img{max-width:95%;max-height:85%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}

/* blinking caret for highlighted code */
.code-caret{position:relative;padding-left:14px}
.code-caret::before{content:'|';position:absolute;left:6px;top:6px;color:var(--neon-blue);animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}

/* Responsive */
@media (max-width:800px){
  .nav-inner{padding:8px}
  .main-nav{display:none}
}

/* Light mode overrides */
body.light{
  --bg: #F7FAFC;
  --text: #0C0F14;
  --card-bg: rgba(12,15,20,0.03);
}

/* Utilities */
.container{max-width:1100px;margin:0 auto;padding:0 20px}