/* CHTAE capability + projects pages: foreground motion layer (desktop only), 2026-10-19.
   Every rule is scoped to html.chtae-motion, which site-motion-20261019.js sets only on wide screens with a mouse
   and without reduced motion. Backgrounds and stage images are not styled here. */

/* elements waiting for their entrance (only ones still below the fold when the page loaded) */
html.chtae-motion .m-pending { opacity: 0; }
html.chtae-motion-off .m-pending { opacity: 1 !important; }
/* per-character wrappers used only while a title animates (custom tags, so no page rule for span applies) */
html.chtae-motion chtae-w, html.chtae-motion chtae-c { all: unset; }
html.chtae-motion chtae-c { position: relative; }

/* transitions for translate / rotate / filter are appended to each element's own transition list by the script */

/* D: tilting cards and a moving highlight */
html.chtae-motion .m-tilt-card { perspective: 900px; }
html.chtae-motion .m-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--g-x, 50%) var(--g-y, 50%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .35s ease;
}
html.chtae-motion .m-tilt-card:hover .m-glare { opacity: 1; }

/* F: method objects react on hover (projects page) */
/* the page's own scroll animation writes inline translate/rotate/scale: none on these images, hence !important */
html.chtae-motion body.project-manual-page.project-premium-redesign .manual-synthesis-grid article.m-obj .manual-synthesis-visual img,
html.chtae-motion .m-obj .manual-synthesis-visual img {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), rotate .8s cubic-bezier(.34, 1.56, .64, 1), translate .45s cubic-bezier(.34, 1.56, .64, 1), scale .6s ease, filter .6s ease !important;
}
html.chtae-motion .m-obj--wheel:hover .manual-synthesis-visual img { rotate: -32deg !important; }
html.chtae-motion .m-obj--shift:hover .manual-synthesis-visual img { translate: -5px -9px !important; rotate: -7deg !important; }
html.chtae-motion .m-obj--brake:hover .manual-synthesis-visual img { scale: 1.05 !important; filter: drop-shadow(0 0 22px rgba(255, 112, 44, .5)) saturate(1.15) !important; }
html.chtae-motion .m-obj:hover .manual-synthesis-card-copy > strong { color: #d9b25f; }

/* G: GAC timeline: grab to drag, hover focus, year marker on the axis */
html.chtae-motion .m-gac .manual-gac-timeline-viewport { cursor: grab; }
html.chtae-motion .m-gac.m-dragging .manual-gac-timeline-viewport { cursor: grabbing; user-select: none; }
html.chtae-motion .m-gac:not(.m-dragging) .manual-gac-timeline-rail:has(.manual-gac-era:hover) .manual-gac-era:not(:hover) { opacity: .5; filter: saturate(.55); }
html.chtae-motion .m-gac:not(.m-dragging) .manual-gac-era:hover { translate: 0 -6px; }
html.chtae-motion .m-gac .manual-gac-era img { -webkit-user-drag: none; }
html.chtae-motion chtae-mk, html.chtae-motion chtae-dot, html.chtae-motion chtae-yr { all: unset; }
html.chtae-motion chtae-mk.m-gac-marker { position: absolute; top: 50%; left: 0; z-index: 2; width: 0; height: 0; pointer-events: none; }
html.chtae-motion .m-gac-marker chtae-dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #d9b25f; box-shadow: 0 0 0 4px rgba(217, 178, 95, .18), 0 0 14px rgba(217, 178, 95, .45);
}
html.chtae-motion .m-gac-marker chtae-yr {
  position: absolute; left: 0; bottom: 12px; translate: -50% 0; white-space: nowrap;
  font: 700 11px/1 Orbitron, "IBM Plex Mono", SFMono-Regular, Consolas, monospace; letter-spacing: .08em; color: #d9b25f;
}

/* site-shell.css forces [data-site-shell] { background: transparent !important }, hence !important here */
html.chtae-motion.m-scrolled .site-header.is-on-dark[data-site-shell] {
  background: rgba(8, 9, 11, .74) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}