/* 
  Compass News: Global Core Animations 
  Includes the signature "searching" and "pulse" effects.
*/

@keyframes compass-searching {
  0% { transform: rotate(0deg); }
  7.5% { transform: rotate(45deg); }
  16.5% { transform: rotate(-68deg); }
  27.75% { transform: rotate(85deg); }
  35.25% { transform: rotate(-34deg); }
  41.25% { transform: rotate(23deg); }
  48.75% { transform: rotate(-10deg); }
  56.25% { transform: rotate(5deg); }
  63.75% { transform: rotate(-2deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes compass-pulse {
  0%, 41.2% { transform: scale(1); opacity: 0; }
  48.75% { transform: scale(3.5); opacity: 0.3; } /* Dimmed from 0.6 */
  70% { transform: scale(6.5); opacity: 0.05; } /* Dimmed from 0.1 */
  85%, 100% { transform: scale(8); opacity: 0; }
}

/* Mobile FAB Styles */
.m3-mobile-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  border-radius: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 2000;
  border: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.m3-mobile-toggle svg { fill: var(--m3-on-primary); }

@media (max-width: 991px) {
  .m3-mobile-toggle { display: flex; }
}

/* ✨ PHASE 2: CHOREOGRAPHED MOTION */

/* 2.2 TYPOGRAPHY REVEAL (The "Expanding Story" effect) */
.reveal-text {
  transform: translateY(20px);
  letter-spacing: -0.05em;
  transition:
    transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
    letter-spacing 1.5s cubic-bezier(0.1, 0.9, 0.2, 1);
  will-change: transform, letter-spacing;
}

.reveal-text.is-visible {
  transform: translateY(0);
  letter-spacing: -0.015em;
}

/* Zoom Reveal for Images - controlled by JS scroll animation */
.reveal-zoom {
  opacity: 0.3;
  transform: scale(0.7);
  will-change: transform, opacity;
}

/* Variable Axis Reveal */
.reveal-soft {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  transition: font-variation-settings 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-soft.is-visible {
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

/* 2.3 MICRO-PARALLAX UTILITY */
.parallax-element {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Store Indicator Refinement */
.store-indicator-btn.standalone {
  margin-right: 8px; /* Separation from other buttons */
}

.store-indicator-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.store-indicator-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.15) !important;
}

.primary-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.primary-button:active {
  transform: translateY(0);
}