/* Indaba landing page — animations and helpers. Brand tokens: see README. */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:#f7f0e6}
a{color:#c2401c}a:hover{color:#9e3315}
a:focus-visible{outline:2px solid #c2401c;outline-offset:3px;border-radius:999px}
@keyframes ib-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ib-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ib-ring{0%{transform:scale(.55);opacity:0}25%{opacity:.55}100%{transform:scale(1.5);opacity:0}}
@keyframes ib-spin{to{transform:rotate(360deg)}}
@keyframes ib-marquee{to{transform:translateX(-50%)}}
@keyframes ib-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ib-kenburns{from{transform:scale(1)}to{transform:scale(1.14) translateY(-2%)}}
@keyframes ib-pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ib-pulse{0%,100%{box-shadow:0 0 0 0 rgba(210,68,28,.5)}60%{box-shadow:0 0 0 9px rgba(210,68,28,0)}}
@keyframes ib-twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes ib-heart{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.3)}80%{transform:scale(.95)}}
@keyframes ib-shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
.ib-in{animation:ib-rise 1s cubic-bezier(.2,.7,.2,1) both}
.ib-d1{animation-delay:.08s}.ib-d2{animation-delay:.18s}.ib-d3{animation-delay:.3s}.ib-d4{animation-delay:.45s}.ib-d5{animation-delay:.65s}
.ib-float-a{animation:ib-float 6s ease-in-out infinite}
.ib-float-b{animation:ib-float 7s ease-in-out -2.5s infinite}
.ib-float-c{animation:ib-float 7.5s ease-in-out -5s infinite}
.ib-ring{animation:ib-ring 7s cubic-bezier(.2,.6,.3,1) infinite}
.ib-ring-2{animation-delay:-2.33s}.ib-ring-3{animation-delay:-4.66s}
.ib-spin{animation:ib-spin 60s linear infinite}
.ib-marquee{animation:ib-marquee 45s linear infinite}
.ib-progress{transform-origin:left;animation:ib-progress 8s linear infinite}
.ib-kenburns{animation:ib-kenburns 16s ease-in-out infinite alternate}
.ib-pop{animation:ib-pop .6s cubic-bezier(.2,.7,.2,1) both}
.ib-pulse{animation:ib-pulse 2.4s ease-out infinite}
.ib-twinkle{animation:ib-twinkle 3s ease-in-out infinite}
.ib-heart{animation:ib-heart 4s ease-in-out infinite}
.ib-shine{animation:ib-shine 4.5s ease-in-out infinite}
.ib-btn{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.ib-btn:hover{transform:translateY(-2px)}
.ib-link{transition:opacity .2s}.ib-link:hover{opacity:.6}
@supports (animation-timeline: view()){
.ib-reveal{animation:ib-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@media (max-width: 860px){.ib-hide-sm{display:none !important}
/* Hero phones: tighter fan, then shrink the whole stage to fit */
.ib-side-l{transform:translateX(-150px) translateY(60px) rotate(-8deg) scale(.8) !important}
.ib-side-r{transform:translateX(150px) translateY(60px) rotate(8deg) scale(.8) !important}
.ib-stage{zoom:.9;margin-top:48px !important}}
@media (max-width: 640px){.ib-stage{zoom:.64}}
@media (max-width: 400px){.ib-stage{zoom:.56}}
@media (max-width: 340px){.ib-stage{zoom:.5}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.ib-ring{opacity:.2}}