/*
 * Small hand-written additions on top of the untouched compiled Tailwind
 * output (main.css), copied as-is from the Vite build so colors/spacing/type
 * are pixel-identical to the original design.
 */

/* Reveal (fade + rise) — matches the React Reveal component: opacity 0->1, y 16px->0, 0.6s */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*
 * ImageReveal — opacity-only fade (no transform/scale). The original had a
 * translateY+scale transform too, but that forces the browser to promote
 * each large project photo to its own GPU compositing layer; combined with
 * a jarring native scroll jump (see main.js) that compositing work could
 * take long enough to paint that the image visibly stayed blank for a
 * moment. A plain opacity fade is cheap regardless of image size.
 */
[data-reveal-image] {
  opacity: 0.4;
  transition: opacity 0.5s ease-out;
  overflow: hidden;
}
[data-reveal-image].is-visible {
  opacity: 1;
}

/*
 * Homepage hero — animates in once on page load (NOT scroll-triggered; the
 * original React hero uses plain framer-motion initial/animate, not the
 * scroll-based Reveal component, since the hero is always the first thing
 * visible on page load).
 */
[data-hero-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-hero-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-hero-image] {
  transform: scale(1.05);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-hero-image].is-visible {
  transform: scale(1);
}

/*
 * Site header — background + blur transition ONLY (not border, not the
 * logo filter). Previously the header used Tailwind's transition-all,
 * which also animated border-color when the bottom divider line was
 * added/removed on scroll, so the line lingered/faded for ~1s instead of
 * appearing or disappearing instantly. Scoping the transition to just
 * these two properties fixes that: the border and the logo's color
 * change happen immediately, only the background tint and blur ease in.
 */
#site-header {
  transition: background-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Contact form submit status message (send-message.php result) */
.form-status-success { color: #2f6b3e; }
.form-status-error { color: #b3261e; }

/* Mobile menu overlay open state */
#mobile-menu-overlay.flex {
  display: flex;
}

/* Lightbox open state */
#lightbox-overlay.flex {
  display: flex;
}