/* Product-specific motion, progressive enhancement with static fallbacks. */
.u1 .unfold-opening{min-height:850px;height:100svh;max-height:1100px;background:linear-gradient(90deg,#000e,#0007),url(assets/unfold-coast.jpg) center/cover;align-items:center;overflow:hidden}.u1 .unfold-opening .container{grid-template-columns:1.2fr 1fr;align-items:center;padding-top:130px;padding-bottom:55px;gap:50px}.u1 .unfold-opening h1{font-size:clamp(60px,6.3vw,94px)}.u1 .unfold-opening .lead{margin-top:26px;max-width:420px}.hero-capture{text-align:center;position:relative}.capture-source{width:300px;aspect-ratio:9/16;border:1px solid #fff6;border-radius:30px;background:url(assets/unfold-coast.jpg) center/cover;margin:auto;position:relative;overflow:hidden;box-shadow:0 35px 90px #0009}.capture-mask{position:absolute;left:0;right:0;height:34.18%;background:#000b}.capture-mask.top{top:0}.capture-mask.bottom{bottom:0}.capture-band{position:absolute;top:34.18%;height:31.64%;left:0;right:0;border:2px solid #fff;box-shadow:0 0 35px #ffffff15;z-index:2}.capture-rec,.capture-resolution{position:absolute;left:9px;top:9px;font:8px monospace;letter-spacing:.05em;text-shadow:0 1px 5px #000}.capture-rec .red-dot{height:5px;width:5px;margin-right:2px}.capture-resolution{left:auto;top:auto;right:9px;bottom:9px}.capture-grip{position:absolute;bottom:25px;left:0;right:0;font:9px monospace;letter-spacing:.1em;color:#ddd}.capture-caption{display:flex;justify-content:center;gap:9px;margin-top:20px;font-size:19px;letter-spacing:-.03em}.capture-caption span{color:#aaa}.hero-capture>.micro{font-size:9px;margin-top:10px}.unfold nav .icon{border-radius:0;background:none}
@keyframes arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes frame-in{from{opacity:0;transform:scaleY(1.6)}to{opacity:1;transform:scaleY(1)}}
@keyframes mask-in{from{opacity:0}to{opacity:1}}
@keyframes tap-ring{0%,65%,100%{box-shadow:0 0 0 0 #ff453a00}20%{box-shadow:0 0 0 13px #ff453a30}45%{box-shadow:0 0 0 22px #ff453a00}}
@keyframes zoom-slide{0%,100%{transform:translateY(8px)}50%{transform:translateY(-10px)}}
@keyframes equalize{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:no-preference){
body:not(.gallery) .hero h1,body:not(.gallery) .portfolio-hero h1{animation:arrive .9s cubic-bezier(.2,.7,.2,1) both}.hero .lead{animation:arrive .9s .12s both}.hero .actions{animation:arrive .9s .22s both}
.capture-mask{animation:mask-in 1.4s .5s both}.capture-band{animation:frame-in 1.25s .45s cubic-bezier(.2,.8,.2,1) both}.hero-capture{animation:arrive 1.1s .15s both}
.g1 .hero-photo{transform:scale(1.035);transition:transform 1.5s ease-out}.g1.motion-ready .hero-photo{transform:scale(1)}
.t1 .big-frame{transition:rotate .6s,translate .6s}.t1 .tapes-collage:hover .big-frame{rotate:-2deg;translate:0 -7px}.t1 .populated-feed{transition:translate .6s}.t1 .tapes-collage:hover .populated-feed{translate:0 -12px}
.motion-in .gesture:first-child .gesture-icon i,.gesture.is-visible:first-child .gesture-icon i{animation:tap-ring 3s 2}.gesture.is-visible:nth-child(3) .gesture-icon i{animation:zoom-slide 2.5s 2}
.creation article,.step-row,.workflow-strip>div,.work-tile,.gallery-card{transition:transform .5s,border-color .5s,box-shadow .5s}.creation article:hover{transform:translateY(-7px)}.step-row:hover{transform:translateX(6px)}.work-tile:hover .work-cover img{transform:scale(1.035)}.work-cover img{transition:transform .8s}.gallery-card:hover{transform:translateY(-5px)}
.schedule-title{animation:arrive .45s both}.schedule-demo.schedule-change .screen-preview{animation:arrive .5s both}.schedule-buttons button{transition:background .3s,transform .3s}.schedule-buttons button:hover{transform:translateX(5px)}
.personal .sound-bars i{animation:equalize 2s ease-in-out 3;transform-origin:center}.personal .sound-bars i:nth-child(2n){animation-delay:.3s}.personal .sound-bars i:nth-child(3n){animation-delay:.7s}
}
@media(max-width:700px){.u1 .unfold-opening{height:auto;min-height:0;max-height:none}.u1 .unfold-opening .container{grid-template-columns:1fr;padding-top:125px;padding-bottom:40px;gap:40px}.u1 .unfold-opening h1{font-size:61px}.capture-source{width:250px}.u1 .unfold-opening .lead{font-size:15px}.capture-caption{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.gonna-mark{width:44px;height:44px;border-radius:12px;object-fit:cover}.g1 .two-col{position:relative}.g1 .step-row{position:relative}.g1 .step-row:before{content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;transform:scaleX(var(--step-progress,0));transform-origin:left;background:#8edbd2}.g1 .stories-photo img{scale:1.1}.g1 .hero-photo{will-change:translate}.gonna-stage .phone-img,.tapes-collage .big-frame,.tapes-collage .populated-feed{will-change:translate,rotate}.lumen .workflow-strip{position:relative}.lumen .workflow-strip:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#f5a524;transform:scaleX(var(--flow,0));transform-origin:left}.lumen .workflow-strip>div{opacity:var(--phase-opacity,1)}
@media(prefers-reduced-motion:no-preference){.motion-block{opacity:0;translate:0 28px;transition:opacity .8s,translate .8s cubic-bezier(.16,1,.3,1)}.motion-block.motion-seen{opacity:1;translate:0 0}.hero-capture .capture-band{transition:box-shadow .6s}.hero-capture:hover .capture-band{box-shadow:0 0 0 1px white,0 0 55px #ffffff40}.gonna-mark{transition:rotate .7s cubic-bezier(.2,.8,.2,1)}.brand:hover .gonna-mark{rotate:15deg}}
@media(prefers-reduced-motion:reduce){.motion-block{opacity:1;translate:none}.g1 .step-row:before,.lumen .workflow-strip:after{transform:scaleX(1)}}
