/* ─────────────────────────────────────────────────────────────
   App layer — our additions on top of the original Webflow CSS.
   Loaded AFTER the webflow stylesheets so these win.
   Re-creates the original Webflow motion with plain CSS + a tiny
   IntersectionObserver (see BaseLayout), and drives the modals.
   Timing matches the original Webflow interactions: ~500ms, "ease".
   ───────────────────────────────────────────────────────────── */

/* ---- Hero photo: slide up + fade in on load ---- */
@keyframes photoIn {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
.photo-of-me {
  opacity: 1; /* resting/final state */
  animation: photoIn 0.6s ease 0.15s both;
}

/* ---- Footer rockets: rise up from behind the footer floor when scrolled into
   view. .in-view is toggled by the IntersectionObserver in BaseLayout. ---- */
.rockets {
  transform: translateY(120px);
  transition: transform 1.3s ease;
}
.rockets.in-view {
  transform: translateY(0);
}

/* ---- Scroll-reveal (project cards, etc.): rise + fade in when scrolled into
   view. Uses animation (not transition) so the cards' hover transition stays
   intact. ---- */
[data-reveal] {
  opacity: 0;
}
[data-reveal].in-view {
  animation: revealUp 0.5s ease both;
}
.project-list [data-reveal]:nth-child(2) {
  animation-delay: 0.12s; /* gentle stagger for the second card */
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Once revealed, drop the animation so the card's transform is free for the
   hover lift (the animation's fill would otherwise keep holding it). */
[data-reveal].is-revealed {
  animation: none;
  opacity: 1;
}

/* ---- Project card hover: card lifts; phone enlarges + drifts with the cursor
   (applied from JS in BaseLayout). The lift is CSS here. ---- */
.project {
  transition: box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.project:hover {
  transform: translateY(-6px);
}
/* Phone sits under a perspective. Flat at rest, sized 196px (150px mobile);
   on hover it tilts in 3D toward the cursor (parallax) and scales ×1.12 →
   220px (168px mobile). overflow:visible lets it tilt/enlarge without its
   edges clipping; the card's image area still clips the bottom under the title. */
.project-image-container {
  perspective: 600px;
}
.project-image {
  overflow: visible;
  margin-top: 28px; /* sit a little lower in the card */
  transition: transform 0.3s ease;
  will-change: transform;
}
/* The whole phone tilts together; the inner screen drifts a few px more than
   the frame on hover → a subtle depth parallax (driven from JS). */
.project-image-screen {
  transition: transform 0.3s ease;
  will-change: transform;
}
.project-image,
.project-image-frame,
.project-image-screen {
  width: 196px;
}
@media (max-width: 767px) {
  .project-image {
    margin-top: 20px;
  }
  .project-image,
  .project-image-frame,
  .project-image-screen {
    width: 150px;
  }
}

/* ---- Project modals: open + scale-fade entrance (replaces Webflow IX2) ----
   Modals are display:none by default (webflow CSS); .is-open shows + animates. */
.modal-bg {
  opacity: 0;
}
.modal-bg.is-open {
  display: block;
  animation: modalBgIn 0.3s ease both;
}
.modal-bg.is-open .modal-wrapper {
  animation: modalCardIn 0.4s ease both;
}
@keyframes modalBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalCardIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* "Go back" footer hover: light fill rises + label brightens (arrow stays put). */
.modal-footer .modal-footer-underline {
  transition: height 0.4s ease;
}
.modal-footer:hover .modal-footer-underline {
  height: 100%;
}
.modal-go-back-button {
  transition: opacity 0.3s ease;
}
.modal-footer:hover .modal-go-back-button {
  opacity: 0.7;
}

/* Text / email link: the purple highlight underline grows on hover. */
.link .link-underline {
  height: 0;
  transition: height 0.4s ease;
}
.link:hover .link-underline {
  height: 0.4em;
}

/* ---- Respect users who prefer less motion ---- */
@media (prefers-reduced-motion: reduce) {
  .photo-of-me,
  .rockets,
  [data-reveal],
  [data-reveal].in-view,
  .project-image,
  .modal-bg.is-open,
  .modal-bg.is-open .modal-wrapper {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}