*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --glass-bg:rgba(255,255,255,.12);
  --glass-border:rgba(255,255,255,.25);
  --glass-shadow:0 8px 32px rgba(0,0,0,.25);
  --text:#fff;
  --accent:#00e5ff;
  --accent2:#7c4dff;
  --accent3:#ff6d00;
  --accent4:#00e676;
  --radius:20px;
  --transition:.4s cubic-bezier(.25,.46,.45,.94);
}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-snap-type:y mandatory}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:#0a0a1a;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}


.bg-gradient{
  position:fixed;inset:0;z-index:-2;
  background:linear-gradient(135deg,#0a0a2e,#1a0a3e,#0a1a3e,#1a0a2e);
  background-size:400% 400%;
  animation:gradientShift 15s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.35;z-index:-1;animation:orbFloat 20s ease-in-out infinite}
.orb-1{width:400px;height:400px;background:#7c4dff;top:-100px;left:-100px;animation-delay:0s}
.orb-2{width:350px;height:350px;background:#00e5ff;bottom:-80px;right:-80px;animation-delay:-7s}
.orb-3{width:300px;height:300px;background:#ff6d00;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(40px,-30px) scale(1.1)}
  50%{transform:translate(-20px,40px) scale(.95)}
  75%{transform:translate(30px,20px) scale(1.05)}
}


#confetti-canvas{position:fixed;inset:0;z-index:9999;pointer-events:none}


section{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem 1.5rem;
  scroll-snap-align:start;
  position:relative;
}
section>*{width:100%;max-width:1100px}


.hero{
  text-align:center;
  padding:2rem;
}
.hero-greeting{
  font-size:clamp(1rem,3vw,1.5rem);opacity:0;
  animation:fadeSlideUp .8s ease .5s forwards;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.hero-name{
  font-size:clamp(2.5rem,10vw,8rem);font-weight:900;
  line-height:1;margin:1rem 0;
  background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3),var(--accent4));
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeSlideUp .8s ease .8s forwards,textGradient 6s ease infinite,opacity .8s ease .8s forwards;
  opacity:0;
}
.hero-subtitle{
  font-size:clamp(1rem,2.5vw,1.5rem);opacity:0;
  animation:fadeSlideUp .8s ease 1.1s forwards;
  color:rgba(255,255,255,.7);max-width:600px;margin:0 auto;
}
.wave-hand{
  display:inline-block;animation:wave 1.5s ease-in-out infinite;
  transform-origin:70% 70%;font-size:1.2em;
}
@keyframes wave{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(14deg)}
  20%{transform:rotate(-8deg)}
  30%{transform:rotate(14deg)}
  40%{transform:rotate(-4deg)}
  50%{transform:rotate(10deg)}
  60%,100%{transform:rotate(0deg)}
}
.scroll-indicator{
  position:absolute;bottom:2.5rem;
  animation:bounce 2s ease infinite,fadeSlideUp .8s ease 1.5s forwards;
  opacity:0;cursor:pointer;
}
.scroll-indicator svg{width:30px;height:30px;stroke:var(--accent);stroke-width:2;fill:none}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes textGradient{
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}


.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  padding:2.5rem;
  transition:var(--transition);
}
.glass:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}


.section-title{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;
  margin-bottom:2.5rem;text-align:center;
  position:relative;
}
.section-title::after{
  content:'';display:block;width:60px;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  margin:1rem auto 0;border-radius:2px;
}


.about-grid{
  display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;
  align-items:center;
}
.profile-photo{
  width:100%;aspect-ratio:3/4;border-radius:var(--radius);
  object-fit:cover;border:3px solid var(--glass-border);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  background:linear-gradient(135deg,rgba(124,77,255,.3),rgba(0,229,255,.3));
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;overflow:hidden;position:relative;
}
.profile-photo .photo-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1a3e,#2a1a4e);
  font-size:6rem;
}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.about-desc{font-size:1.05rem;color:rgba(255,255,255,.85);line-height:1.8}
.about-desc strong{color:var(--accent)}


.biodata-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;
}
.biodata-item{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem}
.biodata-icon{
  width:50px;height:50px;min-width:50px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:linear-gradient(135deg,rgba(124,77,255,.3),rgba(0,229,255,.3));
}
.biodata-label{font-size:.85rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px}
.biodata-value{font-size:1.1rem;font-weight:600;margin-top:.25rem}


.items-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;
}
.item-card{text-align:center;padding:2rem 1.5rem}
.item-icon{
  width:70px;height:70px;border-radius:50%;margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  background:linear-gradient(135deg,rgba(124,77,255,.25),rgba(0,229,255,.25));
  border:2px solid var(--glass-border);
}
.item-card h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--accent)}
.item-card p{font-size:.95rem;color:rgba(255,255,255,.7)}


.timeline{position:relative;padding-left:2rem}
.timeline::before{
  content:'';position:absolute;left:8px;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2),var(--accent3));
  border-radius:2px;
}
.timeline-item{position:relative;margin-bottom:2rem;padding-left:1.5rem}
.timeline-item::before{
  content:'';position:absolute;left:-1.55rem;top:.5rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid #0a0a1a;
  box-shadow:0 0 12px rgba(0,229,255,.5);
}
.timeline-year{font-size:.85rem;color:var(--accent);font-weight:700;letter-spacing:1px}
.timeline-title{font-size:1.1rem;font-weight:600;margin:.25rem 0}
.timeline-desc{font-size:.9rem;color:rgba(255,255,255,.6)}


.social-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
}
.social-link{
  display:flex;align-items:center;gap:.6rem;
  padding:.8rem 1.5rem;border-radius:50px;
  text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;
  background:var(--glass-bg);backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);transition:var(--transition);
}
.social-link:hover{background:rgba(255,255,255,.2);transform:translateY(-3px) scale(1.03)}
.social-link svg{width:20px;height:20px;fill:currentColor}
.social-discord{color:#5865F2}
.social-instagram{color:#E4405F}
.social-linkedin{color:#0A66C2}
.social-github{color:#fff}
.social-email{color:var(--accent)}


.nice-section{
  text-align:center;
  overflow:hidden;
  position:relative;
  background:radial-gradient(ellipse at center,rgba(124,77,255,.15) 0%,rgba(0,229,255,.1) 40%,transparent 70%);
}
.nice-section::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 10% 20%,#ff4081,transparent),
    radial-gradient(2px 2px at 80% 10%,#00e5ff,transparent),
    radial-gradient(3px 3px at 30% 80%,#7c4dff,transparent),
    radial-gradient(2px 2px at 70% 70%,#ff6d00,transparent),
    radial-gradient(3px 3px at 50% 40%,#00e676,transparent),
    radial-gradient(2px 2px at 20% 60%,#ffd600,transparent),
    radial-gradient(2px 2px at 90% 50%,#e040fb,transparent),
    radial-gradient(3px 3px at 40% 10%,#18ffff,transparent),
    radial-gradient(2px 2px at 60% 90%,#ff4081,transparent),
    radial-gradient(2px 2px at 15% 45%,#ffd600,transparent);
  animation:twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle{0%{opacity:.6}100%{opacity:1}}
.nice-section::after{
  content:'';position:absolute;inset:0;
  background:conic-gradient(from 0deg at 50% 50%,#ff4081,#ff6d00,#ffd600,#00e676,#00e5ff,#7c4dff,#e040fb,#ff4081);
  opacity:.06;animation:rotateBg 10s linear infinite;
}
@keyframes rotateBg{to{transform:rotate(360deg)}}
.nice-text{
  font-size:clamp(2.5rem,8vw,6rem);font-weight:900;
  text-align:center;
  background:linear-gradient(135deg,#ff4081,#ff6d00,#ffd600,#00e676,#00e5ff,#7c4dff,#e040fb);
  background-size:400% 400%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:textGradient 4s ease infinite;
  line-height:1.2;
  position:relative;z-index:1;
  text-shadow:none;
}
.nice-sub{
  margin-top:1rem;font-size:clamp(1rem,2.5vw,1.4rem);
  color:rgba(255,255,255,.7);position:relative;z-index:1;
}
.nice-emojis{
  font-size:clamp(1.5rem,4vw,2.5rem);
  margin-top:1.5rem;position:relative;z-index:1;
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}
.nice-emojis span{
  display:inline-block;animation:floatEmoji 3s ease-in-out infinite;
}
.nice-emojis span:nth-child(2){animation-delay:.3s}
.nice-emojis span:nth-child(3){animation-delay:.6s}
.nice-emojis span:nth-child(4){animation-delay:.9s}
.nice-emojis span:nth-child(5){animation-delay:1.2s}
.nice-emojis span:nth-child(6){animation-delay:1.5s}
.nice-emojis span:nth-child(7){animation-delay:1.8s}
@keyframes floatEmoji{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-12px) scale(1.15)}
}
.confetti-ring{
  position:absolute;border-radius:50%;border:3px solid;opacity:.3;
  animation:expandRing 4s ease-out infinite;
}
.confetti-ring:nth-child(1){border-color:#ff4081;width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:0s}
.confetti-ring:nth-child(2){border-color:#00e5ff;width:350px;height:350px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:1.3s}
.confetti-ring:nth-child(3){border-color:#ffd600;width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:2.6s}
@keyframes expandRing{
  0%{opacity:.4;transform:translate(-50%,-50%) scale(.7)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
}


.btn-liquid-glass{
  display:inline-block;
  padding:.9rem 2.2rem;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.5px;
  color:#fff;
  background:linear-gradient(135deg,rgba(0,229,255,.25),rgba(124,77,255,.25));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    0 4px 20px rgba(0,229,255,.25),
    inset 0 1px 1px rgba(255,255,255,.2);
  transition:all .35s cubic-bezier(.25,.46,.45,.94);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  z-index:2;
}
.btn-liquid-glass::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.18) 0%,transparent 60%);
  transition:transform .5s ease;
  transform:translate(0,0);
  pointer-events:none;
}
.btn-liquid-glass:hover{
  background:linear-gradient(135deg,rgba(0,229,255,.4),rgba(124,77,255,.4));
  border-color:rgba(255,255,255,.55);
  box-shadow:
    0 8px 32px rgba(0,229,255,.4),
    0 0 60px rgba(124,77,255,.2),
    inset 0 1px 1px rgba(255,255,255,.3);
  transform:translateY(-3px) scale(1.04);
}
.btn-liquid-glass:hover::before{
  transform:translate(10%,10%);
}
.btn-liquid-glass:active{
  transform:translateY(0) scale(.98);
  box-shadow:
    0 2px 10px rgba(0,229,255,.3),
    inset 0 1px 1px rgba(255,255,255,.15);
}


.footer{
  text-align:center;padding:3rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  min-height:auto;
  scroll-snap-align:end;
}
.footer p{font-size:.95rem;color:rgba(255,255,255,.5)}
.footer span{
  color:var(--accent);font-weight:700;
}
.footer .heart{color:#ff4081;display:inline-block;animation:heartbeat 1.5s ease infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}


.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}


@media(max-width:768px){
  html{scroll-snap-type:y proximity}
  .about-grid{grid-template-columns:1fr;text-align:center}
  .profile-photo{max-width:280px;margin:0 auto;aspect-ratio:1}
  section{padding:3rem 1rem}
  .biodata-grid{grid-template-columns:1fr}
  .glass{padding:1.5rem}
}
@media(max-width:480px){
  html{scroll-snap-type:none}
  .hero-name{font-size:clamp(2rem,12vw,4rem)}
  .social-link{padding:.6rem 1.2rem;font-size:.85rem}
  section{padding:2.5rem .75rem}
  .nice-text{font-size:clamp(1.8rem,10vw,3.5rem)}
}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-snap-type:none}
}