/* ============================================================
   DANIEL GLAZE PORTFOLIO — Animations & Transitions
   ============================================================
   All animation keyframes and transition definitions live here.
   Edit timing values to tune the feel of the site.
   ============================================================ */

/* ── Page Fade-In ────────────────────────────────────────────
   Applied to <main> on page load for a gentle entrance.
   ──────────────────────────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

main {
  animation: pageFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.08s;
}

/* ── Retro Frame Line Draw Animation ─────────────────────────
   Used when cards first appear, each line draws in.
   stroke-dasharray and stroke-dashoffset are set inline by JS.
   ──────────────────────────────────────────────────────────── */
@keyframes lineDrawIn {
  from { stroke-dashoffset: var(--line-length, 1000); }
  to   { stroke-dashoffset: 0; }
}

/* ── Disco Ball Descent — About Page First Visit ─────────────
   Ball descends from top, then settles and spins.
   ──────────────────────────────────────────────────────────── */
@keyframes discoBallDescend {
  0%   { transform: translateY(-180px) rotate(0deg); opacity: 0; }
  40%  { opacity: 1; }
  70%  { transform: translateY(0px) rotate(180deg); }
  85%  { transform: translateY(-12px) rotate(216deg); }
  100% { transform: translateY(0px) rotate(240deg); }
}

@keyframes discoBallSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

/* Reflection spots that radiate from the disco ball */
@keyframes reflectionRadiate {
  0%   { opacity: 0; transform: scale(0.3) translate(var(--rx, 0), var(--ry, 0)); }
  30%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.5) translate(var(--rx, 0), var(--ry, 0)); }
}

.disco-ball-stage .reflection-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: white;
  animation: reflectionRadiate 1.8s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── About Content Fade-In ───────────────────────────────────
   Triggered by disco.js after the ball animation completes.
   ──────────────────────────────────────────────────────────── */
@keyframes aboutFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.about-fade-in {
  animation: aboutFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Disco Cursor Sparkle ─────────────────────────────────── */
@keyframes discoCursorSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sparkleFlash {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%       { opacity: 1; transform: scale(1); }
}

/* ── Section Entrance — Scroll-triggered ─────────────────────
   Applied by main.js via IntersectionObserver.
   ──────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Case Study Retro Scroll Lines ───────────────────────────
   SVG lines on case study pages that animate as user scrolls.
   The SVG is positioned fixed/sticky and JS controls the offset.
   ──────────────────────────────────────────────────────────── */
.cs-scroll-line svg {
  width: 100%;
  height: 100%;
}

.cs-scroll-stroke {
  stroke: var(--page-color, #B5ADA4);
  fill: none;
  stroke-width: 1.5;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.cs-scroll-stroke.active { opacity: 0.7; }

/* ── Tab Switch Transition ────────────────────────────────── */
@keyframes tabContentIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
  animation: tabContentIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Hover Micro-animations ──────────────────────────────────
   Subtle scale/lift effects on interactive elements.
   ──────────────────────────────────────────────────────────── */
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* ── Loading State ────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--bg) 50%,
    var(--surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}

/* ── Disco Ball SVG Styles ────────────────────────────────── */
.disco-ball-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.3));
}

/* Tile rows animate with a subtle shimmer */
.disco-tile {
  animation: discoBallSpin 4s linear infinite;
  transform-origin: center;
}

/* ── Reduce Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}