/* ==============================================
   ANIMATIONS — Motion System & Micro-interactions
   ============================================== */

/* --- Hero staged entrance --- */
.hero__marker,
.hero__title,
.hero__aside,
.hero__meta {
  opacity: 0;
  transform: translateY(24px);
}

.hero--revealed .hero__marker {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s var(--ease-out),
              transform 0.55s var(--ease-out);
  transition-delay: 0.05s;
}

.hero--revealed .hero__title {
  opacity: 1;
  transform: translateY(0);
  /* Expressive settle — weighted, deliberate, not bouncy */
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.18s;
}

.hero--revealed .hero__aside {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.85s var(--ease-out),
              transform 0.85s var(--ease-out);
  transition-delay: 0.46s;
}

.hero--revealed .hero__meta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s var(--ease-out),
              transform 0.75s var(--ease-out);
  transition-delay: 0.66s;
}


/* --- Scroll-triggered entrance --- */
.animate-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-in[data-delay="1"] { transition-delay: 120ms; }
.animate-in[data-delay="2"] { transition-delay: 240ms; }
.animate-in[data-delay="3"] { transition-delay: 360ms; }
.animate-in[data-delay="4"] { transition-delay: 480ms; }

.animate-in--visible {
  opacity: 1;
  transform: translateY(0);
}


/* --- Section reveal — staggered content --- */
.section-rule {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

.section-rule--visible {
  opacity: 1;
  transform: translateY(0);
}

.section-rule__line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out) 0.2s;
}

.section-rule--visible .section-rule__line {
  transform: scaleX(1);
}


/* --- Status dot pulse --- */
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.hero__marker-dot {
  animation: statusPulse 3s ease-in-out infinite;
}


/* --- Floating editorial elements --- */
@keyframes floatDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  18%  { transform: translate(9px, -15px) rotate(0.9deg) scale(1.01); }
  42%  { transform: translate(-5px, -9px) rotate(-0.6deg) scale(0.99); }
  65%  { transform: translate(7px, -20px) rotate(0.7deg) scale(1.01); }
  82%  { transform: translate(-2px, -11px) rotate(-0.3deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatDriftAlt {
  0%   { transform: translate(0, 0) rotate(0deg); }
  28%  { transform: translate(-13px, -10px) rotate(-1.3deg); }
  55%  { transform: translate(8px, -18px) rotate(1.0deg); }
  78%  { transform: translate(-4px, -7px) rotate(-0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Deep drift — more travel, light scale pulse */
@keyframes floatDriftDeep {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  15%  { transform: translate(-16px, -20px) rotate(-1.2deg) scale(1.025); }
  38%  { transform: translate(11px, -13px) rotate(1.4deg) scale(0.975); }
  60%  { transform: translate(-9px, -24px) rotate(-0.9deg) scale(1.015); }
  82%  { transform: translate(13px, -9px) rotate(0.6deg) scale(0.99); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Chip: drift with continuous idle rotation */
@keyframes chipFloat {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  25%  { transform: translate(5px, -10px) rotate(6deg); }
  50%  { transform: translate(-4px, -7px) rotate(-4deg); }
  75%  { transform: translate(7px, -14px) rotate(7deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}

/* Strip: gradient shimmer passes left to right */
@keyframes stripShimmer {
  0%   { background-position: -100% 50%; }
  100% { background-position: 250% 50%; }
}

@keyframes floatFade {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.92; }
}

/* Arrow launch — tilts up then snaps straight */
@keyframes arrowLaunch {
  0%   { transform: translateX(0) rotate(0deg); }
  30%  { transform: translateX(3px) rotate(-34deg); }
  62%  { transform: translateX(6px) rotate(-10deg); }
  100% { transform: translateX(5px) rotate(0deg); }
}

/* Btn editorial shimmer: handled via background-position on ::before */

/* --- Material stain keyframes ---
   Hero stain uses stainFloat at 38s — clearly perceptible.
   Section stains use stainDrift at longer durations — subtle.
------------------------------------------------ */

/* Pronounced float for the hero surface stain */
@keyframes stainFloat {
  0%   { transform: translate(0, 0) scale(1, 1); }
  20%  { transform: translate(18px, -24px) scale(1.03, 0.975); }
  42%  { transform: translate(-11px, -16px) scale(0.97, 1.025); }
  65%  { transform: translate(14px, -28px) scale(1.025, 0.985); }
  84%  { transform: translate(-6px, -12px) scale(0.99, 1.01); }
  100% { transform: translate(0, 0) scale(1, 1); }
}

@keyframes stainDrift {
  0%   { transform: translate(0, 0) scale(1, 1); }
  35%  { transform: translate(10px, -14px) scale(1.02, 0.985); }
  68%  { transform: translate(-7px, -9px) scale(0.98, 1.015); }
  100% { transform: translate(0, 0) scale(1, 1); }
}

@keyframes stainDriftAlt {
  0%   { transform: translate(0, 0) scale(1, 1); }
  28%  { transform: translate(-10px, -12px) scale(1.015, 0.98); }
  62%  { transform: translate(7px, -16px) scale(0.985, 1.02); }
  100% { transform: translate(0, 0) scale(1, 1); }
}

@keyframes stainBreathe {
  0%, 100% { opacity: 0.82; }
  52%      { opacity: 1; }
}


.floater {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  --px: 0px;
  --py: 0px;
  translate: var(--px) var(--py);
}

.floater--visible {
  opacity: 1;
}

/* Annotation tab */
.floater--tab {
  background: rgba(49, 92, 255, 0.05);
  border: 1px solid rgba(49, 92, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
  animation: floatDrift 11s ease-in-out infinite,
             floatFade 7s ease-in-out infinite 1.5s;
}

/* Caption block */
.floater--caption {
  background: rgba(36, 63, 174, 0.05);
  border-left: 2px solid var(--accent-muted);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  color: rgba(110, 127, 184, 0.70);
  animation: floatDriftAlt 15s ease-in-out infinite;
  max-width: 120px;
  line-height: 1.4;
}

/* Index marker */
.floater--index {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: rgba(49, 92, 255, 0.05);
  line-height: 1;
  animation: floatDrift 18s ease-in-out infinite;
  user-select: none;
}

/* Translucent card */
.floater--card {
  width: 64px;
  height: 40px;
  background: linear-gradient(
    135deg,
    rgba(49, 92, 255, 0.06) 0%,
    rgba(49, 92, 255, 0.02) 100%
  );
  border: 1px solid rgba(49, 92, 255, 0.10);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
  animation: floatDriftAlt 14s ease-in-out infinite;
}

/* Material chip — drifts with slow idle rotation */
.floater--chip {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(13, 21, 53, 0.50);
  border: 1px solid rgba(49, 92, 255, 0.12);
  animation: chipFloat 13s ease-in-out infinite,
             floatFade 9s ease-in-out infinite 2s;
}

/* Notation strip — shimmer scans across the gradient */
.floater--strip {
  width: 72px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-muted) 35%,
    var(--accent-vivid) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 50%;
  border-radius: 2px;
  animation: floatDriftAlt 10s ease-in-out infinite,
             stripShimmer 3.2s linear infinite;
}

.floater--strip.floater--visible {
  opacity: 1;
}


/* --- Atmospheric material stains ---
   Not an icon. Not a sun. Not a blob.
   A tonal event inside the page material.

   Mental model: screen-print residue, pigment absorbed into paper,
   a warm pressure stain left in the surface.

   Technique: multiple offset radial gradients within the same element
   create uneven density — as if pigment settled unevenly when printed.
   Heavy blur removes all geometry. screen blend mode adds luminosity
   the way light would, not as a painted layer.

   Color family: same wine/burgundy as the background, 5-8% lighter.
   No contrast edge. No outline. Almost invisible at first glance.
------------------------------------------------ */

.atm-bloom {
  mix-blend-mode: screen;
  border-radius: 62% 38% 54% 46% / 46% 58% 42% 56%;
  background:
    radial-gradient(ellipse 52% 44% at 40% 44%,
      rgba(161, 76, 104, 0.28)  0%,
      rgba(142, 63, 93,  0.10)  50%,
      transparent               74%),
    radial-gradient(ellipse 44% 36% at 60% 56%,
      rgba(142, 63, 93,  0.18)  0%,
      rgba(118, 48, 74,  0.06)  52%,
      transparent               72%),
    radial-gradient(ellipse 36% 28% at 30% 34%,
      rgba(161, 76, 104, 0.14)  0%,
      transparent               58%);
  filter: blur(96px) contrast(0.97);
  animation: stainDrift 64s ease-in-out infinite,
             stainBreathe 26s ease-in-out infinite;
  transition: opacity 3s var(--ease-out);
}

.atm-bloom.floater--visible {
  opacity: 1;
}

/* Primary hero stain.
   Key principle: the element is oversized (1000×800px) and positioned so
   the gradient center sits at or just beyond the left edge of the viewport.
   What appears inside the hero is only the right-side diffusion haze —
   warm atmosphere without a visible origin point or perimeter.
   At blur(148px) on a 1000px element, no geometry survives. */
.atm-bloom--primary {
  width: 1000px;
  height: 800px;
  border-radius: 55% 45% 62% 38% / 46% 60% 40% 54%;
  background:
    radial-gradient(ellipse 54% 48% at 28% 44%,
      rgba(161, 76, 104, 0.30)  0%,
      rgba(142, 63, 93,  0.10)  50%,
      transparent               74%),
    radial-gradient(ellipse 42% 34% at 52% 56%,
      rgba(142, 63, 93,  0.18)  0%,
      rgba(118, 48, 74,  0.06)  54%,
      transparent               72%),
    radial-gradient(ellipse 32% 24% at 20% 28%,
      rgba(161, 76, 104, 0.12)  0%,
      transparent               56%);
  filter: blur(148px) contrast(0.94);
  animation: stainDrift 82s ease-in-out infinite,
             stainBreathe 38s ease-in-out infinite;
}

.atm-bloom--primary.floater--visible {
  opacity: 1;
}

/* Secondary hero stain — very faint, lower-right, compositional counterweight.
   Much smaller presence. Should be nearly imperceptible. */
.atm-bloom--secondary {
  width: 300px;
  height: 240px;
  border-radius: 44% 56% 52% 48% / 58% 42% 56% 44%;
  background:
    radial-gradient(ellipse 56% 48% at 44% 50%,
      rgba(161, 76, 104, 0.20)  0%,
      rgba(142, 63, 93,  0.07)  52%,
      transparent               74%),
    radial-gradient(ellipse 34% 26% at 64% 38%,
      rgba(142, 63, 93,  0.12)  0%,
      transparent               58%);
  filter: blur(88px) contrast(0.97);
  animation: stainDriftAlt 88s ease-in-out infinite,
             stainBreathe 40s ease-in-out infinite 12s;
}

.atm-bloom--secondary.floater--visible {
  opacity: 1;
}

/* Small — work/workflow sections */
.atm-bloom--sm {
  width: 380px;
  height: 300px;
  border-radius: 54% 46% 46% 54% / 48% 56% 44% 52%;
  background:
    radial-gradient(ellipse 60% 50% at 44% 48%,
      rgba(161, 76, 104, 0.22)  0%,
      rgba(142, 63, 93,  0.08)  48%,
      transparent               72%),
    radial-gradient(ellipse 36% 28% at 58% 38%,
      rgba(142, 63, 93,  0.14)  0%,
      transparent               56%);
  filter: blur(90px) contrast(0.97);
  animation: stainDriftAlt 70s ease-in-out infinite,
             stainBreathe 28s ease-in-out infinite 14s;
}

.atm-bloom--sm.floater--visible {
  opacity: 1;
}


/* --- Work card hover interactions --- */
.project--poster,
.project--archive,
.project--editorial {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project--poster:hover,
.project--archive:hover {
  transform: translateY(-3px);
}

.project__image-frame,
.project__archive-image,
.project__editorial-image {
  transition: box-shadow 0.5s var(--ease-out);
}

.project--poster:hover .project__image-frame,
.project--archive:hover .project__archive-image,
.project--editorial:hover .project__editorial-image {
  box-shadow: 0 16px 48px rgba(49, 92, 255, 0.12),
              0 4px 16px rgba(10, 2, 6, 0.18);
}

.project__img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.project--poster:hover .project__img,
.project--archive:hover .project__img,
.project--editorial:hover .project__img {
  transform: scale(1.025);
}

/* Title shifts to full cream on hover */
.project__title {
  transition: color var(--duration-normal) var(--ease-out);
}

.project--poster:hover .project__title,
.project--archive:hover .project__title,
.project--editorial:hover .project__title {
  color: var(--cream);
}

/* Metadata emphasis on hover */
.project__taxonomy {
  transition: color var(--duration-normal) var(--ease-out);
}

.project--poster:hover .tax,
.project--archive:hover .tax,
.project--editorial:hover .tax {
  color: var(--accent-muted);
}


/* Project editorial overlay index shift */
.project__editorial-overlay {
  transition: transform var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
}

.project--editorial:hover .project__editorial-overlay {
  transform: translate(-2px, -2px);
  background: rgba(49, 92, 255, 0.08);
}


/* --- Button micro-interactions — liquid glass inspired --- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform 0.5s var(--ease-out);
}

.btn:hover::before {
  opacity: 1;
  transform: scale(1.6);
}

.btn:active::before {
  opacity: 0.6;
  transform: scale(2.2);
  transition: opacity 60ms, transform 0.3s var(--ease-out);
}


/* --- Stat hover --- */
.stat {
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.stat:hover {
  border-color: var(--accent-muted);
  box-shadow: 0 4px 16px rgba(49, 92, 255, 0.10);
  transform: translateY(-2px);
}


/* --- Discipline tag hover --- */
.about__disc-list span {
  transition: all var(--duration-normal) var(--ease-out);
}

.about__disc-list span:hover {
  border-color: var(--accent-muted);
  color: var(--accent-deep);
  box-shadow: 0 2px 8px rgba(49, 92, 255, 0.08);
  transform: translateY(-1px);
}


/* --- Workflow pillar hover --- */
.workflow__pillar {
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.workflow__pillar:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}


/* --- Nav link underline --- */
.nav__link::after {
  transition: width var(--duration-normal) var(--ease-out);
}


/* --- Modal transitions --- */
.modal {
  transition: opacity var(--duration-slow) var(--ease-out),
              visibility 0ms linear var(--duration-slow);
}

.modal[aria-hidden="false"] {
  transition: opacity var(--duration-slow) var(--ease-out),
              visibility 0ms linear 0ms;
}

.modal__container {
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
}


/* --- Outcome card --- */
.outcome {
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.outcome:hover {
  box-shadow: 0 6px 20px rgba(49, 92, 255, 0.08);
}


/* --- Focus ring --- */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  transition: outline-offset var(--duration-fast) var(--ease-out);
}


/* --- Section fade --- */
section {
  transition: opacity var(--duration-slower) var(--ease-out);
}


/* --- Loading state --- */
body.loading {
  overflow: hidden;
}

body.loading .hero {
  opacity: 0;
}


/* --- Reduced motion master override --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__marker,
  .hero__title,
  .hero__aside,
  .hero__meta {
    opacity: 1;
    transform: none;
  }

  .floater {
    display: none;
  }

  .section-rule {
    opacity: 1;
    transform: none;
  }

  .section-rule__line {
    transform: scaleX(1);
  }

  .animate-in {
    opacity: 1;
    transform: none;
  }
}


/* --- Mobile adjustments for floating elements --- */
@media (max-width: 768px) {
  /* Disable parallax on touch — keep floaters in their CSS positions */
  .floater {
    translate: 0 0 !important;
  }

  /* Scale large blooms down to fit mobile viewport */
  .atm-bloom--primary {
    width: 380px;
    height: 300px;
    filter: blur(80px) contrast(0.97);
  }

  .atm-bloom--secondary {
    width: 200px;
    height: 160px;
    filter: blur(60px) contrast(0.97);
  }

  .atm-bloom--sm {
    width: 220px;
    height: 180px;
    filter: blur(60px) contrast(0.97);
  }

  /* Tone down small floaters slightly so they don't crowd content */
  .floater--chip,
  .floater--strip,
  .floater--tab,
  .floater--card,
  .floater--caption {
    opacity: 0.5;
  }
}