/*!
Theme Name: bsafe
Theme URI: https://underscoretw.com/
Description: Custom theme BSafe
Version: 0.1.0
Author: underscoretw.com
Author URI: https://underscoretw.com/
Text Domain: bsafe
Requires at least: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

bsafe is based on _tw https://underscoretw.com/, (C) 2021-2025 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2025 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/

/* Karriere */



/* Header */
.nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  
  /* leave room for underline */
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  color: #e5a700;
  background-color: rgba(248, 158, 47, 1);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
  color: #e5a700;
}

.nav-link.active::after {
  width: 100%;
  background-color: rgba(248, 158, 47, 1);
}

@keyframes slideUpOverlay {
  0% {
    top: 100%;
  }

  100% {
    top: 27.5%;
    /* (100% - 75%)/2 = 12.5% wyrównuje do środka */
  }
}

.slide-up-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  height: 45%;
  /* 3/4 wysokości obrazka */
  top: 100%;
  /* start poza dołem */
  background: rgba(0, 0, 0, 0.5);
  /* przyciemnione tło */
  animation: slideUpOverlay 1s ease-out forwards;
}

.slide-left-overlay {
  position: absolute;
  top: 0;
  width: 53%;
  height: 100%;
  background: #1c777f;
  opacity: 80%;
  /* zaczynamy przesunięcieniem o całą swoją szerokość w lewo */
  transform: translateX(-100%);
  animation: slideLeftOverlay 1s ease-out forwards;
}

@keyframes slideLeftOverlay {
  to {
    /* docelowo na 0, czyli przy lewej krawędzi obrazka */
    transform: translateX(0);
  }
}

@keyframes slideUpBubble {
  0% {
    transform: translateY(50%) translateY(100px);
    opacity: 0;
  }

  100% {
    transform: translateY(50%);
    opacity: 1;
  }
}

.slide-up-bubble {
  animation: slideUpBubble 1s ease-out forwards;
}