/* ONFORM's motion rhythm: quick response, generous settling, quiet at rest. */
:root { --onform-out: cubic-bezier(.16,1,.3,1); --onform-in-out: cubic-bezier(.76,0,.24,1); }
.studio-logo { letter-spacing: -.045em; }
.studio-hero__name { font-size: clamp(80px, 19vw, 360px); letter-spacing: -.065em; line-height: .87; }
.motion-ready .studio-hero__name { animation: none; }
.brand-letter-mask { display: inline-block; overflow: clip; padding: .1em .025em .07em; margin: -.1em -.025em -.07em; vertical-align: bottom; }
.brand-letter { display: inline-block; transform-origin: 50% 100%; }
.motion-ready .brand-letter { animation: onform-letter 1.35s var(--onform-out) calc(.54s + var(--letter-index) * .065s) both; }
@keyframes onform-letter { from { opacity: 0; transform: translate3d(0,110%,0) rotate(8deg); } to { opacity: 1; transform: translate3d(0,0,0) rotate(0); } }
.studio-hero { --scene-x: 50%; --scene-y: 45%; }
.hero-studio-room::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--scene-x) var(--scene-y), #315ecc18, transparent 57%); pointer-events: none; }
.hero-gallery { transform: perspective(1800px) rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg)); transform-origin: 50% 70%; }
.motion-ready .hero-gallery { animation: onform-gallery 1.6s var(--onform-out) .3s both; }
@keyframes onform-gallery { from { opacity: 0; translate: 0 7%; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.motion-ready .site-header { animation: onform-header 1s var(--onform-out) .85s both; }
@keyframes onform-header { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
.hero-floor-light { transition: opacity .7s var(--onform-out); }
.hero-gallery:has(.hero-video-canvas:hover) .hero-floor-light { opacity: .92; }

/* Lines reveal through their own masks. Both About colour layers stay aligned. */
.motion-mask { display: block; overflow: clip; padding: 0 .12em .12em; margin: 0 -.12em -.12em; }
.motion-line { display: block; transform-origin: 0 100%; }
.motion-ready [data-motion-group] .motion-line { opacity: 0; transform: translate3d(0,112%,0) rotate(2deg); transition: transform 1.15s var(--onform-out), opacity .65s; transition-delay: var(--motion-delay, 0ms); }
.motion-ready [data-motion-group].is-motion-revealed .motion-line { opacity: 1; transform: none; }
.motion-ready [data-motion-reveal] { opacity: 0; translate: 0 30px; transition: opacity .75s var(--onform-out), translate 1.05s var(--onform-out); transition-delay: var(--motion-delay, 0ms); }
.motion-ready [data-motion-reveal].is-motion-revealed { opacity: 1; translate: 0 0; }
.studio-about__ribbon { transform: translate3d(0,var(--ribbon-y, 0px),0) rotate(var(--ribbon-angle, 0deg)); transform-origin: 60% 55%; }
.motion-ready .studio-about__aside > p,
.motion-ready .studio-about__label,
.motion-ready .studio-about__cta { opacity: 0; translate: 0 22px; transition: opacity .8s var(--onform-out), translate 1s var(--onform-out), transform .45s var(--onform-out); }
.motion-ready .studio-about.is-motion-revealed .studio-about__label { opacity: 1; translate: 0 0; }
.motion-ready .studio-about.is-motion-revealed .studio-about__aside > p { opacity: 1; translate: 0 0; transition-delay: .2s; }
.motion-ready .studio-about.is-motion-revealed .studio-about__cta { opacity: 1; translate: 0 0; transition-delay: .32s, .32s, 0s; }

/* Rolling labels retain one accessible name and a comfortable click target. */
.motion-label { display: block; position: relative; overflow: clip; line-height: 1.35; }
.motion-label__line { display: block; transition: transform .65s var(--onform-out); }
.motion-label__line + .motion-label__line { position: absolute; inset: 0; transform: translateY(115%); }
:is(a,button):is(:hover,:focus-visible) .motion-label__line:first-child { transform: translateY(-115%); }
:is(a,button):is(:hover,:focus-visible) .motion-label__line + .motion-label__line { transform: translateY(0); }
.studio-about:has(.studio-about__content--base .studio-about__cta:is(:hover,:focus-visible)) .studio-about__cta .motion-label__line:first-child { transform: translateY(-115%); }
.studio-about:has(.studio-about__content--base .studio-about__cta:is(:hover,:focus-visible)) .studio-about__cta .motion-label__line + .motion-label__line { transform: translateY(0); }
.site-header nav a::after { width: 100%; height: 1px; left: 0; bottom: 1px; border-radius: 0; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--onform-out); }
.site-header nav a:is(:hover,:focus-visible)::after { transform: scaleX(1); transform-origin: left; }
.pill-button,.round-button { transition: transform .65s var(--onform-out), color .4s, border-color .4s; }
.pill-button::before,.round-button::before { transition: top .7s var(--onform-out); }
.pill-button:focus-visible::before,.round-button:focus-visible::before { top: -30%; }
.pill-button:focus-visible { color: #fff; }
.pricing-contact { position: relative; isolation: isolate; overflow: hidden; transition: color .45s; }
.pricing-contact::before { content: ''; position: absolute; inset: 0; background: var(--blue); z-index: -1; transform: translateY(101%); transition: transform .6s var(--onform-out); }
.pricing-contact:is(:hover,:focus-visible) { background: transparent; color: #fff; }
.pricing-contact:is(:hover,:focus-visible)::before { transform: translateY(0); }
.studio-about__arrow,.pricing-contact > span:last-child { transition: transform .6s var(--onform-out); }
.contact-footer__heading > .arrow { transform: rotate(var(--contact-arrow, 0deg)); transform-origin: center; }
.contact-footer__line { position: relative; border-color: #ffffff26; }
.contact-footer__line::before { content: ''; position: absolute; inset: -1px 0 auto; height: 1px; background: #ffffff6b; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--onform-out); }
.contact-footer.is-motion-revealed .contact-footer__line::before { transform: scaleX(1); }
.contact-footer__heading .motion-mask img { transition: transform .7s var(--onform-out); }
.contact-footer__heading:hover .motion-mask img { transform: rotate(-8deg); }

/* The project bar opens from a white curtain; its image remains beside the name. */
body[data-work-variant="reveal"] .work-row { transition: color .5s, background-color .5s; }
body[data-work-variant="reveal"] .work-row::before { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform .65s var(--onform-out); z-index: 0; }
body[data-work-variant="reveal"] .work-row.is-previewing { background: transparent; }
body[data-work-variant="reveal"] .work-row.is-previewing::before { transform: scaleY(1); }
body[data-work-variant="reveal"] .work-row__top h3 { transition: translate .7s var(--onform-out); }
body[data-work-variant="reveal"] .work-row.is-previewing .work-row__top h3 { translate: -8px 0; }
body[data-work-variant="reveal"] .work-row__reveal { transition: width .75s var(--onform-out), opacity .45s, clip-path .75s var(--onform-out); clip-path: inset(10% 0 10% 0); }
body[data-work-variant="reveal"] .work-row__reveal > img { transform: scale(1.15) translateX(-3%); transition: transform 1.05s var(--onform-out); }
body[data-work-variant="reveal"] .work-row.is-previewing .work-row__reveal { clip-path: inset(0); }
body[data-work-variant="reveal"] .work-row.is-previewing .work-row__reveal > img { transform: scale(1) translateX(0); }
body[data-work-variant="reveal"] .work-row__view--plain { transition: border-color .5s, translate .6s var(--onform-out); }
body[data-work-variant="reveal"] .work-row.is-previewing .work-row__view--plain { translate: -4px 0; }
.portfolio-view-cursor { scale: .7; transition: opacity .2s, visibility .2s, scale .5s var(--onform-out); }
.portfolio-view-cursor.is-visible { scale: 1; }

/* Pricing stays compact; expanded content settles in after the row opens. */
.pricing-row { position: relative; isolation: isolate; }
.pricing-row::before { content: ''; position: absolute; inset: 0 -20px; z-index: -1; background: #012bba05; opacity: 0; transition: opacity .35s; }
.pricing-row:has(.pricing-row__details.is-open)::before { opacity: 1; }
.pricing-row__details { transition: grid-template-rows .42s cubic-bezier(.22,1,.36,1), opacity .25s; }
.pricing-row__details-body > div { opacity: 1; translate: none; }
.pricing-details-toggle { transition: opacity .3s; }
.pricing-details-toggle > span { transition: transform .5s var(--onform-out); }
.pricing-inclusions[open] > ul { animation: onform-details .55s var(--onform-out) both; }
@keyframes onform-details { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.navigation nav a { transition: transform .7s var(--onform-out); }
.navigation.is-open nav a:hover { transform: translateX(10px); }

@media(max-width:900px), (hover:none), (pointer:coarse) {
  .hero-gallery { transform: none; }
  body[data-work-variant="reveal"] .work-row__reveal { clip-path: none; }
  body[data-work-variant="reveal"] .work-row__reveal > img { transform: none; }
  .pricing-row::before { inset-inline: -12px; }
}
@media(max-width:720px) {
  .studio-hero__name { font-size: 20vw; margin-top: 24px; }
  .motion-ready [data-motion-reveal] { translate: 0 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .brand-letter,.motion-ready .hero-gallery,.motion-ready .site-header { opacity: 1; translate: none; scale: 1; transform: none; }
  .motion-ready [data-motion-group] .motion-line,
  .motion-ready [data-motion-reveal],
  .motion-ready .studio-about__label,
  .motion-ready .studio-about__aside > p,
  .motion-ready .studio-about__cta { opacity: 1; translate: none; transform: none; }
  .studio-about__ribbon,.hero-gallery { transform: none; }
  .motion-label__line:first-child { transform: none !important; }
  .motion-label__line + .motion-label__line { display: none; }
  .pricing-row__details-body > div { opacity: 1; translate: none; }
  .contact-footer__line::before { transform: none; }
  body[data-work-variant="reveal"] .work-row.is-previewing .work-row__top h3 { translate: none; }
}