/* ==========================================================================
   KHET // Widgets CSS (Scarab, Scroll Hint, Loader, Outro)
   TYPO3 Sitepackage: Resources/Public/Css/widgets.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scarab Progress Widget & Back-to-Top
   Fixed on the right, vertically centered; animates to bottom-right at end.
   -------------------------------------------------------------------------- */
.khet-scarab {
  position: fixed;
  right: 2.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  z-index: var(--khet-z-widgets);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--khet-color-gold);
  transition: transform var(--khet-transition-normal),
              top var(--khet-transition-normal),
              right var(--khet-transition-normal),
              opacity var(--khet-transition-fast),
              filter var(--khet-transition-fast);
  will-change: transform, top, right;
  -webkit-tap-highlight-color: transparent;
}

/* Background disc on hover/focus */
.khet-scarab::before {
  content: none; /* original: bare gold scarab, no backing disc */
}

.khet-scarab:hover::before {
  background: radial-gradient(circle, rgba(var(--khet-color-gold-rgb), 0.18) 0%, rgba(var(--khet-color-obsidian-rgb), 0.7) 100%);
  transform: scale(1.08);
}

.khet-scarab:hover {
  color: var(--khet-color-gold-bright);
  filter: drop-shadow(0 0 14px var(--khet-color-gold-glow));
}

/* Circular SVG Progress Ring */
.khet-scarab__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* Starts progress from 12 o'clock */
  pointer-events: none;
  z-index: 1;
}

.khet-scarab__track {
  fill: none;
  stroke: rgba(var(--khet-color-sand-rgb), 0.15);
  stroke-width: 1.5;
}

.khet-scarab__indicator {
  fill: none;
  stroke: var(--khet-color-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear, stroke var(--khet-transition-fast);
}

.khet-scarab:hover .khet-scarab__indicator {
  stroke: var(--khet-color-gold-bright);
}

/* Center Scarab Icon */
.khet-scarab__icon {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--khet-transition-fast);
}

.khet-scarab:hover .khet-scarab__icon {
  transform: translateY(-2px);
}

.khet-scarab__icon svg,
.khet-scarab__icon img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px var(--khet-color-gold-glow));
}

/* State: End of journey (animates down to bottom-right next to footer) */
.khet-scarab.is-bottom {
  top: calc(100% - 4.5rem);
  right: 2.25rem;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Scroll Hint (Bottom of hero screen on load)
   -------------------------------------------------------------------------- */
.khet-scroll-hint {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: var(--khet-z-widgets);
  pointer-events: none;
  color: var(--khet-color-sand-muted);
  opacity: 1;
  transition: opacity var(--khet-transition-normal), transform var(--khet-transition-normal);
  will-change: opacity, transform;
}

.khet-scroll-hint__text {
  font-family: var(--khet-font-nav);
  font-weight: var(--khet-font-weight-nav);
  font-size: var(--khet-font-size-hint);
  letter-spacing: var(--khet-tracking-badge);
  text-transform: uppercase;
}

.khet-scroll-hint__line {
  width: 1px;
  height: 28px;
  background: linear-gradient(
    to bottom,
    var(--khet-color-gold) 0%,
    rgba(var(--khet-color-gold-rgb), 0) 100%
  );
  animation: khetHintPulse 2.2s infinite ease-in-out;
}

@keyframes khetHintPulse {
  0% {
    transform: scaleY(0.4);
    opacity: 0.3;
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
    transform-origin: top;
  }
  100% {
    transform: scaleY(0.4);
    opacity: 0.3;
    transform-origin: top;
  }
}

/* Hidden once user begins scrolling */
.khet-scroll-hint.is-hidden {
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Outro / Footer (Appears at scene 6 in bottom center)
   -------------------------------------------------------------------------- */
.khet-outro {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  z-index: var(--khet-z-copy);
  pointer-events: none;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--khet-transition-normal), transform var(--khet-transition-normal);
}

.khet-outro__action {
  font-family: var(--khet-font-nav);
  font-weight: var(--khet-font-weight-nav);
  font-size: var(--khet-font-size-footer);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khet-color-sand);
  text-decoration: none;
  pointer-events: auto;
  transition: color var(--khet-transition-fast), text-shadow var(--khet-transition-fast);
}

.khet-outro__action:hover {
  color: var(--khet-color-white);
  text-shadow: 0 0 12px var(--khet-color-gold-glow);
}

.khet-outro__brand {
  font-family: var(--khet-font-nav);
  font-weight: var(--khet-font-weight-nav);
  font-size: clamp(1.25rem, 1.6vw + 0.4rem, 1.9rem);
  letter-spacing: var(--khet-tracking-logo);
  text-transform: uppercase;
  color: var(--khet-color-sand);
}

.khet-outro.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   4. Atmospheric Loader Overlay
   Dissolves smoothly once initial engine frames / stage are ready
   -------------------------------------------------------------------------- */
.khet-loader {
  position: fixed;
  inset: 0;
  background-color: var(--khet-color-obsidian);
  z-index: var(--khet-z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.6s var(--khet-ease-out), visibility 0.6s var(--khet-ease-out);
}

.khet-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.khet-loader__mark {
  font-family: var(--khet-font-nav);
  font-weight: var(--khet-font-weight-nav);
  font-size: 1.25rem;
  letter-spacing: var(--khet-tracking-logo);
  color: var(--khet-color-sand);
  text-transform: uppercase;
}

.khet-loader__bar {
  width: 140px;
  height: 2px;
  background-color: rgba(var(--khet-color-sand-rgb), 0.1);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.khet-loader__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--khet-color-gold), var(--khet-color-gold-bright));
  box-shadow: 0 0 10px var(--khet-color-gold-glow);
  transition: width 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Mobile Adjustments for Widgets
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .khet-scarab {
    right: 1.25rem;
    width: 48px;
    height: 48px;
  }

  .khet-scarab.is-bottom {
    top: calc(100% - 4.5rem);
    right: 1.25rem;
  }

  .khet-scarab__icon {
    width: 22px;
    height: 22px;
  }

  .khet-scroll-hint {
    bottom: 1.75rem;
  }

  .khet-outro {
    bottom: 1.75rem;
  }
}