/* hrHivora — MOTION SYSTEM / original choreography
   Scroll controlled story, accessible reduced-motion fallback, zero external libraries. */

/* Always-visible fallback when JS is absent or motion is reduced. */
.motion-story{position:relative;background:#7631c8;color:#faffe9;min-height:880px;overflow:clip}
.story-sticky{position:relative;min-height:880px;padding:42px max(24px,5vw) 48px;background:var(--story-bg,#7530c8);isolation:isolate;overflow:hidden}
.story-sticky::before{content:"";position:absolute;z-index:-1;inset:-20%;background:radial-gradient(ellipse at 56% 80%,#f0ffdb39,transparent 57%);opacity:.8;pointer-events:none}
.story-sticky::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:75px 75px;mask-image:linear-gradient(to bottom,transparent,black 85%);opacity:.3}
.story-topline{display:flex;justify-content:space-between;gap:22px;font:700 10px "Courier New",monospace;letter-spacing:.065em;position:relative;z-index:7;color:#e1eff0}
.story-topline b{font-size:19px;line-height:0;vertical-align:-2px;margin-left:8px}
.story-copy{position:absolute;z-index:6;top:12%;left:max(25px,5vw);right:5%;max-width:1020px}
.story-phrase{position:absolute;top:0;left:0;width:100%;transition:none}
.story-phrase>span{display:block;font:700 11px "Courier New",monospace;letter-spacing:.06em;margin:0 0 26px;color:#dfeee1}
.story-phrase h2{font-size:clamp(58px,7.8vw,125px);line-height:.98;font-weight:790;letter-spacing:-.085em;margin:0}
.story-phrase h2 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:#cbf29b;letter-spacing:-.06em}
.story-phrase-two,.story-phrase-three{opacity:0;visibility:hidden}
.story-orbit{position:absolute;pointer-events:none;z-index:0;right:-5%;bottom:-24%;height:77vh;aspect-ratio:1;background:#caecaf2d;border-radius:48% 52% 38% 62%;display:grid;place-items:center;transform:rotate(-20deg)}
.story-orbit>span{font-size:75vh;color:#d5dbd20c;line-height:1;font-weight:700}
.story-deck{position:absolute;inset:40% 2% 11%;display:grid;place-items:center;isolation:isolate}
.story-plane{position:absolute;z-index:2;top:50%;left:50%;transform:translate3d(-50%,-50%,0);display:flex;flex-direction:column;justify-content:space-between;padding:18px 19px;width:210px;height:268px;border-radius:14px;border:2px solid #263b3b;box-shadow:9px 15px 0 #12143454,0 25px 45px #0f0a3047;will-change:transform}
.story-plane-one{background:#a1f18c;color:#203534}
.story-plane-two{background:#fff2a9;color:#595233}
.story-plane-three{background:#efb1fa;color:#4a2c58}
.story-plane-four{background:#b9c7ef;color:#242458}
.story-plane-top,.story-plane-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;font:700 10px "Courier New",monospace}
.story-plane-top b{font-size:22px;font-weight:500}
.story-plane-center{display:flex;flex-direction:column;gap:11px}
.story-plane-center i{font-family:Georgia,serif;font-style:italic;font-size:66px;line-height:.8;font-weight:700}
.story-plane-center strong{font-size:31px;font-weight:800;letter-spacing:-.068em;line-height:.97}
.story-plane-bottom span{font-size:19px}
.story-bottomline{position:absolute;z-index:7;bottom:27px;left:max(25px,5vw);right:max(25px,5vw);display:grid;grid-template-columns:175px 1fr auto;gap:32px;align-items:center}
.story-state{font:700 10px "Courier New",monospace;white-space:nowrap}
.story-progress{height:5px;background:#cbedca50;border-radius:20px;overflow:hidden}
.story-progress i{display:block;height:100%;width:0%;background:#b9f09e;border-radius:20px;transition:width .08s linear}
.story-control{appearance:none;background:#f3f8ea;border:1px solid #293e39;color:#273d35;display:flex;justify-content:space-between;align-items:center;gap:22px;min-height:47px;border-radius:6px;padding:0 17px;font:700 10px "Courier New",monospace;white-space:nowrap}
.story-control:hover{background:#c7f3b4}
.story-control b{font-size:22px;font-weight:400}

/* Scroll-controlled pinned scene — animation engine updates --scene variables in rAF. */
html.motion-enabled .motion-story{height:355svh;min-height:1800px;overflow:visible}
html.motion-enabled .story-sticky{position:sticky;top:0;height:100svh;min-height:690px}
html.motion-enabled .story-plane{transition:none;backface-visibility:hidden;contain:paint}
html.motion-enabled .story-phrase{will-change:opacity,transform}
html.motion-enabled .story-orbit{will-change:transform,opacity}

/* First-fold entrance: cards, headline, controls land with different rhythms. */
html.motion-enabled .hero .section-serial{animation:hero-copy-enter .66s .05s cubic-bezier(.2,.75,.2,1) both}
html.motion-enabled .hero h1{animation:hero-copy-enter .95s .16s cubic-bezier(.16,.92,.22,1) both}
html.motion-enabled .hero .hero-lede{animation:hero-copy-enter .78s .48s cubic-bezier(.18,.77,.22,1) both}
html.motion-enabled .hero .hero-actions{animation:hero-copy-enter .78s .63s cubic-bezier(.18,.77,.22,1) both}
html.motion-enabled .hero .fineprint{animation:hero-copy-enter .6s .78s both}
html.motion-enabled .hero .hero-card-yellow{animation:yellow-land 1.2s .36s cubic-bezier(.15,1.1,.2,1) both}
html.motion-enabled .hero .hero-phone{animation:phone-land 1.2s .55s cubic-bezier(.15,1.1,.2,1) both}
html.motion-enabled .hero .hero-sticker{animation:sticker-land 1s 1.18s cubic-bezier(.17,1.2,.3,1) both}
html.motion-enabled .hero .hero-ticker{animation:hero-copy-enter .8s 1.3s both}
@keyframes hero-copy-enter{from{opacity:0;translate:0 42px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes yellow-land{from{opacity:0;transform:translate3d(-125px,90px,0) rotate(-42deg) scale(.67)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes phone-land{from{opacity:0;transform:translate3d(130px,-105px,0) rotate(33deg) scale(.68)}to{opacity:1;transform:rotate(10deg) scale(1)}}
@keyframes sticker-land{from{opacity:0;transform:translate3d(-55px,80px,0) rotate(48deg) scale(.2)}to{opacity:1;transform:rotate(-9deg) scale(1)}}

/* Editorial scroll reveals / distinct motions instead of ubiquitous fade-in. */
.motion-enabled .belief-right h2{clip-path:inset(0 0 100% 0);translate:0 55px;transition:clip-path 1.25s cubic-bezier(.22,.8,.16,1),translate 1.1s}
.motion-enabled .belief.in-view .belief-right h2{clip-path:inset(0 0 0 0);translate:0 0}
.motion-enabled .belief-spark{transition:rotate 1.2s cubic-bezier(.25,1,.3,1),scale 1.2s}
.motion-enabled .belief.in-view .belief-spark{rotate:90deg;scale:1.08}
.motion-enabled .vacancy .vacancy-intro{opacity:0;translate:0 65px;transition:opacity .8s,translate 1s cubic-bezier(.2,.85,.2,1)}
.motion-enabled .vacancy.in-view .vacancy-intro{opacity:1;translate:0 0}
.motion-enabled .vacancy .open-role{opacity:.35;translate:0 105px;scale:.94;transition:opacity 1s,translate 1.1s cubic-bezier(.2,.8,.2,1),scale 1.1s cubic-bezier(.2,.8,.2,1)}
.motion-enabled .vacancy.in-view .open-role{opacity:1;translate:0 0;scale:1}
.motion-enabled .product-showcase{transform-origin:50% 5%;opacity:.35;scale:.87;rotate:-4deg;transition:scale 1.35s cubic-bezier(.2,.85,.18,1),rotate 1.35s cubic-bezier(.2,.85,.18,1),opacity .9s}
.motion-enabled .product.in-view .product-showcase{opacity:1;scale:1;rotate:0deg}
.motion-enabled .journey-scene{transform-origin:50% 50%;transition:filter .45s}
.motion-enabled .journey-tab.is-active{animation:tab-pulse .55s cubic-bezier(.17,.88,.2,1)}
@keyframes tab-pulse{0%{scale:.965}65%{scale:1.025}100%{scale:1}}
.motion-enabled .journey-view.visible .scene-art{animation:scene-reveal .62s cubic-bezier(.17,.85,.23,1) both}
@keyframes scene-reveal{from{opacity:.2;clip-path:inset(30% 0 0 0 round 16px);translate:0 18px;rotate:3deg}to{opacity:1;clip-path:inset(0 0 0 0 round 12px);translate:0 0;rotate:0}}
.motion-enabled .people .person-card{opacity:0;transition:opacity .8s,translate 1.05s cubic-bezier(.16,.91,.22,1),rotate 1.05s cubic-bezier(.16,.91,.22,1)}
.motion-enabled .people .person-card-one{translate:-75px 145px;rotate:-14deg}
.motion-enabled .people .person-card-two{translate:0 180px;rotate:18deg;transition-delay:.12s}
.motion-enabled .people .person-card-three{translate:75px 145px;rotate:-16deg;transition-delay:.24s}
.motion-enabled .people.in-view .person-card{opacity:1;translate:0 0;rotate:0deg}
.motion-enabled .people.in-view .person-card:hover{translate:0 -18px;rotate:2deg;transition-duration:.35s;box-shadow:0 26px 45px #30432c38}
.motion-enabled .close-decor{transition:translate 1.2s cubic-bezier(.2,.8,.2,1),rotate 1.4s cubic-bezier(.2,.8,.2,1)}
.motion-enabled .close.in-view .close-decor{translate:-60px -40px;rotate:24deg}
.motion-enabled .role-postit{transition:rotate .4s ease,translate .4s ease}
.motion-enabled .role-postit:hover{rotate:-9deg;translate:0 -8px}
.motion-enabled .hero-sticker{cursor:pointer;user-select:none}
.motion-enabled .hero-sticker:focus-visible{outline:3px solid #6328dc;outline-offset:5px}

/* Discrete color transitions between sections: no full-page scroll hijacking. */
.motion-enabled .ribbon-track{animation-duration:calc(28s - 6s * var(--scroll-drive,0))}

/* Reduced-motion is a real product setting, not just an animation-duration hack. */
@media(prefers-reduced-motion:reduce){
  .motion-story{min-height:820px}
  .story-deck{display:grid;position:relative;inset:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:300px}
  .story-plane{position:relative;left:auto;top:auto;width:100%;height:230px;transform:none!important;box-shadow:3px 5px 0 #16143a44}
  .story-phrase:not(.story-phrase-one){display:none}
  .story-sticky{min-height:820px}
  .story-orbit{display:none}
  .story-control{display:none}
}

/* Responsive cards in an immersive pinned scene */
@media(max-width:950px){
 .story-phrase h2{font-size:clamp(55px,8vw,88px)}
 .story-deck{inset:40% 1% 10%}
 .story-plane{width:180px;height:234px;padding:14px}
 .story-plane-center strong{font-size:25px}.story-plane-center i{font-size:54px}
 .story-bottomline{grid-template-columns:140px 1fr auto;gap:17px}
}
@media(max-width:700px){
 .motion-story{min-height:680px}
 .story-sticky{min-height:680px;padding:27px 18px 55px}
 html.motion-enabled .motion-story{height:320svh;min-height:1750px}
 html.motion-enabled .story-sticky{height:100svh;min-height:620px}
 .story-topline{font-size:8px;gap:14px}
 .story-topline>span:last-child{max-width:140px;text-align:right;line-height:1.5}
 .story-topline b{display:none}
 .story-copy{left:19px;right:19px;top:12%}
 .story-phrase>span{font-size:9px;letter-spacing:0;margin-bottom:16px}
 .story-phrase h2{font-size:clamp(42px,10.5vw,64px);line-height:1.02}
 .story-deck{inset:34% 0 10%}
 .story-plane{width:160px;height:206px;padding:12px 13px;border-width:1px;border-radius:11px;box-shadow:5px 8px 0 #12143455}
 .story-plane-top,.story-plane-bottom{font-size:8px}
 .story-plane-top b{font-size:17px}
 .story-plane-center{gap:9px}
 .story-plane-center i{font-size:46px}
 .story-plane-center strong{font-size:21px}
 .story-plane-bottom span{font-size:14px}
 .story-orbit{height:63svh;bottom:-20%;right:-70%}
 .story-orbit>span{font-size:45svh}
 .story-bottomline{bottom:17px;left:19px;right:19px;grid-template-columns:auto 1fr auto;gap:9px}
 .story-state{font-size:8px}
 .story-control{font-size:8px;padding:0 10px;min-height:41px;gap:7px}
 .story-control b{font-size:16px}
 .story-progress{height:4px}
 .motion-enabled .people .person-card{transition-delay:0s}
 .motion-enabled .people .person-card-two,.motion-enabled .people .person-card-three{translate:0 80px;rotate:0}
}
@media(max-width:390px){
 .story-phrase h2{font-size:clamp(38px,10vw,48px)}
 .story-plane{width:140px;height:187px}
 .story-plane-center strong{font-size:19px}
 .story-plane-center i{font-size:40px}
 .story-deck{inset:36% 0 11%}
 .story-bottomline{grid-template-columns:1fr 1fr;gap:8px}
 .story-progress{grid-column:1/3;grid-row:2}
 .story-control{justify-self:end}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 .story-sticky{min-height:1000px}
 .story-deck{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:260px;gap:12px;padding:0 4px}
 .story-plane{height:205px}
}

/* Chrome sticky fix: overflow-x:clip on the root creates an unexpected
   containing context for position:sticky. Body already clips horizontal art. */
html.motion-enabled{overflow-x:visible!important}
/* Restrict decorative paint at 320px without disabling sticky on the root. */
html.motion-enabled main{overflow-x:clip}
/* Long Cyrillic word needs dedicated optical sizing in the fourth paper plane. */
.story-plane-four .story-plane-center strong{font-size:25px}
@media(max-width:950px){.story-plane-four .story-plane-center strong{font-size:21px}}
@media(max-width:700px){.story-plane-four .story-plane-center strong{font-size:19px}}
@media(max-width:390px){.story-plane-four .story-plane-center strong{font-size:17px}}