/* =========== Technologies page: a different entrance per section =========== */
[id^="tg"] .head.reveal,[id^="tg"] .tiles.reveal,#tg-cta.reveal{opacity:1;transform:none;transition:none}
[id^="tg"] .tiles .tile:nth-child(1){--w:.15s}[id^="tg"] .tiles .tile:nth-child(2){--w:.25s}[id^="tg"] .tiles .tile:nth-child(3){--w:.35s}
[id^="tg"] .tiles .tile:nth-child(4){--w:.45s}[id^="tg"] .tiles .tile:nth-child(5){--w:.55s}[id^="tg"] .tiles .tile:nth-child(6){--w:.65s}
[id^="tg"] .tile svg.li{stroke-dasharray:240;stroke-dashoffset:240}
[id^="tg"] .tiles.in .tile svg.li{stroke-dashoffset:0}
[id^="tg"] .tile span{opacity:0;transition:opacity .8s ease,color .3s}
[id^="tg"] .tiles.in .tile span{opacity:1;transition-delay:calc(var(--w) + .7s),0s}

/* 1 Cloud & Infrastructure: tiles drift up like clouds, soft and blurred, then settle */
#tg1 .head .eyebrow,#tg1 h2{opacity:0;filter:blur(14px);transform:translateY(30px);transition:opacity 1.1s ease,filter 1.2s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
#tg1 .head.in .eyebrow,#tg1 .head.in h2{opacity:1;filter:none;transform:none}
#tg1 .head.in h2{transition-delay:.15s}
#tg1 .tile{opacity:0;filter:blur(10px);translate:0 90px;scale:.8;
  transition:transform .35s ease,border-color .35s,background .35s,color .35s,opacity 1.2s ease var(--w),filter 1.2s ease var(--w),translate 1.6s cubic-bezier(.15,.8,.25,1) var(--w),scale 1.6s cubic-bezier(.15,.8,.25,1) var(--w)}
#tg1 .tiles.in .tile{opacity:1;filter:none;translate:0 0;scale:1}
#tg1 .tile svg.li{transition:stroke-dashoffset 1.8s ease calc(var(--w) + .4s),transform .45s ease,opacity .35s,stroke .35s}

/* 2 Data & BI: tiles grow upward like bars in a chart, left to right; heading wipes in */
#tg2 .head h2{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.65,0,.25,1) .1s}
#tg2 .head.in h2{clip-path:inset(0 -10px 0 0)}
#tg2 .head .eyebrow{opacity:0;transition:opacity .8s ease}
#tg2 .head.in .eyebrow{opacity:1}
#tg2 .tile{transform-origin:50% 100%;scale:1 0;opacity:0;
  transition:transform .35s ease,border-color .35s,background .35s,color .35s,scale .9s cubic-bezier(.2,.9,.25,1.15) var(--w),opacity .4s ease var(--w)}
#tg2 .tiles.in .tile{scale:1 1;opacity:1}
#tg2 .tile svg.li{transition:stroke-dashoffset 1.5s ease calc(var(--w) + .6s),transform .45s ease,opacity .35s,stroke .35s}

/* 3 Application Development: glitch-in like code compiling; heading types out in steps */
#tg3 .head h2{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s steps(18,end) .1s}
#tg3 .head.in h2{clip-path:inset(0 -10px 0 0)}
#tg3 .head .eyebrow{opacity:0;transition:opacity .6s steps(4,end)}
#tg3 .head.in .eyebrow{opacity:1}
#tg3 .tile{opacity:0}
#tg3 .tiles.in .tile{opacity:1;animation:glitchIn .9s steps(1,end) var(--w) both}
@keyframes glitchIn{
  0%{opacity:0;translate:-14px 0}
  15%{opacity:1;translate:10px 0}
  30%{opacity:.3;translate:-8px 0}
  45%{opacity:1;translate:6px 0}
  60%{opacity:.5;translate:-3px 0}
  100%{opacity:1;translate:0 0}}
#tg3 .tile svg.li{transition:stroke-dashoffset 1.2s steps(14,end) calc(var(--w) + .5s),transform .45s ease,opacity .35s,stroke .35s}

/* 4 DevOps: a pipeline line draws, tiles ride in along it from the left like a conveyor */
#tg4 .head .eyebrow,#tg4 h2{opacity:0;transform:translateX(70px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.85,.25,1)}
#tg4 .head.in .eyebrow,#tg4 .head.in h2{opacity:1;transform:none}
#tg4 .head.in h2{transition-delay:.1s}
#tg4 .tiles{position:relative}
#tg4 .tiles::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;
  background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 16px rgba(34,211,238,.6);transform:scaleX(0);transform-origin:left;opacity:.8;
  transition:transform 1.6s cubic-bezier(.65,0,.25,1),opacity 1s ease 1.8s}
#tg4 .tiles.in::before{transform:scaleX(1);opacity:0}
#tg4 .tile{opacity:0;translate:-260px 0;rotate:0 0 1 -8deg;
  transition:transform .35s ease,border-color .35s,background .35s,color .35s,opacity .7s ease var(--w),translate 1.2s cubic-bezier(.2,.85,.25,1) var(--w),rotate 1.2s cubic-bezier(.2,.85,.25,1) var(--w)}
#tg4 .tiles.in .tile{opacity:1;translate:0 0;rotate:0 0 1 0deg}
#tg4 .tile svg.li{transition:stroke-dashoffset 1.4s ease calc(var(--w) + .6s),transform .45s ease,opacity .35s,stroke .35s}

/* 5 AI: tiles spin out of a spark with a glow burst; heading zooms from a blur */
#tg5{position:relative;overflow:hidden}
#tg5::before{content:"";position:absolute;left:50%;top:60%;width:700px;height:700px;margin:-350px 0 0 -350px;pointer-events:none;
  background:radial-gradient(circle,rgba(139,92,246,.28),rgba(34,211,238,.12) 45%,transparent 70%);transform:scale(.1);opacity:0;transition:transform 1.8s cubic-bezier(.2,.8,.2,1),opacity 1.2s ease}
#tg5:has(.tiles.in)::before{transform:scale(1);opacity:1}
#tg5>.wrap{position:relative}
#tg5 .head .eyebrow{opacity:0;transition:opacity .8s ease}
#tg5 .head.in .eyebrow{opacity:1}
#tg5 h2{opacity:0;filter:blur(18px);transform:scale(1.4);transition:opacity 1s ease .1s,filter 1.1s ease .1s,transform 1.3s cubic-bezier(.2,.85,.25,1) .1s}
#tg5 .head.in h2{opacity:1;filter:none;transform:none}
#tg5 .tile{opacity:0;scale:.1;rotate:0 0 1 -200deg;
  transition:transform .35s ease,border-color .35s,background .35s,color .35s,opacity .6s ease var(--w),scale 1.1s cubic-bezier(.2,1.1,.3,1.25) var(--w),rotate 1.3s cubic-bezier(.2,.9,.3,1) var(--w)}
#tg5 .tiles.in .tile{opacity:1;scale:1;rotate:0 0 1 0deg}
#tg5 .tile svg.li{transition:stroke-dashoffset 1.4s ease calc(var(--w) + .6s),transform .45s ease,opacity .35s,stroke .35s}

/* closing CTA: headline slides up out of a mask, button gets a shine sweep */
#tg-cta h2{opacity:0;transform:translateY(60px);filter:blur(6px);transition:opacity 1s ease .1s,transform 1.2s cubic-bezier(.2,.85,.25,1) .1s,filter 1s ease .1s}
#tg-cta.in h2{opacity:1;transform:none;filter:none}
#tg-cta .muted{opacity:0;transform:translateY(20px);transition:opacity .9s ease .6s,transform .9s ease .6s}
#tg-cta.in .muted{opacity:1;transform:none}
#tg-cta .btn{position:relative;overflow:hidden;opacity:0;translate:0 30px;transition:transform .25s,box-shadow .25s,opacity .8s ease .9s,translate .9s cubic-bezier(.2,.85,.25,1) .9s}
#tg-cta.in .btn{opacity:1;translate:0 0}
#tg-cta .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-130%)}
#tg-cta.in .btn::after{animation:shine 1.3s ease 1.7s 1 both}
@keyframes shine{to{transform:translateX(130%)}}

@media (prefers-reduced-motion:reduce){
  [id^="tg"] *,[id^="tg"]::before,#tg-cta *{transition:none!important;animation:none!important}
  [id^="tg"] .head .eyebrow,[id^="tg"] h2,[id^="tg"] .tile,[id^="tg"] .tile span,#tg-cta .muted,#tg-cta .btn{opacity:1;filter:none;transform:none;translate:0 0;scale:1;rotate:0deg}
  [id^="tg"] .head h2{clip-path:none}
  [id^="tg"] .tile svg.li{stroke-dashoffset:0}
}