/* v46: one motion rhythm, with visible content as the default. */
:root{--mbp-motion-ready:1;--motion-ease:cubic-bezier(.16,1,.3,1);--motion-soft:cubic-bezier(.22,.61,.36,1);--motion-enter:820ms;--motion-travel:18px}
html{scroll-padding-top:104px}
[data-motion-item]{opacity:var(--motion-opacity,1);transform:translate3d(0,var(--motion-y,0),0);transition:opacity var(--motion-enter) var(--motion-soft) var(--motion-delay,0ms),transform var(--motion-enter) var(--motion-ease) var(--motion-delay,0ms),box-shadow 400ms var(--motion-ease),border-color 240ms ease}
[data-motion-item="waiting"]{--motion-opacity:0;--motion-y:var(--motion-travel)}
[data-motion-item="entered"]{--motion-opacity:1;--motion-y:0px}
[data-motion-item]:focus-within{opacity:1;transform:none;transition-delay:0ms}
[data-motion-intro]{animation:motionArrival 880ms var(--motion-ease) var(--motion-delay,0ms) both}
@keyframes motionArrival{from{opacity:.24;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* Navigate immediately; content entrances supply motion without a page snapshot overlay. */
@view-transition{navigation:none}
/* Keep sticky header geometry fixed; only its surface changes on scroll. */
.site-head,.lb-head{transition:background-color 280ms ease,box-shadow 280ms ease}
.site-head .head-in,.site-head.is-stuck .head-in{padding-top:12px;padding-bottom:12px;transition:none}
.lb-head .lb-head-in,.lb-head.is-stuck .lb-head-in{padding-block:14px;transition:none}
.lb-head.is-stuck .lb-logo img{height:inherit}
.site-head nav a{transition:color 200ms ease,border-color 200ms ease}
/* Parent entrances replace the older image drift and decode fade layers. */
.hero-media>img,.lb-devices{animation:none!important}
.js-img img{opacity:1}
.btn,.chip,.rbtn{transition:transform 280ms var(--motion-ease),box-shadow 360ms var(--motion-ease),background-color 220ms ease,color 220ms ease,border-color 220ms ease}
.card,.klass,.event-card,.event-history-card,.labs-service,.labs-home-visual a,.path{transition:transform 520ms var(--motion-ease),box-shadow 520ms var(--motion-ease),border-color 240ms ease,opacity var(--motion-enter) var(--motion-soft)}
[data-motion-item].card,[data-motion-item].klass,[data-motion-item].labs-service,[data-motion-item].event-card,[data-motion-item].event-history-card{transition:opacity var(--motion-enter) var(--motion-soft) var(--motion-delay,0ms),transform var(--motion-enter) var(--motion-ease) var(--motion-delay,0ms),box-shadow 400ms var(--motion-ease),border-color 240ms ease}
.card img,.klass img,.event-card img,.event-history-card img,.path img{transition:transform 900ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
  .card:hover,.klass:hover,.event-card:hover,.event-history-card:hover,.labs-service:hover{transform:translate3d(0,-3px,0)}
  .card:hover img,.klass:hover img,.event-card:hover img,.event-history-card:hover img,.path:hover img{transform:scale(1.025)}
}
@media(hover:none),(pointer:coarse){
  .card:hover,.klass:hover,.event-card:hover,.event-history-card:hover,.labs-service:hover,.labs-home-visual a:hover,.path:hover,.btn:hover{transform:none}
  .card:hover img,.klass:hover img,.event-card:hover img,.event-history-card:hover img,.path:hover img{transform:none}
  .btn:active,.chip:active,.rbtn:active{transform:scale(.985)}
  .chip,.rbtn{min-height:44px}
}
/* The glass highlight moves as a composited layer, not a repainted gradient. */
.iphone-reflection{inset:-16% auto -16% -8%;width:46%;height:auto;background:linear-gradient(90deg,transparent,#FFFFFF12,transparent);background-size:auto;transform:translate3d(-220%,0,0);opacity:0}
[data-product-motion="running"] [data-product-visible] .iphone-reflection{animation:motionGlass 12s ease-in-out infinite}
[data-product-motion="running"] [data-product-visible]{will-change:transform}
.product-device:not([data-product-visible]){will-change:auto}
.product-device:not([data-product-visible]) .iphone-reflection{animation:none;opacity:0}
.iphone-screen>picture{display:block;width:100%;height:100%}
.studio-motion-media{transition:none}
.reader[data-mode="flow"] .reader-bar,.reader[data-mode="flow"] .reader-progress{display:none}
[data-motion-item="entered"]:hover{transition-delay:0ms}
@keyframes motionGlass{0%,68%,100%{transform:translate3d(-220%,0,0);opacity:0}78%{opacity:.5}88%{transform:translate3d(340%,0,0);opacity:0}}
/* All optional decoration sleeps outside the viewport and in hidden tabs. */
[data-motion-active="false"] .hero-plant-card,[data-motion-active="false"] .ambient-motion,[data-motion-active="false"]::before{animation-play-state:paused!important}
html[data-motion-mode="idle"] *,html[data-motion-mode="idle"] *::before,html[data-motion-mode="idle"] *::after{animation-play-state:paused!important}
html[data-motion-mode="paused"] [data-motion-item],html[data-motion-mode="reduced"] [data-motion-item]{opacity:1!important;transform:none!important;transition:none!important}
html[data-motion-mode="paused"] [data-motion-intro],html[data-motion-mode="reduced"] [data-motion-intro]{animation:none!important;opacity:1!important;transform:none!important}
html[data-motion-mode="paused"] .hero-plant-card,html[data-motion-mode="paused"] .ambient-motion,html[data-motion-mode="paused"] main::before,html[data-motion-mode="paused"] .hero::before,html[data-motion-mode="paused"] .class-page::before,html[data-motion-mode="paused"] .chapter::before{animation-play-state:paused!important}
@media(max-width:1100px){
  .site-head .head-in,.site-head.is-stuck .head-in{padding-top:10px;padding-bottom:10px}
  .site-head nav.open{animation:motionMenu 240ms var(--motion-ease) both;transform-origin:top}
  @keyframes motionMenu{from{opacity:.3;transform:translate3d(0,-5px,0)}to{opacity:1;transform:none}}
  .site-head nav:focus-within{animation:none}
}
@media(max-width:620px){:root{--motion-enter:720ms;--motion-travel:12px}html{scroll-padding-top:84px}[data-motion-intro]{animation-duration:760ms}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  [data-motion-item],[data-motion-intro]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .product-device,.studio-motion-media{transform:none!important;will-change:auto!important}
  .iphone-reflection,.hero-plant-card{animation:none!important}
}

/* Without a pause control, optional decoration is static before initialization and
   settles after the four-second shared introduction. Media controls stay native. */
html:not([data-motion-ready="true"]) .ambient-motion,
html:not([data-motion-ready="true"]) .home-sprig,
html:not([data-motion-ready="true"]) .welcome-flow,
html:not([data-motion-ready="true"]) .welcome-glow,
html:not([data-motion-ready="true"]) .portrait-motion,
html:not([data-motion-ready="true"]) .hero-plant-card,
html:not([data-motion-ready="true"]) .hero-plant-main,
html:not([data-motion-ready="true"]) .iphone-reflection,
html:not([data-motion-ready="true"]) .goodnight-device::after,
html:not([data-motion-ready="true"]) .labs-hero-orbit,
html:not([data-motion-ready="true"]) .labs-hero-art,
html:not([data-motion-ready="true"]) .events-hero-stack img,
html:not([data-motion-ready="true"]) main::before,
html:not([data-motion-ready="true"]) .hero::before,
html:not([data-motion-ready="true"]) .class-page::before,
html:not([data-motion-ready="true"]) .chapter::before,
html:not([data-motion-ready="true"]) .hero-media::before,
html[data-motion-mode="paused"] .ambient-motion,
html[data-motion-mode="paused"] .home-sprig,
html[data-motion-mode="paused"] .welcome-flow,
html[data-motion-mode="paused"] .welcome-glow,
html[data-motion-mode="paused"] .portrait-motion,
html[data-motion-mode="paused"] .hero-plant-card,
html[data-motion-mode="paused"] .hero-plant-main,
html[data-motion-mode="paused"] .iphone-reflection,
html[data-motion-mode="paused"] .goodnight-device::after,
html[data-motion-mode="paused"] .labs-hero-orbit,
html[data-motion-mode="paused"] .labs-hero-art,
html[data-motion-mode="paused"] .events-hero-stack img,
html[data-motion-mode="paused"] main::before,
html[data-motion-mode="paused"] .hero::before,
html[data-motion-mode="paused"] .class-page::before,
html[data-motion-mode="paused"] .chapter::before,
html[data-motion-mode="paused"] .hero-media::before{animation-play-state:paused!important}