/* The editorial spread becomes the portfolio without changing its image. */
.onform-portfolio-story {
  --portfolio-frame: clamp(24px, 6vw, 140px);
  --portfolio-gap: clamp(14px, 1.1vw, 24px);
  --editorial-gutter: clamp(16px, 1.25vw, 32px);
  --start-width: calc((100vw - var(--editorial-gutter) * 2 - var(--portfolio-gap)) * .67);
  --start-height: min(68svh, calc(var(--start-width) / 1.48));
  --start-top: 14svh;
  --portfolio-p: 0;
  --portfolio-exit: 0;
  --cinema-top: 11svh;
  --cinema-height: 76svh;
  position: relative;
  height: 400svh;
  background: var(--blue);
  timeline-scope: --portfolio-expand;
  view-timeline: --portfolio-expand block;
  font-family: 'DM Sans', Arial, sans-serif;
}
.onform-portfolio-anchor { position: absolute; top: 84svh; left: 0; width: 1px; height: 1px; pointer-events: none; }
.onform-showcase {
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background: var(--blue);
}
.onform-showcase::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #fff;
  opacity: 1;
  transform-origin: right;
  transform: scaleX(calc(1 - var(--portfolio-p)));
}
.onform-showcase__visual {
  position: absolute;
  margin: 0;
  left: calc(var(--editorial-gutter) + var(--portfolio-p) * (var(--portfolio-frame) - var(--editorial-gutter)));
  top: calc(var(--start-top) + var(--portfolio-p) * (var(--cinema-top) - var(--start-top)));
  width: calc(var(--start-width) + var(--portfolio-p) * (100vw - var(--portfolio-frame) * 2 - var(--start-width)));
  height: calc(var(--start-height) + var(--portfolio-p) * (var(--cinema-height) - var(--start-height)));
}
.onform-showcase__window { position: absolute; inset: 0; overflow: hidden; background: #d9d4c8; }
.onform-showcase__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translate3d(3%, 0, 0) scale(1.045);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.onform-showcase__slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.onform-showcase__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.onform-showcase__slide:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
.onform-showcase__visual figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: clamp(0, calc(1 - var(--portfolio-p) * 4.6), 1);
}
.onform-showcase__copy {
  position: absolute;
  top: var(--start-top);
  right: var(--editorial-gutter);
  width: calc(100vw - var(--editorial-gutter) * 2 - var(--start-width) - var(--portfolio-gap));
  height: var(--start-height);
  padding-bottom: 0;
  opacity: clamp(0, calc(1 - var(--portfolio-p) * 4.6), 1);
  transform: translate3d(clamp(0px, calc(var(--portfolio-p) * 290px), 64px), 0, 0);
}
.onform-showcase__story { padding-top: 30px; }
.onform-showcase__story h2 { margin-bottom: 18px; }
.onform-showcase__story > p { max-width: 27ch; margin-bottom: 14px; }
.onform-showcase__cta { background: none; }
.onform-portfolio__bar {
  position: absolute;
  inset: auto var(--portfolio-frame) 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  opacity: clamp(0, calc((var(--portfolio-p) - .65) / .35), 1);
  transform: translate3d(0, calc((1 - var(--portfolio-p)) * 24px), 0);
}
.onform-portfolio__project { display: flex; align-items: baseline; gap: 20px; }
.onform-portfolio__project p { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.onform-portfolio__project a { font-size: clamp(20px, 2vw, 30px); letter-spacing: -.045em; }
.onform-portfolio__project a > span[aria-hidden] { display: inline-block; margin-left: 12px; font-size: .7em; transition: transform .4s; }
.onform-portfolio__project a:hover > span[aria-hidden] { transform: translate(3px,-3px); }
.onform-portfolio__controls { display: flex; align-items: center; gap: 10px; }
.onform-portfolio__count { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .12em; margin-right: 14px; }
.onform-portfolio__controls button { display: grid; place-items: center; width: 42px; height: 42px; background: transparent; border: 1px solid #ffffff59; border-radius: 50%; color: #fff; font-size: 22px; transition: background .25s, color .25s, border-color .25s; }
.onform-portfolio__controls button:hover { background: #fff; border-color: #fff; color: var(--blue); }
.onform-portfolio__controls button:focus-visible,.onform-portfolio__project a:focus-visible { outline-color: #fff; }

/* The pinned section's contain range gives the image time to open and settle. */
@supports (animation-timeline: scroll()) and (timeline-scope: --portfolio-expand) {
  .onform-showcase::before,
  .onform-showcase__visual,
  .onform-showcase__copy,
  .onform-showcase__visual figcaption,
  .onform-portfolio__bar {
    animation: var(--portfolio-animation) linear both;
    animation-timeline: --portfolio-expand;
    animation-range: contain 0% contain var(--portfolio-expand-end, 28%);
  }
  .onform-showcase::before { --portfolio-animation: portfolio-background-away; }
  .onform-showcase__visual { --portfolio-animation: portfolio-open; }
  .onform-showcase__copy { --portfolio-animation: portfolio-copy-away; }
  .onform-showcase__visual figcaption { --portfolio-animation: portfolio-caption-away; }
  .onform-portfolio__bar { --portfolio-animation: portfolio-controls-in; }
}
@keyframes portfolio-open {
  from { left: var(--editorial-gutter); top: var(--start-top); width: var(--start-width); height: var(--start-height); }
  to { left: var(--portfolio-frame); top: var(--cinema-top); width: calc(100vw - var(--portfolio-frame) * 2); height: var(--cinema-height); }
}
@keyframes portfolio-background-away { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes portfolio-copy-away {
  from { opacity: 1; transform: translate3d(0,0,0); }
  22%, to { opacity: 0; transform: translate3d(64px,0,0); }
}
@keyframes portfolio-caption-away { from { opacity: 1; } 20%, to { opacity: 0; } }
@keyframes portfolio-controls-in {
  from, 65% { opacity: 0; transform: translate3d(0,24px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@media(max-width:900px) and (min-width:601px) {
  .onform-portfolio-story { --start-width: calc((100vw - var(--editorial-gutter) * 2 - var(--portfolio-gap)) * .62); }
  .onform-portfolio__project { gap: 12px; }
}
@media(max-width:600px) {
  .onform-portfolio-story {
    --portfolio-frame: 16px;
    --start-width: calc(100vw - 32px);
    --start-height: min(45svh, calc(var(--start-width) / 1.15));
    --start-top: max(270px, 32svh);
    height: 380svh;
  }
  .onform-portfolio-anchor { top: 78.4svh; }
  .onform-showcase__copy { top: 38px; left: 16px; right: 16px; width: auto; height: auto; border-left: none; padding: 0; }
  .onform-showcase__story { padding-top: 20px; }
  .onform-showcase__story h2 { font-size: 30px; margin-bottom: 12px; }
  .onform-showcase__story h2 br { display: none; }
  .onform-showcase__story > p { max-width: 34ch; font-size: 15px; margin-bottom: 0; }
  .onform-showcase__cta { margin-top: 5px; font-size: 11px; }
  .onform-portfolio__project { display: block; }
  .onform-portfolio__project p { font-size: 8px; margin-bottom: 5px; }
  .onform-portfolio__project a { font-size: 20px; }
  .onform-portfolio__project a > span[aria-hidden] { margin-left: 5px; }
  .onform-portfolio__count { margin-right: 2px; font-size: 10px; }
  .onform-portfolio__controls { gap: 6px; }
  .onform-portfolio__controls button { width: 38px; height: 38px; }
}
@media(prefers-reduced-motion:reduce) {
  .onform-portfolio-story { height: auto; }
  .onform-showcase { position: relative; display: flex; flex-direction: column; height: auto; padding: 40px var(--portfolio-frame) 24px; gap: 24px; }
  .onform-showcase::before { display: none; }
  .onform-showcase__copy { position: relative; inset: auto; width: auto; height: auto; order: 0; color: #fff; opacity: 1; transform: none; border: none; padding: 0; }
  .onform-showcase__visual { position: relative; inset: auto; width: 100%; height: 65svh; order: 1; }
  .onform-showcase__visual figcaption { display: none; }
  .onform-showcase__cta { border-color: #ffffff80; }
  .onform-portfolio__bar { position: relative; inset: auto; order: 2; opacity: 1; transform: none; }
  .onform-showcase__slide { transition: none; }
  .onform-portfolio-anchor { top: 0; }
  .onform-showcase::before,.onform-showcase__copy,.onform-showcase__visual,.onform-showcase__visual figcaption,.onform-portfolio__bar { animation: none; }
}

/* Keep the bottle cap in frame as the square photograph opens out. */
.onform-showcase__slide[data-name="Pep Pals"] img { object-position: 50% 10%; }
body[data-work-variant="reveal"] .recent-work { --work-surface: var(--blue); --work-ink: #fff; }
body[data-work-variant="reveal"] .work-row[data-preview="1"] .work-row__reveal > img { object-fit: cover; object-position: 50% 10%; padding: 0; }
body[data-work-variant="reveal"] .recent-work a:focus-visible { outline-color: #fff; }
body[data-work-variant="reveal"] .recent-work .work-row.is-previewing:focus-visible { outline-color: var(--blue); outline-offset: -6px; }

/* The expanding image reveals the brand-blue background immediately. */
.onform-showcase::before { z-index: -1; pointer-events: none; }
.onform-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--blue);
  opacity: calc(1 - var(--portfolio-exit));
}
.onform-showcase__window {
  box-shadow: 0 22px 65px #0005;
}
.onform-showcase__window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, #08080b35 100%), linear-gradient(180deg, #00000012, transparent 20%, transparent 80%, #00000020);
  opacity: calc(var(--portfolio-p) * (1 - var(--portfolio-exit)));
}
@supports (animation-timeline: scroll()) and (timeline-scope: --portfolio-expand) {
  .onform-showcase::after,
  .onform-showcase__window::after {
    animation: var(--cinema-animation) linear both;
    animation-timeline: --portfolio-expand;
    animation-range: contain 0% contain 100%;
  }
  .onform-showcase::after { --cinema-animation: cinema-to-blue; }
  .onform-showcase__window::after { --cinema-animation: cinema-vignette; }
}
@keyframes cinema-to-blue { from, 86% { opacity: 1; } to { opacity: 0; } }
@keyframes cinema-vignette { from { opacity: 0; } 28%, 86% { opacity: 1; } to { opacity: 0; } }
@media (max-width:600px) {
  .onform-portfolio-story { --cinema-top: 12svh; --cinema-height: min(72svh, calc(88svh - 130px)); }
  .onform-showcase__window { box-shadow: 0 14px 42px #0004; }
}
@media (prefers-reduced-motion:reduce) {
  .onform-showcase { background: var(--blue); }
  .onform-showcase::after { display: none; animation: none; }
  .onform-showcase__window::after { animation: none; opacity: .6; }
}


/* A clean image on black: no lighting, display chrome or decorative edges. */
.onform-showcase__visual { z-index: 1; }
.onform-showcase__copy { z-index: 2; border-left: none; }
.onform-section-label { border: none; padding: 0; }
.onform-showcase__cta { border-bottom: none; }
.onform-showcase__window { box-shadow: none; outline: none; }
.onform-showcase__window::after { display: none; }
body.is-cinema-view .menu-toggle.architecture-menu:not([aria-expanded="true"]) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The playing media itself supplies the light; CSS softens its pixels. */
.onform-showcase__window { z-index: 2; }
.onform-showcase__slide :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.onform-showcase__slide[data-name="Pep Pals"] :is(img,video) { object-position: 50% 10%; }
.onform-media-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.has-media-glow .onform-media-glow { opacity: calc(clamp(0, (var(--portfolio-p) - .5) / .5, 1) * (1 - var(--portfolio-exit)) * .7); }
.onform-media-glow__ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.06);
  filter: blur(clamp(30px, 4.5vw, 85px)) saturate(1.1) brightness(.7);
}
.onform-media-glow__reflection {
  position: absolute;
  inset: 100% 2% auto;
  height: 23%;
  opacity: .75;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}
.onform-media-glow__reflection canvas {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
  filter: blur(clamp(18px, 2.6vw, 45px)) brightness(.7);
}
@media (prefers-reduced-motion:reduce) { .has-media-glow .onform-media-glow { opacity: .55; } }

/* One clear voice for the ONFORM approach. */
.onform-showcase__copy {
  --approach-copy-size: clamp(30px, 4.05vw, 80px);
  color: var(--blue);
  justify-content: flex-start;
}
.onform-showcase__copy .onform-section-label,
.onform-showcase__copy .onform-showcase__story > p {
  color: inherit;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: var(--approach-copy-size);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.055em;
  text-transform: none;
  margin: 0;
}
.onform-showcase__copy .onform-showcase__story { padding-top: 22px; max-width: none; }
.onform-showcase__copy .onform-showcase__story > p { max-width: 27ch; }
@media (max-width:600px) {
  .onform-showcase__copy { --approach-copy-size: clamp(29px, 7.2vw, 42px); }
  .onform-showcase__copy .onform-section-label,
  .onform-showcase__copy .onform-showcase__story > p { line-height: 1.1; letter-spacing: -.045em; }
  .onform-showcase__copy .onform-showcase__story { padding-top: 18px; }
  .onform-showcase__copy .onform-showcase__story > p { max-width: 29ch; }
}
@media (prefers-reduced-motion:reduce) {
  .onform-showcase__copy { background: #fff; padding: 24px; }
}