/* ============================================
   PAGE ANIMATIONS — Staggered entrance + scroll reveals
   Paste into: Design > Custom CSS

   Makes content cascade in on page load and
   tiles reveal as you scroll. Works with the
   page-transition system.
   ============================================ */

/* ---- Staggered page entrance ---- */
@keyframes pageFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content sections cascade in after page loads */
body.page-loaded .page-section {
  animation: pageFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.page-loaded .page-section:nth-child(1) { animation-delay: 100ms; }
body.page-loaded .page-section:nth-child(2) { animation-delay: 200ms; }
body.page-loaded .page-section:nth-child(3) { animation-delay: 300ms; }
body.page-loaded .page-section:nth-child(4) { animation-delay: 400ms; }
body.page-loaded .page-section:nth-child(5) { animation-delay: 500ms; }

/* Header enters from top */
body.page-loaded #header {
  animation: pageFadeUp 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms both;
}

/* ---- Scroll-triggered tile reveals ---- */
/* Tiles start hidden, reveal when scrolled into view */
.grid-item,
.summary-item,
.portfolio-hover-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.grid-item.is-visible,
.summary-item.is-visible,
.portfolio-hover-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via transition-delay (set by JS) */

/* ---- 3D mouse-tracking tilt on portfolio tiles ---- */
/* Rotation values set dynamically by JS in page-animations.js */
@media (hover: hover) {
  body:not(.sqs-is-page-editing) .grid-item.is-visible {
    transition: opacity 500ms ease,
                transform 400ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
    transform-style: preserve-3d;
    will-change: transform;
  }
}

/* ---- Film grain texture — site-wide ---- */
#siteWrapper::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Don't show grain in edit mode */
body.sqs-is-page-editing #siteWrapper::before {
  display: none;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  body.page-loaded .page-section,
  body.page-loaded #header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .grid-item,
  .summary-item,
  .portfolio-hover-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #siteWrapper::before {
    display: none;
  }
}