/* ============================================
   MOTION SYSTEM — JASON HANLON PORTFOLIO
   ============================================ */

/* --- KEYFRAMES --- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes lineExpand {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes scrollPulse {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

@keyframes heroVideoZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.02); }
}

@keyframes ambientFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(0.5deg); }
  66%       { transform: translateY(6px) rotate(-0.3deg); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 0.6; transform: translate(-50%,-50%) scale(1.08); }
}

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

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

/* --- HERO VIDEO ANIMATION --- */
.hero-video {
  animation: heroVideoZoom 18s ease-in-out infinite alternate;
}

/* --- HERO GLOW ANIMATION --- */
.hero-glow {
  animation: glowPulse 6s ease-in-out infinite;
}

/* --- AMBIENT FLOAT for decorative elements --- */
/* Classes .float-slow and .float-med available for future use */

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

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

.loading-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.loading-bar-track {
  width: 200px;
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  animation: progressBar 1.8s var(--ease-out) 0.2s forwards;
}

.loading-count {
  font-size: 0.75rem; /* raised from 0.65rem (10.4px) → 12px for WCAG readability */
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* --- CARD HOVER OVERLAY --- */
.work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-med);
  pointer-events: none;
  z-index: 1;
}

.work-card:hover::before { opacity: 1; }

/* --- SECTION DIVIDERS WITH MOTION --- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
  margin: var(--space-7) 0;
}

.divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.divider.animate::after {
  animation: dividerSweep 1.5s var(--ease-out) forwards;
}

@keyframes dividerSweep {
  from { left: -40%; }
  to   { left: 140%; }
}

/* --- MEDIA QUERIES for reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-video { animation: none; }
  /* marquee is already skipped in JS when reduced-motion is detected */
}