/* WB fluid surfaces. Visual reference: REF-058 Hero Gradients / Grainient.
   Original CSS motion; no third-party artwork or paid source is included. */
#presentation{--sequence-time:var(--step-duration,5.2s);--mini-time:var(--step-duration,5.2s)}
#presentation .fluid-surface{position:relative;isolation:isolate;overflow:hidden}
#presentation .fluid-layer{
 position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
 display:block;width:auto;height:auto;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;padding:0;border:0;
 border-radius:inherit;background:#7303fa;opacity:0;
 transition:opacity 1.2s cubic-bezier(.4,0,.2,1);
}
#presentation .fluid-layer::before,#presentation .fluid-layer::after{
 content:"";position:absolute;inset:-80%;
 background:radial-gradient(ellipse at 35% 45%,#b633be 0%,#b633be00 49%),radial-gradient(ellipse at 72% 62%,#8953e7 0%,#8953e700 52%),linear-gradient(135deg,#871be3,#7303fa 58%,#6730d5);
 animation:wbFluidDrift 14s ease-in-out infinite alternate;
 animation-delay:var(--fluid-phase,0s);animation-play-state:paused;
}
#presentation .fluid-layer::after{
 inset:-65%;opacity:.72;
 background:radial-gradient(ellipse at 30% 65%,#fa47d83d 0%,#fa47d800 48%),radial-gradient(ellipse at 66% 35%,#bc77ff40 0%,#bc77ff00 40%);
 animation-name:wbFluidLight;animation-duration:11s;animation-direction:alternate-reverse;
}
#presentation .is-visible .fluid-layer::before,#presentation .is-visible .fluid-layer::after{animation-play-state:running}
html.motion-suspended #presentation .fluid-layer::before,html.motion-suspended #presentation .fluid-layer::after{animation-play-state:paused}
#presentation .fluid-fixed>.fluid-layer,
#presentation .fluid-surface:is(.step-active,.mini-active)>.fluid-layer{opacity:1}
#presentation .doc-deck .fluid-surface:is(.step-active,.mini-active){background:transparent;border-color:transparent;color:#fff}
#presentation .doc-deck .fluid-surface:is(.step-active,.mini-active) :is(h3,p,strong,.doc-index){color:#fff}
#presentation .doc-deck .fluid-surface:is(.step-active,.mini-active) :is(p,.doc-index){color:#f5eefe}
#presentation .doc-deck .fluid-surface :is(h3,p,strong,.doc-index){transition:color 1.2s cubic-bezier(.4,0,.2,1)}
#presentation .doc-deck .fluid-fixed{background:#7303fa;color:#fff;border-color:transparent}
#presentation .doc-deck .fluid-fixed :is(h3,p,.doc-budget-label){color:#fff}
#presentation .doc-deck .fluid-fixed :is(.doc-budget-label,p){color:#f5eefe}
#presentation .doc-metrics.fluid-fixed :is(strong,span){color:#fff}
#presentation .doc-metrics.fluid-fixed>img{filter:brightness(0) invert(1)}
#presentation .doc-metrics.fluid-fixed::after{content:none}
#presentation #investment .investment-number>span{color:#f5eefe}
#presentation #investment .capacity-grid{display:flex;align-items:center;gap:9px;height:48px;min-height:48px;margin-top:24px}
#presentation #investment .capacity-grid i{
 flex:1;max-width:16px;height:28px;min-height:0;border:0;border-radius:999px;
 background:#ffffff80;box-shadow:none;
 animation:wbBudgetSignal 4.8s ease-in-out infinite;
 animation-delay:calc(var(--n) * -.23s);animation-play-state:paused;
}
#presentation #investment .capacity-grid i::before,#presentation #investment .capacity-grid i::after{content:none}
#presentation #investment.is-visible .capacity-grid i{animation-play-state:running}
html.motion-suspended #presentation #investment .capacity-grid i{animation-play-state:paused}
@keyframes wbBudgetSignal{0%,100%{transform:scaleY(.3);opacity:.5}50%{transform:scaleY(1.4);opacity:1}}
#presentation .doc-deck .mini-flow>.mini-active::after{animation-duration:var(--mini-time);background:#fff8;height:2px}
#presentation .doc-investment .doc-launch-list article.step-active::after{animation-duration:var(--sequence-time);background:#fff8;height:2px}
/* The object sits in a reserved header row, never over the copy. */
#presentation .doc-deck .has-object{position:relative}
#presentation .doc-deck .has-object .doc-index{height:52px;display:flex;align-items:flex-start;margin-bottom:16px}
#presentation .doc-deck .card-object{
 position:absolute;right:var(--panel-inset);top:6px;width:88px;height:88px;
 object-fit:contain;pointer-events:none;user-select:none;
 animation:wbObjectFloat 6s ease-in-out infinite;animation-delay:var(--fluid-phase,0s);animation-play-state:paused;
}
#presentation .is-visible .card-object{animation-play-state:running}
html.motion-suspended #presentation .card-object{animation-play-state:paused}
#presentation .doc-deck .has-object h3{position:relative}
#presentation #value .card-object{width:80px;height:80px;top:9px}
#presentation .doc-deck .doc-cards>article{box-shadow:none}
#presentation .doc-deck .doc-cards:not(.mission-cards):not(.infra-cards)>article{display:flex;flex-direction:column}
#presentation .doc-deck .doc-cards>article>p{flex:1}
#presentation .doc-deck .doc-cards>article>.doc-index{flex-shrink:0}
#presentation .doc-deck .doc-cards>article:not(.step-active){border-color:transparent}
#presentation .dark .doc-cards>article:not(.step-active){background:#ffffff0b}
#presentation .doc-deck .doc-cards>article>strong{border-top:1px solid #ded9e5;margin-top:20px}
#presentation .dark .doc-cards>article>strong,#presentation .doc-deck .doc-cards>article.step-active>strong{border-color:#ffffff30}
/* Keep image panels and their content tracks aligned on compact screens. */
#presentation .doc-deck :is(.doc-cards>article,.doc-partners>article,.doc-joint,.platform-model,.platform-compute){min-width:0}
@keyframes wbFluidDrift{
 0%{transform:translate3d(-12%,-8%,0) rotate(-12deg) scale(1)}
 50%{transform:translate3d(9%,7%,0) rotate(8deg) scale(1.08)}
 100%{transform:translate3d(16%,-5%,0) rotate(21deg) scale(1)}
}
@keyframes wbFluidLight{
 from{transform:translate3d(-18%,10%,0) rotate(0deg)}
 to{transform:translate3d(15%,-12%,0) rotate(24deg)}
}
@keyframes wbObjectFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(min-width:701px) and (max-height:800px){
 #presentation .doc-deck .has-object .doc-index{height:42px;margin-bottom:14px}
 #presentation .doc-deck .card-object{width:76px;height:76px;top:4px}
 #presentation #value .card-object{width:72px;height:72px}
}
@media(max-width:700px){
 #presentation .doc-deck .has-object .doc-index{height:42px;margin-bottom:14px}
 #presentation .doc-deck .card-object{width:74px;height:74px;top:3px;animation:none}
 #presentation #value .card-object{width:74px;height:74px;top:3px}
 #presentation .fluid-layer::before,#presentation .fluid-layer::after{animation-duration:18s}
}
@media(prefers-reduced-motion:reduce){
 #presentation .fluid-layer,#presentation .fluid-surface,#presentation .fluid-surface *{transition:none!important}
 #presentation .fluid-layer::before,#presentation .fluid-layer::after,#presentation .card-object{animation:none!important}
 #presentation #investment .capacity-grid i{animation:none!important}
}
@media print{
 #presentation .fluid-layer::before,#presentation .fluid-layer::after,#presentation .card-object{animation:none!important}
 #presentation .fluid-fixed>.fluid-layer{opacity:1}
}
