/* V81 — professional brand rhythm, role-reactive A, footer restoration, smoother A morph */

/* Keep the A as a recognisable icon, but stop using it as a divider on every scene. */
.story-scene:not(.close):after{display:none!important}

/* Repeating-A watermark is retained but positioned in visual space, never across core copy. */
.story-scene:before{opacity:.025!important;width:min(460px,34vw)!important;height:150px!important}
.opening:before{right:2%!important;left:auto!important;top:13%!important;bottom:auto!important}
.drag:before{right:2%!important;left:auto!important;top:auto!important;bottom:7%!important;opacity:.035!important}
.numbers:before{right:3%!important;left:auto!important;top:14%!important;bottom:auto!important}
.layer:before{right:3%!important;left:auto!important;top:8%!important;bottom:auto!important}
.usecases:before{left:2%!important;right:auto!important;top:auto!important;bottom:5%!important;opacity:.035!important}
.compare:before{right:2%!important;left:auto!important;top:auto!important;bottom:6%!important}

/* Opening visual: the selected role focuses one operating dimension and the A turns toward it. */
.orbit-label{transition:transform .35s ease,border-color .35s ease,background .35s ease,color .35s ease,box-shadow .35s ease}
.orbit-label.active{border-color:#FF8A00;background:#fff8ef;color:#9b4d1e;box-shadow:0 10px 28px rgba(255,138,0,.14);transform:scale(1.08)}
.hero-a img{transform-origin:50% 50%;will-change:transform}
.hero-a img.role-turn{animation:v81-role-turn .82s cubic-bezier(.22,.8,.22,1)}
@keyframes v81-role-turn{0%{filter:drop-shadow(0 10px 18px rgba(255,138,0,.1));scale:.92}55%{filter:drop-shadow(0 13px 26px rgba(255,138,0,.32));scale:1.07}100%{filter:drop-shadow(0 10px 18px rgba(255,138,0,.18));scale:1}}

/* Layer machine: use A once, let motion and sequence do the storytelling. */
.machine-layer img{filter:drop-shadow(0 7px 18px rgba(10,42,58,.2))!important}
.machine-layer:before,.machine-layer:after{animation-duration:3.2s!important;opacity:.24}

/* The homepage A-to-layer icon should feel deliberate, with breathing room around the morph. */
.brand-a-motion.brand-pattern-flatten{overflow:visible!important;isolation:isolate}
.brand-a-motion.brand-pattern-flatten>img{overflow:visible!important;filter:drop-shadow(0 10px 24px rgba(255,138,0,.15))!important}

/* Restore a real close to the interactive story. */
.story-footer{background:#061923;color:#fff;padding:56px clamp(24px,6vw,92px) 38px;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(520px,1.5fr);gap:34px 70px;border-top:1px solid #173748;position:relative;overflow:hidden}
.story-footer:before{content:"";position:absolute;right:-60px;bottom:-35px;width:420px;height:150px;background:url('assets/adial-branding-kit-and-logos/repeating-a-pattern.svg') center/contain no-repeat;opacity:.04;pointer-events:none}
.story-footer-brand{display:flex;gap:17px;align-items:center;position:relative;z-index:1}.story-footer-brand>a{width:62px;height:52px;display:grid;place-items:center}.story-footer-brand img{width:48px;height:auto}.story-footer-brand strong{display:block;font:800 22px 'Manrope',sans-serif}.story-footer-brand span{display:block;color:#91a7b4;font-size:12px;margin-top:4px;letter-spacing:.03em}
.story-footer-links{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:24px;position:relative;z-index:1}.story-footer-links div{display:flex;flex-direction:column;gap:8px}.story-footer-links b{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#FF8A00;margin-bottom:4px}.story-footer-links a{color:#c8d5dc;text-decoration:none;font-size:13px}.story-footer-links a:hover{color:#fff}
.story-footer-legal{grid-column:1/-1;border-top:1px solid #173748;padding-top:20px;margin:0;color:#7f98a6;font-size:11px;line-height:1.55;position:relative;z-index:1}

@media(max-width:900px){
 .story-scene:before{width:240px!important;height:90px!important;opacity:.02!important}
 .story-footer{grid-template-columns:1fr}.story-footer-links{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
 .story-scene:before{width:180px!important;height:70px!important}.story-footer{padding:42px 22px 30px}.story-footer-links{grid-template-columns:1fr 1fr}.story-footer-brand strong{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.hero-a img.role-turn{animation:none!important}}