/* =====================================================================
   Glass Theme — dark aurora glassmorphism redesign
   Loaded after default.css / layout.css / media-queries.css so its
   rules win on equal specificity. See plan for rationale.
===================================================================== */

:root {
   --accent-teal: #11ABB0;
   --accent-orange: #F06000;
   --accent-purple: #7B61FF;

   --glass-bg: rgba(32, 35, 42, 0.42);
   --glass-bg-strong: rgba(36, 39, 47, 0.62);
   --glass-border: rgba(255, 255, 255, 0.16);
   --glass-border-strong: rgba(255, 255, 255, 0.28);
   --glass-blur: 20px;
   --glass-radius: 20px;
   --glass-radius-lg: 28px;
   --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   --glass-shadow-strong: 0 14px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);

   --text-light: #F2F4F5;
   --text-muted: rgba(242, 244, 245, 0.68);
}

/* ------------------------------------------------------------------ */
/* Aurora background layer
/* ------------------------------------------------------------------ */

html, body { background: #15171d; }

.aurora-bg {
   position: fixed;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   background: #15171d;
}
.aurora-bg span {
   position: absolute;
   display: block;
   border-radius: 50%;
   filter: blur(90px);
   opacity: 0.68;
   will-change: transform;
}
.aurora-bg span:nth-child(1) {
   width: 60vmax;
   height: 60vmax;
   top: -22vmax;
   left: -16vmax;
   background: radial-gradient(circle at 35% 35%, var(--accent-teal), transparent 70%);
   animation: auroraDrift1 34s ease-in-out infinite;
}
.aurora-bg span:nth-child(2) {
   width: 54vmax;
   height: 54vmax;
   top: 30vh;
   right: -18vmax;
   background: radial-gradient(circle at 60% 40%, var(--accent-purple), transparent 70%);
   animation: auroraDrift2 40s ease-in-out infinite;
}
.aurora-bg span:nth-child(3) {
   width: 50vmax;
   height: 50vmax;
   bottom: -20vmax;
   left: 20vw;
   background: radial-gradient(circle at 40% 60%, var(--accent-orange), transparent 70%);
   animation: auroraDrift3 28s ease-in-out infinite;
}

@keyframes auroraDrift1 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   50%      { transform: translate(6vw, 5vh) scale(1.08); }
}
@keyframes auroraDrift2 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   50%      { transform: translate(-5vw, 6vh) scale(1.1); }
}
@keyframes auroraDrift3 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   50%      { transform: translate(4vw, -4vh) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
   .aurora-bg span { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Base glass surfaces
/* ------------------------------------------------------------------ */

.glass-card {
   position: relative;
   background-color: var(--glass-bg);
   background-image:
      radial-gradient(circle at var(--mx, 25%) var(--my, 15%), rgba(255, 255, 255, var(--glare, 0)) 0%, transparent 55%),
      linear-gradient(155deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .05) 100%);
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
   backdrop-filter: blur(var(--glass-blur)) saturate(170%);
   border: 1px solid var(--glass-border);
   border-radius: var(--glass-radius-lg);
   box-shadow:
      0 18px 50px rgba(0, 0, 0, .38),
      0 2px 8px rgba(0, 0, 0, .25),
      inset 0 1px 0 rgba(255, 255, 255, .38),
      inset 0 -1px 0 rgba(0, 0, 0, .22);
   padding: 42px 48px;
   -webkit-transform: translateY(var(--ty, 0px));
   transform: translateY(var(--ty, 0px));
   -webkit-transition: -webkit-transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, background-image .2s linear;
   transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, background-image .2s linear;
}
.glass-card:hover {
   --ty: -4px;
   --glare: .22;
   box-shadow:
      0 26px 64px rgba(0, 0, 0, .46),
      0 4px 14px rgba(0, 0, 0, .3),
      inset 0 1px 0 rgba(255, 255, 255, .48),
      inset 0 -1px 0 rgba(0, 0, 0, .26);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .glass-card,
   #nav-wrap,
   .portfolio-item .item-wrap,
   .portfolio-item .item-wrap .overlay,
   #contact input, #contact textarea, #contact select {
      background: rgba(34, 37, 45, 0.9) !important;
   }
}

@media (prefers-reduced-transparency: reduce) {
   .glass-card,
   #nav-wrap,
   .portfolio-item .item-wrap .overlay {
      background: rgba(32, 35, 42, 0.92);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
   }
}

/* ------------------------------------------------------------------ */
/* Header
/* ------------------------------------------------------------------ */

header {
   background-image:
      linear-gradient(180deg, rgba(6, 7, 10, 0.35) 0%, rgba(6, 7, 10, 0.7) 100%),
      url(../images/header-background.jpg);
   background-position: top center, top center;
   background-repeat: no-repeat, no-repeat;
   background-size: cover, cover;
}

header .banner-text {
   width: auto;
   max-width: 760px;
   display: inline-block;
   margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Nav scrim — fades scrolling content out before it reaches the fixed
/* nav pill, so cards never butt straight up against it
/* ------------------------------------------------------------------ */

.nav-scrim {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 150px;
   background: linear-gradient(180deg, rgba(6, 7, 10, .85) 0%, rgba(6, 7, 10, .5) 45%, rgba(6, 7, 10, 0) 100%);
   z-index: 90;
   pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Navigation — floating glass pill (desktop) / glass panel (mobile)
/* ------------------------------------------------------------------ */

@media only screen and (min-width: 768px) {
   #nav-wrap {
      top: 16px;
      left: 50%;
      right: auto;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: auto;
      max-width: 92%;
      border-radius: 999px;
      background-color: var(--glass-bg);
      background-image: linear-gradient(160deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .02) 60%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      border: 1px solid var(--glass-border);
      box-shadow:
         0 14px 40px rgba(0, 0, 0, .35),
         inset 0 1px 0 rgba(255, 255, 255, .35),
         inset 0 -1px 0 rgba(0, 0, 0, .2);
      padding: 8px 10px;
      -webkit-transition: background-color .3s ease, box-shadow .3s ease;
      transition: background-color .3s ease, box-shadow .3s ease;
   }
   #nav-wrap.opaque {
      background-color: var(--glass-bg-strong);
      box-shadow:
         0 18px 48px rgba(0, 0, 0, .45),
         inset 0 1px 0 rgba(255, 255, 255, .4),
         inset 0 -1px 0 rgba(0, 0, 0, .24);
   }
   ul#nav li a {
      margin: 0 3px;
      padding: 8px 18px;
      border-radius: 999px;
      border: 1px solid transparent;
      -webkit-transition: color .2s ease-in-out, background-color .25s ease-in-out, box-shadow .25s ease-in-out, border-color .25s ease-in-out;
      transition: color .2s ease-in-out, background-color .25s ease-in-out, box-shadow .25s ease-in-out, border-color .25s ease-in-out;
   }
   ul#nav li a:hover {
      background-color: rgba(255, 255, 255, .14);
      background-image: linear-gradient(155deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .04) 60%);
      border-color: rgba(255, 255, 255, .28);
      box-shadow:
         0 6px 16px rgba(0, 0, 0, .3),
         inset 0 1px 0 rgba(255, 255, 255, .4),
         inset 0 -1px 0 rgba(0, 0, 0, .2);
      color: #fff;
   }
   ul#nav li.current a {
      background-color: rgba(240, 96, 0, .55);
      background-image: linear-gradient(155deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .05) 60%);
      border-color: rgba(240, 96, 0, .6);
      box-shadow:
         0 6px 18px rgba(240, 96, 0, .4),
         inset 0 1px 0 rgba(255, 255, 255, .5),
         inset 0 -1px 0 rgba(0, 0, 0, .22);
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
   }
}

@media only screen and (max-width: 767px) {
   #nav-wrap > a.mobile-btn {
      background: var(--glass-bg-strong);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      border: 1px solid var(--glass-border);
      border-radius: 999px;
      box-shadow: var(--glass-shadow);
   }
   #nav-wrap:target > ul#nav {
      background: var(--glass-bg-strong);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      border: 1px solid var(--glass-border);
      border-radius: var(--glass-radius);
      box-shadow: var(--glass-shadow-strong);
   }
}

/* ------------------------------------------------------------------ */
/* About
/* ------------------------------------------------------------------ */

#about { background: transparent; }
#about .profile-pic {
   -webkit-transition: box-shadow .25s ease-in-out, -webkit-transform .25s ease-in-out;
   transition: box-shadow .25s ease-in-out, transform .25s ease-in-out;
}
#about .profile-pic:hover {
   box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.04);
   -moz-transform: scale(1.04);
   transform: scale(1.04);
}

/* ------------------------------------------------------------------ */
/* Resume — flipped from light theme to dark glass
/* ------------------------------------------------------------------ */

#resume { background: transparent; }
#resume h3 { color: var(--text-light); }
#resume p { color: var(--text-muted); }
#resume .info { color: rgba(242, 244, 245, 0.55); }
#resume .date { color: var(--text-muted); }
.education, .work { border-bottom-color: rgba(255, 255, 255, 0.12); }

.row.item.glass-card {
   margin: 0 -20px 30px -20px;
   padding: 30px 34px;
}
.row.item.glass-card:last-child { margin-bottom: 0; }

.row.skill { margin-top: 28px; }
.bars.glass-card { padding: 32px 36px; }
.bars li { background: rgba(255, 255, 255, 0.08); }
.bars li em { color: var(--text-light); }

/* ------------------------------------------------------------------ */
/* Portfolio — crisp photos, glass frame + hover chrome
/* ------------------------------------------------------------------ */

#portfolio { background: transparent; }
#portfolio h1 { color: rgba(242, 244, 245, 0.6); }

.portfolio-item .item-wrap {
   position: relative;
   background-color: var(--glass-bg);
   background-image:
      radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, var(--glare, 0)) 0%, transparent 55%),
      linear-gradient(155deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .06) 100%);
   border: 1px solid var(--glass-border);
   border-radius: var(--glass-radius);
   box-shadow:
      0 16px 40px rgba(0, 0, 0, .35),
      0 2px 8px rgba(0, 0, 0, .25),
      inset 0 1px 0 rgba(255, 255, 255, .4),
      inset 0 -1px 0 rgba(0, 0, 0, .22);
   -webkit-transform: perspective(900px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg)) translateY(var(--ty, 0px)) scale(var(--tscale, 1));
   transform: perspective(900px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg)) translateY(var(--ty, 0px)) scale(var(--tscale, 1));
   -webkit-transition: -webkit-transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
   transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
   will-change: transform;
}
.portfolio-item:hover .item-wrap {
   --ty: -8px;
   --tscale: 1.03;
   --glare: .3;
   box-shadow:
      0 30px 64px rgba(0, 0, 0, .5),
      0 6px 18px rgba(0, 0, 0, .3),
      inset 0 1px 0 rgba(255, 255, 255, .5),
      inset 0 -1px 0 rgba(0, 0, 0, .28);
}
.portfolio-item .item-wrap .overlay {
   background: rgba(10, 11, 15, 0.4);
   -webkit-backdrop-filter: blur(6px) saturate(140%);
   backdrop-filter: blur(6px) saturate(140%);
}
.portfolio-item .item-wrap .link-icon {
   background: rgba(255, 255, 255, 0.16);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   box-shadow: 0 0 0 0 rgba(17, 171, 176, 0);
   -webkit-transition: box-shadow .3s ease, background-color .3s ease;
   transition: box-shadow .3s ease, background-color .3s ease;
}
.portfolio-item:hover .item-wrap .link-icon {
   box-shadow: 0 0 24px 4px rgba(17, 171, 176, .45);
}

/* ------------------------------------------------------------------ */
/* Testimonials — frosted glass over the existing photo
/* ------------------------------------------------------------------ */

#testimonials {
   background-image:
      linear-gradient(180deg, rgba(6, 7, 10, 0.45) 0%, rgba(6, 7, 10, 0.7) 100%),
      url(../images/testimonials-bg.jpg);
   background-position: top center, center center;
   background-repeat: no-repeat, no-repeat;
   background-size: cover, cover;
   background-attachment: fixed, fixed;
}
.flex-container.glass-card { padding: 40px 48px; }
.flex-control-paging li a { border: 1px solid var(--glass-border); }

/* ------------------------------------------------------------------ */
/* Contact
/* ------------------------------------------------------------------ */

#contact { background: transparent; }

.footer-widgets.glass-card { padding: 36px 40px; }

#message-warning, #message-success {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--glass-radius);
}

/* ------------------------------------------------------------------ */
/* Footer
/* ------------------------------------------------------------------ */

footer { background: transparent; }
footer a, footer a:visited { color: rgba(255, 255, 255, 0.55); }
footer a:hover, footer a:focus { color: #fff; }
footer .copyright li { color: rgba(255, 255, 255, 0.45); }

footer .row.glass-card {
   padding: 30px 34px 6px 34px;
   margin-bottom: 24px;
}
footer .row.glass-card:hover {
   --ty: 0px;
   --glare: 0;
   box-shadow:
      0 18px 50px rgba(0, 0, 0, .38),
      0 2px 8px rgba(0, 0, 0, .25),
      inset 0 1px 0 rgba(255, 255, 255, .38),
      inset 0 -1px 0 rgba(0, 0, 0, .22);
}

header .social li a {
   display: inline-block;
   -webkit-transition: color .25s ease-in-out, text-shadow .25s ease-in-out, -webkit-transform .25s ease-in-out;
   transition: color .25s ease-in-out, text-shadow .25s ease-in-out, transform .25s ease-in-out;
}
header .social li a:hover {
   color: var(--accent-teal);
   text-shadow: 0 0 10px rgba(17, 171, 176, .9), 0 0 26px rgba(17, 171, 176, .55);
   -webkit-transform: scale(1.15);
   transform: scale(1.15);
}

/* footer socials — glow instead of a background circle */
ul.social-links li a {
   display: inline-block;
   -webkit-transition: color .25s ease-in-out, text-shadow .25s ease-in-out, -webkit-transform .25s ease-in-out;
   transition: color .25s ease-in-out, text-shadow .25s ease-in-out, transform .25s ease-in-out;
}
ul.social-links li a:hover {
   color: #fff;
   text-shadow: 0 0 10px rgba(240, 96, 0, .9), 0 0 26px rgba(240, 96, 0, .55);
   -webkit-transform: scale(1.15);
   transform: scale(1.15);
}

#go-top a {
   background: var(--glass-bg-strong);
   -webkit-backdrop-filter: blur(14px) saturate(160%);
   backdrop-filter: blur(14px) saturate(160%);
   border: 1px solid var(--glass-border);
}
#go-top a:hover { background: var(--accent-teal); }

/* ------------------------------------------------------------------ */
/* Buttons — permanent subtle glass, intensified on hover
/* ------------------------------------------------------------------ */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
   position: relative;
   background-color: rgba(17, 171, 176, 0.85);
   background-image:
      radial-gradient(circle at var(--mx, 30%) var(--my, 25%), rgba(255, 255, 255, var(--glare, 0)) 0%, transparent 55%),
      linear-gradient(155deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .02) 50%);
   border: 1px solid rgba(255, 255, 255, 0.18);
   box-shadow:
      0 10px 26px rgba(0, 0, 0, .3),
      inset 0 1px 0 rgba(255, 255, 255, .35),
      inset 0 -1px 0 rgba(0, 0, 0, .18);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   -webkit-transform: perspective(600px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg)) translateY(var(--ty, 0px)) scale(var(--tscale, 1));
   transform: perspective(600px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg)) translateY(var(--ty, 0px)) scale(var(--tscale, 1));
   -webkit-transition: -webkit-transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, background-color .25s ease, border-color .25s ease;
   transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, background-color .25s ease, border-color .25s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
   --ty: -3px;
   --tscale: 1.04;
   --glare: .35;
   background-color: rgba(255, 255, 255, 0.16);
   -webkit-backdrop-filter: blur(10px) saturate(180%);
   backdrop-filter: blur(10px) saturate(180%);
   border-color: rgba(255, 255, 255, 0.4);
   box-shadow:
      0 16px 36px rgba(0, 0, 0, .35),
      inset 0 1px 0 rgba(255, 255, 255, .45),
      inset 0 -1px 0 rgba(0, 0, 0, .2);
}
#about .download .button { background-color: rgba(255, 255, 255, 0.1); }
#about .download .button:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
#contact button.submit { background-color: rgba(10, 11, 15, 0.7); }
#contact button.submit:hover { background-color: rgba(255, 255, 255, 0.9); color: #0D0D0D; }