/* ============================================
   THE BASE BOOKS — ANIMATIONS STYLESHEET
   animations.css
   ============================================ */

/* ============ REVEAL ON SCROLL ============ */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

.reveal-fade {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-out);
  transition-delay: var(--delay, 0.15s);
}

.reveal-up.in-view,
.reveal-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============ HERO SVG FLOAT ============ */
.hero-svg {
  animation: gentleFloat 6s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ============ PAGE LOAD FADE ============ */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: pageFadeIn 0.6s var(--ease-out) forwards;
}

/* ============ LOADING SCREEN ============ */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  opacity: 0;
  animation: loadLogoIn 0.6s var(--ease-out) 0.2s forwards;
}

@keyframes loadLogoIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loading-bar {
  width: 120px;
  height: 1px;
  background: var(--border);
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  background: var(--accent-gold);
  width: 0%;
  animation: loadBarFill 0.9s var(--ease-out) 0.4s forwards;
}

@keyframes loadBarFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ============ NAV LINK HOVER ============ */
.nav-link {
  transition: color 0.25s ease;
}

/* ============ CARD HOVER LIFT ============ */
.value-card,
.journal-card {
  will-change: transform;
}

/* ============ SCROLL INDICATOR BOUNCE ============ */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

.scroll-indicator {
  animation: bounce 2.5s ease-in-out infinite;
}

/* ============ FORM SUCCESS ANIMATION ============ */
@keyframes successPop {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

.form-message.success {
  animation: successPop 0.4s var(--ease-out) forwards;
}

/* ============ BACK TO TOP BUTTON ============ */
.back-to-top {
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s;
}

/* ============ NOTIFY MODAL ============ */
.notify-success-icon {
  animation: successPop 0.4s var(--ease-out) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .notify-overlay,
  .notify-modal {
    transition-duration: 0.01ms !important;
  }
}