/* Big Boom / v5. White space, black type, one unmistakable red gesture. */
:root { --paper:#fff; --ink:#111; --line:#d7d7d7; }

.header { min-height:88px; }
.home-page .header { border-bottom-color:var(--ink); }
.hero-kinetic { padding-top:1.6rem; padding-bottom:3.5rem; }
.hero-stage { position:relative; }
.hero-kinetic h1 {
  color:var(--ink);
  font-size:clamp(3rem,12.1vw,13rem);
  font-weight:450;
  line-height:1;
  letter-spacing:-.075em;
  padding:2.8rem 0 2.8rem;
}
.hero-kinetic h1 > span:last-child { padding-left:9%; }
.hero-kinetic h1 strong { font-weight:880; }
.boom-word { display:inline-flex; color:var(--red); }
.boom-word > span { display:inline-block; transform-origin:50% 85%; }
.hero-kinetic .hero-bottom {
  grid-template-columns:1fr 1fr auto;
  align-items:end;
  gap:2rem;
  padding-top:1.5rem;
}
.hero-kinetic .hero-bottom > p { justify-self:start; font-size:1.0625rem; }
.hero-kinetic .hero-bottom > .motion-toggle { justify-self:end; white-space:nowrap; }

/* The artwork is generated from the user's character, not drawn in CSS.
   A 4×2 sprite sheet supplies the eight poses. The second-row background
   position compensates for the source's 24px baseline shift. Screen blending
   removes the photographed red variation without changing the saved artwork. */
.bombi-player { position:relative; }
.hero-bombi { position:absolute; top:1.15rem; right:3.5%; width:clamp(10rem,15.8vw,17rem); }
.bombi-replay {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--red);
  isolation:isolate;
  transform:rotate(8deg);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.bombi-replay:hover { transform:rotate(-4deg); }
.bombi-replay:focus-visible { outline-color:var(--ink); }
.bombi-sprite {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1;
  background-image:url('assets/bombi-motion-sheet.png');
  background-size:400% 200%;
  background-position:0 0;
  background-repeat:no-repeat;
  filter:grayscale(1) contrast(8);
  mix-blend-mode:screen;
  animation:bombi-action 7s steps(1,end) infinite;
  animation-play-state:paused;
  border-radius:50%;
}
.hero-bombi .bombi-sprite { position:absolute; inset:6%; width:88%; height:88%; border-radius:0; }
@keyframes bombi-action {
  0%,7% { background-position:0 0; }
  8% { background-position:33.333333% 0; }
  11% { background-position:66.666667% 0; }
  16% { background-position:100% 0; }
  20% { background-position:0 0; }
  25% { background-position:0 94.59%; }
  30% { background-position:33.333333% 94.59%; }
  35% { background-position:66.666667% 94.59%; }
  40% { background-position:33.333333% 94.59%; }
  45% { background-position:66.666667% 94.59%; }
  50% { background-position:100% 94.59%; }
  55%,100% { background-position:0 0; }
}

/* A short typographic response to Bombi's jump, followed by a long rest. */
.boom-word > span { animation:boom-type 7s cubic-bezier(.2,.7,.2,1) infinite paused; }
.boom-word > span:nth-child(2) { --letter-tilt:-5deg; --letter-lift:-.045em; }
.boom-word > span:nth-child(3) { --letter-tilt:5deg; --letter-lift:-.07em; }
.boom-word > span:nth-child(4) { --letter-tilt:3deg; --letter-lift:-.025em; }
@keyframes boom-type {
  0%,8%,21%,100% { transform:translateY(0) rotate(0); }
  12% { transform:translateY(var(--letter-lift,-.025em)) rotate(var(--letter-tilt,-3deg)); }
  17% { transform:translateY(.012em) rotate(0); }
}
.is-in-view > .bombi-replay .bombi-sprite,
.hero-kinetic.is-in-view .boom-word > span { animation-play-state:running; }
.motion-paused .bombi-sprite,
.motion-paused .boom-word > span,
.is-backgrounded .bombi-sprite,
.is-backgrounded .boom-word > span { animation-play-state:paused !important; }
.motion-toggle { font-size:.875rem; border-bottom-color:currentColor; }
.motion-toggle:before { content:'Ⅱ'; }
.motion-toggle[aria-pressed=true]:before { content:'▷'; }
.motion-toggle:disabled { opacity:.6; }

/* Work reads as a portfolio: wide canvases and quiet captions. */
.home-page .work { padding-top:0; padding-bottom:6.5rem; }
.home-page .section-heading { border-top-color:var(--ink); padding:1.4rem 0 1.8rem; }
.home-page .section-heading h2 { font-size:clamp(1.5rem,2.4vw,2.25rem); font-weight:550; letter-spacing:-.055em; }
.home-page .archive-link { font-size:.875rem; text-transform:none; letter-spacing:0; }
.home-page .project-featured .project-visual { aspect-ratio:1.9; }
.home-page .image-index { background:none; backdrop-filter:none; border-radius:0; text-shadow:0 1px 8px #000; }
.home-page .project-caption { padding-top:1.4rem; }
.home-page .project-caption h3 { font-size:clamp(1.4rem,2vw,1.9rem); font-weight:550; }
.home-page .project-grid { gap:3rem; margin-top:4.5rem; }
.home-page .project-grid .project-visual { aspect-ratio:.94; }
.home-page .project-grid .project-visual img { object-position:center; }
.home-page .project-grid .croissant-thumb { object-position:center 25%; }
.home-page .project-offset { margin-top:0; }
.home-page .studio-bombi { animation:none; }
.studio-editorial { padding-top:6.5rem; padding-bottom:6.5rem; }
.services { padding-bottom:6.5rem; }

/* The full-size animation lives in Bombi's own About passage. */
.about-bombi { gap:clamp(3rem,7vw,8rem); padding-top:6rem; padding-bottom:6rem; }
.bombi-portrait { padding:0; background:var(--red); color:#fff; transform:rotate(-3deg); }
.about-bombi .bombi-replay { border-radius:0; transform:none; background:var(--red); }
.about-bombi .bombi-sprite { border-radius:0; }
.about-bombi .bombi-replay:focus-visible { outline-color:#fff; outline-offset:-8px; }
.bombi-edition { display:block; font-size:.75rem; line-height:1.5; letter-spacing:.025em; text-align:left; padding:0 1.5rem 1.5rem; }
.about-bombi h2 { font-size:clamp(2.6rem,4.25vw,4.5rem); }
.bombi-controls { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 2rem; margin-top:1.5rem; }
.bombi-controls .underlined-link { border-top:0; border-right:0; border-left:0; color:inherit; background:transparent; margin:0; }
.about-bombi .motion-toggle { margin-top:0; }
.about-hero .bombi-animated { animation:none; }
.footer-quiet { grid-template-columns:1fr 1fr auto; }
.footer-quiet > a:last-child { justify-self:end; }

/* Case studies stay still and contain no other project's imagery or teaser. */
.editorial-case .case-hero h1 { color:var(--ink); }
.editorial-case .case-hero h1 > span:last-child { color:var(--red); }
.editorial-case .case-hero { padding-bottom:3.5rem; }
.editorial-case .case-cover { margin:0; }
.editorial-case .case-story { padding-top:6rem; padding-bottom:6rem; }
.editorial-case .case-gallery { gap:3rem; }
.editorial-case .case-gallery figure:nth-child(2n) { padding-top:0; }
.editorial-case .case-results { margin-bottom:4.5rem; }
.editorial-case .contact-explode .contact-main { margin-top:3rem; margin-bottom:3rem; }

@media (min-width:1700px) {
  .hero-kinetic h1 { font-size:13rem; }
  .hero-bombi { width:17rem; }
}
@media (max-width:1000px) {
  .hero-kinetic .hero-bottom { grid-template-columns:1fr 1.15fr; gap:1.5rem 2rem; }
  .hero-kinetic .hero-bottom > p { grid-column:2; grid-row:1; }
  .hero-kinetic .hero-bottom > .motion-toggle { grid-row:2; grid-column:2; justify-self:start; }
  .hero-bombi { right:1%; width:17vw; min-width:8rem; }
  .home-page .project-grid { gap:1.6rem; }
  .about-bombi { gap:3rem; }
}
@media (max-width:650px) {
  .header { min-height:82px; }
  .hero-kinetic { padding-top:1.4rem; padding-bottom:2.4rem; }
  .hero-kinetic h1 { font-size:12.5vw; padding:2.6rem 0 1.8rem; line-height:1.02; }
  .hero-kinetic h1 > span:last-child { padding-left:0; margin-top:2rem; }
  .hero-bombi { width:clamp(5.5rem,24vw,8rem); min-width:0; right:0; top:.9rem; }
  .hero-kinetic .hero-bottom { grid-template-columns:1fr; gap:1.5rem; padding-top:.4rem; }
  .hero-kinetic .hero-bottom > p { grid-column:1; grid-row:1; font-size:1rem; }
  .hero-kinetic .hero-bottom > .explore-link { grid-column:1; grid-row:2; font-size:.875rem; }
  .hero-kinetic .hero-bottom > .motion-toggle { grid-column:1; grid-row:3; justify-self:start; font-size:.8125rem; padding:.4rem 0; }
  .home-page .work { padding-bottom:3.5rem; }
  .home-page .section-heading { padding-top:1.3rem; padding-bottom:1.3rem; align-items:center; }
  .home-page .section-heading h2 { font-size:1.45rem; }
  .home-page .archive-link { font-size:.8125rem; }
  .home-page .project-featured .project-visual { aspect-ratio:1.22; }
  .home-page .project-grid { margin-top:2.8rem; }
  .home-page .project-grid .project-visual { aspect-ratio:1; }
  .home-page .project-offset { margin-top:2.8rem; }
  .home-page .project-caption { padding-top:1rem; }
  .studio-editorial { padding-top:3.5rem; padding-bottom:3.5rem; }
  .services { padding-bottom:3.5rem; }
  .about-bombi { padding-top:3rem; padding-bottom:3.5rem; gap:2.5rem; }
  .bombi-portrait { width:min(100%,22rem); justify-self:center; }
  .about-bombi h2 { font-size:2.7rem; }
  .bombi-edition { padding:0 1rem 1rem; }
  .bombi-controls { gap:1.2rem; }
  .footer-quiet { grid-template-columns:1fr 1fr; }
  .footer-quiet > a:last-child { grid-column:2; }
  .editorial-case .case-hero { padding-bottom:2.5rem; }
  .editorial-case .case-story { padding-top:3.5rem; padding-bottom:3.5rem; }
  .editorial-case .case-gallery { gap:2rem; }
  .editorial-case .case-results { margin-bottom:3rem; }
}
@media (prefers-reduced-motion:reduce) {
  .bombi-sprite,.boom-word > span { animation:none !important; }
  .bombi-replay,.bombi-replay:hover { transform:none; transition:none; }
}
@media (forced-colors:active) {
  .bombi-replay { forced-color-adjust:none; }
}