:root{
  --bg:#0b0b0b;
  --bg-2:#0f1723;
  --accent:rgb(154, 194, 255);
  --muted:#9aa0a6;
  --hero-max:4.4rem; /* adjustable hero max-size */
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient( at 20% 10%, rgba(120,90,230,0.08), transparent 7% ), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: #f6f6f6;
  overflow-x: hidden;
}

/* subtle animated background blobs - lightweight */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: -2; pointer-events:none;
  background: radial-gradient(circle at 10% 20%, rgba(121,255,225,0.06) 0%, rgba(121,255,225,0.02) 20%, transparent 28%),
              radial-gradient(circle at 80% 70%, rgba(130,170,255,0.06) 0%, rgba(130,170,255,0.02) 18%, transparent 28%),
              radial-gradient(circle at 52% 40%, rgba(255,120,170,0.03) 0%, rgba(255,120,170,0.015) 14%, transparent 28%);
  mix-blend-mode: screen; filter: blur(24px); opacity:0.9;
  transform-origin: center center;
  animation: blob 28s linear infinite alternate;
}

@keyframes blob{
  0%{ transform: translate(0,0) scale(1); }
  25%{ transform: translate(-20px,-6px) scale(1.02); }
  50%{ transform: translate(12px,-10px) scale(1.03); }
  75%{ transform: translate(-10px,10px) scale(1.01); }
  100%{ transform: translate(0,0) scale(1); }
}

/* navbar */

/* Mobile nav toggle */
.nav-toggle { display:none; position:fixed; left:16px; top:16px; z-index:1001; background: rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.04); color:var(--muted); padding:8px 10px; border-radius:8px; font-weight:700; cursor:pointer; backdrop-filter: blur(6px); }
.nav-toggle[aria-expanded="true"] { background: linear-gradient(90deg, rgba(255,154,154,0.12), rgba(130,170,255,0.06)); color:#fff; }

.fixed { position: fixed; top: 50%; left: 18px; right: auto; z-index:999; transform: translateY(-50%); }
.fixed.right-panel { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:12px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }

.nav-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.nav-list a { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--muted); opacity:0.95; margin:0; font-size:0.92rem; text-transform:uppercase; letter-spacing:0.18em; padding:8px 12px; border-radius:8px; transition: all 0.2s ease; }
.nav-list a .dot { width:9px; height:9px; border-radius:50%; background:var(--muted); display:inline-block; margin-left:auto; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; opacity:0.9; }
.nav-list a:hover { color:var(--accent); background: rgba(255,255,255,0.01); transform: translateX(-6px); }
.nav-list a:focus, .nav-list a:focus-visible { outline: 3px solid rgba(255,154,154,0.18); outline-offset:2px; color:var(--accent); }
.nav-list a.active { color:#fff; }
.nav-list a.active .dot { background: var(--accent); transform: scale(1.6); box-shadow: 0 0 10px rgba(255,154,154,0.18); }

.socials-sm { display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-top:12px; }
.socials-sm img { width:18px; height:18px; }
.socials-sm a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; background:rgba(255,255,255,0.01); }

@media (max-width: 640px) {
  .nav-toggle { display:block; }
  .fixed.right-panel { position: fixed; left: 0; top: 0; transform: translateX(-110%); width: 260px; height: 100vh; border-radius: 0; padding:24px; display:flex; justify-content:flex-start; transition: transform 0.28s cubic-bezier(.18,.9,.21,1); }
  .fixed.right-panel.open { transform: translateX(0); box-shadow: 0 40px 80px rgba(0,0,0,0.6); background: linear-gradient(180deg, rgba(9,9,11,0.98), rgba(15,23,35,0.98)); }
  .fixed.right-panel .socials-sm { flex-direction:row; gap:12px; margin-top:auto; }
  .fixed.right-panel .nav-list a { font-size:1rem; padding:12px 10px; }
}

/* hero */
:root { --nav-collapsed: 64px; --nav-expanded: 220px; }
.hero { min-height:100vh; display:flex; align-items:center; padding-left: max(clamp(88px, 10vw, 190px), calc(var(--nav-collapsed) + 48px)); padding-top: clamp(28px, 4vh, 64px); }
.hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-inner{ position:relative; z-index:2; max-width:1100px; display:grid; grid-template-columns: 1fr; gap:40px; align-items:center; }
.hero-left{ padding-right:0; max-width:900px; }

/* Ensure the main content reserves space for the nav so it never gets visually covered */
main { transition: margin-left 0.22s cubic-bezier(.18,.9,.21,1); margin-left: calc(var(--nav-collapsed) + 18px); }
.fixed.right-panel:hover ~ main, .fixed.right-panel:focus-within ~ main { margin-left: calc(var(--nav-expanded) + 18px); }
.fixed.right-panel.open ~ main { margin-left: calc(var(--nav-expanded) + 18px); }

/* Skip link */
.skip-link { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,0.6); color: #fff; padding:8px 10px; border-radius:6px; z-index:1100; transform: translateY(-8px); opacity:0; transition: opacity 0.18s ease, transform 0.18s ease; text-decoration:none; }
.skip-link:focus { opacity:1; transform: translateY(0); outline: none; box-shadow: 0 0 0 4px rgba(255,154,154,0.12); }

/* Compact vertical nav (collapsed icons) */
.fixed.right-panel { width: var(--nav-collapsed); overflow: visible; }
.fixed.right-panel { position: fixed; top: 50%; left: 18px; right: auto; z-index:999; transform: translateY(-50%); transition: width 0.22s cubic-bezier(.18,.9,.21,1); }
.fixed.right-panel:hover, .fixed.right-panel:focus-within { width: var(--nav-expanded); }
.fixed.right-panel.open { width: var(--nav-expanded); }

.nav-list a { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--muted); opacity:0.95; margin:0; font-size:0.92rem; text-transform:uppercase; letter-spacing:0.16em; padding:10px 14px; border-radius:8px; transition: all 0.18s ease; }
.nav-list a .icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); }
.nav-list a .icon svg { width:18px; height:18px; display:block; }
.nav-list a .label { white-space:nowrap; opacity:0; transform: translateX(-6px); transition: opacity 0.18s ease, transform 0.18s ease; color:var(--muted); }
.fixed.right-panel:hover .nav-list a .label, .fixed.right-panel:focus-within .nav-list a .label, .fixed.right-panel.open .nav-list a .label { opacity:1; transform: translateX(0); color:#fff; }

.nav-list a .dot { margin-left:auto; }

.nav-list a.active { color:#fff; }
.nav-list a.active .icon, .nav-list a:focus .icon { color: var(--accent); }

/* Social icons and labels */
.socials-sm { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; align-items:flex-start; margin-top:18px; position:relative; }
.socials-sm li { list-style:none; }
.socials-sm img { width:20px; height:20px; filter: none; display:block; }
.socials-sm a { min-height:44px; width:36px; height:auto; display:inline-flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; color:var(--muted); text-decoration:none; position:relative; }

/* hover/focus styles for social icons */
.socials-sm a:hover, .socials-sm a:focus { background: rgba(255,255,255,0.02); color: #fff; }
.socials-sm a:hover img, .socials-sm a:focus img { filter: brightness(1.15); }

/* inline slabel style when nav expanded */
.fixed.right-panel:hover .socials-sm .slabel, .fixed.right-panel.open .socials-sm .slabel { background: rgba(255,255,255,0.02); padding:6px 8px; border-radius:6px; display:inline-block; }
.socials-sm .slabel { font-size:0.78rem; opacity:0; color:var(--muted); transition: opacity 0.18s ease, transform 0.18s ease; transform: translateX(-6px); pointer-events:none; }
.fixed.right-panel:hover .socials-sm .slabel, .fixed.right-panel:focus-within .socials-sm .slabel, .fixed.right-panel.open .socials-sm .slabel { opacity:1; transform: translateX(0); color:#fff; }

/* Tooltip behaviour for social icons when nav is collapsed (desktop) */
.fixed.right-panel:not(:hover) .socials-sm a:hover .slabel, .fixed.right-panel:not(:hover) .socials-sm a:focus .slabel {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); color: #fff; padding:6px 8px; border-radius:6px; opacity:1; z-index:1100; white-space:nowrap;
}

/* When nav is expanded, show social labels inline */
.fixed.right-panel:hover .socials-sm .slabel, .fixed.right-panel.open .socials-sm .slabel { position: static; opacity:1; transform:none; margin-left:8px; color:#fff; display:inline-block; }

/* When nav expands, allow social anchors to use full width so labels won't overlap */
.fixed.right-panel:hover .socials-sm a, .fixed.right-panel.open .socials-sm a { width: 100%; padding-left: 10px; justify-content:flex-start; }

@media (max-width: 900px) {
  .hero { padding-left: max(24px, calc(var(--nav-collapsed) + 20px)); }
  main { margin-left: 0; }
}

@media (max-width: 640px) {
  .nav-toggle { display:block; }
  .fixed.right-panel { position: fixed; left: 0; top: 0; transform: translateX(-110%); width: 260px; height: 100vh; border-radius: 0; padding:24px; display:flex; justify-content:flex-start; transition: transform 0.28s cubic-bezier(.18,.9,.21,1); }
  .fixed.right-panel.open { transform: translateX(0); box-shadow: 0 40px 80px rgba(0,0,0,0.6); background: linear-gradient(180deg, rgba(9,9,11,0.98), rgba(15,23,35,0.98)); }
  .fixed.right-panel .socials-sm { flex-direction:row; gap:12px; margin-top:auto; }
  .fixed.right-panel .nav-list a { font-size:1rem; padding:12px 10px; }
}

@media (max-width: 900px) {
  .hero { padding-left: max(24px, calc(var(--nav-collapsed) + 20px)); }
}

@media (max-width: 640px) {
  .nav-toggle { display:block; }
  .fixed.right-panel { position: fixed; left: 0; top: 0; transform: translateX(-110%); width: 260px; height: 100vh; border-radius: 0; padding:24px; display:flex; justify-content:flex-start; transition: transform 0.28s cubic-bezier(.18,.9,.21,1); }
  .fixed.right-panel.open { transform: translateX(0); box-shadow: 0 40px 80px rgba(0,0,0,0.6); background: linear-gradient(180deg, rgba(9,9,11,0.98), rgba(15,23,35,0.98)); }
  .fixed.right-panel .socials-sm { flex-direction:row; gap:12px; margin-top:auto; }
  .fixed.right-panel .nav-list a { font-size:1rem; padding:12px 10px; }
}
/* hero-right removed (no longer used) */
.hero-sub { color:var(--muted); margin-top:18px; font-size:1rem; max-width:540px; line-height:1.5; }
.hero-cta { margin-top:26px; }

.avatar-frame{ width:360px; height:360px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); box-shadow: 0 20px 40px rgba(0,0,0,0.6); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.avatar{ width:220px; height:220px; border-radius:12px; background:linear-gradient(180deg, rgba(120,120,200,0.4), rgba(80,150,255,0.2)); box-shadow: inset 0 0 60px rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; position:relative; }
.avatar::before{ content:""; width:160px; height:160px; border-radius:10px; background:linear-gradient(145deg, rgba(80,120,170,0.25), rgba(160,120,220,0.14)); box-shadow: inset 0 -8px 40px rgba(0,0,0,0.55); transform:translateY(-6px); }
.avatar img{ width:140px; height:140px; object-fit:cover; border-radius:8px; display:block; }
.avatar-frame::before{ content:""; position:absolute; inset:10px; border-radius:12px; border:1px solid rgba(255,255,255,0.04); }
.frame-corner{ position:absolute; right:-8px; top:-8px; width:120px; height:80px; background-image: url("assets/dev/corner-wave.svg"); background-size:cover; mix-blend-mode:screen; opacity:0.92; transform: rotate(6deg); pointer-events:none; }
.hero-inner{ transform: translateY(-4vh); }
.hero-inner{ transition: transform 0.3s cubic-bezier(.18,.9,.21,1); }
.hero-inner h1 { font-size:clamp(2.2rem, 5.2vw, var(--hero-max)); font-weight:900; line-height:0.95; opacity:0; transform:translateY(18px); animation:fadeUp 0.8s ease forwards; text-transform:uppercase; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing:0.02em; text-shadow: 0 2px 10px rgba(0,0,0,0.22); }
.hero-inner h1:nth-child(1){ background-image: linear-gradient(90deg, rgba(250,250,250,0.96), #4a9eff); }
.hero-inner h1:nth-child(2){ background-image: linear-gradient(90deg, rgba(250,250,250,0.95), rgb(71, 126, 255)); }
.hero-inner h1:nth-child(3){ background-image: linear-gradient(90deg, rgba(250,250,250,0.95), rgb(145, 120, 255)); }
.hero-inner h1:nth-child(4){ background-image: linear-gradient(90deg, rgba(250,250,250,0.95), rgb(255, 162, 224)); }
.delay1 { animation-delay: 0.1s; }
.delay2 { animation-delay: 0.25s; }
.delay3 { animation-delay: 0.4s; }
.hero-left .line.delay4{ position:relative; left:-51px; display:inline-block; }
.delay4 { animation-delay: 0.55s; }


.scroll-indicator { display:block; text-align:center; font-size:1.8rem; margin-bottom:120px; color:var(--muted); text-decoration:none; opacity:0.7; position:relative; }
.scroll-indicator:hover { opacity:1; color:var(--accent); }

/* sections */
.section { max-width:900px; margin:auto; padding:80px 24px; }
.section.wide { max-width:1200px; }
/* Ensure sections don't scroll behind fixed elements: add scroll margin */
.section, .hero { scroll-margin-top: 86px; }
h2 { font-size:2rem; margin-bottom:16px; letter-spacing:0.02em; }
h2::after{ content:""; display:none; width:48px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(121,255,225,0.7)); margin-top:12px; border-radius:2px; }
.bodybold { font-weight:600; margin-bottom:12px; }
.section-text { color:var(--muted); max-width:680px; line-height:1.6; }

.btn{ display:inline-block; padding:10px 18px; border:1px solid rgba(255,255,255,0.08); color:var(--muted); text-decoration:none; border-radius:8px; transition: all 0.18s ease; background: rgba(255,255,255,0.02); backdrop-filter: blur(2px); }
.btn:hover{ color:var(--accent); transform:translateY(-3px); border-color: rgba(121,255,225,0.2); background: linear-gradient(90deg, rgba(121,255,225,0.06), rgba(130,170,255,0.04)); }

/* Discography & Tracks */
.albums .album-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:20px; align-items:start; padding-top:12px; }
.album-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; box-shadow: 0 14px 40px rgba(0,0,0,0.55); transition: transform .18s ease, box-shadow .18s ease; }
.album-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.65); }
.album-card img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }
.album-meta h3{ font-size:1rem; margin:0; font-weight:700; color:#fff; }
.album-meta .muted{ color:var(--muted); font-size:0.88rem; margin-top:4px; }

/* Tracks */
.track-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:28px; padding-top:18px; align-items:start; }
.track-card { width:100%; }
.thumbnail { height:260px; border-radius:12px; overflow:hidden; min-width:260px; box-shadow: 0 12px 40px rgba(0,0,0,0.55); background:#060606; position:relative; display:block; }
.thumbnail img.thumb-poster { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.thumbnail .thumb-overlay { position:absolute; inset:auto 0 0 0; padding:16px; background: linear-gradient(to top, rgba(8,9,12,0.75), transparent 55%); color:#fff; display:flex; flex-direction:column; gap:6px; }
.thumbnail .category { color: var(--accent); font-size: 0.78rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; }
.thumb-overlay h3 { margin:0; font-size:1.08rem; font-weight:800; }
.thumb-overlay p { margin:0; color:var(--muted); font-size:0.9rem; }

/* Play button */
.play-btn { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:56px; height:56px; border-radius:50%; border:none; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition: transform .12s ease, background .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.play-btn svg { width:20px; height:20px; }
.thumbnail:hover .play-btn { transform: translate(-50%,-50%) scale(1.06); background: linear-gradient(90deg, rgba(255,154,154,0.12), rgba(130,170,255,0.08)); }
.play-btn.playing { background: rgba(154, 201, 255, 0.95); color:#111; }
.play-btn.playing svg { opacity:0.9; }

/* Playing state */
.thumbnail.playing { box-shadow: 0 18px 60px rgba(255,154,154,0.07), 0 6px 30px rgba(0,0,0,0.7); transform: translateY(-4px); }
.thumbnail.playing .thumb-overlay h3 { color:#fff; }

/* Make sure videos don't overscale and keep a subtle desaturation */
.thumbnail video { width:100%; height:100%; object-fit:cover; filter: brightness(0.9) saturate(0.9); transition: transform .5s ease, filter .5s ease; }
.thumbnail:hover video { transform: scale(1.02); }

/* focus / accessibility */
.thumbnail:focus { outline: 3px solid rgba(121,255,225,0.12); outline-offset:2px; }

/* responsive tweaks */
@media (max-width:900px){ .thumbnail { height:220px; } .play-btn { width:48px; height:48px; } }
@media (max-width:640px){ .album-grid { grid-template-columns: 1fr 1fr; } .track-grid { grid-template-columns: 1fr; } }

/* footer */
.footer-brand{ margin-top:20px; }
footer { padding:80px 24px; text-align:center; }
.socials{ display:flex; justify-content:center; gap:18px; margin-bottom:16px; }
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:99px; background:rgba(255,255,255,0.02); }
.socials img { width:18px; display:block; opacity:0.76; filter:brightness(1.05); }
.socials img:hover { opacity:1; transform:translateY(-2px); }

.contact .btn{ padding:12px 20px; font-weight:600; }
/* small screens */
@media (max-width:900px){
  .fixed{ left:14px; top:12px; right:auto; }
  #navbar a{ font-size:0.78rem; }
  .hero{ padding-left:6vw; }
  .hero-inner{ display:block; grid-template-columns: none; padding: 24px 8px; }
  .section, .hero { scroll-margin-top: 68px; }
  .hero-left{ padding-right:0; }
  /* .hero-right removed: no additional spacing needed */
  .avatar-frame{ width:220px; height:220px; }
  .avatar{ width:150px; height:150px; }
  .hero-inner h1{ font-size:clamp(2.4rem, 12vw, 4.2rem); }
  .hero-left .line.delay4{ left:-10px; }
}

@media (max-width:420px){
  .hero-left .line.delay4{ left:0px; }
}

/* hide right-side nav on very small screens */
@media (max-width:640px){
  .fixed{ display:none; }
  .top-left{ left:10px; top:10px; }
}

/* scroll indicator: bottom-centered */
.hero .scroll-indicator{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; font-size:1.8rem; opacity:0.9; transition: transform 0.18s ease; }
.hero .scroll-indicator:hover{ transform:translateX(-50%) translateY(-6px); color:var(--accent); }

/* top-left logo */
.top-left{ position:fixed; left:28px; top:28px; z-index:999; }
.top-left .logo{ color:var(--muted); font-size:0.98rem; text-decoration:none; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.02); box-shadow:0 2px 8px rgba(0,0,0,0.45); }
.top-left .logo:hover{ color:var(--accent); }

/* helper */
@keyframes fadeUp { 
  to { opacity:1; transform:translateY(0); } 
}

@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Social Networks Grid */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  margin-top: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.social-window-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: none;
  text-decoration: none;
  color: var(--muted);
  transition: all 0.3s ease;
  cursor: pointer;
  animation: floating 3s ease-in-out infinite;
}

.social-window-btn:hover {
  transform: translateY(-12px);
}

.social-window-btn:hover .social-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 8px 16px rgba(255,154,154,0.4));
}

.social-window-btn p {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  margin: 0;
  display: none;
}

/* Social Modal */
.social-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  animation: fadeUp 0.3s ease;
}

.social-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-modal-content {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: var(--accent);
}

.modal-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.modal-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.modal-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,154,154,0.3);
}

/* Credits List */
.credits-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.credits-list li {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.6;
  transition: all 0.3s ease;
}

.credits-list li:hover {
  border-left-color: #fff;
  background: linear-gradient(180deg, rgba(255,154,154,0.04), rgba(255,154,154,0.02));
  transform: translateX(6px);
}

.credits-list strong {
  color: #fff;
  display: block;
  margin-bottom: 6px;
}

:root{
--bg:#0b0b0b;
--bg-2:#0f1723;
--accent:rgb(154, 198, 255);
--muted:#9aa0a6;
--hero-max:6rem; 
--role-glow-color: rgb(170, 221, 255); /* Color pastel rosa/púrpura para el resplandor */
}

/* --- Efecto "highlighted-role" --- */
.highlighted-role{
color: var(--accent);
cursor: pointer;

border-radius: 4px;
transition: 
color 0.3s ease, 
background-color 0.3s ease, 
text-shadow 0.3s ease;
display: inline-block; 
}

/* Efecto al pasar el ratón (hover) */
.highlighted-role:hover {
color: #fff; 
background-color: rgba(255, 154, 154, 0.1); /* Fondo sutil para el resaltado */
text-shadow: 
0 0 4px rgba(255, 255, 255, 0.6), 
0 0 8px var(--accent); /* Resplandor usando el color de acento */
transform: translateY(-1px); /* Un pequeño levantamiento para un efecto más dinámico */
}

/* --- ABOUT ME 2 COLUMNAS --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr auto; /* texto a la izquierda, imagen a la derecha */
  align-items: start;
  gap: 70px;
  max-width: 1000px;
  margin: auto;
}

.about-text-content {
  text-align: left;
  max-width: 600px;
  justify-self: start;  /* importante: pega el texto a la izquierda */
  padding-left: 0;      /* elimina el padding mínimo que no sirve */
}



.about-text-content h2,
.about-text-content .bodybold,
.about-text-content .section-text {
  text-align: left;
}

.about-text-content h2::after {
  margin-left: 0;
}

.about-image-container {
  display: flex;
  justify-content: flex-end; /* imagen a la derecha */
  align-items: flex-start;
}

.profile-image {
  width: 250px; /* tamaño fijo decente */
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(255, 170, 220, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* responsive para móviles */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr; /* una columna en móvil */
    gap: 30px;
  }

  .about-image-container {
    justify-content: center;
  }

  .profile-image {
    width: 180px;
  }
}

.socials-sm a.github img {
  filter: invert(100%) brightness(150%);
  transition: filter 0.2s ease;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center; /* lo centra horizontalmente */
  gap: 10px; /* espacio entre logo y texto */
}

.footer-logo {
  width: 100px;   /* ajusta al tamaño que quieras */
  height: 100px;
  object-fit: contain;
}

/* --- Scroll indicator animado --- */
.scroll-indicator {
  display: block;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 120px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
  position: relative;
  transform: translateY(-20px);
  animation: fadeBounce 1.6s ease forwards, bounceArrow 2s infinite 1.6s;
}

@keyframes fadeBounce {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

/* Hover glow */
.scroll-indicator:hover {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent), 0 0 12px rgba(255,170,220,0.8);
}

/* --- Responsive ajustes extra --- */
@media (max-width: 600px) {
  .thumbnail {
    height: 220px; /* reduce altura de los videos */
  }
  .footer-content {
    flex-direction: column;
    gap: 6px;
  }
  .footer-logo {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 420px) {
  .hero-left h1 {
    font-size: clamp(1.8rem, 9vw, 3rem);
  }
}

.secret-link {
  text-decoration: none;       /* quita subrayado */
  border-bottom: none;         /* por si tiene borde */
  color: inherit;              /* mantiene el color original */
  display: inline-block;       /* evita que se comporte como texto plano */
}

/* ... mantener tus variables :root ... */

/* EFECTO GLITCH PARA EL LOGO PORTER */
.secret-link {
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.secret-link:hover {
    animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
    color: #fff;
    text-shadow: 2px 0 var(--accent), -2px 0 #ff8282;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

/* MEJORA DE THUMBNAILS */
.thumbnail {
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.thumbnail:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent);
}

.thumb-overlay {
    background: linear-gradient(to top, rgba(11, 11, 11, 0.9), transparent 80%);
    backdrop-filter: blur(2px);
}

.category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 4px;
    display: block;
}

/* IMAGEN DE PERFIL ANIMADA */
.profile-image {
    width: 250px;
    border-radius: 12px;
    filter: grayscale(0.2);
    transition: all 0.5s ease;
    box-shadow: 0 0 20px rgba(255, 154, 154, 0.2);
}

.profile-image:hover {
    filter: grayscale(0);
    box-shadow: 0 0 30px rgba(255, 154, 154, 0.4);
    transform: scale(1.05);
}

/* BOTÓN PRIMARIO */
.btn.primary {
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-weight: 700;
}

.btn.primary:hover {
    background: #fff;
    transform: translateY(-3px);
}


html {
    scroll-behavior: smooth;
}

/* Indica la miniatura que está reproduciendo */
.thumbnail.playing {
    box-shadow: 0 0 40px rgba(255,154,154,0.18);
    border-color: var(--accent);
    transform: translateY(-6px) scale(1.025);
    transition: box-shadow 0.28s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Añade esto a tu style.css */
.scanlines {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 9999;
}

.hero-status-bar {
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: #00ff41; /* Verde Matrix/Retro */
    margin-top: 10px;
    opacity: 0.8;
}

.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #00ff41;
    border-radius: 50%;
    margin-right: 5px;
    animation: blink 1s infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0b0b0b; }
::-webkit-scrollbar-thumb { 
    background: #333; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: #fff; }

body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
    z-index: 9998;
}

/* Textura de grano corregida */
body::before {
    content: "";
    position: fixed; /* Cambiado de absolute a fixed */
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-image: url('https://raw.githubusercontent.com/f7re/noise/main/noise.png');
    opacity: 0.04;
    pointer-events: none;
    z-index: 9999;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

footer {
    padding-bottom: 40px; /* Un poco de aire bajo el logo */
    position: relative;
    z-index: 10;
}

footer {
    width: 100%;
    padding: 40px 0; /* Espacio interno para que respire */
    background-color: #000000; /* Asegúrate de que tenga el fondo de tu web */
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(175, 175, 175, 0.05); /* Una línea sutil estilo Porter */
    position: relative;
    z-index: 10;
}

.footer-content {
    text-align: center;
}

.footer-logo {
    max-width: 120px; /* Ajusta según tu logo */
    margin-bottom: 20px;
    filter: brightness(0.8); /* Un toque elegante */
}

footer p {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Evita que nada empuje el ancho o el alto más de lo debido */
    overflow-x: hidden; 
    /* Esta línea es clave: */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main {
    flex: 1; /* Esto empuja el footer al fondo si hay poco contenido */
}


/* --- Fondo de Consola Kobii-chan (ItzDev Style) --- */
.kobii-console-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Muy importante para que no haya scroll extra */
    z-index: -2; /* Detrás de todo */
    background-color: #0b0b0b; /* Fondo base oscuro */
    /* Efecto de degradado para que se desvanezca por arriba y los lados */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.1) 15%,
        rgba(0,0,0,0.8) 50%,
        rgba(0,0,0,0.1) 85%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.1) 15%,
        rgba(0,0,0,0.8) 50%,
        rgba(0,0,0,0.1) 85%,
        transparent 100%
    );
}

.kobii-console-background::before {
    content: attr(data-content); /* El código se generará con JS */
    display: block;
    position: absolute;
    bottom: 0; /* Empieza desde abajo */
    left: 0;
    width: 100%;
    font-family: 'Fira Code', monospace; /* Tu fuente de código */
    font-size: 0.8rem; /* Tamaño de las líneas */
    line-height: 1.2;
    color: #ffffff; /* Color cian "retro-tech" */
    white-space: pre-wrap; /* Mantiene saltos de línea y espacios */
    opacity: 0.05; /* Muy sutil */
    transform: translateY(0); /* Posición inicial */
    animation: kobiiScroll 60s linear infinite; /* Animación de scroll infinito */
}

@keyframes kobiiScroll {
    from {
        transform: translateY(0); /* Empieza sin desplazamiento */
    }
    to {
        transform: translateY(-100%); /* Desplaza el contenido hacia arriba */
    }
}

.kobii-console-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #0b0b0b;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Las líneas nacen abajo */
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;

    opacity: 0.15; /* Ajusta esto para que se vea más o menos */
}

.console-line {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    /* Efecto de escritura simple */
    border-right: 2px solid transparent;
    animation: typing 1s steps(40, end);
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Estilo del panel de navegación lateral */
.fixed.right-panel {
    background: rgba(11, 11, 11, 0.7); /* Fondo oscuro semi-transparente */
    backdrop-filter: blur(10px);      /* Efecto de desenfoque estilo cristal */
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.05); /* Línea divisoria muy fina */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}

/* Para que los iconos y etiquetas se vean mejor sobre el código */
.nav-list a {
    position: relative;
    z-index: 5;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}

.nav-list a:hover, 
.nav-list a.active {
    color: #ffffff; /* Color cian de la consola */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}