/* ------- HEADER ------- */

/* Scrolled state: white background */
#riffHeader.is-scrolled{
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Top state: menu links and icons */
#riffHeader a,
#riffHeader .elementor-item,
#riffHeader i{
  color:#fff;
  transition: color .25s ease;
}

/* Divider */
#riffHeader .header-divider .elementor-divider-separator{
  border-color:#fff;
  background-color:#fff;
}

/* Top state: button */
/*#riffHeader .header-btn .elementor-button{ color:#fff; border-color:#fff; background-color: transparent; transition: color .25s ease, border-color .25s ease, background-color .25s ease; } */

/* Top state: icon inside the button */
/*#riffHeader .header-btn .elementor-button i,
#riffHeader .header-btn .elementor-button svg{
  color:#fff;
  fill:#fff;
  transition: color .25s ease, fill .25s ease;
} */


/* Top state hover */
#riffHeader .elementor-item:hover,
#riffHeader .header-btn .elementor-button:hover{
  color:#f15a24;
}

#riffHeader .header-btn .elementor-button:hover i,
#riffHeader .header-btn .elementor-button:hover svg{
  color:#FF5400;
  fill:#FF5400;
}

/* Scrolled state: menu links and icons */
#riffHeader.is-scrolled a,
#riffHeader.is-scrolled .elementor-item,
#riffHeader.is-scrolled i{
  color:#111;
}

/* Scrolled divider */
#riffHeader.is-scrolled .header-divider .elementor-divider-separator{
  border-color:#111;
  background-color:#111;
}

/* Scrolled state: button */
#riffHeader.is-scrolled .header-btn .elementor-button{
  color:#111;
  border-color:#111;

}

/* Scrolled state: icon inside the button */
#riffHeader.is-scrolled .header-btn .elementor-button i,
#riffHeader.is-scrolled .header-btn .elementor-button svg{
  color:#111;
  fill:#111;
}

/* Scrolled state hover */
#riffHeader.is-scrolled .elementor-item:hover,
#riffHeader.is-scrolled .header-btn .elementor-button:hover{
  color:#f15a24;
}

#riffHeader.is-scrolled .header-btn .elementor-button:hover i,
#riffHeader.is-scrolled .header-btn .elementor-button:hover svg{
  color:#FF5400;
  fill:#FF5400;
}



/* TIMELINE */
.timeline {
  position: relative;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
left: calc(50% - 5px);
  width: 10px;
  background: #FFFFFF;
  z-index: 0;
}

.timeline-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: var(--timeline-progress, 0%);
  background: #FF5400;
  z-index: 1;
}

.timeline-line {
	opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-line.visible {
  opacity: 1;
}

#riffHeader.is-scrolled .header-btn .elementor-button svg path,
#riffHeader.is-scrolled .header-btn .elementor-button svg circle,
#riffHeader.is-scrolled .header-btn .elementor-button svg rect {
  fill: #111;
}

* {
  cursor: url('https://ungriff.is/wp-content/uploads/2026/03/puffin_cursor.png'), auto;
}

*:link {cursor: url('https://ungriff.is/wp-content/uploads/2026/03/animal-1-1.png'), auto;
}

#header-logo,
#header-logo-riff {
  cursor: url('https://ungriff.is/wp-content/uploads/2026/03/animal-1-1.png'), auto;
}

#header-logo:hover,
#header-logo-riff:hover {
  filter: invert(59%) sepia(71%) saturate(6466%) hue-rotate(359deg) brightness(100%) contrast(109%);
  transition: filter 0.2s ease;
}

/* Top state: language switcher SVG (white) */
#riffHeader .elementor-menu-toggle svg {
  fill: #fff;
  transition: fill .25s ease;
}

/* Scrolled state: language switcher SVG (black) */
#riffHeader.is-scrolled .elementor-menu-toggle svg {
  fill: #111;
}

/* Hover */
#riffHeader .elementor-menu-toggle:hover svg {
  fill: #f15a24;
}