/* Landing-page entrance reveal: opacity:0 by default so there's no flash of
   fully-visible content before js/landing-animations.js's GSAP timeline
   runs (that script executes synchronously at the same point in the
   document load, so there's no visible gap in practice). If the script
   ever failed to run these would stay invisible -- acceptable here since
   GSAP is already a hard requirement for the site's core scroll mechanic. */
.hero-video,
.headline__row,
.accent-physical,
.hero-copy,
.callout,
.leader,
.emoji,
.photo,
.photo-tag,
.side-label-divider,
.side-label-pill {
  opacity: 0;
}

/* .track, .work-fixed-layer, and .gallery-layer all have their own
   `transform` (the horizontal-scroll pan / slide-in), which means each one
   establishes its own CSS stacking context -- no z-index on anything
   inside them can ever let it paint above .cursor-stage (a true sibling of
   all three, added later in the DOM), no matter how high that z-index is
   set. js/landing-animations.js toggles .hover-lift on the relevant
   ancestor for the duration of a hover so the whole layer temporarily
   jumps above .cursor-stage's z-index (5), letting the hovered content
   clear the cursor-figures instead of being trapped behind them. */
.track.hover-lift,
.work-fixed-layer.hover-lift,
.gallery-layer.hover-lift {
  z-index: 6;
}

/* ---------- callout hover: grow, no shadow -- the whole cluster (callout
   text box, its leader line, its emoji, and for the presidio callout the
   photo) is one hoverable unit: hovering ANY member of the cluster adds
   .group-hover to ALL of them, via js/landing-animations.js. Plain CSS
   :hover can't do this by itself since these are scattered position:fixed
   siblings, not nested elements. */
.callout {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.callout.group-hover {
  transform: scale(1.12);
  z-index: 6;
}

.callout .tag {
  transition: background 0.25s ease, color 0.25s ease;
}

.callout.group-hover .tag {
  background: var(--red);
  color: var(--bg);
}

.leader,
.photo,
.photo-tag {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.leader.group-hover,
.photo-tag.group-hover {
  transform: scale(1.12);
  z-index: 6;
}

.photo.group-hover {
  transform: scale(1.16);
  z-index: 6;
}

.photo-tag {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, color 0.25s ease;
}

.photo-tag.group-hover {
  background: var(--red);
  color: var(--bg);
}

.photo-tag.group-hover p {
  color: var(--bg);
}

/* The .emoji wrapper owns the continuous float animation's `transform`
   (below); the <img> inside owns the hover-scale `transform` instead --
   separate elements, so the two never fight over the same property, and
   scaling from the image's own center never drifts its apparent position. */
.emoji img {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.emoji.group-hover {
  /* .callout.group-hover (and .leader/.photo/.photo-tag) already set
     z-index:6 on hover -- without this, .emoji stays at its default
     z-index:auto, and since it's a position:fixed SIBLING of .callout
     inside the same local stacking context (.track's own, via its GSAP
     transform), the callout's explicit z-index always wins regardless of
     DOM order, painting over the emoji any time they visually overlap.
     Matching z-index here puts them on equal footing, so DOM order (emoji
     markup comes after its callout) decides the tie and the emoji stays
     visible on top instead of getting hidden behind the callout text. */
  z-index: 6;
}

.emoji.group-hover img {
  transform: scale(1.35);
}

/* ---------- left-rail nav: hover/focus/active states ---------- */
.rail__nav a {
  position: relative;
  transition: color 0.25s ease;
}

.rail__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.rail__nav a:hover,
.rail__nav a:focus-visible,
.rail__nav a.active {
  color: var(--red);
}

.rail__nav a:hover::after,
.rail__nav a:focus-visible::after,
.rail__nav a.active::after {
  transform: scaleX(1);
}

/* ---------- work screen: same grow + color-invert treatment as the
   landing callout tags, on the analogous decorative elements ---------- */

/* The work-bio cluster (the bio card itself, its leader line, and the two
   tags inside it) is one hoverable group, same as a landing callout
   cluster: hovering ANY member grows the whole thing together, via
   js/landing-animations.js. The tags are children of .work-bio, so they
   ride along with its own scale automatically -- they only need their own
   color-invert on top, not a second (compounding) scale. */
.work-bio {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.work-bio.group-hover {
  transform: scale(1.12);
  z-index: 6;
}

.work-bio__leader {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-bio__leader.group-hover {
  transform: scale(1.12);
  z-index: 6;
}

.work-bio .tag,
.work-floating-tag,
.work-side-label-pill {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, color 0.25s ease;
}

.work-bio.group-hover .tag {
  background: var(--red);
  color: var(--bg);
}

.work-floating-tag:hover {
  /* base rotation (-20deg) must be preserved alongside the hover scale */
  transform: rotate(-20deg) scale(1.12);
  background: var(--red);
  z-index: 6;
}

.work-floating-tag:hover .work-floating-tag__label {
  color: var(--bg);
}

.work-side-label-pill:hover {
  transform: scale(1.12);
  background: var(--red);
  z-index: 6;
}

.work-side-label-pill:hover p {
  color: var(--bg);
}

/* ---------- decorative emoji: gentle idle float, staggered so they don't
   all bob in lockstep ---------- */
@keyframes emoji-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.emoji {
  animation: emoji-float 3.6s ease-in-out infinite;
}

.emoji--ruler { animation-delay: 0.2s; }
.emoji--eyes { animation-delay: 0.6s; }
.emoji--evergreen { animation-delay: 1s; }
.emoji--deciduous { animation-delay: 1.4s; }
.emoji--pencil { animation-delay: 0.8s; }
.emoji--thinking { animation-delay: 1.8s; }

/* Photo's own zoom is handled entirely through .photo.group-hover above
   (it's a member of the presidio callout cluster) -- no separate :hover
   rule here, since a standalone .photo:hover at the same specificity would
   race with .group-hover and win on source order, overriding it with a
   different scale value whenever the photo is hovered directly. */

/* ---------- side-label pill hover ---------- */
.side-label-pill {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.side-label-pill:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px -6px rgba(194, 45, 13, 0.25);
}