:root{
  --sky-top:#4FB8F0;
  --sky-bottom:#BEEBFF;
  --grass:#5D9C3E;
  --grass-dark:#487D2E;
  --grass-line:#3E6B27;
  --dirt:#7A4B26;
  --dirt-dark:#5C381C;
  --obsidian:#0F0B16;
  --panel:#232323;
  --panel-hi:#3A3A3A;
  --panel-lo:#161616;
  --diamond:#5FE8E1;
  --gold:#FFD84D;
  --redstone:#D6402A;
  --text-light:#F1EFEA;
  --text-dim:#B9B4AC;
  --border-dark:#000000aa;
  --border-light:#ffffff55;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--obsidian);
  color:var(--text-light);
  font-family:'VT323', monospace;
  font-size:1.25rem;
  line-height:1.55;
}
h1,h2,h3, .pixel-font{
  font-family:'Press Start 2P', cursive;
  line-height:1.6;
}
img{ image-rendering:pixelated; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#000; }

/* ---------- CUSTOM PIXEL CURSOR ---------- */
html, body, .slot, .pixel-btn, .item-slot, a, button{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><polygon points='3,2 3,20 7.5,16 11,25 15,23.3 11.5,15 20,15' fill='white' stroke='black' stroke-width='2.2' stroke-linejoin='miter'/></svg>") 3 2, auto;
}
a:hover, button:hover, .slot:hover, .pixel-btn:hover, .item-slot:hover,
.slot:focus-visible, .pixel-btn:focus-visible{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><polygon points='3,2 3,20 7.5,16 11,25 15,23.3 11.5,15 20,15' fill='%23FFD84D' stroke='black' stroke-width='2.2' stroke-linejoin='miter'/></svg>") 3 2, pointer;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- pixel bevel button/panel ---------- */
.pixel-panel{
  background:var(--panel);
  border:4px solid transparent;
  box-shadow:
    inset 3px 3px 0 var(--border-light),
    inset -3px -3px 0 var(--border-dark);
}
.pixel-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:'Press Start 2P', cursive;
  font-size:.72rem;
  color:var(--text-light);
  background:#6B6B6B;
  padding:.9rem 1.4rem;
  border:none;
  box-shadow:
    inset 3px 3px 0 #ffffff66,
    inset -3px -3px 0 #00000088;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
.pixel-btn:hover{ background:#7d7d7d; transform:translateY(-2px); }
.pixel-btn:active{ transform:translateY(1px);
  box-shadow: inset -3px -3px 0 #ffffff66, inset 3px 3px 0 #00000088; }
.pixel-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.pixel-btn.gold{ background:#8a6d16; }
.pixel-btn.gold:hover{ background:#a17e1a; }
.pixel-btn.diamond{ background:#1e6f6b; }
.pixel-btn.diamond:hover{ background:#25877f; }

.section-title{
  font-size:1.4rem;
  color:var(--gold);
  text-shadow:3px 3px 0 #000;
  margin:0 0 2.2rem 0;
}
.section-tag{
  font-family:'VT323', monospace;
  font-size:1.1rem;
  color:var(--diamond);
  margin:0 0 .5rem 0;
  letter-spacing:1px;
}
section{ padding:5.5rem 1.5rem; max-width:1100px; margin:0 auto; }

/* ---------- NAV / HOTBAR ---------- */
#hotbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem .8rem;
  background:#00000088;
  backdrop-filter:blur(3px);
  border-bottom:4px solid #000;
  overflow-x:auto;
}
.slot{
  flex:0 0 auto;
  width:64px; height:56px;
  background:#8B8B8B;
  box-shadow: inset 3px 3px 0 #ffffff77, inset -3px -3px 0 #00000099;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:'Press Start 2P', cursive;
  font-size:.5rem;
  text-align:center;
  color:#1c1c1c;
  cursor:pointer;
  gap:.25rem;
  transition:background .15s ease;
}
.slot span.icon{ font-size:1.1rem; }
.slot:hover, .slot.active{ background:var(--gold); }
.slot:focus-visible{ outline:3px solid var(--diamond); outline-offset:2px; }

/* ---------- HERO ---------- */
#hero{
  max-width:none;
  padding:0;
  position:relative;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(var(--sky-top), var(--sky-bottom) 75%);
}
.sun{
  position:absolute; top:8%; right:10%;
  width:70px; height:70px;
  background:var(--gold);
  box-shadow:0 0 0 8px #ffffff33;
}
.cloud{
  position:absolute;
  background:#fff;
  opacity:.9;
  box-shadow:
    20px -10px 0 0 #fff,
    -20px 0px 0 0 #fff,
    40px 0 0 0 #fff;
}
.cloud1{ width:60px; height:24px; top:15%; left:8%; animation:drift 40s linear infinite; }
.cloud2{ width:50px; height:20px; top:28%; left:60%; animation:drift 55s linear infinite; }
.cloud3{ width:40px; height:18px; top:10%; left:40%; animation:drift 65s linear infinite reverse; }
@keyframes drift{
  from{ transform:translateX(0); }
  to{ transform:translateX(120vw); }
}

.terrain{
  position:absolute; bottom:0; left:0; right:0; height:190px;
}
.grass-layer{
  height:46px;
  background:
    repeating-linear-gradient(90deg, var(--grass-line) 0 4px, transparent 4px 40px),
    var(--grass);
  border-bottom:6px solid var(--grass-dark);
}
.dirt-layer{
  height:144px;
  background:
    repeating-linear-gradient(90deg, #00000022 0 4px, transparent 4px 40px),
    repeating-linear-gradient(0deg, #00000018 0 4px, transparent 4px 40px),
    var(--dirt);
}

.hero-content{
  position:relative; z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  flex-wrap:wrap;
  padding:0 1.5rem;
  margin-bottom:150px;
  width:100%;
}
.hero-text{ text-align:center; }

.sign{
  position:relative;
  background:var(--dirt);
  border:6px solid var(--dirt-dark);
  box-shadow:inset 3px 3px 0 #ffffff33, inset -3px -3px 0 #00000066, 0 10px 0 #00000055;
  padding:1.6rem 1.6rem 1.2rem;
  display:inline-block;
}

/* --- avatar / picture frame, to the right of the nameplate --- */
.avatar-frame{
  width:170px; height:170px;
  flex:0 0 auto;
  background:var(--dirt-dark);
  border:8px solid #4a2f18;
  box-shadow:inset 0 0 0 3px #000, 0 8px 0 #00000055;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.avatar-frame img{
  width:100%; height:100%;
  object-fit:cover;
}
.avatar-fallback{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%; height:100%;
  border:2px dashed #ffffff55;
  color:#ffffffbb;
  font-size:3rem;
}

.hero-text{ text-align:center; }
.hero-name{
  font-size:clamp(1.3rem, 5vw, 2.6rem);
  color:#fff;
  text-shadow:4px 4px 0 #000;
  margin:0;
  white-space:pre-wrap;
}
.hero-name span{
  display:inline-block;
  opacity:0;
  transform:translateY(-60px);
  animation:blockDrop .5s ease-out forwards;
}
.hero-name span.name-space{
  width:.5em;
}
@keyframes blockDrop{
  0%{ opacity:0; transform:translateY(-60px) rotate(-3deg); }
  70%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) rotate(0); }
}
.hero-role{
  font-family:'VT323', monospace;
  font-size:1.7rem;
  color:var(--diamond);
  margin:.9rem 0 1.8rem;
  text-shadow:2px 2px 0 #000;
}
.hero-ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scroll-hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:3;
  font-family:'VT323', monospace;
  font-size:1.1rem;
  color:#fff;
  text-shadow:2px 2px 0 #000;
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ---------- ABOUT ---------- */
#about .about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.about-panel{ padding:2rem; }
.about-panel p{ margin:0 0 1rem; color:var(--text-dim); font-size:1.25rem; }
.about-panel p:last-child{ margin-bottom:0; }
.stat-row{
  display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.5rem;
}
.stat{
  background:var(--panel-lo);
  border:3px solid #000;
  box-shadow:inset 2px 2px 0 #ffffff22;
  padding:.8rem 1rem;
  font-size:1.05rem;
  color:var(--gold);
}
.stat b{ display:block; color:var(--text-light); font-size:1.4rem; }

/* ---------- EDUCATION (level progression path) ---------- */
.edu-track{
  position:relative;
  padding-left:2.4rem;
  display:flex;
  flex-direction:column;
  gap:2.4rem;
}
.edu-track::before{
  content:'';
  position:absolute;
  left:9px; top:6px; bottom:6px;
  width:4px;
  background:repeating-linear-gradient(180deg, var(--diamond) 0 10px, var(--panel-lo) 10px 20px);
}
.edu-node{
  position:relative;
  opacity:0;
  transform:translateX(-30px);
  transition:opacity .5s ease, transform .5s ease;
}
.edu-node.reveal{ opacity:1; transform:translateX(0); }
.edu-node::before{
  content:'';
  position:absolute;
  left:-2.4rem; top:4px;
  width:22px; height:22px;
  background:var(--diamond);
  border:3px solid #000;
  box-shadow:0 0 0 3px var(--obsidian);
}
.edu-node.current::before{
  background:var(--gold);
  animation:eduPulse 1.6s ease-in-out infinite;
}
@keyframes eduPulse{
  0%,100%{ box-shadow:0 0 0 3px var(--obsidian); }
  50%{ box-shadow:0 0 0 5px var(--obsidian), 0 0 10px var(--gold); }
}
.edu-node h3{ margin:.6rem 0 .2rem; font-size:.95rem; color:var(--text-light); }
.edu-node p{ margin:0; color:var(--text-dim); font-size:1.15rem; }
.edu-badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.chip.progress{
  color:var(--gold);
  border-color:var(--gold);
  animation:chipPulse 1.6s ease-in-out infinite;
}
@keyframes chipPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ---------- CERTIFICATES (achievements unlocked) ---------- */
.cert-group{ margin-bottom:2.8rem; }
.cert-group:last-child{ margin-bottom:0; }
.cert-issuer{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:'Press Start 2P', cursive;
  font-size:.75rem;
  letter-spacing:1px;
  color:var(--diamond);
  text-shadow:2px 2px 0 #000;
  margin:0 0 1.4rem;
}
.cert-issuer::before,
.cert-issuer::after{
  content:'◆';
  color:var(--gold);
  font-size:.7rem;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:1rem;
}
.cert-card{
  padding:1.1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:flex-start;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .5s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.cert-card.reveal{ opacity:1; transform:translateY(0); }
.cert-card.reveal:hover{
  transform:translateY(-6px);
  box-shadow:
    inset 3px 3px 0 var(--border-light),
    inset -3px -3px 0 var(--border-dark),
    0 8px 0 #00000066,
    0 0 0 3px var(--gold);
}
.cert-card h4{
  margin:0;
  font-size:.92rem;
  color:var(--text-light);
  line-height:1.5;
}
.cert-meta{ margin:0; color:var(--diamond); font-size:.95rem; }
.cert-card .pixel-btn{ margin-top:.3rem; font-size:.56rem; padding:.7rem 1rem; }

/* ---------- TECH STACK (compact, no big black boxes) ---------- */
.stack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:.85rem;
}
.item-slot{
  background:linear-gradient(150deg, #2c2c2c, #1a1a1a);
  border:2px solid #000;
  box-shadow: inset 2px 2px 0 #ffffff1a;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.9rem .5rem;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.item-slot:hover{
  transform:translateY(-3px);
  background:linear-gradient(150deg, #363636, #222);
  box-shadow: inset 2px 2px 0 #ffffff22, 0 4px 0 #00000055;
}
.item-slot i{ font-size:1.6rem; }
.item-slot .invert{ filter:invert(1); opacity:.85; }
.item-slot .label{
  font-size:.85rem;
  color:var(--text-dim);
  text-align:center;
}

/* ---------- PROJECTS ---------- */
.quest-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.5rem;
}
.quest-card{
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  opacity:0;
  transform:translateY(45px) scale(.95);
  transition:opacity .5s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.quest-card.reveal{
  opacity:1;
  transform:translateY(0) scale(1);
}
.quest-card.reveal:hover{
  transform:translateY(-8px);
  box-shadow:
    inset 3px 3px 0 var(--border-light),
    inset -3px -3px 0 var(--border-dark),
    0 10px 0 #00000066,
    0 0 0 3px var(--gold);
}
.quest-card.reveal:hover .quest-tag{ animation:tagPop .35s ease; }
@keyframes tagPop{
  0%{ transform:scale(1) rotate(0); }
  40%{ transform:scale(1.15) rotate(-3deg); }
  100%{ transform:scale(1) rotate(0); }
}
.quest-tag{
  font-family:'Press Start 2P', cursive;
  font-size:.6rem;
  color:var(--obsidian);
  background:var(--gold);
  display:inline-block;
  padding:.35rem .6rem;
  width:fit-content;
}
.quest-card h3{ margin:0; font-size:1rem; color:var(--text-light); }
.quest-card p{ margin:0; color:var(--text-dim); font-size:1.15rem; }
.quest-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem; }
.chip{
  font-size:.95rem;
  color:var(--diamond);
  border:2px solid var(--diamond);
  padding:.15rem .55rem;
}
.quest-card .pixel-btn{ align-self:flex-start; margin-top:.5rem; font-size:.62rem; }

/* ---------- CONTACT ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
#contact .terminal{
  padding:2rem;
  font-family:'VT323', monospace;
}
.terminal .line{ margin:0 0 .7rem; color:var(--text-dim); }
.terminal .prompt{ color:var(--diamond); }
.contact-links{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
.contact-links i{ font-size:1.2rem; }
.contact-links .invert{ filter:invert(1); }

.contact-form{
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.contact-form label{
  font-family:'Press Start 2P', cursive;
  font-size:.65rem;
  color:var(--diamond);
  margin-top:.8rem;
}
.contact-form input,
.contact-form textarea{
  font-family:'VT323', monospace;
  font-size:1.15rem;
  color:var(--text-light);
  background:var(--panel-lo);
  border:none;
  box-shadow: inset 2px 2px 0 #00000099, inset -2px -2px 0 #ffffff22;
  padding:.7rem .8rem;
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:3px solid var(--gold);
  outline-offset:1px;
}
.contact-form button{ margin-top:1.2rem; align-self:flex-start; }
.form-note{ margin:.6rem 0 0; font-size:.95rem; color:var(--text-dim); }

footer{
  text-align:center;
  padding:2.5rem 1rem 3rem;
  color:var(--text-dim);
  font-size:1.05rem;
  border-top:4px solid #000;
  background:var(--panel-lo);
}
footer .heart{ color:var(--redstone); }

@media (min-width:700px){
  .about-grid{ grid-template-columns:1.3fr 1fr; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  #hero{ min-height:600px; }
  .avatar-frame{ display:none; }
}
@media (max-width:480px){
  section{ padding:3.5rem 1rem; }
  .slot{ width:48px; height:44px; font-size:.45rem; }
  .slot span.icon{ font-size:.95rem; }
  .sign{ padding:1.1rem 1.3rem .9rem; }
  .hero-role{ font-size:1.35rem; }
  .stack-grid{ grid-template-columns:repeat(3, 1fr); }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .pixel-btn{ justify-content:center; }
}
@media (max-width:360px){
  .hero-name{ font-size:1.05rem; }
  #hotbar{ justify-content:flex-start; }
}
#musicBtn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  padding: 10px 16px;
  border: 2px solid #55a630;
  border-radius: 8px;

  background: #1b1b1b;
  color: white;

  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  cursor: pointer;

  transition: 0.2s ease;
}

#musicBtn:hover {
  transform: scale(1.05);
}

/* =========================================================
   MINECRAFT WORLD LOADING SCREEN
   ========================================================= */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;

  opacity: 1;
  visibility: visible;

  transition:
    opacity .7s ease,
    visibility .7s ease;
}

#loading-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-world {
  position: relative;
  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      var(--sky-top),
      var(--sky-bottom) 72%,
      var(--grass) 72%
    );
}

/* ---------- SUN ---------- */

.loader-sun {
  position: absolute;

  top: 10%;
  right: 12%;

  width: 72px;
  height: 72px;

  background: var(--gold);

  box-shadow:
    0 0 0 8px #ffffff22;
}

/* ---------- CLOUDS ---------- */

.loader-cloud {
  position: absolute;

  width: 60px;
  height: 22px;

  background: #fff;

  opacity: .9;

  box-shadow:
    20px -10px 0 #fff,
    40px 0 0 #fff;
}

.cloud-a {
  top: 18%;
  left: 8%;

  animation: loaderCloud 20s linear infinite;
}

.cloud-b {
  top: 30%;
  left: 58%;

  transform: scale(.75);

  animation: loaderCloud 28s linear infinite reverse;
}

@keyframes loaderCloud {
  from {
    transform: translateX(-120px);
  }

  to {
    transform: translateX(120vw);
  }
}

/* ---------- CENTER CONTENT ---------- */

.loader-content {
  position: absolute;

  left: 50%;
  top: 50%;

  width: min(90%, 520px);

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 5;
}

/* ---------- NAME ---------- */

.loader-name {
  display: inline-block;

  padding: 1.2rem 1.5rem;

  background: var(--dirt);

  border: 6px solid var(--dirt-dark);

  color: #fff;

  font-family: 'Press Start 2P', cursive;

  font-size: clamp(1.5rem, 6vw, 3rem);

  text-shadow:
    4px 4px 0 #000;

  box-shadow:
    inset 3px 3px 0 #ffffff33,
    inset -3px -3px 0 #00000066,
    0 8px 0 #00000055;

  animation: loaderName .8s ease-out;
}

@keyframes loaderName {
  0% {
    opacity: 0;
    transform: translateY(-35px);
  }

  70% {
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- LOADING TEXT ---------- */

.loader-text {
  margin-top: 2rem;

  color: #fff;

  font-family: 'VT323', monospace;

  font-size: 1.7rem;

  text-shadow:
    2px 2px 0 #000;
}

#loading-message::after {
  content: "";
  animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* ---------- LOADING BAR ---------- */

.loader-bar {
  width: 100%;
  height: 32px;

  padding: 4px;

  margin-top: .8rem;

  background: #111;

  border: 4px solid #000;

  box-shadow:
    4px 4px 0 #00000055;
}

.loader-progress {
  width: 0%;
  height: 100%;

  background:
    repeating-linear-gradient(
      90deg,
      var(--grass-dark) 0 12px,
      var(--grass) 12px 24px
    );

  transition: width .1s linear;

  box-shadow:
    inset 0 3px 0 #ffffff33;
}

/* ---------- PERCENT ---------- */

.loader-percent {
  margin-top: .7rem;

  font-family: 'Press Start 2P', cursive;

  font-size: .7rem;

  color: var(--gold);

  text-shadow:
    2px 2px 0 #000;
}

/* ---------- GROUND ---------- */

.loader-ground {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 28%;
}

.loader-grass {
  height: 38px;

  background:
    repeating-linear-gradient(
      90deg,
      var(--grass-line) 0 4px,
      transparent 4px 40px
    ),
    var(--grass);

  border-bottom: 6px solid var(--grass-dark);
}

.loader-dirt {
  height: calc(100% - 38px);

  background:
    repeating-linear-gradient(
      90deg,
      #00000022 0 4px,
      transparent 4px 40px
    ),
    repeating-linear-gradient(
      0deg,
      #00000018 0 4px,
      transparent 4px 40px
    ),
    var(--dirt);
}

/* ---------- MOBILE ---------- */

@media (max-width: 500px) {

  .loader-name {
    padding: 1rem 1.1rem;
  }

  .loader-text {
    font-size: 1.4rem;
  }

  .loader-bar {
    height: 27px;
  }

  .loader-sun {
    width: 55px;
    height: 55px;
  }
}