/* ============================================
   CUSTOM CURSOR
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  *, *:hover {
    cursor: none !important;
  }
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}

.custom-cursor.is-active {
  opacity: 1;
}

.custom-cursor__glyph {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  line-height: 1;
  color: var(--color-dark, #2b2b2b);
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.3s ease;
}

.custom-cursor--inverted .custom-cursor__glyph {
  color: var(--color-white, #ffffff);
}

/* ============================================
   PAGE LOAD — ABOVE-FOLD STAGGER
   ============================================ */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Home hero */
.hero-badge                { animation: reveal-up 0.7s  var(--ease-smooth) 0.05s both; }
.hero-title                { animation: reveal-up 0.75s var(--ease-smooth) 0.15s both; }
.hero-desc                 { opacity: 0; } /* typewriter reveals this via JS */
.hero-split__left .btn-cta { animation: reveal-up 0.65s var(--ease-smooth) 0.25s both; }

/* Photo: curtain reveal (left → right) */
@keyframes reveal-curtain {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}
.hero-split__right { animation: none; }

/* Typewriter blinking cursor */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: currentColor;
  margin-left: 1px;
  vertical-align: middle;
  animation: cursor-blink 0.65s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* About page */
.about-hero__left { animation: reveal-curtain 1.1s cubic-bezier(0.77, 0, 0.175, 1) 0.06s both; }
.about-label  { animation: reveal-up 0.65s var(--ease-smooth) 0.05s both; }

/* Contact page */
.contact-heading      { animation: reveal-up 0.75s var(--ease-smooth) 0.05s both; }
.contact-subtitle     { animation: reveal-up 0.65s var(--ease-smooth) 0.15s both; }
.contact-split__right { animation: reveal-curtain 1.1s cubic-bezier(0.77, 0, 0.175, 1) 0.06s both; }

/* Projects listing page */
.projects-page__title { animation: reveal-up 0.75s var(--ease-smooth) 0.12s both; }

/* Play page */
.play-label    { animation: reveal-up 0.65s var(--ease-smooth) 0.05s both; }
.play-title    { animation: reveal-up 0.75s var(--ease-smooth) 0.15s both; }
.play-subtitle { animation: reveal-up 0.65s var(--ease-smooth) 0.25s both; }
.play-hub      { animation: reveal-up 0.80s var(--ease-smooth) 0.35s both; }

/* Project detail pages (v2 — editorial) */
.pd-back-link   { animation: reveal-up 0.55s var(--ease-smooth) 0.05s both; }
.pd-category    { animation: reveal-up 0.65s var(--ease-smooth) 0.15s both; }
.pd-title       { animation: reveal-up 0.80s var(--ease-smooth) 0.25s both; }
.pd-meta-stack  { animation: reveal-up 0.65s var(--ease-smooth) 0.35s both; }
.pd-intro__right{ animation: reveal-up 1.10s var(--ease-smooth) 0.06s both; }

/* ============================================
   ABOUT QUOTE — slide-in from left
   ============================================ */

.about-quote[data-reveal] {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity  0.9s var(--ease-smooth),
    transform 0.9s var(--ease-smooth);
}

.about-quote[data-reveal].is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity  0.75s var(--ease-smooth) var(--reveal-delay, 0ms),
    transform 0.75s var(--ease-smooth) var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Slightly slower / subtler for big image containers */
[data-reveal~="slow"] {
  transform: translateY(14px);
  transition-duration: 1.0s, 1.0s;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* hero-desc: shown immediately (typewriter skipped by JS) */
  .hero-desc { opacity: 1 !important; }
  /* photos: skip clip-path animation */
  .hero-split__right,
  .contact-split__right { animation: none !important; clip-path: none !important; }

  .hero-badge, .hero-title,
  .hero-split__left .btn-cta,
  .about-hero__left, .about-label,
  .contact-heading, .contact-subtitle,
  .projects-page__title,
  .pd-back-link, .pd-category, .pd-title,
  .about-quote,
  .pd-meta-stack, .pd-intro__right,
  .play-label, .play-title, .play-subtitle, .play-hub,
  .asterisk-grid__cell {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .custom-cursor {
    display: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    * { cursor: auto !important; }
  }
}