/* ==========================================================================
   Click Cues & Indicators (v4 - Main Page Stack Only)
   - Mosby stack: Cursive "click here" + animated downward arrow
   - Inside Case Files: Cues completely removed per user request
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

/* --------------------------------------------------------------------------
   1. MAIN PAGE / MOSBY DOSSIER STACK INDICATOR ("INTERNSHIPS" TAB)
      Self-drawing grey animated arrow with cursive "click here"
   -------------------------------------------------------------------------- */
.internships-click-indicator {
  position: absolute;
  top: -95px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

.internships-click-indicator.is-animating {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Pause and hide handwriting and arrow stroke until landing transition completes */
.internships-click-indicator:not(.is-animating) .reveal,
.internships-click-indicator:not(.is-animating) .shaft,
.internships-click-indicator:not(.is-animating) .head,
.cursive-arrow-svg:not(.is-animating) .reveal,
.cursive-arrow-svg:not(.is-animating) .shaft,
.cursive-arrow-svg:not(.is-animating) .head {
  animation: none !important;
  stroke-dasharray: 1 1 !important;
  stroke-dashoffset: 1 !important;
  opacity: 0 !important;
}

.internships-click-indicator.is-animating .reveal,
.cursive-arrow-svg.is-animating .reveal {
  opacity: 1 !important;
  stroke-dasharray: 1 1 !important;
  animation: write 2.2s ease-in-out forwards !important;
}

.internships-click-indicator.is-animating .shaft,
.cursive-arrow-svg.is-animating .shaft {
  stroke-dasharray: 1 1 !important;
  animation: drawShaft 4s ease-in-out 2.2s infinite both !important;
}

.internships-click-indicator.is-animating .head,
.cursive-arrow-svg.is-animating .head {
  stroke-dasharray: 1 1 !important;
  animation: drawHead 4s ease-in-out 2.2s infinite both !important;
}

@keyframes write {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes drawShaft {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  2%   { stroke-dashoffset: 1; opacity: 1; }
  40%  { stroke-dashoffset: 0; opacity: 1; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes drawHead {
  0%, 40% { stroke-dashoffset: 1; opacity: 0; }
  41%  { stroke-dashoffset: 1; opacity: 1; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .internships-click-indicator .reveal,
  .internships-click-indicator .shaft,
  .internships-click-indicator .head,
  .cursive-arrow-svg .reveal,
  .cursive-arrow-svg .shaft,
  .cursive-arrow-svg .head {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}

.internships-click-indicator:hover {
  transform: translateX(-50%) scale(1.06);
}

.internships-click-indicator:hover text.cursive {
  fill: #e2e8f0 !important;
}

.internships-click-indicator:hover g {
  stroke: #cbd5e1 !important;
}

.internships-click-indicator.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(10px) scale(0.9) !important;
}

.cursive-arrow-svg {
  width: 155px;
  height: 103px;
  overflow: visible;
  display: block;
}

/* --------------------------------------------------------------------------
   2. REMOVE ALL IN-FILE CUES / ARROWS / INDICATORS
   -------------------------------------------------------------------------- */
.audio-click-indicator,
.photo-click-indicator,
.photo-arrow-cue {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE BREAKPOINTS FOR MAIN STACK CUE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .internships-click-indicator {
    top: -56px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .internships-click-indicator:hover {
    transform: translateX(-50%) scale(1.05) !important;
  }
  .cursive-arrow-svg {
    width: 92px !important;
    height: 61px !important;
  }
}

@media (max-width: 480px) {
  .internships-click-indicator {
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .internships-click-indicator:hover {
    transform: translateX(-50%) scale(1.05) !important;
  }
  .cursive-arrow-svg {
    width: 80px !important;
    height: 53px !important;
  }
}

@media (max-width: 360px) {
  .internships-click-indicator {
    top: -46px !important;
  }
  .cursive-arrow-svg {
    width: 72px !important;
    height: 48px !important;
  }
}

/* --------------------------------------------------------------------------
   4. AUDIO WALKTHROUGH ARROW CUES (IN-CASE FILES ONLY)
   Hand-drawn grey arrow appearing on top of the files pointing down to audio components
   Draws from tail to head repeatedly
   -------------------------------------------------------------------------- */
@keyframes audioDrawShaft {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  3% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  42% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  95%, 100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes audioDrawHead {
  0%, 40% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  42% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  95%, 100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

.content-audio,
.content-video,
.content-film-reel {
  position: relative !important;
  overflow: visible !important;
}

/* Shared Cue Properties - DO NOT set top/left/bottom/right here */
.audio-arrow-cue {
  position: absolute !important;
  width: 68px !important;
  height: 68px !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 99999 !important;
  overflow: visible !important;
  display: block !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
  transition: opacity 0.35s ease;
}

/* Fallback / Top-Left Corner */
.audio-arrow-cue--top-left,
.audio-arrow-cue:not([class*="--"]) {
  top: -55px !important;
  bottom: auto !important;
  left: 15px !important;
  right: auto !important;
}

/* Top-Right Corner */
.audio-arrow-cue--top-right {
  top: -55px !important;
  bottom: auto !important;
  right: 15px !important;
  left: auto !important;
}

/* Bottom-Left Corner */
.audio-arrow-cue--bottom-left {
  bottom: -55px !important;
  top: auto !important;
  left: 15px !important;
  right: auto !important;
}

/* Bottom-Right Corner */
.audio-arrow-cue--bottom-right {
  bottom: -55px !important;
  top: auto !important;
  right: 15px !important;
  left: auto !important;
}

@media (max-width: 768px) {
  .audio-arrow-cue {
    width: 52px !important;
    height: 52px !important;
  }
  .audio-arrow-cue--top-left,
  .audio-arrow-cue:not([class*="--"]) {
    top: -42px !important;
    bottom: auto !important;
    left: 12px !important;
    right: auto !important;
  }
  .audio-arrow-cue--top-right {
    top: -42px !important;
    bottom: auto !important;
    right: 12px !important;
    left: auto !important;
  }
  .audio-arrow-cue--bottom-left {
    bottom: -42px !important;
    top: auto !important;
    left: 12px !important;
    right: auto !important;
  }
  .audio-arrow-cue--bottom-right {
    bottom: -42px !important;
    top: auto !important;
    right: 12px !important;
    left: auto !important;
  }
}

@media (max-width: 480px) {
  .audio-arrow-cue {
    width: 44px !important;
    height: 44px !important;
  }
  .audio-arrow-cue--top-left,
  .audio-arrow-cue:not([class*="--"]) {
    top: -36px !important;
    bottom: auto !important;
    left: 8px !important;
    right: auto !important;
  }
  .audio-arrow-cue--top-right {
    top: -36px !important;
    bottom: auto !important;
    right: 8px !important;
    left: auto !important;
  }
  .audio-arrow-cue--bottom-left {
    bottom: -36px !important;
    top: auto !important;
    left: 8px !important;
    right: auto !important;
  }
  .audio-arrow-cue--bottom-right {
    bottom: -36px !important;
    top: auto !important;
    right: 8px !important;
    left: auto !important;
  }
}

.audio-arrow-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: block !important;
}

.audio-arrow-svg path {
  stroke: #555555 !important;
  stroke-width: 4.5 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.audio-arrow-svg .shaft {
  stroke-dasharray: 1 !important;
  animation: audioDrawShaft 2.8s ease-in-out infinite both !important;
}

.audio-arrow-svg .head {
  stroke-dasharray: 1 !important;
  animation: audioDrawHead 2.8s ease-in-out infinite both !important;
}

@media (prefers-reduced-motion: reduce) {
  .audio-arrow-svg .shaft,
  .audio-arrow-svg .head {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}

body.has-active-paper-audio .audio-arrow-cue {
  opacity: 0 !important;
}