/* DEKLAB PREMIUM LIQUID GLASS */

#portfolio {
  isolation: isolate;
}

#portfolio .card,
#portfolio .codebox {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(120,145,220,.07) 48%,
      rgba(125,85,190,.09)
    ),
    rgba(12,18,42,.78);

  border: 1px solid rgba(210,225,255,.22);

  box-shadow:
    0 14px 38px rgba(0,0,0,.32),
    0 0 18px rgba(100,145,255,.07),
    inset 0 1px 1px rgba(255,255,255,.18);

  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

#portfolio .card {
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

#portfolio .card:hover {
  transform: translateY(-3px);
  border-color: rgba(150,180,255,.42);

  box-shadow:
    0 20px 45px rgba(0,0,0,.38),
    0 0 22px rgba(110,145,255,.12),
    inset 0 1px 1px rgba(255,255,255,.22);
}

#portfolio h1,
#portfolio h2,
#portfolio h3,
#portfolio p {
  text-shadow: 0 1px 6px rgba(0,0,0,.22);
}

#portfolio nav {
  background: rgba(10,15,35,.91);
  border-bottom: 1px solid rgba(210,225,255,.20);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);

  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

@media (max-width:720px) {
  #portfolio .card:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #portfolio .card,
  #portfolio .codebox,
  #portfolio nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15,22,48,.97);
  }
}

/* DEKLAB RGB RAINBOW BORDER */

@property --deklab-rgb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes deklab-rgb-flow {
  to {
    --deklab-rgb-angle: 360deg;
  }
}

/* Target cards: News through Plans */
#portfolio .dl-newsbox,
#portfolio #education .card,
#portfolio #interests .card,
#portfolio #tech .card,
#portfolio #activities .card,
#portfolio #contact .card,
#portfolio #plans .card {
  position: relative;
  border-color: transparent !important;
}

/* Animated rainbow outline */
#portfolio .dl-newsbox::before,
#portfolio #education .card::before,
#portfolio #interests .card::before,
#portfolio #tech .card::before,
#portfolio #activities .card::before,
#portfolio #contact .card::before,
#portfolio #plans .card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.6px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;

  background: conic-gradient(
    from var(--deklab-rgb-angle),
    #ff3158,
    #ff9d35,
    #fff05a,
    #42ed9a,
    #36d9ff,
    #526bff,
    #b34dff,
    #ff45c8,
    #ff3158
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 3px rgba(90,180,255,.35));

  opacity: .9;
  animation: deklab-rgb-flow 5s linear infinite;
}

/* Subtle glow on hover */
#portfolio .dl-newsbox:hover::before,
#portfolio #education .card:hover::before,
#portfolio #interests .card:hover::before,
#portfolio #tech .card:hover::before,
#portfolio #activities .card:hover::before,
#portfolio #contact .card:hover::before,
#portfolio #plans .card:hover::before {
  opacity: 1;
  filter:
    drop-shadow(0 0 5px rgba(100,170,255,.65));
}

/* Mobile */
@media (max-width: 720px) {
  #portfolio .dl-newsbox::before,
  #portfolio #education .card::before,
  #portfolio #interests .card::before,
  #portfolio #tech .card::before,
  #portfolio #activities .card::before,
  #portfolio #contact .card::before,
  #portfolio #plans .card::before {
    padding: 1.4px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #portfolio .dl-newsbox::before,
  #portfolio #education .card::before,
  #portfolio #interests .card::before,
  #portfolio #tech .card::before,
  #portfolio #activities .card::before,
  #portfolio #contact .card::before,
  #portfolio #plans .card::before {
    animation: none;
  }
}