/* V80 — conference story polish, role-reactive A, stronger pattern + live layer machine */

/* Header follows the universal A-only rule. */
.story-brand{display:flex;align-items:center;justify-content:center;width:64px;height:54px}.story-brand img{width:50px!important;height:auto!important;display:block!important;object-fit:contain!important}

/* The role choice now visibly turns the A, linking it to the homepage interaction language. */
.hero-a{overflow:visible;position:relative}
.hero-a:before,.hero-a:after{content:"";position:absolute;border:1px solid rgba(255,138,0,.2);border-radius:50%;inset:-34px;animation:v80-orbit 12s linear infinite}
.hero-a:after{inset:-65px;border-color:rgba(10,42,58,.10);animation-duration:18s;animation-direction:reverse}
.hero-a img{transform:rotate(var(--role-rotation,0deg));transition:transform .75s cubic-bezier(.22,.8,.22,1);filter:drop-shadow(0 10px 18px rgba(255,138,0,.18))}
.hero-a img.role-turn{animation:v80-role-pop .75s cubic-bezier(.22,.8,.22,1)}
@keyframes v80-role-pop{0%{scale:.88}55%{scale:1.08}100%{scale:1}}
@keyframes v80-orbit{to{transform:rotate(360deg)}}

/* Use the repeating A pattern much more deliberately through the story. */
.story-scene:before{content:"";position:absolute;pointer-events:none;width:min(560px,42vw);height:190px;background:url('assets/adial-branding-kit-and-logos/repeating-a-pattern.svg') center/contain no-repeat;opacity:.035;z-index:0}
.story-scene:nth-of-type(odd):before{left:-95px;bottom:40px}.story-scene:nth-of-type(even):before{right:-95px;top:120px}
.story-scene>*{position:relative;z-index:1}

/* A becomes a visual connector from one chapter to the next. */
.story-scene:not(.close):after{content:"";position:absolute;left:50%;bottom:16px;width:34px;height:34px;transform:translateX(-50%) rotate(180deg);background:url('assets/adial-branding-kit-and-logos/a_section_connector.svg') center/contain no-repeat;opacity:.42;z-index:2}

/* Opening visual is more alive and less like a static diagram. */
.opening-visual .pattern{opacity:.14;animation:v80-pattern-breathe 5s ease-in-out infinite}
.orbit-label{box-shadow:0 8px 24px rgba(10,42,58,.05)}
@keyframes v80-pattern-breathe{50%{opacity:.22;transform:scale(1.025)}}

/* WHAT THE LAYER ACTUALLY DOES — make it feel like work is moving through the A. */
.layer-machine{background:radial-gradient(circle at 50% 38%,#0f3b4c,#0A2A3A 55%,#061923);box-shadow:0 28px 70px rgba(10,42,58,.16)}
.layer-machine:before{opacity:.10;background-size:72% auto;background-position:110% 5%}
.instruction{box-shadow:0 14px 36px rgba(0,0,0,.18)}
.machine-line{height:54px;border-left:2px dotted #ff8a00;filter:drop-shadow(0 0 7px #ff8a00);animation:v80-flowline 1.6s linear infinite}
@keyframes v80-flowline{50%{opacity:.4}}
.machine-layer{position:relative;height:145px;background:linear-gradient(180deg,#ffcb7b 0,#ff9e2b 44%,#ff8200 100%);border:1px solid rgba(255,255,255,.55);box-shadow:0 0 48px rgba(255,138,0,.48),inset 0 0 0 1px rgba(255,255,255,.28)}
.machine-layer:before,.machine-layer:after{content:"";position:absolute;left:8%;right:8%;height:32%;border:1px solid rgba(255,255,255,.28);border-radius:50%;top:28%;animation:v80-layer-rings 2.4s ease-in-out infinite}.machine-layer:after{left:18%;right:18%;top:38%;animation-delay:.5s}
.machine-layer img{width:190px;height:auto;position:relative;z-index:3;filter:drop-shadow(0 5px 18px rgba(10,42,58,.18))}
@keyframes v80-layer-rings{50%{transform:scaleX(.92);opacity:.34}}
.machine-outputs article{position:relative;overflow:hidden;transition:.25s}.machine-outputs article:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#ff8a00;transform:scaleX(0);transform-origin:left;animation:v80-output 4.8s ease-in-out infinite}.machine-outputs article:nth-child(2):after{animation-delay:1.2s}.machine-outputs article:nth-child(3):after{animation-delay:2.4s}.machine-outputs article:nth-child(4):after{animation-delay:3.6s}@keyframes v80-output{0%,15%{transform:scaleX(0)}35%,65%{transform:scaleX(1)}85%,100%{transform:scaleX(0)}}

/* Drag scene language: not “adviser not needed”, but team operating work around advice. */
.drag .truth-strip article:nth-child(3){border-color:rgba(255,138,0,.35);background:rgba(255,138,0,.07)}

/* More flow/progress treatment in the calculator and compare scenes. */
.numbers:after,.compare:after{content:"";position:absolute;right:-5%;bottom:12px;width:min(700px,52vw);height:80px;background:url('assets/adial-branding-kit-and-logos/flow-progress.svg') center/100% 100% no-repeat;opacity:.08}

@media(max-width:900px){
 .story-brand{width:52px}.story-brand img{width:44px!important}.story-scene:before{width:260px;height:100px;opacity:.025}.story-scene:not(.close):after{width:28px;height:28px}.machine-layer img{width:160px}
}
@media(max-width:600px){.story-brand{width:46px}.story-brand img{width:40px!important}.machine-layer{height:125px}.machine-layer img{width:145px}.story-scene:before{display:block;width:210px;height:82px}}
@media(prefers-reduced-motion:reduce){.hero-a:before,.hero-a:after,.opening-visual .pattern,.machine-line,.machine-layer:before,.machine-layer:after,.machine-outputs article:after{animation:none!important}}
.hero-a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important}.hero-a span{font-size:10px;letter-spacing:.18em;font-weight:800;color:#fff;opacity:.88}.opening-visual:before,.opening-visual:after{content:"";position:absolute;left:50%;top:50%;width:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,138,0,.3),transparent);transform:translate(-50%,-50%) rotate(28deg)}.opening-visual:after{transform:translate(-50%,-50%) rotate(-28deg)}