/* Approved H-A / S-A / P-A. All paint and typography inherit shell tokens. */
.hero-motion-still { display: block; }
#hero .hero-media video { visibility: hidden; }
#hero.hero-can-seek .hero-media video { visibility: visible; }
#hero.hero-can-seek .hero-motion-still { display: none; }
#home-showcase { position: relative; }
.home-showcase-stage { position: relative; }
.home-case { position: relative; min-height: 100svh; overflow: hidden; background: var(--color-bg-page); }
.home-case-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
#omni-model .home-case-image, #omni-model .advisory-office > :is(img, video) { object-position: 0% 100%; }
.home-case-shade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 15%, var(--color-bg-page) 59%); }
.home-case-copy { position: relative; width: 46%; margin-left: 54%; padding: 48px 48px 48px 0; color: var(--color-text-1); }
.home-eyebrow { font-size: var(--font-size-caption); color: var(--color-theme-hover); font-weight: 600; margin: 0 0 24px; }
.home-case-title { font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.15; margin: 0 0 28px; }
.home-case-detail { margin: 0 0 20px; }
.home-case-detail h3 { font-size: var(--font-size-h3); font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.home-case-detail p { font-size: var(--font-size-body); line-height: var(--leading-relaxed); color: var(--color-text-2); }
.home-case-detail:last-of-type { border-top: 1px solid var(--color-border-divider); padding-top: 20px; }
.home-case-links { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.home-showcase-pinned { height: 525vh; }
/* Island scripts run after load, so the pin lands after first paint and the
   browser's scroll restoration. Hold the pinned height until layout() has run
   once, so the page does not grow by 150vh above the viewport. Same viewport rule
   as the JS pin check. */
@media (min-width: 1100px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  #home-showcase:not([data-pin-ready]) { min-height: 525vh; }
}
.home-showcase-pinned .home-showcase-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.home-showcase-pinned .home-case { position: absolute; inset: 0; background: transparent; min-height: 0; overflow: visible; }
/* Inset + flex center: translateY(-50%) clipped tall copy (BMW) inside overflow:hidden stage. */
.home-showcase-pinned .home-case-copy {
  position: absolute;
  top: 48px;
  bottom: 48px;
  right: 0;
  left: 54%;
  width: auto;
  margin-left: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 max(var(--pad), 48px) 0 0;
  overflow: visible;
}
.home-showcase-pinned #omni-model .home-case-image { opacity: 0; }
.home-showcase-pinned #omni-model .home-case-copy,
.home-showcase-pinned #omni-model .home-case-shade { opacity: 0; }
.home-showcase-pinned #bmw-my-app .home-case-image { opacity: 0; }
.home-showcase-pinned #bmw-my-app .home-case-copy,
.home-showcase-pinned #bmw-my-app .home-case-shade { opacity: 0; }
#bmw-my-app .home-case-image,
#bmw-my-app .advisory-office > img { object-position: 24% center; }
#bmw-my-app .home-case-shade {
  /* Parked car sits left; copy right needs earlier wash (visualqa #9349). */
  background: linear-gradient(90deg, transparent 26%, var(--color-bg-page) 56%);
}
@media (max-width: 1099px) {
  #bmw-my-app .advisory-office > :is(img, video) {
    object-position: 30% center;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  #bmw-my-app .advisory-office > :is(img, video) {
    object-position: 22% center;
  }
}
.bmw-title-390 { display: none; }
@media (max-width: 420px) {
  .bmw-title-1440 { display: none; }
  .bmw-title-390 { display: block; }
}
#home-playground { padding: var(--space-3xl) var(--pad); background: var(--color-bg-page); }
.home-playground-inner { max-width: var(--wrap); margin: auto; }
#home-playground h2 { font-size: var(--font-size-display); line-height: var(--leading-display); font-weight: 600; margin-bottom: var(--space-xl); }
.home-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.home-project { display: flex; flex-direction: column; color: var(--color-text-1); text-decoration: none; }
.home-project img,
.home-project video { width: 100%; aspect-ratio: 1.44; object-fit: cover; }
/* WA card: season still painted before first paint (app/layout.tsx
   sets html[data-wa-season] inline); the video poster/clip later cover it. */
#wa-season-video { background: center / cover no-repeat; }
html[data-wa-season="spring"] #wa-season-video { background-image: url(/assets/images/home-motion/wa-season-spring.webp); }
html[data-wa-season="summer"] #wa-season-video { background-image: url(/assets/images/home-motion/wa-season-summer.webp); }
html[data-wa-season="autumn"] #wa-season-video { background-image: url(/assets/images/home-motion/wa-season-autumn.webp); }
html[data-wa-season="winter"] #wa-season-video { background-image: url(/assets/images/home-motion/wa-season-winter.webp); }
/* AI Pet card: same still under the video, so WebKit shows it (not black)
   between src being set and the first decoded frame. */
#ai-pet-video { background: center / cover no-repeat url(/assets/images/home-motion/ai-pet-dolphin.webp); }
/* Clip keeps each Playground picture, including its hover scale, inside the frame. */
.frame-lag-clip { display: block; overflow: hidden; aspect-ratio: 1.44; }
.frame-lag-clip :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  display: block;
  transition: transform var(--duration-interaction, 320ms) ease;
}
.home-project h3 { font-size: var(--font-size-h3-card); line-height: 1.2; font-weight: 600; margin: 28px 0 8px; }
.home-project p { font-size: var(--font-size-body-lg); line-height: var(--leading-relaxed); color: var(--color-text-2); margin-bottom: 32px; }
.home-project p.home-project-meta { margin: 0 0 12px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); line-height: 1.3; color: var(--color-theme-hover); }
/* Card link stays the only hit target. The pill inherits the shared 46px CTA. */
.home-project > .pill-btn {
  align-self: flex-start;
  margin-top: auto;
  pointer-events: none;
}
.home-project:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@media (hover: hover) and (pointer: fine) {
  .home-project:hover > .pill-btn {
    background: var(--pill-hover-bg);
    color: var(--pill-hover-text);
    border-color: var(--pill-hover-bg);
    box-shadow: var(--pill-hover-shadow);
    transform: translateY(-2px);
  }
  .home-project:hover > .pill-btn svg { transform: translateX(3px); }
}
.home-project:active > .pill-btn { transform: translateY(0) scale(0.97); }
@media (max-width: 1099px) {
  .home-case { min-height: 0; }
  .home-case-image { position: relative; height: auto; aspect-ratio: 16/10; object-fit: cover; }
  .home-case-shade { display: none; }
  .home-case-copy { width: 100%; margin-left: 0; padding: 40px var(--pad) 72px; }
  .home-case-title { max-width: 700px; }
  .home-case-detail { max-width: 700px; }
}
@media (max-width: 720px) {
  #home-playground { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .home-project-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  #home-playground h2 { margin-bottom: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  .home-showcase-pinned #bmw-my-app .home-case-image,
  .home-showcase-pinned #bmw-my-app .home-case-copy,
  .home-showcase-pinned #bmw-my-app .home-case-shade { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #hero .hero-media video { display: none; }
  #hero .hero-motion-still { display: block; }
  #home-showcase, #home-showcase * { scroll-behavior: auto; }
  .home-project > .pill-btn,
  .home-project > .pill-btn svg { transition: none; }
  .home-project:hover > .pill-btn,
  .home-project:active > .pill-btn,
  .home-project:hover > .pill-btn svg { transform: none; }
  .frame-lag-clip :is(img, video) { transition: none; transform: none; }
}
/* 3000 hero video starts at opacity 0 until .is-loaded. The still must stay visible, and the seek clip must appear with the still, not after a 900ms fade. */
#hero .hero-motion-still { opacity: 1; transition: none; }
#hero.hero-can-seek .hero-media video { opacity: 1; transition: none; }

/* How I Work → Experience seam. Lu 2026-10-30 chose B (event 3c54a368):
   the illustration's blue arc continues from the right into the timeline's
   left vertical, and the gap under the art grows by 120px (about 77 → 197).
   The wash and the stroke live here so the timeline sticky, dots and entries
   stay untouched. Scroll progress draws the stroke; reduced motion shows it whole. */
.hiw-exp-seam {
  position: relative;
  height: 120px;
  background: #0a0a0a;
  pointer-events: none;
}
.hiw-exp-seam__wash {
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, #080f1b 0%, #10182a 42%, #0a0a0a 100%);
}
.hiw-exp-seam__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 3;
}
@media (max-width: 767px) {
  /* The stacked list has no timeline bar. Keep the stroke free to meet the
     illustration above the seam, and clip anything that would paint into
     the experience list below. */
  .hiw-exp-seam__svg {
    clip-path: inset(-80vh 0 0 0);
  }
}
.hiw-exp-seam__path {
  fill: none;
  stroke: var(--color-theme-2);
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .hiw-exp-seam__path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}
/* E.ON card: <picture> still inside the shared .advisory-office wrapper
   (advisory-office.css only targets a direct img child). */
#omni-model .advisory-office > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 100%; pointer-events: none; }
#omni-model .advisory-office.is-playing > picture > img { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #omni-model .advisory-office.is-playing > picture > img { visibility: visible; } }
/* E.ON panel outline over the card video: same box and bottom-left cover
   crop as the video; only shown while the video itself is showing. */
#omni-model .eon-panel-stroke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; }
#omni-model .advisory-office.is-playing > .eon-panel-stroke { visibility: visible; }
#omni-model .eon-panel-stroke polyline,
#omni-model .eon-panel-stroke line { fill: none; stroke: #ffe2a3; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
#omni-model .eon-panel-stroke .eon-stroke-fill { fill: #fff; stroke: none; }
@media (max-width: 767px) { #omni-model .eon-panel-stroke polyline, #omni-model .eon-panel-stroke line { stroke-width: 1.25px; } }
@media (prefers-reduced-motion: reduce) { #omni-model .eon-panel-stroke { display: none; } }