@keyframes introCurtainUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}


  @keyframes logoFadeLift{
    from{ opacity:0; transform:translateY(10px) scale(.985); }
    to{ opacity:.88; transform:translateY(0) scale(1); }
  }


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


@keyframes shimmerSweep{
  from{background-position:220% center;}
  to{background-position:-20% center;}
}





  @media (max-width: 900px){
    #portfolio-gallery{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:var(--site-gap);
    }
    .portfolio-column{
      gap:var(--site-gap);
    }
  }



  @media (max-width: 1023px){
    #nav .site-shell{
      align-items:center;
      row-gap:.75rem;
    }
    #menu{
      width:100%;
      overflow: hidden;
    }
    #ulMenu{
      padding-top:.35rem;
    }
  }



  @media (max-width: 1023px){
    #nav .site-shell{
      align-items:center;
      row-gap:.75rem;
    }
    #menu{
      width:100%;
    }
    #ulMenu{
      padding-top:.35rem;
    }
  }



  @media (max-width: 640px){
    #nav .site-shell{
      align-items: center;
    }
    #menu{
      overflow: hidden;
    }
    .page-title-refined{
      font-size: 1.62rem !important;
      padding-top: 1.25rem !important;
      padding-bottom: 1.1rem !important;
    }
  }



  @media (max-width: 640px){
    #nav .site-shell{
      align-items: center;
    }
      white-space: nowrap;
    }
  }



  @media (max-width: 900px){
    .site-header{
      padding-top: 1.5rem;
      padding-bottom: .15rem;
    }
    #ulMenu{
      margin-top: .85rem !important;
      gap: .2rem;
    }



  @media (max-width: 900px){
    .site-header{
      padding-top: 1.5rem;
      padding-bottom: .15rem;
    }
    #ulMenu{
      margin-top: .85rem !important;
      gap: .2rem;
    }
      padding-top: 1.6rem !important;
      padding-bottom: 1.35rem !important;
    }
  }



  @media (min-width: 1024px){
    #ulMenu > li.hidden.lg\:flex{
      display:flex !important;
      align-items:center !important;
    }
  }



  @media (prefers-reduced-motion: reduce){
    .theme-toggle,
    #theme-reveal{
      transition: none !important;
    }
  }


  @media (max-width: 1023px){
    #nav .site-shell{row-gap:.75rem !important;}
    #menu{width:100% !important; overflow:hidden;}
    #ulMenu{padding-top:.35rem !important;}
  }


  @media (max-width: 560px){
    #portfolio-gallery{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:var(--site-gap);
    }
    .portfolio-column{
      gap:var(--site-gap);
    }
  }


  @media (max-width: 640px){
    #nav .site-shell{align-items:center !important;}
    #ulMenu{margin-top:.85rem !important; gap:.2rem !important;}
    #ulMenu .nav-link{
      font-size:var(--mobile-nav-size) !important;
      font-weight:var(--mobile-nav-weight) !important;
      line-height:var(--mobile-nav-line) !important;
      padding:.2rem 0 !important;
    }
  }


  @media (max-width: 640px){
    :root{
      --site-pad: 14px;
      --logo-height: 27px;
    }
  }


  @media (max-width: 640px){
    :root{
      --site-pad: 14px;
      --site-gap: 10px;
      --logo-height: 27px;
    }
  }


  @media (max-width: 768px) {
    .music-player {
      bottom: 72px;
      right: 10px;
      gap: 6px;
    }
    .music-toggle, .music-mute {
      width: 34px;
      height: 34px;
      opacity: .8;
    }
    .music-toggle svg, .music-mute svg {
      width: 15px;
      height: 15px;
    }
  }


  @media (max-width: 900px){
    :root{
      --site-pad: 20px;
      --logo-height: 32px;
      --header-top-pad: 1.5rem;
      --header-bottom-pad: .15rem;
    }
  }


  @media (max-width: 900px){
    :root{
      --site-pad: 20px;
      --logo-height: 32px;
    }
  }


  @media (max-width: 900px){
    :root{
      --site-pad: 20px;
      --site-gap: 12px;
      --logo-height: 32px;
    }
  }


@media (max-width: 768px) {
  .music-player {
    bottom: 80px;
    right: 10px;
  }
  .music-toggle, .music-mute {
    width: 40px;
    height: 40px;
  }
}




  .mobile-theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    border-radius:9999px;
    flex:0 0 auto;
  }




  .music-player {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: flex;
    gap: 8px;
  }




  .theme-toggle{
    position: relative;
    isolation: isolate;
    border-radius: 9999px;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease, background-color .28s ease;
  }




  /* ===== Lazy-load image styles ===== */
  .portfolio-img[data-src] {
    opacity: 0 !important;
    transition: opacity .4s ease, transform .4s ease;
  }



  #theme-reveal{
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    clip-path: circle(0px at 50% 50%);
    will-change: clip-path, opacity, background-image;
  }



  .fancybox__backdrop{
    background: rgba(8,8,8,.965) !important;
  }



  .footer-contact-blk{
    display:none !important;
  }



  .logo-img{
    height: var(--logo-height) !important;
    width: auto !important;
    max-height: none !important;
    display: block;
    flex: 0 0 auto;
    filter: brightness(0);
    transition: filter .35s ease, opacity .35s ease, transform .45s ease;
    opacity: .88;
  }



  .logo-img{
    height: var(--logo-height) !important;
    width: auto;
    display: block;
    filter: brightness(0);
    transition: filter .35s ease, opacity .35s ease, transform .45s ease;
    opacity: .88;
  }



  .logo-img{
    height: var(--logo-height);
    width: auto;
    flex: 0 0 auto;
  }



  .logo-wrap:hover .logo-img{
    opacity: 1;
    transform: translateY(-1px);
  }



  .logo-wrap{
    display:inline-flex;
    align-items:center;
  }






  .page-title-refined{
    letter-spacing: .03em;
  }



  .site-footer{
    width: min(100%, var(--site-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-pad);
    padding-right: var(--site-pad);
  }



  .site-header{
    padding-top: 2.1rem;
    padding-bottom: .35rem;
    overflow: visible !important;
  }



  .site-header{
    padding-top: 2.1rem;
    padding-bottom: .35rem;
  }



  .site-main,
  .site-footer{
    width: min(100%, var(--site-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-pad);
    padding-right: var(--site-pad);
  }



  .site-main{
    flex: 1 1 auto;
  }



  .site-main{
    width: min(100%, var(--site-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-pad);
    padding-right: var(--site-pad);
    flex: 1 1 auto;
  }



  .site-shell{
    width: min(100%, var(--site-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-pad);
    padding-right: var(--site-pad);
  }



  /* ===== PREMIUM SHIMMER: cinematic light sweep ===== */
  .portfolio-link::before{
    content:'';
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    background:linear-gradient(105deg, transparent 28%, rgba(255,255,255,.5) 49%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.5) 51%, transparent 72%);
    background-size:240% 100%;
    transform:translateX(-110%);
    transition:transform .55s ease, opacity .25s ease;
    opacity:0;
    pointer-events:none;
    z-index:2;
  }



  body{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }



  html.dark .logo-img{
    filter:none;
    opacity:.9;
  }



#site-intro .intro-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .9;
  transition: opacity .45s ease;
}



.portfolio-card.revealed {
  animation-delay: var(--reveal-delay, 0s);
}



/* 2. IMAGE: Scale + brightness on hover */
.portfolio-link {
  overflow: hidden;
  display: block;
}



/* 3. WATERFALL SCROLL ENTRANCE: slide-up + fade */
@keyframes scrollReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* 4. SMOOTH SCROLL site-wide */
html { scroll-behavior: smooth; }



/* 5. PAGE TRANSITIONS: body fade-in on load */
@keyframes bodyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}



/* ===== Fix duplicate theme toggle in mobile menu ===== */
#ulMenu > li.hidden.lg\:flex{
  display:none !important;
}



/* ===== Mobile: faster, smaller movement ===== */
@media (max-width: 640px) {
  #site-intro {
    animation: introCurtainUpMobile 0.45s cubic-bezier(.22,1,.36,1) 0.9s forwards;
  }
  @keyframes introCurtainUpMobile {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-100%); }
  }
  #site-intro .intro-logo-wrap {
    animation-duration: 0.75s;
  }
}



/* ===== Shimmer for about_me photo ===== */
.shimmer-wrap {
  display: block;
  position: relative;
  overflow: hidden;
}



/* ===== Shimmer for contact photo ===== */
.shimmer-wrap {
  display: block;
  position: relative;
  overflow: hidden;
}



/* ===== fadeIn keyframe ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}



/* ============================================
   PREMIUM VISUAL OPTIMIZATION
   ============================================ */

/* 1. NAV: Subtle opacity + micro-lift hover */
#ulMenu .nav-link {
  opacity: .5;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1), letter-spacing .3s ease;
  transform: translateY(0);
  letter-spacing: .01em;
}



/* After curtain up: remove cleanly from DOM */
#site-intro.intro-gone { display: none; }



/* Logo entrance — same DNA as existing logoFadeLift */
@keyframes introLogoIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}



/* Logo fades and lifts in — gallery entrance feel */
#site-intro .intro-logo-wrap {
  opacity: 0;
  width: 18%;
  max-width: 180px;
  margin: 0 auto;
  animation: introLogoIn 1.0s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}



/* Logo styling */


/* Curtain slides up — reveals the page underneath */
#site-intro {
  animation: introCurtainUp 0.65s cubic-bezier(.22,1,.36,1) 1.35s forwards;
}



/* Stagger delays — first 12 items */
.portfolio-card:nth-child(1)  { --reveal-delay: 0.00s; }



html.dark .logo-img{
  filter:none;
}


  
/* ===== Logo theme fix ===== */
.logo-img{
  width:auto;
  display:block;
  filter: brightness(0);
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}


  #nav .site-shell{align-items:center;}


  #portfolio-gallery-wrap{
    width:100%;
    margin:0;
    padding:0;
  }


  #portfolio-gallery{
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--site-gap);
    align-items:start;
  }


  #theme-reveal.is-active{
    opacity: 1;
    transition:
      clip-path var(--theme-reveal-duration) var(--theme-reveal-ease),
      opacity 120ms ease;
  }


  #theme-reveal.is-cleanup{
    opacity: 0;
    transition: opacity 160ms ease;
  }


  #ulMenu .nav-link{
    font-size:var(--desktop-nav-size) !important;
    font-weight:var(--desktop-nav-weight) !important;
    line-height:var(--desktop-nav-line) !important;
    letter-spacing:.02em !important;
    display:inline-block !important;
    white-space:nowrap !important;
    padding:.1rem 0 !important;
  }


  #ulMenu > li{display:flex; align-items:center;}


  #ulMenu{margin-top:0 !important;}


  .f-button:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.14) !important;
  }


  .f-button{
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.9) !important;
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease, opacity .2s ease !important;
    opacity: .86 !important;
  }


  .fancybox__content{
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
  }


  .fancybox__nav .f-button{
    background: rgba(255,255,255,.06) !important;
  }


  .fancybox__slide{
    padding: 22px !important;
  }


  .fancybox__toolbar{
    padding: 12px 14px !important;
  }


  .logo-entrance{
    animation: logoFadeLift 1.1s cubic-bezier(.22,1,.36,1) both;
  }


  .logo-img{
    height:var(--logo-height) !important;
    width:auto !important;
    max-height:none !important;
    display:block !important;
    flex:0 0 auto !important;
  }


  .logo-wrap{display:inline-flex !important; align-items:center !important;}


  .mobile-theme-toggle svg{
    display:block;
  }


  .music-toggle svg, .music-mute svg {
    width: 17px;
    height: 17px;
  }


  .music-toggle, .music-mute {
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease, background .22s ease;
    opacity: .72;
  }


  .music-toggle:hover, .music-mute:hover {
    transform: translateY(-1px);
    opacity: .96;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }


  .portfolio-card.is-loaded .portfolio-link::after{
    transform:translateX(-130%);
  }


  .portfolio-card{
    overflow:hidden;
    background:transparent;
    margin:0;
    padding:0;
  }


  .portfolio-column{
    display:flex;
    flex-direction:column;
    gap:var(--site-gap);
    min-width:0;
  }


  .portfolio-img.is-loaded{
    opacity:1;
    transform:translateY(0) scale(1);
  }


  .portfolio-img:not([data-src]) {
    opacity: 1 !important;
  }


  .portfolio-img[data-src].is-loaded {
    opacity: 0.01 !important; /* Near-transparent placeholder before real image loads */
  }


  .portfolio-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transform:translateY(8px) scale(1.01);
    transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease;
    will-change:transform, opacity;
    backface-visibility:hidden;
    position:relative;
    z-index:1;
  }


  .portfolio-link::after{
    content:'';
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    background:linear-gradient(105deg, transparent 22%, rgba(255,255,255,.2) 48%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.2) 52%, transparent 78%);
    background-size:300% 100%;
    transform:translateX(-130%);
    transition:transform 1.0s ease, opacity .3s ease;
    opacity:0;
    pointer-events:none;
    z-index:2;
  }


  .portfolio-link:hover .portfolio-img{
    transform:translateY(0) scale(1.055) !important;
    filter:brightness(1.08) saturate(1.1) !important;
  }


  .portfolio-link:hover::after{
    opacity:1 !important;
    transform:translateX(100%);
    transition:transform 1.1s cubic-bezier(.22,1,.36,1) .05s, opacity .3s ease;
  }


  .portfolio-link{
    display:block;
    width:100%;
    overflow:hidden;
    background:rgba(0,0,0,.035);
    margin:0;
    padding:0;
    position:relative;
    aspect-ratio: var(--ratio, 4 / 3);
  }


  .site-header{
    padding-top:var(--header-top-pad) !important;
    padding-bottom:var(--header-bottom-pad) !important;
    overflow:visible !important;
  }


  .site-shell,.site-main,.site-footer{
    width:min(100%, var(--site-max-width)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--site-pad) !important;
    padding-right:var(--site-pad) !important;
  }


  .text-neutral-700 > .container.w-full{
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }


  .theme-toggle:active{
    transform: scale(.96);
  }


  .theme-toggle:hover{
    transform: translateY(-1px);
  }


  /* ===== PREMIUM HOVER: scale + brightness ===== */
  .portfolio-link{
    overflow:hidden;
    display:block;
    position:relative;
    z-index:1;
  }


  /* Card loaded: offscreen reset */
  .portfolio-card.is-loaded .portfolio-link::before{
    transform:translateX(-110%);
  }


  /* Fallback: if JS fails, show images anyway */
  .no-js .portfolio-img {
    opacity: 1 !important;
  }


  /* Hide the desktop theme button inside the mobile hamburger menu */
  #ulMenu > li.hidden.lg\:flex{
    display:none !important;
  }


  /* Hover: both layers sweep across with zero delay */
  .portfolio-link:hover::before{
    opacity:1 !important;
    transform:translateX(100%);
    transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  }


  :root{
    --site-max-width: 1440px;
    --site-pad: 28px;
    --logo-height: 36px;
    --header-top-pad: 2.1rem;
    --header-bottom-pad: .35rem;
    --desktop-nav-size: 1.5rem;
    --desktop-nav-weight: 400;
    --desktop-nav-line: 1.15;
    --mobile-nav-size: 1.12rem;
    --mobile-nav-weight: 400;
    --mobile-nav-line: 1.15;
  }


  :root{
    --site-max-width: 1440px;
    --site-pad: 28px;
    --site-gap: 12px;
    --logo-height: 36px;
    --mobile-nav-size: 1.12rem;
    --mobile-nav-weight: 400;
    --mobile-nav-line: 1.15;
  }


  :root{
    --site-max-width: 1440px;
    --site-pad: 28px;
    --site-gap: 12px;
    --logo-height: 36px;
  }


  :root{
    --theme-reveal-duration: 720ms;
    --theme-reveal-ease: cubic-bezier(.22,1,.36,1);
  }


  [x-cloak] { display: none !important; }


  body{padding-left:0 !important; padding-right:0 !important;}


  html.dark .music-toggle, html.dark .music-mute {
    background: rgba(22,22,22,0.5);
    border-color: rgba(255,255,255,0.08);
  }


  html.dark .portfolio-link::after{
    background:linear-gradient(105deg, transparent 22%, rgba(255,255,255,.12) 48%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 52%, transparent 78%);
  }


  html.dark .portfolio-link{
    background:rgba(255,255,255,.05);
  }


  }

  .theme-toggle{
    position: relative;
    isolation: isolate;
    border-radius: 9999px;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease, background-color .28s ease;
  }
  .theme-toggle:hover{
    transform: translateY(-1px);
  }
  .theme-toggle:active{
    transform: scale(.96);
  }

  #theme-reveal{
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    clip-path: circle(0px at 50% 50%);
    will-change: clip-path, opacity, background-image;
  }
  #theme-reveal.is-active{
    opacity: 1;
    transition:
      clip-path var(--theme-reveal-duration) var(--theme-reveal-ease),
      opacity 120ms ease;
  }
  #theme-reveal.is-cleanup{
    opacity: 0;
    transition: opacity 160ms ease;
  }

  @media (prefers-reduced-motion: reduce){
    .theme-toggle,
    #theme-reveal{
      transition: none !important;
    }


#ulMenu .nav-link:hover {
  opacity: 1;
  transform: translateY(-2px);
  letter-spacing: .04em;
}


.music-player {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  gap: 10px;
}


.music-toggle svg, .music-mute svg {
  width: 20px;
  height: 20px;
}


.music-toggle, .music-mute {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}


.music-toggle:hover, .music-mute:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}


.portfolio-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0s; /* will be overridden by JS */
}


.portfolio-card {
  opacity: 1;
  transform: translateY(22px);
  transition: opacity 0s; /* will be overridden by JS */
}


.portfolio-card.revealed {
  animation: scrollReveal .7s cubic-bezier(.22,1,.36,1) forwards;
}


.portfolio-card:nth-child(10) { --reveal-delay: 0.32s; }


.portfolio-card:nth-child(11) { --reveal-delay: 0.35s; }


.portfolio-card:nth-child(12) { --reveal-delay: 0.38s; }


.portfolio-card:nth-child(2)  { --reveal-delay: 0.05s; }


.portfolio-card:nth-child(3)  { --reveal-delay: 0.10s; }


.portfolio-card:nth-child(4)  { --reveal-delay: 0.14s; }


.portfolio-card:nth-child(5)  { --reveal-delay: 0.17s; }


.portfolio-card:nth-child(6)  { --reveal-delay: 0.20s; }


.portfolio-card:nth-child(7)  { --reveal-delay: 0.23s; }


.portfolio-card:nth-child(8)  { --reveal-delay: 0.26s; }


.portfolio-card:nth-child(9)  { --reveal-delay: 0.29s; }


.portfolio-img {
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease, opacity .35s ease !important;
}


.portfolio-link:hover .portfolio-img {
  transform: scale(1.04) !important;
  filter: brightness(1.06) contrast(1.02) !important;
}


.shimmer-wrap img {
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease;
}


.shimmer-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.22) 52%, transparent 80%);
  background-size:320% 100%;
  transform:translateX(-130%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:2;
}


.shimmer-wrap:hover img {
  transform: scale(1.06);
  filter: brightness(1.07) saturate(1.08);
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease;
}


.shimmer-wrap:hover::after{
  opacity:1;
  transform:translateX(100%);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .12s, opacity .35s ease .08s;
}


.shimmer-wrap:hover::before{
  opacity:1;
  transform:translateX(100%);
  animation:shimmerSweep .75s cubic-bezier(.22,1,.36,1) forwards;
}


/* ===== PREMIUM: triple-layer cinematic shimmer ===== */
.shimmer-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 28%, rgba(255,255,255,.5) 49%, rgba(255,255,240,.6) 50%, rgba(255,255,255,.5) 51%, transparent 72%);
  background-size:240% 100%;
  transform:translateX(-100%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:2;
  animation:none;
}


/* ===== Site Intro Overlay ===== */
#site-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}


body {
  animation: bodyFadeIn .5s ease forwards;
}


html.dark #ulMenu .nav-link { opacity: .55; }


html.dark #ulMenu .nav-link:hover { opacity: 1; }


html.dark .music-player {
  
}


html.dark .music-toggle svg, html.dark .music-mute svg {
  fill: white;
}


html.dark .music-toggle, html.dark .music-mute {
  background: rgba(30,30,30,0.9);
}

/* ================================================
   PREMIUM NAV — DUAL-LAYER TEXT SLIDE REPLACEMENT
   ================================================ */

#ulMenu .nav-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.45em;
  line-height: 1.45em;
  opacity: .45;
  transition:
    opacity .35s ease,
    transform .4s cubic-bezier(.22,1,.36,1),
    letter-spacing .4s ease;
}
#ulMenu .nav-link::before { display: none; }
#ulMenu .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
  transition:
    left .5s cubic-bezier(.22,1,.36,1),
    right .5s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    transform .4s cubic-bezier(.22,1,.36,1);
  transform: scaleX(.4);
  pointer-events: none;
  border-radius: 1px;
}
#ulMenu .nav-link:hover::after {
  left: 0;
  right: 0;
  opacity: .65;
  transform: scaleX(1);
}
#ulMenu .nav-link::before {
  content: '';
  position: absolute;
  inset: 0 -8px;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 68%, transparent 100%);
  background-size: 280% 100%;
  background-position: -100% 0;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: 3px;
}
html.dark #ulMenu .nav-link::before {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 68%, transparent 100%);
}
#ulMenu .nav-link:hover::before {
  opacity: 1;
  animation: navShineSweep .75s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes navShineSweep {
  from { background-position: -80% 0; }
  to   { background-position: 180% 0; }
}



#ulMenu .nav-link:hover 
#ulMenu .nav-link:hover 
#ulMenu .nav-link:hover {
  opacity: 1;
  transform: translateY(-2.5px);
  letter-spacing: .06em;
}
html.dark #ulMenu .nav-link { opacity: .5; }
html.dark #ulMenu .nav-link:hover { opacity: 1; }

@media (max-width: 1023px) {
  #ulMenu .nav-link {
    overflow: visible;
    height: auto;
  }
  
  #ulMenu .nav-link:hover 
}


/* ===== HOVER STATE ===== */
#ulMenu .nav-link:hover {
  opacity: 1 !important;
  transform: translateY(-3px);
  letter-spacing: .065em;
}

/* Shine sweeps left → right */
#ulMenu .nav-link:hover::before {
  opacity: 1;
  animation: navShineSweep .7s cubic-bezier(.22,1,.36,1) forwards;
}

/* Underline expands from center */
#ulMenu .nav-link:hover::after {
  left: 0;
  right: 0;
  opacity: .65;
  transform: scaleX(1);
}

/* Dark mode softer base */
html.dark #ulMenu .nav-link {
  opacity: .5;
}
html.dark #ulMenu .nav-link:hover {
  opacity: 1;
}



/* ================================================
   NAV — DUAL-LAYER TEXT SLIDE + SHINE SWEEP
   ================================================ */

  to   { background-position: 180% 0; }
}
/* Dual-layer text containers */


.nav-link:hover 
.nav-link:hover 
.nav-link:hover {
  opacity: 1 !important;
  transform: translateY(-2.5px);
  letter-spacing: .065em;
}
html.dark .nav-link { opacity: .5; }
html.dark .nav-link:hover { opacity: 1; }

/* Mobile: disable dual-layer, restore normal behavior */
@media (max-width: 1023px) {
/* ================================================
   NAV — ORIGINAL CLEAN STYLE (restored)
   ================================================ */
#ulMenu .nav-link {
  opacity: .5;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1), letter-spacing .3s ease;
  transform: translateY(0);
  letter-spacing: .01em;
}
#ulMenu .nav-link:hover {
  opacity: 1;
  transform: translateY(-2px);
  letter-spacing: .04em;
}
html.dark #ulMenu .nav-link { opacity: .55; }
html.dark #ulMenu .nav-link:hover { opacity: 1; }