/* =========================================================
   SBSDYNAMICS THEME
   ========================================================= */

:root {

  --bg:
    #050816;

  --bg-soft:
    #080d1f;

  --panel:
    rgba(15, 23, 42, 0.86);

  --panel-strong:
    rgba(15, 23, 42, 0.95);

  --blue:
    #2563eb;

  --blue-medium:
    #3b82f6;

  --blue-light:
    #60a5fa;

  --blue-lighter:
    #93c5fd;

  --blue-pale:
    #bfdbfe;

  --text:
    #e5e7eb;

  --text-bright:
    #f3f4f6;

  --muted:
    #9ca3af;

  --muted-light:
    #adb6c5;

  --border:
    rgba(148, 163, 184, 0.55);

}



/* =========================================================
   RESET / BASE
   ========================================================= */

* {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

}


body {

  margin:
    0;

  min-height:
    100vh;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}



/* =========================================================
   SKIP PRELOADER ON REFRESH
   ========================================================= */

html.skip-preloader
#preloader {

  display:
    none !important;

}



/* =========================================================
   MAIN WEBSITE / TOPOLOGY
   ========================================================= */

#site-shell {

  position:
    relative;

  min-height:
    100vh;

  background:
    var(--bg);

}



/*
  Vanta inserts its canvas into the site shell.
*/

#site-shell
.vanta-canvas {

  z-index:
    0 !important;

}



/*
  Subtle overlay keeps the topology visible without making
  it interfere with text readability.
*/

#site-shell::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;


  background:

    radial-gradient(
      circle at 18% 12%,
      rgba(37, 99, 235, 0.07),
      transparent 34%
    ),

    radial-gradient(
      circle at 82% 75%,
      rgba(96, 165, 250, 0.035),
      transparent 35%
    ),

    linear-gradient(
      to bottom,
      rgba(5, 8, 22, 0.08),
      rgba(5, 8, 22, 0.34)
    );

}



/*
  Website UI sits above the Vanta canvas.
*/

#site-shell > header,
#site-shell > main,
#site-shell > footer {

  position:
    relative;

  z-index:
    2;

}



/* =========================================================
   PRELOADER
   ========================================================= */

#preloader {

  position:
    fixed;

  inset:
    0;

  background:
    #050816;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  opacity:
    1;

  pointer-events:
    auto;

  transition:
    opacity
    0.5s
    ease-out;

}


#preloader.preloader-hidden {

  opacity:
    0;

  pointer-events:
    none;

}


#preloader-bg {

  position:
    absolute;

  inset:
    0;

  opacity:
    0;

  animation:
    preloaderBgIn
    1s
    ease-out
    forwards;

  animation-delay:
    2s;

}


@keyframes preloaderBgIn {

  from {

    opacity:
      0;

  }


  to {

    opacity:
      1;

  }

}


.preloader-content {

  position:
    relative;

  z-index:
    1;

  text-align:
    center;

}


.preloader-logo img {

  width:
    240px;

  height:
    240px;

  object-fit:
    contain;

  transform: translateX(-12px);
}


.preloader-button {

  margin-top:
    20px;

  padding:
    10px 22px;

  border-radius:
    999px;

  border:
    1px solid #4b5563;

  background:
    rgba(15, 23, 42, 0.9);

  color:
    #e5e7eb;

  font-size:
    0.95rem;

  cursor:
    pointer;

  opacity:
    0;

  transform:
    translateY(10px);

  transition:
    background 0.15s,
    border-color 0.15s;

  animation:
    preloaderBtnIn
    0.6s
    ease-out
    forwards;

  animation-delay:
    2.5s;

}


.preloader-button:hover {

  background:
    #2563eb;

  border-color:
    #2563eb;

}


@keyframes preloaderBtnIn {

  from {

    opacity:
      0;

    transform:
      translateY(10px);

  }


  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


.preloader-logo.spin-once img {

  animation:
    preloaderSpinOnce
    1.5s
    ease-out
    forwards;

}


@keyframes preloaderSpinOnce {

  from {

    transform:
      rotateY(0deg);

  }


  to {

    transform:
      rotateY(360deg);

  }

}



/* =========================================================
   HEADER
   ========================================================= */

header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    12px 16px;

  position:
    sticky;

  top:
    0;

  z-index:
    50;

  gap:
    16px;

  background:
    rgba(5, 8, 22, 0.80);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid
    rgba(96, 165, 250, 0.24);

}



/* =========================================================
   BRAND
   ========================================================= */

.logo-area {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.logo img {

  width:
    48px;

  height:
    48px;

  object-fit:
    contain;

  animation:
    flip360
    5s
    ease-in-out
    infinite;

  transform-style:
    preserve-3d;

}


.logo-text {

  font-weight:
    600;

  letter-spacing:
    0.08em;

  font-size:
    0.95rem;

  text-transform:
    uppercase;

  color:
    #e5e7eb;

}


@keyframes flip360 {

  0% {

    transform:
      rotateY(0deg);

  }


  50% {

    transform:
      rotateY(180deg);

  }


  100% {

    transform:
      rotateY(360deg);

  }

}



/* =========================================================
   ANIMATED TECH BUTTON SYSTEM
   ========================================================= */

.animated-btn {

  --button-background:
    rgba(15, 23, 42, 0.30);

  --button-hover-background:
    rgba(37, 99, 235, 0.25);

  --button-border:
    #475569;

  --button-highlight:
    #60a5fa;


  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    none;

  outline:
    none;

  background:
    var(--button-background);

  color:
    #e5e7eb;

  font-family:
    inherit;

  font-weight:
    600;

  letter-spacing:
    0.04em;

  text-decoration:
    none;

  cursor:
    pointer;


  clip-path:
    polygon(
      7% 0,
      100% 0,
      100% 78%,
      93% 100%,
      0 100%,
      0 22%
    );


  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.2s ease,
    box-shadow 0.4s ease;

}



/* SVG */

.animated-btn
svg {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  fill:
    none;

  pointer-events:
    none;

}



/* STATIC BORDER */

.animated-btn
.tech-border-base {

  fill:
    none;

  stroke:
    var(--button-border);

  stroke-width:
    1.4;

  vector-effect:
    non-scaling-stroke;

  transition:
    stroke 0.4s ease;

}



/* MOVING BORDER */

.animated-btn
.tech-border-highlight {

  fill:
    none;

  stroke:
    var(--button-highlight);

  stroke-width:
    1.8;

  stroke-dasharray:
    24 76;

  stroke-dashoffset:
    24;

  vector-effect:
    non-scaling-stroke;

  transition:
    stroke-dashoffset 0.9s ease-in-out,
    stroke 0.4s ease;

}



/* TEXT */

.animated-btn
.btn-label {

  position:
    relative;

  z-index:
    2;

  pointer-events:
    none;

}



/* HOVER */

.animated-btn:hover {

  background:
    var(--button-hover-background);

  transform:
    translateY(-2px);

}


.animated-btn:hover
.tech-border-highlight {

  stroke-dashoffset:
    -76;

}



/* CLICK */

.animated-btn:active {

  transform:
    translateY(0)
    scale(0.97);

}



/* KEYBOARD */

.animated-btn:focus-visible {

  outline:
    2px solid
    #60a5fa;

  outline-offset:
    4px;

}



/* DISABLED */

.animated-btn:disabled {

  opacity:
    0.55;

  cursor:
    not-allowed;

  transform:
    none;

  box-shadow:
    none;

}



/* =========================================================
   NAVIGATION
   ========================================================= */

nav {

  display:
    flex;

  gap:
    7px;

  flex-wrap:
    wrap;

}


.nav-tech-btn {

  --button-background:
    rgba(15, 23, 42, 0.42);

  --button-hover-background:
    rgba(37, 99, 235, 0.22);

  --button-border:
    #475569;

  --button-highlight:
    #60a5fa;


  width:
    92px;

  height:
    38px;

  font-size:
    0.82rem;

}


.nav-tech-btn:hover {

  box-shadow:

    0 0 10px
    rgba(37, 99, 235, 0.20),

    0 0 22px
    rgba(37, 99, 235, 0.08);

}


.nav-tech-btn.active {

  --button-background:
    rgba(37, 99, 235, 0.38);

  --button-border:
    #3b82f6;

  --button-highlight:
    #93c5fd;


  color:
    #ffffff;


  box-shadow:

    0 0 10px
    rgba(37, 99, 235, 0.28),

    inset
    0 0 14px
    rgba(37, 99, 235, 0.12);

}



/* =========================================================
   LARGE TECH BUTTONS
   ========================================================= */

.tech-btn {

  width:
    180px;

  height:
    54px;

  font-size:
    0.9rem;

}



/* PRIMARY */

.tech-btn-primary {

  --button-background:
    rgba(37, 99, 235, 0.18);

  --button-hover-background:
    rgba(37, 99, 235, 0.40);

  --button-border:
    #3b82f6;

  --button-highlight:
    #bfdbfe;

}


.tech-btn-primary:hover {

  box-shadow:

    0 0 12px
    rgba(37, 99, 235, 0.30),

    0 0 28px
    rgba(37, 99, 235, 0.15);

}



/* SECONDARY */

.tech-btn-secondary {

  --button-background:
    rgba(15, 23, 42, 0.45);

  --button-hover-background:
    rgba(148, 163, 184, 0.14);

  --button-border:
    #64748b;

  --button-highlight:
    #e2e8f0;

}


.tech-btn-secondary:hover {

  box-shadow:

    0 0 12px
    rgba(148, 163, 184, 0.15),

    0 0 24px
    rgba(148, 163, 184, 0.08);

}



/* =========================================================
   WORLD CLOCKS
   ========================================================= */

.timezones {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  justify-content:
    flex-end;

}


.tz-item {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    6px 8px;

  border-radius:
    10px;

  background:
    rgba(15, 23, 42, 0.84);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  border:
    1px solid
    rgba(148, 163, 184, 0.55);

}



/* =========================================================
   ANALOG CLOCK
   ========================================================= */

.clock {

  position:
    relative;

  width:
    48px;

  height:
    48px;

  border-radius:
    50%;

  background:
    #f9fafb;

  border:
    2px solid #111827;

  box-shadow:
    0 0 4px
    rgba(0, 0, 0, 0.4);

}


.clock-center {

  position:
    absolute;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #111827;

  top:
    50%;

  left:
    50%;

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

  z-index:
    5;

}


.clock-tick {

  position:
    absolute;

  width:
    1px;

  height:
    4px;

  background:
    #6b7280;

  top:
    2px;

  left:
    50%;

  transform-origin:
    50% 21px;

}


.hand {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  transform-origin:
    50% 100%;

  transform:
    translate(-50%, -100%)
    rotate(0deg);

}


.hand.hour {

  width:
    3px;

  height:
    30%;

  background:
    #111827;

}


.hand.minute {

  width:
    2px;

  height:
    38%;

  background:
    #111827;

}


.hand.second {

  width:
    2px;

  height:
    40%;

  background:
    #ef4444;

}


.tz-text {

  display:
    flex;

  flex-direction:
    column;

}


.tz-city {

  font-size:
    0.75rem;

  font-weight:
    700;

}


.tz-digital {

  font-size:
    0.75rem;

  color:
    #9ca3af;

  font-family:
    "Courier New",
    monospace;

}



/* =========================================================
   MAIN PAGE LAYOUT
   ========================================================= */

main {

  padding:
    28px 0 45px;

  position:
    relative;

  min-height:
    calc(100vh - 160px);

}


.page {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  opacity:
    0;

  transform:
    translateY(10px);

  pointer-events:
    none;

  visibility:
    hidden;

  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;

}


.active-page {

  opacity:
    1;

  transform:
    translateY(0);

  pointer-events:
    auto;

  visibility:
    visible;

}


.page-inner {

  max-width:
    1040px;

  margin:
    0 auto;

  padding:
    0 16px;

}



/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.section-heading {

  font-size:
    1.8rem;

  font-weight:
    700;

  margin-top:
    0;

  margin-bottom:
    4px;

}


.section-heading-sm {

  font-size:
    1.05rem;

  font-weight:
    600;

  margin-top:
    0;

  margin-bottom:
    4px;

}


.section-subtitle {

  font-size:
    0.95rem;

  color:
    #a8b0bd;

  margin-bottom:
    20px;

  max-width:
    640px;

  line-height:
    1.6;

}


.accent {

  color:
    #60a5fa;

}


.inline-link {

  color:
    #93c5fd;

  text-decoration:
    none;

}


.inline-link:hover {

  color:
    #bfdbfe;

  text-decoration:
    underline;

}



/* =========================================================
   PILLS
   ========================================================= */

.pill-list {

  list-style:
    none;

  padding-left:
    0;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

}


.pill {

  font-size:
    0.8rem;

  padding:
    4px 10px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(148, 163, 184, 0.60);

  background:
    rgba(15, 23, 42, 0.80);

  backdrop-filter:
    blur(8px);

}



/* =========================================================
   HOME
   ========================================================= */

.home-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 1.05fr);

  gap: 30px;

  align-items: center;
}

#home .page-inner {
  max-width: 1120px;
}


.home-title {

  font-size:
    2.1rem;

  margin-top:
    0;

  margin-bottom:
    10px;

}


.home-subtitle {

  font-size:
    0.98rem;

  color:
    #adb6c5;

  margin-bottom:
    18px;

  line-height:
    1.65;

}


.home-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin-bottom:
    18px;

}


.home-now {

  font-size:
    0.9rem;

  color:
    #b1b9c6;

  border-left:
    3px solid
    #2563eb;

  padding:
    10px 12px;

  background:
    rgba(5, 8, 22, 0.30);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

}



/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero-image {

  position:
    relative;

  width:
    100%;

  aspect-ratio:
    16 / 9;

  border-radius:
    16px;

  background-image:
    linear-gradient(
      135deg,
      #1d4ed8,
      #0f172a
    );

  overflow:
    hidden;

  box-shadow:
    0 22px 45px
    rgba(0, 0, 0, 0.42);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-start;

  border:
    1px solid
    rgba(96, 165, 250, 0.22);

}


.hero-image-img {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.hero-image-label {

  position:
    relative;

  z-index:
    1;

  margin:
    12px;

  padding:
    4px 10px;

  font-size:
    0.75rem;

  border-radius:
    999px;

  background:
    rgba(15, 23, 42, 0.82);

  border:
    1px solid
    rgba(148, 163, 184, 0.7);

  backdrop-filter:
    blur(8px);

}



/* =========================================================
   ABOUT
   ========================================================= */

.about-layout {

  display:
    grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.5fr);

  gap:
    24px;

  align-items:
    flex-start;

}


.about-photo-wrap {

  display:
    flex;

  justify-content:
    center;

}


.about-photo {
  width: 245px;
  height: 245px;

  max-width: 100%;

  border-radius: 50%;

  padding: 4px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #60a5fa
    );

  box-shadow:
    0 0 30px
    rgba(37, 99, 235, 0.16);
}


.about-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  border-radius: 50%;

  transform: scale(1.18);
}


.about-text {

  padding:
    18px;

  border-radius:
    16px;

  background:
    rgba(5, 8, 22, 0.34);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

}


.about-section {

  margin-top:
    18px;

}


.about-section p {

  color:
    #c5cbd4;

  line-height:
    1.6;

}



/* =========================================================
   PROJECTS
   ========================================================= */

.projects-grid {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    18px;

  margin-top:
    6px;

}


.project-card {

  display:
    grid;

  grid-template-columns:
    180px
    minmax(0, 1fr);

  gap:
    16px;

  padding:
    14px;

  border-radius:
    16px;

  background:
    rgba(15, 23, 42, 0.84);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  border:
    1px solid
    rgba(148, 163, 184, 0.42);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.project-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(96, 165, 250, 0.75);

  box-shadow:

    0 14px 30px
    rgba(0, 0, 0, 0.25),

    0 0 20px
    rgba(37, 99, 235, 0.08);

}



/* PROJECT IMAGE */

.project-image-wrap {

  border-radius:
    14px;

  overflow:
    hidden;

  background:
    #020617;

  min-height:
    150px;

}


.project-image-wrap img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;

}



/* PROJECT HEADER */

.project-heading-row {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

}


.project-title {

  font-size:
    1.1rem;

  font-weight:
    600;

  margin:
    0 0 6px;

}



/* STATUS */

.project-status {

  font-size:
    0.70rem;

  color:
    #93c5fd;

  white-space:
    nowrap;

  padding:
    4px 8px;

  border:
    1px solid
    rgba(96, 165, 250, 0.45);

  background:
    rgba(37, 99, 235, 0.12);

  clip-path:
    polygon(
      8% 0,
      100% 0,
      100% 75%,
      92% 100%,
      0 100%,
      0 25%
    );

}



/* DESCRIPTION */

.project-description {

  font-size:
    0.9rem;

  color:
    #d1d5db;

  margin-bottom:
    10px;

  line-height:
    1.55;

}



/* LAYERS */

.project-layers h3 {

  font-size:
    0.9rem;

  margin:
    0 0 4px;

}


.project-layers ul {

  padding-left:
    16px;

  margin:
    0;

  font-size:
    0.85rem;

  color:
    #aab2bf;

  line-height:
    1.55;

}



/* PROJECT LINKS */

.project-links {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    14px;

}


.project-link {

  color:
    #93c5fd;

  text-decoration:
    none;

  font-size:
    0.84rem;

  font-weight:
    600;

  letter-spacing:
    0.03em;

}


.project-link:hover {

  color:
    #bfdbfe;

  text-decoration:
    underline;

}



/* =========================================================
   CONTACT
   ========================================================= */

.contact-layout {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(0, 0.9fr);

  gap:
    24px;

  align-items:
    flex-start;

}


.contact-main {

  padding:
    18px;

  border-radius:
    16px;

  background:
    rgba(5, 8, 22, 0.34);

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);

}


.contact-form {

  margin-top:
    6px;

}


.form-field {

  display:
    flex;

  flex-direction:
    column;

  margin-bottom:
    12px;

}


.form-field label {

  font-size:
    0.85rem;

  margin-bottom:
    4px;

}


.form-field input,
.form-field textarea {

  width:
    100%;

  border-radius:
    10px;

  border:
    1px solid #4b5563;

  padding:
    9px 10px;

  background:
    rgba(15, 23, 42, 0.88);

  color:
    #e5e7eb;

  font-family:
    inherit;

  font-size:
    0.9rem;

  outline:
    none;

  backdrop-filter:
    blur(8px);

}


.form-field textarea {

  resize:
    vertical;

  min-height:
    110px;

}


.form-field input:focus,
.form-field textarea:focus {

  border-color:
    #2563eb;

  box-shadow:
    0 0 0 2px
    rgba(37, 99, 235, 0.12);

}


.form-field input::placeholder,
.form-field textarea::placeholder {

  color:
    #64748b;

}


.hidden-field {

  display:
    none !important;

}


.contact-tech-btn {

  margin-top:
    4px;

}



/* =========================================================
   FORM STATUS
   ========================================================= */

.form-status {

  font-size:
    0.85rem;

  margin-top:
    8px;

  min-height:
    1.2em;

  border-radius:
    8px;

  padding:
    0;

}


.form-status.success {

  color:
    #34d399;

  background:
    rgba(52, 211, 153, 0.1);

  border:
    1px solid
    rgba(52, 211, 153, 0.3);

  padding:
    8px 12px;

}


.form-status.error {

  color:
    #f87171;

  background:
    rgba(248, 113, 113, 0.1);

  border:
    1px solid
    rgba(248, 113, 113, 0.3);

  padding:
    8px 12px;

}


.form-note {

  font-size:
    0.8rem;

  color:
    #9ca3af;

  margin-top:
    8px;

}



/* =========================================================
   CONTACT SIDE
   ========================================================= */

.contact-side {

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

}


.contact-card {

  padding:
    14px;

  border-radius:
    16px;

  border:
    1px solid
    rgba(148, 163, 184, 0.45);

  background:
    rgba(15, 23, 42, 0.84);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size:
    0.9rem;

}


.resume-actions {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  margin-top:
    10px;

}


.resume-tech-btn {

  width:
    100%;

}


.link-list {

  list-style:
    none;

  padding-left:
    0;

  margin:
    6px 0 0;

  font-size:
    0.9rem;

}


.link-list
li + li {

  margin-top:
    6px;

}


.link-list a {

  color:
    #93c5fd;

  text-decoration:
    none;

}


.link-list a:hover {

  color:
    #bfdbfe;

  text-decoration:
    underline;

}



/* =========================================================
   MUSIC PLAYER
   ========================================================= */

.music-player {

  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    100;

  width:
    290px;

  padding:
    12px 14px;

  background:
    rgba(5, 8, 22, 0.90);

  border:
    1px solid
    rgba(96, 165, 250, 0.36);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);


  box-shadow:

    0 10px 30px
    rgba(0, 0, 0, 0.30),

    0 0 20px
    rgba(37, 99, 235, 0.09);


  clip-path:
    polygon(
      5% 0,
      100% 0,
      100% 86%,
      95% 100%,
      0 100%,
      0 14%
    );

}



/* MUSIC HEADER */

.music-top-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

}


.music-info {

  min-width:
    0;

  margin-bottom:
    10px;

}


.music-label {

  color:
    #60a5fa;

  font-size:
    0.60rem;

  font-weight:
    700;

  letter-spacing:
    0.16em;

  margin-bottom:
    3px;

}


.music-title {

  color:
    #f3f4f6;

  font-size:
    0.88rem;

  font-weight:
    600;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

}


.music-artist {

  color:
    #9ca3af;

  font-size:
    0.72rem;

  margin-top:
    1px;

}



/* =========================================================
   MUSIC ACTIVITY INDICATOR
   ========================================================= */

.music-indicator {

  display:
    flex;

  align-items:
    flex-end;

  gap:
    3px;

  width:
    20px;

  height:
    18px;

}


.music-indicator span {

  display:
    block;

  width:
    3px;

  height:
    4px;

  border-radius:
    2px;

  background:
    #475569;

}


.music-indicator.playing span {

  background:
    #60a5fa;

}


.music-indicator.playing
span:nth-child(1) {

  animation:
    musicBarOne
    0.8s
    ease-in-out
    infinite;

}


.music-indicator.playing
span:nth-child(2) {

  animation:
    musicBarTwo
    0.65s
    ease-in-out
    infinite;

}


.music-indicator.playing
span:nth-child(3) {

  animation:
    musicBarThree
    0.9s
    ease-in-out
    infinite;

}


@keyframes musicBarOne {

  0%,
  100% {

    height:
      4px;

  }


  50% {

    height:
      14px;

  }

}


@keyframes musicBarTwo {

  0%,
  100% {

    height:
      8px;

  }


  50% {

    height:
      18px;

  }

}


@keyframes musicBarThree {

  0%,
  100% {

    height:
      5px;

  }


  50% {

    height:
      12px;

  }

}



/* =========================================================
   MUSIC CONTROLS
   ========================================================= */

.music-controls {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.music-control-btn {

  flex:
    0 0 auto;

  width:
    34px;

  height:
    31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(96, 165, 250, 0.42);

  background:
    rgba(37, 99, 235, 0.10);

  color:
    #bfdbfe;

  cursor:
    pointer;

  font-family:
    inherit;

  font-size:
    0.72rem;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

}


.music-control-btn:hover {

  background:
    rgba(37, 99, 235, 0.30);

  border-color:
    #60a5fa;

  color:
    #ffffff;

}


.music-control-btn:focus-visible {

  outline:
    2px solid #60a5fa;

  outline-offset:
    2px;

}



/* =========================================================
   VOLUME
   ========================================================= */

.volume-control {

  flex:
    1;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

}


.volume-label {

  color:
    #64748b;

  font-size:
    0.56rem;

  letter-spacing:
    0.08em;

}


.music-volume {

  flex:
    1;

  min-width:
    0;

  height:
    4px;

  cursor:
    pointer;

  accent-color:
    #2563eb;

}


.volume-value {

  width:
    22px;

  text-align:
    right;

  color:
    #93c5fd;

  font-family:
    "Courier New",
    monospace;

  font-size:
    0.62rem;

}



/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  width:
    100%;

  padding:
    24px 16px;

  background:
    rgba(5, 8, 22, 0.80);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-top:
    1px solid
    rgba(96, 165, 250, 0.24);

}


.footer-inner {

  max-width:
    1040px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:
    center;

  gap:
    24px;

}



/* FOOTER BRAND */

.footer-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.footer-logo img {

  width:
    42px;

  height:
    42px;

  object-fit:
    contain;

}


.footer-name {

  color:
    #f3f4f6;

  font-size:
    0.88rem;

  font-weight:
    600;

}


.footer-title {

  margin-top:
    2px;

  color:
    #93c5fd;

  font-size:
    0.72rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}



/* FOOTER INFO */

.footer-info {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  align-items:
    center;

  gap:
    8px;

  color:
    #9ca3af;

  font-size:
    0.78rem;

}


.footer-info a {

  color:
    #b8c9e7;

  text-decoration:
    none;

  transition:
    color 0.2s ease;

}


.footer-info a:hover {

  color:
    #60a5fa;

}


.footer-divider {

  color:
    rgba(96, 165, 250, 0.48);

}


.footer-copyright {

  color:
    #737d8d;

  font-size:
    0.73rem;

  white-space:
    nowrap;

}



/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 900px) {


  header {

    flex-wrap:
      wrap;

    justify-content:
      space-between;

  }


  .timezones {

    justify-content:
      flex-start;

  }


  .home-layout,
  .about-layout,
  .contact-layout {

    grid-template-columns:
      minmax(0, 1fr);

  }


  .project-card {

    grid-template-columns:
      minmax(0, 1fr);

  }


  .project-image-wrap {

    max-height:
      300px;

  }


  .footer-inner {

    grid-template-columns:
      1fr;

    text-align:
      center;

  }


  .footer-brand {

    justify-content:
      center;

  }


  .footer-info {

    justify-content:
      center;

  }


}



/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 600px) {


  header {

    flex-direction:
      column;

    align-items:
      flex-start;

  }



  /* NAV */

  nav {

    order:
      2;

    width:
      100%;

  }


  .nav-tech-btn {

    width:
      calc(50% - 4px);

    height:
      40px;

  }



  /* CLOCKS */

  .timezones {

    order:
      3;

    width:
      100%;

  }



  /* HOME */

  .home-title {

    font-size:
      1.7rem;

  }


  .home-actions {

    flex-wrap:
      wrap;

    gap:
      10px;

  }



  /* BUTTONS */

  .tech-btn {

    width:
      165px;

    height:
      50px;

    font-size:
      0.82rem;

  }


  .resume-tech-btn {

    width:
      100%;

  }



  /* PROJECTS */

  .project-heading-row {

    flex-direction:
      column;

    gap:
      4px;

  }



  /* ABOUT / CONTACT */

  .about-text,
  .contact-main {

    padding:
      12px;

  }



  /* MUSIC */

  .music-player {

    right:
      10px;

    bottom:
      10px;

    width:
      min(
        260px,
        calc(100vw - 20px)
      );

    padding:
      10px 12px;

  }


  .music-title {

    font-size:
      0.8rem;

  }


  .music-control-btn {

    width:
      32px;

    height:
      30px;

  }



  /* FOOTER */

  .footer-info {

    flex-direction:
      column;

    gap:
      5px;

  }


  .footer-divider {

    display:
      none;

  }


}



/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {


  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

  }


  .logo img {

    animation:
      none;

  }


  .music-indicator.playing
  span {

    animation:
      none !important;

    height:
      8px;

  }


}