/* Original native CSS inspired by 21st.dev's Tubelight Navbar, Card Spotlight,
   and Shiny Button. References: assets/licenses/interface-patterns.txt. */

@media (min-width:900px) {
  .site-header nav.has-tubelight { position:relative; isolation:isolate; }
  .site-header nav.has-tubelight>a { z-index:1; }
  .site-header nav.has-tubelight a.active::after { display:none; }
  .nav-tubelight {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    pointer-events:none;
    border-radius:8px;
    background:color-mix(in srgb,var(--accent) 9%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
    transition:transform .42s var(--ease),width .42s var(--ease),opacity .2s;
  }
  .nav-tubelight::before {
    content:'';
    position:absolute;
    top:-1px;
    left:30%;
    right:30%;
    height:2px;
    border-radius:2px;
    background:var(--accent);
    box-shadow:0 2px 9px color-mix(in srgb,var(--accent) 50%,transparent);
  }
}

@media (max-width:780px) { .nav-tubelight { display:none; } }

.skill-card,.experience-card {
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent),0 10px 35px #00000005;
}
.skill-card.has-spotlight,.experience-card.has-spotlight { position:relative; isolation:isolate; }
.skill-card.has-spotlight::before,.experience-card.has-spotlight::before {
  content:'';
  position:absolute;
  inset:1px;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(340px circle at var(--spot-x,50%) var(--spot-y,30%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 75%);
  transition:opacity .35s ease;
}
.skill-card.has-spotlight.is-spotlit::before,.experience-card.has-spotlight.is-spotlit::before { opacity:1; }
.experience-card.has-spotlight { transition:border-color .3s ease; }
.experience-card.has-spotlight.is-spotlit { border-color:color-mix(in srgb,var(--accent) 47%,var(--line)); }
.experience-card-header h3 { letter-spacing:-.035em; }
.skill-card h3 { text-wrap:balance; }
.skill-chips span { border-radius:5px; }

.button-primary { position:relative; isolation:isolate; overflow:hidden; }
.button-primary::after {
  content:'';
  position:absolute;
  pointer-events:none;
  inset:-40% auto -40% -55%;
  width:35%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,#ffffff42,transparent);
  opacity:0;
}
@media (hover:hover) and (pointer:fine) {
  .button-primary:hover::after { animation:interface-shine .85s var(--ease) both; }
}
.button-primary:focus-visible::after { animation:interface-shine .85s var(--ease) both; }
@keyframes interface-shine {
  0% { left:-55%; opacity:0; }
  15% { opacity:1; }
  100% { left:130%; opacity:0; }
}

:root[data-theme=light] .nav-tubelight { background:color-mix(in srgb,var(--accent) 6%,transparent); }
:root[data-theme=light] .nav-tubelight::before { box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 20%,transparent); }
:root[data-theme=light] .skill-card.has-spotlight::before,
:root[data-theme=light] .experience-card.has-spotlight::before {
  background:radial-gradient(340px circle at var(--spot-x,50%) var(--spot-y,30%),color-mix(in srgb,var(--accent) 5%,transparent),transparent 75%);
}

.motion-off .nav-tubelight { transition:none; }
.motion-off .button-primary::after { animation:none; opacity:0; }
.motion-off .skill-card.has-spotlight::before,
.motion-off .experience-card.has-spotlight::before { opacity:0; transition:none; }
.motion-off .skill-card:hover { transform:none; }
@media (prefers-reduced-motion:reduce) {
  .nav-tubelight { transition:none; }
  .button-primary::after { animation:none!important; opacity:0; }
  .skill-card.has-spotlight::before,.experience-card.has-spotlight::before { opacity:0; transition:none; }
  .skill-card:hover { transform:none; }
}
@media print {
  .nav-tubelight,.button-primary::after,.skill-card.has-spotlight::before,.experience-card.has-spotlight::before { display:none!important; }
  .skill-card,.experience-card { box-shadow:none; }
}