@charset "utf-8";

/* Back to top button
   ------------------------------------------------------------------
   Round button, bottom right. As the page scrolls the circle fills
   from the bottom like water, with a wobbling surface.
   Fill level is set by js:  --level: 0% … 100%
   ------------------------------------------------------------------ */

.scroll_top{
  --level: 0%;

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #000000;
  border-radius: 50%;
  background: #ffffff;
  color: #2E2E2E;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);

  /* hidden until you scroll */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.35s ease,
              visibility 0.35s,
              transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1),
              color 0.3s ease;
}

.scroll_top.is_visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.scroll_top:hover,
.scroll_top:focus-visible{
  color: #000000;
}

/* the icon floats above the water */
.scroll_top i{
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll_top:hover i,
.scroll_top:focus-visible i{
  transform: translateY(-3px);
}

/* ------------------------------------------------------------------
   the water
   ------------------------------------------------------------------ */

.scroll_top_water{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: var(--level);
  background: #FFAB2D;
  transition: height 0.25s linear;
  animation: water_bob 3.4s ease-in-out infinite alternate;
}

/* two sine waves drifting across the surface at different speeds */
.water_wave{
  position: absolute;
  left: 0;
  bottom: 100%;            /* sits on top of the water body */
  width: 200%;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C25,20 25,0 50,10 C75,20 75,0 100,10 L100,20 L0,20 Z' fill='%23FFAB2D'/%3E%3C/svg%3E") repeat-x;
  background-size: 50% 100%;
  animation: water_drift 3.2s linear infinite;
}

/* lighter crest behind, drifting the other way */
.water_wave_2{
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C25,20 25,0 50,10 C75,20 75,0 100,10 L100,20 L0,20 Z' fill='%23FFC061'/%3E%3C/svg%3E") repeat-x;
  background-size: 50% 100%;
  opacity: 0.55;
  animation-duration: 5.4s;
  animation-direction: reverse;
}

@keyframes water_drift{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* the whole body rocks very slightly */
@keyframes water_bob{
  from{ transform: translateY(0.6px); }
  to{ transform: translateY(-0.6px); }
}

/* full — surface calms down */
.scroll_top.is_full .water_wave{
  animation-duration: 6s;
}

.scroll_top.is_full .water_wave_2{
  animation-duration: 9s;
}

@media (prefers-reduced-motion: reduce){
  .scroll_top,
  .scroll_top i,
  .scroll_top_water{
    transition: none;
  }
  .scroll_top_water,
  .water_wave{
    animation: none;
  }
}

@media only screen and (max-width: 575px){
  .scroll_top{
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}