/* ══════════════════════════════════════════════════════════════════════════
   Homepage UX Enhancements Styles (2026-10)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PROGRESS BAR ── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: var(--color-gold-light);
  z-index: 99;
  transition: width 150ms ease-out, background-color 300ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

/* ── 2. SCROLL RESUME HINT ── */
.resume-hint {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 50;
  background: var(--color-glass-solid);
  border: 1px solid rgba(242, 202, 80, 0.4);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(12px);
  animation: slideInRight 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.resume-hint-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-gold-light);
  text-transform: uppercase;
}

.resume-hint-close {
  background: transparent;
  border: none;
  color: var(--color-gold-light);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
}

.resume-hint-close:hover {
  color: var(--color-accent-highlight);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .resume-hint {
    top: auto;
    bottom: 80px;
    right: 12px;
    left: 12px;
  }
}

/* ── 3. SECTION INDICATOR ── */
.section-indicator {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-glass-light-solid);
  border: 1px solid rgba(242, 202, 80, 0.3);
  border-radius: 3px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  animation: fadeIn 300ms ease-out;
  pointer-events: none;
}

.section-name {
  display: inline-block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .section-indicator {
    display: none;
  }
}

/* ── 4. INTERACTION HINTS ── */
.interaction-hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-glass-solid);
  border: 1px solid rgba(242, 202, 80, 0.3);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 202, 80, 0.7);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 10;
}

.interaction-hint::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(19, 19, 21, 0.95);
}

/* Show hint if element marked with show-hint class */
.show-hint .interaction-hint {
  opacity: 1;
}

@media (max-width: 768px) {
  .interaction-hint {
    display: none;
  }
}

/* ── 5. VITRINE GESTURE ENHANCEMENTS ── */
#master-vitrine-card {
  cursor: grab;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#master-vitrine-card:active {
  cursor: grabbing;
}

#master-vitrine-card.show-hint {
  animation: vitrineHintPulse 2s ease-in-out;
}

@keyframes vitrineHintPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Enhanced view tabs for touch */
@media (hover: none), (pointer: coarse) {
  .vitrine-view-btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
  }

  .vitrine-tab {
    min-height: 48px !important;
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
  }
}

/* ── 6. WAVEFORM ENHANCEMENTS ── */
#real-waveform {
  position: relative;
  cursor: ew-resize;
}

.scrub-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(19, 19, 21, 0.9);
  border: 1px solid rgba(242, 202, 80, 0.3);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 202, 80, 0.7);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  animation: fadeIn 300ms ease-out;
}

.scrub-label::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(19, 19, 21, 0.9);
}

/* Scrub thumb for touch interfaces */
.scrub-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--color-gold-light);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(242, 202, 80, 0.6);
  opacity: 0;
  transition: opacity 150ms ease;
}

.scrub-thumb.active {
  opacity: 1;
}

/* Transcript sync highlighting */
.transcript-seg.scrub-preview {
  color: var(--color-gold-light) !important;
  font-weight: 500;
}

/* Enhanced tape-head on touch */
@media (hover: none), (pointer: coarse) {
  .tape-head {
    min-width: 44px;
    min-height: 44px;
  }

  .tape-head-line {
    width: 2px;
    box-shadow: 0 0 8px rgba(233, 195, 73, 0.5);
  }
}

/* ── 7. SECTION LAZY LOAD INDICATORS ── */
[data-loaded="true"] {
  /* Section has loaded its features */
}

/* Fade in effect when section scripts load */
@keyframes sectionFadeIn {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 1;
  }
}

section[data-loaded="true"] {
  animation: sectionFadeIn 300ms ease-out;
}

/* ── 8. RESPONSIVE & ACCESSIBILITY ── */

@media (prefers-reduced-motion: reduce) {
  .progress-bar,
  .resume-hint,
  .section-indicator,
  .interaction-hint,
  #master-vitrine-card,
  .scrub-label,
  .scrub-thumb,
  section[data-loaded="true"] {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: light) {
  .progress-bar {
    background-color: var(--color-accent);
  }

  .resume-hint,
  .section-indicator,
  .interaction-hint,
  .scrub-label {
    background: rgba(244, 239, 230, 0.95);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--color-paper);
  }

  .resume-hint-text,
  .section-name,
  .interaction-hint,
  .scrub-label {
    color: var(--color-accent);
  }

  .resume-hint-close {
    color: var(--color-accent);
  }

  .resume-hint-close:hover {
    color: var(--color-hairline-gold);
  }
}

/* ── 9. UTILITY: TOUCH INTERACTION TARGETS ── */
/* Ensure all interactive hints/buttons meet 44x44px minimum */
.interaction-hint,
.resume-hint-close,
.scrub-thumb {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}