/* Motion-only layer: original devices, surrounding text and final composition preserved. */
@keyframes hc-builder-arrive{
  0%{opacity:.3;translate:-12px 22px;scale:.975}
  27%{opacity:1;translate:0 -3px;scale:1}
  62%{translate:0 -1px}
  100%{opacity:1;translate:0 0;scale:1}
}
@keyframes hc-phone-arrive{
  0%{opacity:0;translate:12px 26px;scale:.96}
  28%{opacity:1;translate:0 -7px;scale:1}
  64%{translate:0 -3px}
  100%{opacity:1;translate:0 0;scale:1}
}
@keyframes hc-code-write{from{opacity:.2;transform:scaleX(.12)}to{opacity:1;transform:scaleX(1)}}
@keyframes hc-chart-grow{from{transform:scaleY(.12);opacity:.35}to{transform:scaleY(1);opacity:1}}
@keyframes hc-interface-reveal{from{opacity:.2;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes hc-glass-light{0%{transform:translateX(-180%) skewX(-18deg);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(310%) skewX(-18deg);opacity:0}}
@keyframes hc-check-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes hc-confirm-ring{0%{opacity:0;transform:scale(.9)}25%{opacity:.65}100%{opacity:0;transform:scale(1.55)}}

@media(prefers-reduced-motion:no-preference){
  .hc-enhanced .hc-builder{transform:perspective(1000px) translate3d(calc(var(--hc-pointer-x,0) * -3px),calc(var(--hc-pointer-y,0) * -2px),0) rotateX(calc(var(--hc-pointer-y,0) * -1deg)) rotateY(calc(var(--hc-pointer-x,0) * 1.5deg)) rotate(-3deg);transition:transform .8s var(--studio-ease)}
  .hc-enhanced .hc-phone{transform:perspective(800px) translate3d(calc(var(--hc-pointer-x,0) * 6px),calc(var(--hc-pointer-y,0) * 4px),0) rotateX(calc(var(--hc-pointer-y,0) * -2deg)) rotateY(calc(var(--hc-pointer-x,0) * 2.5deg)) rotate(6deg);transition:transform .8s var(--studio-ease)}
  .hc-enhanced::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at var(--hc-light-x,65%) var(--hc-light-y,55%),#dfc37526,transparent 65%);opacity:0;transition:opacity .8s;pointer-events:none}
  .hc-enhanced.hc-pointer-active::before{opacity:1}
  .hc-enhanced .hc-builder::after,.hc-enhanced .hc-phone::after{content:"";position:absolute;top:-15%;bottom:-15%;left:0;width:55%;background:linear-gradient(90deg,transparent,#fff0 10%,#fff2 44%,#fff4 50%,#fff1 58%,transparent);transform:translateX(-180%) skewX(-18deg);pointer-events:none;z-index:3;opacity:0}
  .hc-enhanced .hc-ready-icon{position:relative}
  .hc-enhanced .hc-ready-icon::after{content:"";position:absolute;inset:-4px;border:1px solid #b69a4380;border-radius:50%;opacity:0;pointer-events:none}
  .hc-intro .hc-builder{animation:hc-builder-arrive 4.3s var(--studio-ease) both}
  .hc-intro .hc-phone{animation:hc-phone-arrive 4.5s var(--studio-ease) .15s both}
  .hc-intro .hc-code>span{transform-origin:left;animation:hc-code-write .65s var(--studio-ease) both;animation-delay:calc(.48s + var(--hc-order,0) * .08s)}
  .hc-code>span:nth-child(2),.hc-product-chart>span:nth-child(2){--hc-order:1}
  .hc-code>span:nth-child(3),.hc-product-chart>span:nth-child(3){--hc-order:2}
  .hc-code>span:nth-child(4),.hc-product-chart>span:nth-child(4){--hc-order:3}
  .hc-code>span:nth-child(5),.hc-product-chart>span:nth-child(5){--hc-order:4}
  .hc-code>span:nth-child(6),.hc-product-chart>span:nth-child(6){--hc-order:5}
  .hc-product-chart>span:nth-child(7){--hc-order:6}
  .hc-intro .hc-product-cards>div{animation:hc-interface-reveal .8s var(--studio-ease) 1s both}
  .hc-intro .hc-product-cards>div:nth-child(2){animation-delay:1.12s}
  .hc-intro .hc-product-cards>div:nth-child(3){animation-delay:1.24s}
  .hc-intro .hc-product-chart>span{transform-origin:bottom;animation:hc-chart-grow 1.1s var(--studio-ease) both;animation-delay:calc(1.05s + var(--hc-order,0) * .075s)}
  .hc-intro .hc-phone-cards,.hc-intro .hc-phone-row{animation:hc-interface-reveal .75s var(--studio-ease) 1.65s both}
  .hc-intro .hc-phone-row{animation-delay:1.85s}
  .hc-intro .hc-phone-row+.hc-phone-row{animation-delay:2s}
  .hc-intro .hc-terminal>span{animation:hc-interface-reveal .6s var(--studio-ease) 1.9s both}
  .hc-intro .hc-terminal>span:nth-child(2){animation-delay:2.05s}
  .hc-intro .hc-terminal>span:nth-child(3){animation-delay:2.2s}
  .hc-intro .hc-ready-icon path{stroke-dasharray:24;animation:hc-check-draw .75s var(--studio-ease) 2.2s both}
  .hc-intro .hc-ready-icon::after{animation:hc-confirm-ring 1.2s ease-out 2.65s both}
  .hc-intro .hc-builder::after{animation:hc-glass-light 1.9s ease-in-out .55s both}
  .hc-intro .hc-phone::after{animation:hc-glass-light 1.6s ease-in-out 1.1s both}
  .hc-settled.hc-pointer-active .hc-builder::after{animation:hc-glass-light 1.5s ease-in-out both}
  .hc-settled.hc-pointer-active .hc-phone::after{animation:hc-glass-light 1.4s ease-in-out .18s both}
  .hc-motion-paused *,.hc-motion-paused *::after{animation-play-state:paused!important}
}
@media(max-width:580px) and (prefers-reduced-motion:no-preference){
  .hc-enhanced .hc-builder{transform:rotate(-3deg)}
  .hc-enhanced .hc-phone{transform:rotate(6deg)}
}
@media print{
  .hc-scene *{animation:none!important;transition:none!important;translate:none!important;scale:none!important}
  .hc-scene .hc-builder{transform:rotate(-3deg)!important}
  .hc-scene .hc-phone{transform:rotate(6deg)!important}
  .hc-enhanced::before,.hc-enhanced .hc-builder::after,.hc-enhanced .hc-phone::after,.hc-enhanced .hc-ready-icon::after{display:none}
}