/* ─── PAGE TRANSITIONS ────────────────────────────────────────────────────── */

body {
  opacity: 1;
  transition: opacity 300ms ease;
}

body.page-exit {
  opacity: 0;
  transition: opacity 200ms ease;
}

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

body.page-enter {
  animation: pageEnter 300ms ease forwards;
}

/* ─── HERO ANIMATIONS ─────────────────────────────────────────────────────── */

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

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

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

.hero-name {
  opacity: 0;
  animation: heroSlideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}

.hero-tagline {
  opacity: 0;
  animation: heroSlideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 320ms forwards;
}

.hero-arrow-wrap {
  opacity: 0;
  animation: heroFadeIn 600ms ease 680ms forwards;
}

.hero-arrow-wrap {
  animation-name: heroFadeIn, arrowBounce;
  animation-duration: 600ms, 2.2s;
  animation-delay: 680ms, 1.4s;
  animation-timing-function: ease, ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
}

/* ─── SCROLL REVEAL ───────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Staggered children inside a reveal parent */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.is-revealed > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-stagger.is-revealed > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 80ms; }
.reveal-stagger.is-revealed > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 160ms; }
.reveal-stagger.is-revealed > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 240ms; }
.reveal-stagger.is-revealed > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 320ms; }
.reveal-stagger.is-revealed > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 400ms; }
.reveal-stagger.is-revealed > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 460ms; }
.reveal-stagger.is-revealed > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 520ms; }
.reveal-stagger.is-revealed > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: 580ms; }
.reveal-stagger.is-revealed > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 620ms; }
.reveal-stagger.is-revealed > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 660ms; }
.reveal-stagger.is-revealed > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 700ms; }
.reveal-stagger.is-revealed > *:nth-child(13) { opacity: 1; transform: none; transition-delay: 740ms; }
.reveal-stagger.is-revealed > *:nth-child(14) { opacity: 1; transform: none; transition-delay: 780ms; }
.reveal-stagger.is-revealed > *:nth-child(15) { opacity: 1; transform: none; transition-delay: 820ms; }
.reveal-stagger.is-revealed > *:nth-child(16) { opacity: 1; transform: none; transition-delay: 860ms; }

/* ─── CARD INTERACTIONS ───────────────────────────────────────────────────── */

.card-lift {
  transition: transform var(--trans-normal);
}

.card-lift:hover {
  transform: translateY(-4px);
}

.card-tilt {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

.card-tilt:hover {
  transform: rotate(2deg) translateY(-4px);
}

/* ─── LIGHTBOX ────────────────────────────────────────────────────────────── */

@keyframes lightboxOpen {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-img {
  animation: lightboxOpen 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Cursor turns white when lightbox is open (dark overlay makes dark cursor invisible) */
#lightbox.is-open ~ #cursor {
  border-color: #ffffff;
}

#lightbox.is-open ~ #cursor[data-state="hover"] {
  background: #ffffff;
  border-color: #ffffff;
}