:root{ --bg-dark:#000000; }
*{box-sizing:border-box}
body{
  margin:0; padding:0; min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  position:relative; overflow:hidden;
  background:var(--bg-dark);
  font-family:Consolas, monospace; color:#fff;
}
#bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(1.05) contrast(1.02)}
.video-overlay{position:fixed;inset:0;z-index:1;background:rgba(0,0,0,0.28);pointer-events:none}
.container{position:relative;z-index:2;text-align:center;max-width:1100px;padding:40px;margin:0 auto;width:100%}
.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:1002;padding:10px 0;text-align:center;color:#dcdcdc;background:rgba(0,0,0,0.18);backdrop-filter:blur(6px);font-size:0.92rem}
.header{display:flex;align-items:center;gap:24px;justify-content:center;margin-bottom:18px}
.nav-tabs{display:inline-flex;gap:8px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);overflow:hidden;position:fixed;top:18px;right:18px;z-index:1001;padding:6px;backdrop-filter:blur(8px)}
.nav-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#f4f4f4;padding:10px 18px;font-size:15px;transition:background 160ms ease;border-radius:10px}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,0.16);color:#fff}
.nav-link:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,0.08)}
.content{color:#e8e8e8;font-size:20px;line-height:1.7;margin-top:10px;text-align:center;display:flex;flex-direction:column;align-items:center}
#socials .content{min-height:calc(100vh - 140px);display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:6px}
.social-links{display:grid;gap:12px;justify-items:center;margin-top:20px}
.social-links a{color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);transition:background 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}
.social-links a:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.28);transform:translateY(-2px);box-shadow:0 0 16px rgba(255,255,255,0.06)}

/* JS owns all display — nothing hidden/shown by CSS rules */
.home-logo{
  width:clamp(560px,72vw,1040px); height:auto; display:none;
  filter:drop-shadow(0 0 6px rgba(0,0,0,0.95)) drop-shadow(0 32px 64px rgba(0,0,0,0.95));
}
.small-logo{
  height:56px; width:auto; display:none; pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* Sections: hidden by default, .active = displayed */
.app-section{ display:none; width:100%; }
.app-section.active{ display:block; }

/* When a section is animating out it needs to sit fixed above everything */
.app-section.exiting{
  display:block;
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  z-index:10; pointer-events:none;
}

/* ─── Keyframes ─── */

/* First entry */
@keyframes kEntryRise{
  from{ opacity:0; transform:translateY(70px); }
  to  { opacity:1; transform:translateY(0);    }
}

/* Section exits: floats upward and fades */
@keyframes kSectionOut{
  from{ opacity:1; transform:translateY(0);    }
  to  { opacity:0; transform:translateY(-55px); }
}

/* Section enters: rises from below and fades in */
@keyframes kSectionIn{
  from{ opacity:0; transform:translateY(55px); }
  to  { opacity:1; transform:translateY(0);    }
}

/* Logo sinks down when going to socials */
@keyframes kLogoOut{
  from{ opacity:1; transform:translateY(0);    }
  to  { opacity:0; transform:translateY(55px); }
}

/* Logo rises up when returning home */
@keyframes kLogoIn{
  from{ opacity:0; transform:translateY(70px); }
  to  { opacity:1; transform:translateY(0);    }
}

/* Small logo fades in */
@keyframes kSmallIn{
  from{ opacity:0; }
  to  { opacity:0.98; }
}

/* ─── Animation classes ─── */
/* All tab transitions share the same duration & easing for sync */
.do-entry     { animation: kEntryRise  1000ms cubic-bezier(0.16,1,0.3,1) both; }
.do-sec-out   { animation: kSectionOut  600ms cubic-bezier(0.4,0,1,1)    both; }
.do-sec-in    { animation: kSectionIn   650ms cubic-bezier(0.16,1,0.3,1) both; }
.do-logo-out  { animation: kLogoOut     600ms cubic-bezier(0.4,0,1,1)    both; }
.do-logo-in   { animation: kLogoIn      650ms cubic-bezier(0.16,1,0.3,1) both; }
.do-small-in  { animation: kSmallIn     500ms ease-out                   both; }

@media(max-width:520px){
  .home-logo{ width:clamp(320px,80vw,600px); }
}