/* Motion is added only after the page has initialized. Static content stays visible without JS. */
.gallery-transition-layer { position: fixed; z-index: 9; pointer-events: none; perspective: 1500px; }
.gallery-outgoing { width: 100%; height: 100%; margin: 0; will-change: transform, opacity, filter; }
.site-project-tabs { scrollbar-width: none; }
.site-project-tabs::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroLabelTop { from { opacity: 0; transform: translateY(18px) rotate(1deg); } to { opacity: 1; transform: rotate(5deg); } }
  @keyframes heroLabelBottom { from { opacity: 0; transform: translateY(18px) rotate(-7deg); } to { opacity: 1; transform: rotate(-5deg); } }
  @keyframes resultArrive { from { opacity: .65; transform: translateX(12px); box-shadow: 0 0 0 #dce5d8; } to { opacity: 1; transform: none; box-shadow: 5px 6px 0 #dce5d8; } }
  @keyframes metricArrive { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes typingDots { 50% { opacity: .35; } }
  @keyframes countChange { 0% { opacity: .25; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
  @keyframes galleryOutNext { 0% { opacity: 1; } 48%, 100% { opacity: 0; filter: blur(1.5px); transform: perspective(1400px) translate3d(-76px,-17px,-90px) rotate(-1.5deg) scale(.94); } }
  @keyframes galleryOutPrevious { 0% { opacity: 1; } 48%, 100% { opacity: 0; filter: blur(1.5px); transform: perspective(1400px) translate3d(76px,-17px,-90px) rotate(1.5deg) scale(.94); } }
  @keyframes galleryOutCategory { 0% { opacity: 1; } 48%, 100% { opacity: 0; filter: blur(1.5px); transform: perspective(1400px) translate3d(0,-43px,-110px) rotate(-1deg) scale(.92); } }
  @keyframes galleryInNext { 0% { opacity: .25; filter: blur(2px); transform: translate3d(58px,18px,0) rotate(1.4deg) scale(.96); } 42% { opacity: 1; filter: none; } 100% { opacity: 1; filter: none; transform: none; } }
  @keyframes galleryInPrevious { 0% { opacity: .25; filter: blur(2px); transform: translate3d(-58px,18px,0) rotate(-1.4deg) scale(.96); } 42% { opacity: 1; filter: none; } 100% { opacity: 1; filter: none; transform: none; } }
  @keyframes galleryInCategory { 0% { opacity: .25; filter: blur(2px); transform: translate3d(0,34px,0) rotate(1deg) scale(.96); } 42% { opacity: 1; filter: none; } 100% { opacity: 1; filter: none; transform: none; } }
  @keyframes galleryPartRise { from { opacity: .65; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .gallery-outgoing.gallery-next { animation: galleryOutNext .66s cubic-bezier(.25,.6,.25,1) both; }
  .gallery-outgoing.gallery-previous { animation: galleryOutPrevious .66s cubic-bezier(.25,.6,.25,1) both; }
  .gallery-outgoing.gallery-category { animation: galleryOutCategory .66s cubic-bezier(.25,.6,.25,1) both; }
  .gallery-incoming.gallery-next { animation: galleryInNext .66s cubic-bezier(.2,.8,.2,1) both; }
  .gallery-incoming.gallery-previous { animation: galleryInPrevious .66s cubic-bezier(.2,.8,.2,1) both; }
  .gallery-incoming.gallery-category { animation: galleryInCategory .66s cubic-bezier(.2,.8,.2,1) both; }
  .gallery-incoming .featured-work-visual, .gallery-incoming .horoscope-work-visual, .gallery-incoming .business-bot-visual, .gallery-incoming .automation-work-visual { animation: galleryPartRise .48s ease .06s both; }
  .gallery-incoming .featured-work-copy { animation: galleryPartRise .48s ease .12s both; }
  #work-slide-count.is-updating { animation: countChange .45s ease both; }
  @media (hover: hover) and (min-width: 821px) {
    .work-carousel-grid { perspective: 1600px; }
    .work-panel:not(.is-active) { transform: rotateY(-2.5deg) translateZ(-8px); transform-origin: left center; transition: transform .35s ease; }
    .work-panel:not(.is-active):hover, .work-panel:not(.is-active):focus-within { transform: rotateY(0) translateZ(12px); }
    .work-panel:not(.is-active):last-child { transform: rotateY(2.5deg) translateZ(-8px); transform-origin: right center; }
    .work-panel:not(.is-active):last-child:hover, .work-panel:not(.is-active):last-child:focus-within { transform: rotateY(0) translateZ(12px); }
  }
  .motion-ready .portrait-label.label-top { animation: heroLabelTop .68s cubic-bezier(.2,.8,.2,1) .35s both; }
  .motion-ready .portrait-label.label-bottom { animation: heroLabelBottom .68s cubic-bezier(.2,.8,.2,1) .7s both; }
  .motion-ready .motion-reveal { opacity: 0; transform: translateY(19px); transition: opacity .58s ease, transform .58s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--reveal-order,0) * 85ms); }
  .motion-ready .motion-reveal.is-visible { opacity: 1; transform: none; }
  .data-workspace.has-flow .data-results { animation: resultArrive .6s cubic-bezier(.2,.8,.2,1) both; }
  .data-workspace.has-flow .data-metrics strong { animation: metricArrive .48s ease both; }
  .data-workspace.has-flow .data-metrics>div:nth-child(2) strong { animation-delay: .1s; }
  .data-workspace.has-flow .data-metrics>div:nth-child(3) strong { animation-delay: .2s; }
  .data-workspace.has-flow #data-result-rows tr { animation: metricArrive .45s ease both; }
  .data-workspace.has-flow #data-result-rows tr:nth-child(2) { animation-delay: .08s; }
  .data-workspace.has-flow #data-result-rows tr:nth-child(3) { animation-delay: .16s; }
  .bot-bubble.is-typing { min-width: 45px; color: #7b709a; letter-spacing: .18em; animation: typingDots .75s ease-in-out infinite; }
  .bot-bubble.in:not(.is-typing) { animation: metricArrive .28s ease both; }
  .button-primary span, .hero-buttons .button-link span { display: inline-block; transition: transform .22s ease; }
  .button-primary:hover span, .button-primary:focus-visible span, .hero-buttons .button-link:hover span, .hero-buttons .button-link:focus-visible span { transform: translate(3px,-2px); }
  .button-primary:active, .header-cta:active { transform: translate(2px,2px) scale(.98); }
  .featured-live { display: inline-block; transition: transform .22s ease, color .22s ease; }
  .featured-live:hover, .featured-live:focus-visible { transform: translateX(3px); }
  @media (hover: hover) {
    .shortlist-picture img, .featured-browser img { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
    .shortlist-card:hover .shortlist-picture img, .shortlist-card:focus-visible .shortlist-picture img { transform: scale(1.055) translateY(-1%); }
    .featured-work:focus-within .featured-browser img, .featured-browser:hover img { transform: scale(1.04) translateY(-1%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1 !important; transform: none !important; }
  .portrait-label { animation: none !important; }
}