/* ===================================================================== studio.css — the motion and finish layer for the inner pages (28 September 2026) Education, Software, Consultancy and Contact pages load it after style.css and components.css, with and assets/js/motion.js. It brings the home and About pages' language to them: a hero that assembles itself, headlines that rise word by word, glass cards that answer the pointer, timelines that draw as you scroll, and a closing band with a drifting glow. It changes no content. Everything is scoped to [data-studio] so no other page is touched. Without JavaScript, or with reduced motion, every page is still and complete. ===================================================================== */ /* ---------- 0. shared primitives ---------- */ /* entrances that slide sideways never widen the page (clip keeps sticky working) */ [data-studio] main > section{overflow-x:clip;} [data-studio] [data-parallax]{translate:0 var(--py,0px);} [data-studio] .grad-t{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal)); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} /* headline split into words (motion.js) */ [data-studio] .is-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em;} [data-studio] .is-split .wi{display:inline-block;will-change:transform;} /* slow aurora, as on the home page */ .st-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;} .st-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:stAurora 24s ease-in-out infinite alternate;} .st-aurora i:nth-child(1){width:44vw;height:44vw;max-width:680px;max-height:680px;right:-10%;top:-26%; background:radial-gradient(circle,color-mix(in srgb,var(--color-brand-violet) 42%,transparent),transparent 66%);} .st-aurora i:nth-child(2){width:36vw;height:36vw;max-width:540px;max-height:540px;left:-12%;top:14%; background:radial-gradient(circle,color-mix(in srgb,var(--color-accent-bright) 28%,transparent),transparent 66%); animation-duration:28s;animation-delay:-8s;} .st-aurora i:nth-child(3){width:32vw;height:32vw;max-width:500px;max-height:500px;left:40%;bottom:-34%; background:radial-gradient(circle,color-mix(in srgb,var(--color-indigo-bright) 28%,transparent),transparent 66%); animation-duration:32s;animation-delay:-14s;} [data-theme="dark"] .st-aurora i{opacity:.32;} @keyframes stAurora{0%{transform:translate(0,0) scale(1);}50%{transform:translate(4%,6%) scale(1.08);}100%{transform:translate(-5%,-3%) scale(.96);}} /* ---------- 1. hero: the page assembles itself ---------- */ [data-studio] [data-hero]{isolation:isolate;} /* a fine grid behind the copy, fading out */ [data-studio] [data-hero]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(to right,color-mix(in srgb,var(--color-text) 5%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in srgb,var(--color-text) 5%,transparent) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(70% 75% at 28% 40%,#000 0%,transparent 75%); -webkit-mask-image:radial-gradient(70% 75% at 28% 40%,#000 0%,transparent 75%);} @media (min-width:1080px) and (min-height:700px){ [data-studio] .edu-hero[data-hero]{min-height:min(88svh,900px);display:flex;align-items:center;} [data-studio] .edu-hero[data-hero] > .container-wide{width:100%;} } /* the aurora fades out before the hero ends, so there is no seam */ [data-studio] [data-hero] .st-aurora{mask-image:linear-gradient(#000 60%,transparent);-webkit-mask-image:linear-gradient(#000 60%,transparent);} /* a slow halo and a fine orbit ring behind the hero card */ [data-studio] [data-hero] :is(.edu-hero-inner,.course-hero-grid){position:relative;} @media (min-width:1080px){ [data-studio] [data-hero] :is(.edu-hero-inner,.course-hero-grid):has(> .st-float)::before, [data-studio] [data-hero] :is(.edu-hero-inner,.course-hero-grid):has(> .st-float)::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%; right:calc(21% - 17rem);top:50%;width:34rem;height:34rem;translate:calc(var(--mx,0) * 14px) calc(-50% + var(--my,0) * 12px);} [data-studio] [data-hero] :is(.edu-hero-inner,.course-hero-grid):has(> .st-float)::before{ background:conic-gradient(from 0deg,#8c52ff,#3d53e0,#03f7eb,#f95bf6,#8c52ff);filter:blur(80px);opacity:.28; animation:stSpin 26s linear infinite;} [data-studio] [data-hero] :is(.edu-hero-inner,.course-hero-grid):has(> .st-float)::after{ border:1px dashed color-mix(in srgb,var(--color-primary) 22%,transparent);width:38rem;height:38rem;right:calc(21% - 19rem); mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); animation:stSpin 90s linear infinite reverse;} [data-theme="dark"] [data-studio] [data-hero] :is(.edu-hero-inner,.course-hero-grid):has(> .st-float)::before{opacity:.22;} [data-studio] [data-hero] .course-hero-grid:has(> .st-float)::before{right:calc(18% - 17rem);} [data-studio] [data-hero] .course-hero-grid:has(> .st-float)::after{right:calc(18% - 19rem);} } @keyframes stSpin{to{rotate:360deg;}} /* the snapshot card floats: a glass panel with a gradient edge and a glow */ [data-studio] [data-hero] .st-float{ background:color-mix(in srgb,var(--color-surface) 78%,transparent); backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 40px 90px -30px color-mix(in srgb,var(--color-brand-violet) 45%,transparent), 0 18px 40px -18px color-mix(in srgb,var(--color-text) 18%,transparent), 0 0 120px -40px color-mix(in srgb,var(--color-accent-bright) 45%,transparent); transform:perspective(1300px) rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -4deg)); translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -8px - var(--sy,0) * .05px); transition:transform .35s ease-out,box-shadow .4s ease;} /* a light that follows the pointer across the glass */ [data-studio] .st-float::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 62%); transition:opacity .35s ease;} [data-studio] .st-float.is-spot::after{opacity:1;} /* the enrol card keeps a gradient edge like the snapshot */ [data-studio] [data-hero] .enrol-card.st-float{border:1px solid transparent; background:linear-gradient(color-mix(in srgb,var(--color-surface) 90%,transparent),color-mix(in srgb,var(--color-surface) 90%,transparent)) padding-box, linear-gradient(140deg,color-mix(in srgb,var(--color-primary) 55%,transparent),color-mix(in srgb,var(--color-divider) 100%,transparent) 45%,color-mix(in srgb,var(--color-accent-bright) 45%,transparent)) border-box;} /* entrance (only with motion.js; the hero never waits on it) */ html.m-on [data-studio] [data-hero] .is-split .wi{transform:translateY(112%) rotate(4deg);opacity:0; transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .7s ease;transition-delay:calc(var(--wi) * 55ms + .12s);} html.m-on [data-studio] [data-hero].is-in .is-split .wi{transform:none;opacity:1;} html.m-on [data-studio] [data-hero] .st-hero-copy > h1:not([data-split]){clip-path:inset(0 0 100% 0);transform:translateY(24px); transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) .15s,transform 1.1s cubic-bezier(.16,1,.3,1) .15s;} html.m-on [data-studio] [data-hero].is-in .st-hero-copy > h1:not([data-split]){clip-path:inset(-10% -2% -18% -2%);transform:none;} html.m-on [data-studio] [data-hero] .st-hero-copy > :not(h1){opacity:0;transform:translateY(18px); transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] [data-hero].is-in .st-hero-copy > :not(h1){opacity:1;transform:none;} html.m-on [data-studio] [data-hero] .st-hero-copy > :nth-child(1){transition-delay:.02s;} html.m-on [data-studio] [data-hero] .st-hero-copy > .lead{transition-delay:.6s;} html.m-on [data-studio] [data-hero] .st-hero-copy > .hero-cta{transition-delay:.76s;} html.m-on [data-studio] [data-hero] .st-hero-copy > .course-sub{transition-delay:.45s;} html.m-on [data-studio] [data-hero] .st-hero-copy > .course-facts{transition-delay:.9s;} html.m-on [data-studio] [data-hero]:not(.is-in) .st-float{opacity:0;} html.m-on [data-studio] [data-hero].is-in .st-float{animation:stFloatIn 1.5s cubic-bezier(.16,1,.3,1) .4s backwards;} @keyframes stFloatIn{from{opacity:0;transform:perspective(1300px) translateY(60px) rotateX(16deg) scale(.94);} to{opacity:1;transform:perspective(1300px) rotateY(0) rotateX(0);}} /* safety net: html.m-on is set in ; if motion.js never arrives the hero shows itself */ html.m-on:not(.m-live) [data-studio] [data-hero]:not(.is-in) :is(.st-hero-copy > *,.st-float){animation:stSafe .01s 2.4s forwards;} @keyframes stSafe{to{opacity:1;transform:none;clip-path:none;}} /* ---------- 2. section heads: eyebrow, then the words, then the line ---------- */ html.m-on [data-studio] .sec-head.reveal{opacity:1;transform:none;} html.m-on [data-studio] .sec-head.reveal .eyebrow{opacity:0;transform:translateX(-14px); transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .sec-head.reveal.in .eyebrow{opacity:1;transform:none;} html.m-on [data-studio] .sec-head.reveal .is-split .wi{transform:translateY(108%); transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi) * 42ms + .08s);} html.m-on [data-studio] .sec-head.reveal.in .is-split .wi{transform:none;} html.m-on [data-studio] .sec-head.reveal h2:not(.is-split){opacity:0;transform:translateY(22px); transition:opacity .8s ease .08s,transform .9s cubic-bezier(.16,1,.3,1) .08s;} html.m-on [data-studio] .sec-head.reveal.in h2:not(.is-split){opacity:1;transform:none;} html.m-on [data-studio] .sec-head.reveal > p{opacity:0;transform:translateY(16px); transition:opacity .9s ease .38s,transform 1s cubic-bezier(.16,1,.3,1) .38s;} html.m-on [data-studio] .sec-head.reveal.in > p{opacity:1;transform:none;} /* the eyebrow dot becomes a short line that draws in */ [data-studio] .sec-head .eyebrow{position:relative;} /* ---------- 3. cards answer the pointer ---------- */ [data-studio] .card{position:relative;isolation:isolate;overflow:hidden; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .card.is-spot,[data-studio] .card:hover{--lift:-6px;transition:transform .2s ease-out,box-shadow .4s ease,border-color .4s ease;} [data-studio] .card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;border-radius:inherit; background:radial-gradient(360px circle at var(--sx,50%) var(--sy,0%),color-mix(in srgb,var(--color-primary) 11%,transparent),transparent 62%); transition:opacity .35s ease;} [data-studio] .card.is-spot::after{opacity:1;} [data-studio] .card .card-ico{transition:transform .6s cubic-bezier(.16,1,.3,1);} [data-studio] .card:hover .card-ico{transform:translateY(-2px) rotate(-6deg) scale(1.06);} /* cards arrive with a small rise and settle */ html.m-on [data-studio] .card.reveal{transform:perspective(900px) translateY(34px) scale(.97);} html.m-on [data-studio] .card.reveal.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));} html.m-on [data-studio] .card.reveal{transition:opacity .8s ease calc(var(--i,0) * 90ms),transform 1s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms),box-shadow .4s ease,border-color .4s ease;} html.m-on [data-studio] .card.reveal.in.is-spot,html.m-on [data-studio] .card.reveal.in:hover{transition:opacity .8s ease,transform .2s ease-out,box-shadow .4s ease,border-color .4s ease;} /* ---------- 4. steps: a line draws through them as the page scrolls ---------- */ [data-studio] .steps{position:relative;--n:4;} [data-studio] .steps > .step{position:relative;--on:clamp(0,calc((var(--p,1) * (var(--n) + .6) - var(--k,0)) * 2.5),1); padding-top:calc(var(--space-6) + 1.6rem);border-top:0;} [data-studio] .steps > .step:nth-child(1){--k:0;} [data-studio] .steps > .step:nth-child(2){--k:1;} [data-studio] .steps > .step:nth-child(3){--k:2;} [data-studio] .steps > .step:nth-child(4){--k:3;} [data-studio] .steps > .step:nth-child(5){--k:4;} [data-studio] .steps > .step:nth-child(6){--k:5;} /* the rail and its gradient fill */ [data-studio] .steps::before,[data-studio] .steps::after{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;border-radius:2px;} [data-studio] .steps::before{background:var(--color-divider);} [data-studio] .steps::after{background:linear-gradient(90deg,var(--color-primary),var(--color-indigo) 55%,var(--color-teal)); transform-origin:left;transform:scaleX(var(--p,1));} /* each step's node lights as the line reaches it */ [data-studio] .steps > .step::before{content:counter(s,decimal-leading-zero);counter-increment:s; position:absolute;left:0;top:0;width:auto;min-width:1.2rem;height:1.2rem;padding:0 .45rem;border-radius:999px;z-index:1; display:grid !important;place-items:center;font:800 .62rem/1.2rem var(--font-body);letter-spacing:.06em;opacity:1; color:color-mix(in srgb,#fff calc(var(--on) * 100%),var(--color-text-muted)); background:color-mix(in srgb,var(--color-primary) calc(var(--on) * 100%),var(--color-surface)); box-shadow:0 0 0 1px color-mix(in srgb,var(--color-primary) calc(var(--on) * 60% + 10%),var(--color-divider)), 0 0 0 calc(var(--on) * 6px) color-mix(in srgb,var(--color-primary) 14%,transparent);} [data-studio] .steps > .step h4,[data-studio] .steps > .step p{opacity:calc(.45 + var(--on) * .55);} [data-studio] .steps > .step h4{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:-.02em;} @media (max-width:760px){ [data-studio] .steps{grid-template-columns:1fr;gap:var(--space-8);padding-left:2rem;} [data-studio] .steps::before,[data-studio] .steps::after{left:.55rem;right:auto;top:0;bottom:0;width:2px;height:auto;} [data-studio] .steps::after{transform-origin:top;transform:scaleY(var(--p,1));} [data-studio] .steps > .step{padding-top:0;} [data-studio] .steps > .step::before{left:-2rem;top:.1rem;} } @media (min-width:761px) and (max-width:1000px){ [data-studio] .steps{grid-template-columns:repeat(2,1fr);} [data-studio] .steps::before,[data-studio] .steps::after{display:none;} } /* ---------- 5. flagship programme: glass card, the modules light in turn ---------- */ [data-studio] .flagship{position:relative;border:1px solid transparent; background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box, linear-gradient(140deg,color-mix(in srgb,var(--color-primary) 55%,transparent),color-mix(in srgb,var(--color-divider) 100%,transparent) 40%,color-mix(in srgb,var(--color-accent-bright) 45%,transparent)) border-box; box-shadow:0 50px 100px -50px color-mix(in srgb,var(--color-brand-violet) 45%,transparent),0 20px 40px -24px color-mix(in srgb,var(--color-text) 16%,transparent); overflow:visible;} [data-studio] .flagship-mods{position:relative;padding-left:2.4rem;counter-reset:fm;--n:6;} [data-studio] .flagship-mods::before,[data-studio] .flagship-mods::after{content:"";position:absolute;left:.7rem;top:1.4rem;bottom:1.4rem;width:2px;border-radius:2px;} [data-studio] .flagship-mods::before{background:var(--color-divider);} [data-studio] .flagship-mods::after{background:linear-gradient(180deg,var(--color-primary),var(--color-indigo) 55%,var(--color-teal)); transform-origin:top;transform:scaleY(clamp(0,calc(var(--p,1) * 1.35 - .1),1));} [data-studio] .flagship-mods li{position:relative;--on:clamp(0,calc((var(--p,1) * 1.35 - .1) * var(--n) - var(--k,0) + .6),1); transition:background .3s ease;border-radius:12px;} [data-studio] .flagship-mods li:nth-child(1){--k:0;} [data-studio] .flagship-mods li:nth-child(2){--k:1;} [data-studio] .flagship-mods li:nth-child(3){--k:2;} [data-studio] .flagship-mods li:nth-child(4){--k:3;} [data-studio] .flagship-mods li:nth-child(5){--k:4;} [data-studio] .flagship-mods li:nth-child(6){--k:5;} [data-studio] .flagship-mods li::before{content:"";position:absolute;left:-2.05rem;top:50%;width:.8rem;height:.8rem;border-radius:50%;translate:0 -50%;z-index:1; background:color-mix(in srgb,var(--color-primary) calc(var(--on) * 100%),var(--color-surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) calc(var(--on) * 70% + 12%),var(--color-divider)), 0 0 0 calc(var(--on) * 6px) color-mix(in srgb,var(--color-primary) 14%,transparent);} [data-studio] .flagship-mods .fm-n{opacity:calc(.35 + var(--on) * .65);} [data-studio] .flagship-mods .fm-t{opacity:calc(.5 + var(--on) * .5);} [data-studio] .flagship-mods li:hover{background:color-mix(in srgb,var(--color-primary) 5%,transparent);} [data-studio] .flagship-side{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 10%,transparent);} [data-studio] .flagship-facts b{background:linear-gradient(160deg,var(--color-primary),var(--color-indigo)); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} html.m-on [data-studio] #flagship.reveal{transform:translateY(48px) scale(.98);transition:opacity 1s ease,transform 1.3s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] #flagship.reveal.in{transform:none;} /* ---------- 6. carousels: the current slide settles in ---------- */ [data-studio] .pslide{transition:border-color .4s ease,box-shadow .6s ease,opacity .6s ease,scale .8s cubic-bezier(.16,1,.3,1);} [data-studio] .pslide:not(.is-current){opacity:.55;scale:.97;} [data-studio] .pslide.is-current{box-shadow:0 40px 80px -40px color-mix(in srgb,var(--color-brand-violet) 40%,transparent);} [data-studio] .pslide-art img{transition:scale 2.4s cubic-bezier(.16,1,.3,1),filter 1s ease;scale:1.08;} [data-studio] .pslide.is-current .pslide-art img{scale:1;} [data-studio] .pcar-nav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} /* ---------- 7. instructors ---------- */ [data-studio] .tutor{position:relative;isolation:isolate;overflow:hidden; transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .tutor:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--color-primary) 26%,transparent); box-shadow:0 30px 60px -28px color-mix(in srgb,var(--color-brand-violet) 40%,transparent);} [data-studio] .tutor::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%),color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 62%); transition:opacity .35s ease;} [data-studio] .tutor.is-spot::after{opacity:1;} [data-studio] .tutor-photo{border-radius:24px; box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px color-mix(in srgb,var(--color-primary) 30%,transparent),0 14px 30px -10px color-mix(in srgb,var(--color-brand-violet) 45%,transparent); transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .tutor:hover .tutor-photo{transform:scale(1.04) rotate(-2deg); box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--color-primary),0 20px 40px -12px color-mix(in srgb,var(--color-brand-violet) 55%,transparent);} /* ---------- 8. questions: the heading holds, the answers open smoothly ---------- */ @media (min-width:1024px){ [data-studio] .section > .container-wide:has(> .accordion){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(var(--space-10),5vw,var(--space-20));align-items:start;} [data-studio] .section > .container-wide:has(> .accordion) > .sec-head{position:sticky;top:calc(var(--header-h) + 3rem);margin-bottom:0;} [data-studio] .section > .container-wide:has(> .accordion) > .accordion{max-width:none;margin:0;} } [data-studio] .acc-item{transition:border-color .35s ease,box-shadow .45s ease,background .35s ease;border-radius:16px;} [data-studio] .acc-item:hover{border-color:color-mix(in srgb,var(--color-primary) 28%,transparent);} [data-studio] .acc-item[open]{border-color:color-mix(in srgb,var(--color-primary) 32%,transparent); box-shadow:0 24px 50px -30px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .acc-item summary{position:relative;padding-right:3.6rem;transition:color .3s ease;} [data-studio] .acc-item summary:hover{color:var(--color-primary);} /* a plus that turns into a minus */ [data-studio] .acc-item summary::before,[data-studio] .acc-item summary::after{content:"";position:absolute;right:1.5rem;top:50%;width:.8rem;height:2px; border-radius:2px;background:var(--color-primary);translate:0 -50%;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;} [data-studio] .acc-item summary::after{transform:rotate(90deg);} [data-studio] .acc-item[open] summary::after{transform:rotate(0deg);opacity:0;} [data-studio] .acc-item[open] summary::before{transform:rotate(180deg);} [data-studio] .acc-item summary .chev{display:none;} /* smooth height where the browser supports it (others simply open) */ @supports (interpolate-size:allow-keywords){ [data-studio] .accordion{interpolate-size:allow-keywords;} [data-studio] .acc-item::details-content{block-size:0;overflow:hidden; transition:block-size .5s cubic-bezier(.16,1,.3,1),content-visibility .5s allow-discrete;} [data-studio] .acc-item[open]::details-content{block-size:auto;} } [data-studio] .acc-item[open] .acc-body{animation:stAccIn .5s cubic-bezier(.16,1,.3,1) both;} @keyframes stAccIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} /* ---------- 9. the closing band: a glow drifts, the button leans in ---------- */ [data-studio] .cta-band{isolation:isolate;} [data-studio] .cta-band .st-cta-glow{position:absolute;width:560px;height:560px;right:-160px;top:-240px;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(3,247,235,.32),transparent 62%);} [data-studio] .cta-band .st-cta-glow + .st-cta-glow{right:auto;left:-200px;top:auto;bottom:-300px; background:radial-gradient(circle,rgba(249,91,246,.22),transparent 62%);} html.m-on [data-studio] .cta-band.reveal{transform:scale(.94) translateY(30px);border-radius:48px; transition:opacity 1s ease,transform 1.3s cubic-bezier(.16,1,.3,1),border-radius 1.3s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .cta-band.reveal.in{transform:none;border-radius:var(--radius-2xl);} [data-studio] [data-magnetic]{transition:all var(--transition),translate .5s cubic-bezier(.16,1,.3,1);} /* ---------- 10. course detail: films, outcomes, the six days ---------- */ /* the films: the motif draws in, the play button breathes */ [data-studio] .vtile{position:relative;isolation:isolate; transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .vtile:hover,[data-studio] .vtile.is-spot{--lift:-6px;transition:transform .2s ease-out,box-shadow .4s ease,border-color .4s ease;} [data-studio] .vtile .vt-motif{transition:scale 1.2s cubic-bezier(.16,1,.3,1),opacity .6s ease;} [data-studio] .vtile:hover .vt-motif{scale:1.06;opacity:.8;} [data-studio] .vtile .vt-motif path[stroke-width]{stroke-dasharray:1100;stroke-dashoffset:0;} html.m-on [data-studio] .vtile.reveal .vt-motif path[stroke-width]{stroke-dashoffset:1100;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1) .35s;} html.m-on [data-studio] .vtile.reveal.in .vt-motif path[stroke-width]{stroke-dashoffset:0;} html.m-on [data-studio] .vtile.reveal .vt-motif rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0); transition:transform 1.1s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .vtile.reveal.in .vt-motif rect{transform:none;} html.m-on [data-studio] .vtile.reveal .vt-motif rect:nth-of-type(2){transition-delay:.08s;} html.m-on [data-studio] .vtile.reveal .vt-motif rect:nth-of-type(3){transition-delay:.16s;} html.m-on [data-studio] .vtile.reveal .vt-motif rect:nth-of-type(4){transition-delay:.24s;} html.m-on [data-studio] .vtile.reveal .vt-motif rect:nth-of-type(5){transition-delay:.32s;} html.m-on [data-studio] .vtile.reveal .vt-motif rect:nth-of-type(6){transition-delay:.4s;} [data-studio] .vt-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.5); animation:stBreath 2.6s cubic-bezier(.16,1,.3,1) infinite;} @keyframes stBreath{0%{opacity:.8;scale:.9;}100%{opacity:0;scale:1.45;}} [data-studio] .vt-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0; background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),rgba(169,123,255,.35),transparent 60%);transition:opacity .35s ease;} [data-studio] .vtile.is-spot .vt-stage::before{opacity:1;} /* the three outcome pillars: numbers in the brand gradient, items slide on hover */ [data-studio] .opil-n{background:linear-gradient(160deg,var(--color-primary),var(--color-teal)); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} [data-studio] .opil li{transition:transform .5s cubic-bezier(.16,1,.3,1);} [data-studio] .opil li:hover{transform:translateX(6px);} html.m-on [data-studio] .opil.reveal{transform:translateY(40px);transition:opacity .9s ease calc(var(--i,0) * 120ms),transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 120ms);} html.m-on [data-studio] .opil.reveal.in{transform:none;} /* the six days: a rail joins the modules and fills as you read down */ [data-studio] .prog{position:relative;} [data-studio] .prog::before,[data-studio] .prog::after{content:"";position:absolute;left:calc(var(--space-6) + .95rem);top:2rem;bottom:2rem;width:2px;border-radius:2px;z-index:0;} [data-studio] .prog::before{background:var(--color-divider);} [data-studio] .prog::after{background:linear-gradient(180deg,var(--color-primary),var(--color-indigo) 55%,var(--color-teal)); transform-origin:top;transform:scaleY(var(--p,1));} [data-studio] .prog-mod{position:relative;z-index:1;transition:border-color .35s ease,box-shadow .45s ease,transform .5s cubic-bezier(.16,1,.3,1);} [data-studio] .prog-mod:hover{border-color:color-mix(in srgb,var(--color-primary) 22%,transparent);} [data-studio] .prog-mod[open]{box-shadow:0 30px 60px -34px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .pm-n{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;font-size:.78rem; color:var(--color-primary);background:var(--color-primary-soft); box-shadow:0 0 0 4px var(--color-surface);transition:background .35s ease,color .35s ease;} [data-studio] .prog-mod[open] .pm-n,[data-studio] .prog-mod:hover .pm-n{background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));color:#fff;} [data-studio] .ses{transition:background .3s ease;} [data-studio] .ses:not(.is-break):hover{background:color-mix(in srgb,var(--color-primary) 4%,transparent);} @supports (interpolate-size:allow-keywords){ [data-studio] .prog{interpolate-size:allow-keywords;} [data-studio] .prog-mod::details-content{block-size:0;overflow:hidden; transition:block-size .6s cubic-bezier(.16,1,.3,1),content-visibility .6s allow-discrete;} [data-studio] .prog-mod[open]::details-content{block-size:auto;} } html.m-on [data-studio] .prog-mod.reveal{transform:translateY(30px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease;} html.m-on [data-studio] .prog-mod.reveal.in{transform:none;} @media (max-width:700px){ [data-studio] .prog::before,[data-studio] .prog::after{left:calc(var(--space-5) + .95rem);} } /* the course facts under the hero count up and take the gradient */ [data-studio] .cf b{background:linear-gradient(160deg,var(--color-primary),var(--color-indigo)); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums;} [data-studio] .snap-facts b,[data-studio] .flagship-facts b{font-variant-numeric:tabular-nums;} /* ---------- 11. Internship Academy: tracks, the room, the cohort ---------- */ /* a carousel's hidden labels stay inside its scroller (they used to widen the page) */ [data-studio] .pcar-track,[data-studio] .gal-track{position:relative;} /* track cards: glass with a gradient edge; the chosen length re-lays its list */ [data-studio] .trk{position:relative;isolation:isolate;border:1px solid transparent; background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box, linear-gradient(140deg,color-mix(in srgb,var(--color-primary) 45%,transparent),var(--color-divider) 40%,color-mix(in srgb,var(--color-accent-bright) 40%,transparent)) border-box; box-shadow:0 50px 100px -56px color-mix(in srgb,var(--color-brand-violet) 45%,transparent),0 16px 36px -22px color-mix(in srgb,var(--color-text) 16%,transparent); transition:box-shadow .5s ease;} [data-studio] .trk::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;border-radius:inherit; background:radial-gradient(520px circle at var(--sx,50%) var(--sy,0%),color-mix(in srgb,var(--color-primary) 8%,transparent),transparent 62%); transition:opacity .35s ease;} [data-studio] .trk.is-spot::after{opacity:1;} [data-studio] .trk-ico{transition:transform .7s cubic-bezier(.16,1,.3,1);} [data-studio] .trk:hover .trk-ico{transform:rotate(-8deg) scale(1.06);} [data-studio] .len{transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;} [data-studio] .len.is-on{box-shadow:0 12px 26px -10px color-mix(in srgb,var(--color-primary) 60%,transparent);transform:translateY(-2px);} [data-studio] .trk-build li,[data-studio] .trk-tags li{animation:stItemIn .55s cubic-bezier(.16,1,.3,1) both;} [data-studio] .trk-build li:nth-child(2),[data-studio] .trk-tags li:nth-child(2){animation-delay:.04s;} [data-studio] .trk-build li:nth-child(3),[data-studio] .trk-tags li:nth-child(3){animation-delay:.08s;} [data-studio] .trk-build li:nth-child(4),[data-studio] .trk-tags li:nth-child(4){animation-delay:.12s;} [data-studio] .trk-build li:nth-child(5),[data-studio] .trk-tags li:nth-child(5){animation-delay:.16s;} [data-studio] .trk-build li:nth-child(6),[data-studio] .trk-tags li:nth-child(6){animation-delay:.2s;} [data-studio] .trk-build li:nth-child(n+7),[data-studio] .trk-tags li:nth-child(n+7){animation-delay:.24s;} [data-studio] .trk-sub,[data-studio] .trk-sidelabel span{animation:stItemIn .55s cubic-bezier(.16,1,.3,1) both;} @keyframes stItemIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} html.m-on [data-studio] .trk.reveal{transform:translateY(50px) scale(.98);transition:opacity 1s ease calc(var(--i,0) * 140ms),transform 1.3s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 140ms),box-shadow .5s ease;} html.m-on [data-studio] .trk.reveal.in{transform:none;} /* the room: a filmstrip; the photograph in focus is brighter and closer */ [data-studio] .gshot{transition:box-shadow .5s ease,transform .6s cubic-bezier(.16,1,.3,1),opacity .6s ease,scale .8s cubic-bezier(.16,1,.3,1);} [data-studio] .gshot:not(.is-current){opacity:.78;scale:.965;} [data-studio] .gshot.is-current{box-shadow:0 30px 70px -30px color-mix(in srgb,var(--color-brand-violet) 55%,transparent);} [data-studio] .gshot figcaption{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s ease;} [data-studio] .gshot:not(.is-current) figcaption{transform:translateY(20%);opacity:.6;} [data-studio] .gal-nav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} /* the cohort: the portrait breathes a slow ring */ [data-studio] .intern-art img,[data-studio] .intern-photo{box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 0 14px rgba(169,123,255,.10),0 30px 60px -20px rgba(0,0,0,.5); transition:scale 1.4s cubic-bezier(.16,1,.3,1);} [data-studio] .pslide.is-current .intern-art img{scale:1.03;} /* ---------- 12. inside the content: the small things move too ---------- */ /* buttons: a light sweeps across; arrows lean forward */ [data-studio] :is(.btn-primary,.btn-gold){position:relative;overflow:hidden;isolation:isolate;} [data-studio] :is(.btn-primary,.btn-gold)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 48%,transparent 66%);translate:-120% 0;} [data-studio] :is(.btn-primary,.btn-gold):hover::after{translate:120% 0;transition:translate .9s cubic-bezier(.16,1,.3,1);} [data-studio] .btn [data-lucide]{transition:transform .45s cubic-bezier(.16,1,.3,1);} [data-studio] .btn:hover [data-lucide="arrow-right"],[data-studio] .btn:hover [data-lucide="arrow-up-right"]{transform:translateX(4px);} [data-studio] .btn:hover [data-lucide="arrow-down"]{transform:translateY(3px);} /* text links: an underline draws from the left */ [data-studio] .link-arrow{position:relative;} [data-studio] .link-arrow::after{content:"";position:absolute;left:0;right:1.4rem;bottom:-3px;height:1.5px;border-radius:2px; background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);} [data-studio] .link-arrow:hover::after{transform:scaleX(1);} /* tags: a slow sheen */ [data-studio] .tag{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); background-size:250% 100%;background-repeat:no-repeat;background-position:130% 0;animation:stSheen 6s ease-in-out 1.5s infinite;} [data-theme="dark"] [data-studio] .tag{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);} @keyframes stSheen{0%,70%{background-position:130% 0;}100%{background-position:-30% 0;}} /* hero cards: their rows follow the card in */ html.m-on [data-studio] [data-hero].is-in .st-float :is(.snap-flag,.snap-title,.snap-sub,.snap-facts > div,.snap-meta > div,.snap-tracks li,.snap-go,.snap-watch,.enrol-meta > div,.enrol-card h4,.enrol-card .btn,.enrol-note){ animation:stRowIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.75s + var(--r,0) * 70ms);} [data-studio] .st-float :is(.snap-facts,.snap-meta,.snap-tracks,.enrol-meta) > :nth-child(1){--r:1;} [data-studio] .st-float :is(.snap-facts,.snap-meta,.snap-tracks,.enrol-meta) > :nth-child(2){--r:2;} [data-studio] .st-float :is(.snap-facts,.snap-meta,.snap-tracks,.enrol-meta) > :nth-child(3){--r:3;} [data-studio] .st-float :is(.snap-facts,.snap-meta,.snap-tracks,.enrol-meta) > :nth-child(4){--r:4;} [data-studio] .st-float :is(.snap-facts,.snap-meta,.snap-tracks,.enrol-meta) > :nth-child(5){--r:5;} [data-studio] .st-float :is(.snap-go,.enrol-card .btn){--r:6;} [data-studio] .st-float :is(.snap-watch,.enrol-note){--r:7;} @keyframes stRowIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} [data-studio] .snap-tracks a{transition:background .3s ease,transform .45s cubic-bezier(.16,1,.3,1);} [data-studio] .snap-tracks a:hover{transform:translateX(4px);} [data-studio] .snap-watch .sw-play{animation:stPulseRed 2.4s ease-out infinite;} @keyframes stPulseRed{0%{box-shadow:0 0 0 0 rgba(255,0,0,.45);}70%{box-shadow:0 0 0 .55rem rgba(255,0,0,0);}100%{box-shadow:0 0 0 0 rgba(255,0,0,0);}} /* cards: the icon pops in after the card lands, then the words */ html.m-on [data-studio] .card.reveal .card-ico{opacity:0;scale:.5;rotate:-20deg; transition:opacity .5s ease,scale .8s cubic-bezier(.34,1.56,.64,1),rotate .8s cubic-bezier(.34,1.56,.64,1),transform .6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 90ms + .25s);} html.m-on [data-studio] .card.reveal.in .card-ico{opacity:1;scale:1;rotate:0deg;} html.m-on [data-studio] .card.reveal :is(h4,p){opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .card.reveal h4{transition-delay:calc(var(--i,0) * 90ms + .35s);} html.m-on [data-studio] .card.reveal p{transition-delay:calc(var(--i,0) * 90ms + .45s);} html.m-on [data-studio] .card.reveal.in :is(h4,p){opacity:1;transform:none;} /* steps: words settle as their node lights */ [data-studio] .steps > .step :is(h4,p){transform:translateY(calc((1 - var(--on)) * 10px));} /* carousels: the current slide's words arrive in order */ [data-studio] .pslide .pslide-body > *{transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);} [data-studio] .pslide:not(.is-current) .pslide-body > *{opacity:0;transform:translateX(26px);} [data-studio] .pslide.is-current .pslide-body > :nth-child(1){transition-delay:.1s;} [data-studio] .pslide.is-current .pslide-body > :nth-child(2){transition-delay:.17s;} [data-studio] .pslide.is-current .pslide-body > :nth-child(3){transition-delay:.24s;} [data-studio] .pslide.is-current .pslide-body > :nth-child(4){transition-delay:.31s;} [data-studio] .pslide.is-current .pslide-body > :nth-child(5){transition-delay:.38s;} [data-studio] .pslide.is-current .pslide-body > :nth-child(n+6){transition-delay:.45s;} [data-studio] .pslide-ico{animation:stFloat 5s ease-in-out infinite;} @keyframes stFloat{0%,100%{translate:0 0;}50%{translate:0 -5px;}} [data-studio] .pslide-state s{animation:stBlink 2.2s ease-in-out infinite;} [data-studio] .pslide-state.is-live s{background:var(--color-green,#3fbf77);} @keyframes stBlink{0%,100%{opacity:1;}50%{opacity:.35;}} /* instructors: tags and links arrive after the card */ html.m-on [data-studio] .tutor.reveal :is(.tutor-tags li,.tutor-links li){opacity:0;transform:translateY(8px); transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .tutor.reveal.in :is(.tutor-tags li,.tutor-links li){opacity:1;transform:none;} [data-studio] .tutor :is(.tutor-tags,.tutor-links) li:nth-child(1){transition-delay:calc(var(--i,0) * 120ms + .45s);} [data-studio] .tutor :is(.tutor-tags,.tutor-links) li:nth-child(2){transition-delay:calc(var(--i,0) * 120ms + .55s);} [data-studio] .tutor :is(.tutor-tags,.tutor-links) li:nth-child(3){transition-delay:calc(var(--i,0) * 120ms + .65s);} [data-studio] .tlink{transition:background .3s ease,color .3s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;} [data-studio] .tlink:hover{transform:translateY(-2px);} /* outcomes: each item arrives after its pillar */ html.m-on [data-studio] .opil.reveal li{opacity:0;transform:translateX(-10px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .opil.reveal.in li{opacity:1;transform:none;} [data-studio] .opil li:nth-child(1){transition-delay:calc(var(--i,0) * 120ms + .3s);} [data-studio] .opil li:nth-child(2){transition-delay:calc(var(--i,0) * 120ms + .38s);} [data-studio] .opil li:nth-child(3){transition-delay:calc(var(--i,0) * 120ms + .46s);} [data-studio] .opil li:nth-child(4){transition-delay:calc(var(--i,0) * 120ms + .54s);} [data-studio] .opil li:nth-child(n+5){transition-delay:calc(var(--i,0) * 120ms + .62s);} html.m-on [data-studio] .opil.reveal.in li:hover{transform:translateX(6px);transition-delay:0s;} /* the six days: opening a day lays its sessions out one by one */ [data-studio] .prog-mod[open] .ses{animation:stRowIn .6s cubic-bezier(.16,1,.3,1) both;} [data-studio] .prog-mod[open] .ses:nth-child(2){animation-delay:.05s;} [data-studio] .prog-mod[open] .ses:nth-child(3){animation-delay:.1s;} [data-studio] .prog-mod[open] .ses:nth-child(4){animation-delay:.15s;} [data-studio] .prog-mod[open] .ses:nth-child(5){animation-delay:.2s;} [data-studio] .prog-mod[open] .ses:nth-child(6){animation-delay:.25s;} [data-studio] .prog-mod[open] .ses:nth-child(n+7){animation-delay:.3s;} [data-studio] .ses-type{transition:background .3s ease,color .3s ease;} [data-studio] .ses:hover .ses-type{background:var(--color-primary);color:#fff;} [data-studio] .ses-out [data-lucide]{transition:transform .5s cubic-bezier(.16,1,.3,1);} [data-studio] .ses:hover .ses-out [data-lucide]{transform:scale(1.2) rotate(15deg);} /* track cards: the icon, the head and the lengths come in after the card */ html.m-on [data-studio] .trk.reveal :is(.trk-head,.trk-blurb,.trk-lens,.trk-side){opacity:0;transform:translateY(12px); transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .trk.reveal.in :is(.trk-head,.trk-blurb,.trk-lens,.trk-side){opacity:1;transform:none;} html.m-on [data-studio] .trk.reveal .trk-head{transition-delay:calc(var(--i,0) * 140ms + .3s);} html.m-on [data-studio] .trk.reveal .trk-blurb{transition-delay:calc(var(--i,0) * 140ms + .4s);} html.m-on [data-studio] .trk.reveal .trk-lens{transition-delay:calc(var(--i,0) * 140ms + .5s);} html.m-on [data-studio] .trk.reveal .trk-side{transition-delay:calc(var(--i,0) * 140ms + .45s);} /* the closing band's headline rises word by word (motion.js splits it) */ html.m-on [data-studio] .cta-band.reveal .is-split .wi{transform:translateY(110%); transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi) * 45ms + .35s);} html.m-on [data-studio] .cta-band.reveal.in .is-split .wi{transform:none;} html.m-on [data-studio] .cta-band.reveal > :is(p,.btn){opacity:0;transform:translateY(14px); transition:opacity .8s ease .75s,transform 1s cubic-bezier(.16,1,.3,1) .75s,background .3s ease,box-shadow .3s ease,translate .5s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .cta-band.reveal > .btn{transition-delay:.9s;} html.m-on [data-studio] .cta-band.reveal.in > :is(p,.btn){opacity:1;transform:none;} /* ---------- 13. Software pages: the product in motion ---------- */ @property --st-ang{syntax:"";inherits:false;initial-value:0deg;} /* hero: the film card floats (no glass panel behind it); the cover drifts slowly */ [data-studio] [data-hero] .hvid.st-float{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0;} [data-studio] [data-hero] .hvid.st-float::after{display:none;} [data-studio] [data-hero] .hvid .hv-frame{box-shadow:0 50px 100px -40px color-mix(in srgb,var(--color-brand-violet) 55%,transparent), 0 20px 40px -20px color-mix(in srgb,var(--color-text) 25%,transparent),0 0 120px -40px color-mix(in srgb,var(--color-accent-bright) 50%,transparent);} [data-studio] [data-hero].is-in .hv-media{animation:stKen 16s cubic-bezier(.2,0,.2,1) .4s both;} @keyframes stKen{from{scale:1.12;}to{scale:1;}} [data-studio] .hv-play-ico{position:relative;} [data-studio] .hv-play-ico::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,255,255,.55); animation:stBreath 2.6s cubic-bezier(.16,1,.3,1) infinite;pointer-events:none;} html.m-on [data-studio] [data-hero].is-in .hvid .hv-facts > div{animation:stRowIn .8s cubic-bezier(.16,1,.3,1) both;} [data-studio] .hvid .hv-facts > div:nth-child(1){animation-delay:1.05s;} [data-studio] .hvid .hv-facts > div:nth-child(2){animation-delay:1.15s;} [data-studio] .hvid .hv-facts > div:nth-child(3){animation-delay:1.25s;} /* pillars: numbered cards that tilt, their top line drawing in */ [data-studio] .pil{isolation:isolate;overflow:hidden; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .pil.is-spot,[data-studio] .pil:hover{--lift:-6px;transition:transform .2s ease-out,box-shadow .4s ease,border-color .4s ease; box-shadow:0 30px 60px -30px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .pil::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(380px circle at var(--sx,50%) var(--sy,0%),color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 62%);transition:opacity .35s ease;} [data-studio] .pil.is-spot::after{opacity:1;} [data-studio] .pil-n{background:linear-gradient(160deg,var(--color-primary),var(--color-teal));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} html.m-on [data-studio] .pillars.reveal{opacity:1;transform:none;} html.m-on [data-studio] .pillars.reveal .pil{opacity:0;translate:0 40px;transition:opacity .8s ease,translate 1s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} html.m-on [data-studio] .pillars.reveal.in .pil{opacity:1;translate:0 0;} html.m-on [data-studio] .pillars.reveal .pil:nth-child(2){transition-delay:.12s,.12s,0s,0s,0s;} html.m-on [data-studio] .pillars.reveal .pil:nth-child(3){transition-delay:.24s,.24s,0s,0s,0s;} html.m-on [data-studio] .pillars.reveal .pil::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .4s;} html.m-on [data-studio] .pillars.reveal.in .pil::before{transform:none;} /* the comparison: the two cards slide in from either side, their steps run left to right */ html.m-on [data-studio] .vs.reveal{opacity:1;transform:none;} html.m-on [data-studio] .vs.reveal .vs-card{opacity:0;transition:opacity .9s ease,translate 1.1s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .vs.reveal .vs-card:first-child{translate:-40px 0;} html.m-on [data-studio] .vs.reveal .vs-card:last-child{translate:40px 0;transition-delay:.12s;} html.m-on [data-studio] .vs.reveal.in .vs-card{opacity:1;translate:0 0;} html.m-on [data-studio] .vs.reveal .vs-steps li{opacity:0;scale:.85;transition:opacity .45s ease,scale .6s cubic-bezier(.34,1.56,.64,1);} html.m-on [data-studio] .vs.reveal.in .vs-steps li{opacity:1;scale:1;} html.m-on [data-studio] .vs.reveal.in .vs-steps li:nth-child(1){transition-delay:.55s;} html.m-on [data-studio] .vs.reveal.in .vs-steps li:nth-child(2){transition-delay:.7s;} html.m-on [data-studio] .vs.reveal.in .vs-steps li:nth-child(3){transition-delay:.85s;} html.m-on [data-studio] .vs.reveal.in .vs-steps li:nth-child(4){transition-delay:1s;} html.m-on [data-studio] .vs.reveal.in .vs-steps li:nth-child(n+5){transition-delay:1.15s;} [data-studio] .vs-card{position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .4s ease,transform .5s cubic-bezier(.16,1,.3,1);} [data-studio] .vs-card:hover{transform:translateY(-4px);} [data-studio] .vs-card.is-dvp::after{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none; background:conic-gradient(from 0deg,transparent,rgba(3,247,235,.18),transparent 30%,rgba(140,82,255,.22),transparent 60%); animation:stSpin 18s linear infinite;} /* families of plots / stages: the modules of the chosen family arrive in order */ [data-studio] .fam-tab{transition:background .35s ease,color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .fam-tab.is-on{box-shadow:0 18px 36px -16px color-mix(in srgb,var(--color-primary) 60%,transparent);} [data-studio] .fam-panel.is-in .fam-mod{animation:stRowIn .6s cubic-bezier(.16,1,.3,1) both;} [data-studio] .fam-panel.is-in .fam-mod:nth-child(2){animation-delay:.05s;} [data-studio] .fam-panel.is-in .fam-mod:nth-child(3){animation-delay:.1s;} [data-studio] .fam-panel.is-in .fam-mod:nth-child(4){animation-delay:.15s;} [data-studio] .fam-panel.is-in .fam-mod:nth-child(5){animation-delay:.2s;} [data-studio] .fam-panel.is-in .fam-mod:nth-child(6){animation-delay:.25s;} [data-studio] .fam-panel.is-in .fam-mod:nth-child(n+7){animation-delay:.3s;} [data-studio] .fam-mod{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .4s ease;} [data-studio] .fam-mod:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-primary) 26%,transparent); box-shadow:0 20px 40px -24px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .fam-panel.is-in .fam-count b{animation:stPop .7s cubic-bezier(.34,1.56,.64,1) both;} @keyframes stPop{from{opacity:0;scale:.6;}to{opacity:1;scale:1;}} /* the tour: the app window rises and flattens as it comes up the page */ [data-studio] .tour{--rise:clamp(0,calc(var(--p,1) * 2.4),1);} [data-studio] .tour .tscr-frame{transform:perspective(1800px) rotateX(calc((1 - var(--rise)) * 14deg)) scale(calc(.94 + var(--rise) * .06)); transform-origin:50% 100%; box-shadow:0 60px 110px -50px color-mix(in srgb,var(--color-brand-violet) 60%,transparent),0 24px 50px -30px color-mix(in srgb,var(--color-text) 30%,transparent);} [data-studio] .tour-tab{transition:background .35s ease,box-shadow .4s ease,transform .45s cubic-bezier(.16,1,.3,1);} [data-studio] .tour-tab:hover{transform:translateX(4px);} [data-studio] .tour-tab.is-on{box-shadow:0 20px 40px -24px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .tour-tab.is-on::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--color-primary),var(--color-teal));animation:stRowIn .5s cubic-bezier(.16,1,.3,1) both;} [data-studio] .tscr-view img{transition:opacity .7s ease,transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s ease;} [data-studio] .tscr-cap{transition:transform .5s cubic-bezier(.16,1,.3,1);} /* who it is for: the chosen panel lays out line by line */ [data-studio] .aud-tab{transition:background .35s ease,color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .aud-tab:hover{transform:translateX(4px);} [data-studio] .aud-tab.is-on{box-shadow:0 18px 36px -16px color-mix(in srgb,var(--color-primary) 60%,transparent);} [data-studio] .aud-panel.is-in :is(.aud-lede,.aud-edge,.aud-cols > div,.aud-cols li,.btn){animation:stRowIn .6s cubic-bezier(.16,1,.3,1) both;} [data-studio] .aud-panel.is-in .aud-edge{animation-delay:.08s;} [data-studio] .aud-panel.is-in .aud-cols > div:nth-child(2){animation-delay:.12s;} [data-studio] .aud-panel.is-in .aud-cols li:nth-child(1){animation-delay:.16s;} [data-studio] .aud-panel.is-in .aud-cols li:nth-child(2){animation-delay:.22s;} [data-studio] .aud-panel.is-in .aud-cols li:nth-child(3){animation-delay:.28s;} [data-studio] .aud-panel.is-in .aud-cols li:nth-child(n+4){animation-delay:.34s;} [data-studio] .aud-panel.is-in .btn{animation-delay:.4s;} /* the suite: three product cards, the logo plate lifts */ [data-studio] .suite-card{isolation:isolate;overflow:visible; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .suite-card.is-spot,[data-studio] .suite-card:hover{--lift:-6px;transition:transform .2s ease-out,box-shadow .4s ease,border-color .4s ease; box-shadow:0 30px 60px -30px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .suite-logo{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .suite-card:hover .suite-logo{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 30px -12px rgba(18,18,40,.3);} [data-studio] .suite-here{animation:stBob 3.2s ease-in-out infinite;} @keyframes stBob{0%,100%{translate:0 0;}50%{translate:0 -3px;}} html.m-on [data-studio] .suite.reveal{opacity:1;transform:none;} html.m-on [data-studio] .suite.reveal .suite-card{opacity:0;translate:0 40px;transition:opacity .8s ease,translate 1s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} html.m-on [data-studio] .suite.reveal.in .suite-card{opacity:1;translate:0 0;} html.m-on [data-studio] .suite.reveal .suite-card:nth-child(2){transition-delay:.12s,.12s,0s,0s,0s;} html.m-on [data-studio] .suite.reveal .suite-card:nth-child(3){transition-delay:.24s,.24s,0s,0s,0s;} /* formats strip */ [data-studio] .fmt-item{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .4s ease;} [data-studio] .fmt-item:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .fmt-item [data-lucide]{transition:transform .6s cubic-bezier(.34,1.56,.64,1);} [data-studio] .fmt-item:hover [data-lucide]{transform:scale(1.15) rotate(-8deg);} /* plans: the recommended plan carries a light that runs round its edge */ [data-studio] :is(.plan,.pl2-card){isolation:isolate; transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] :is(.plan,.pl2-card):is(.is-spot,:hover){--lift:-6px;transition:transform .2s ease-out,box-shadow .4s ease,border-color .4s ease;} [data-studio] :is(.plan.featured,.pl2-card.is-pick){border:1.5px solid transparent; background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box, conic-gradient(from var(--st-ang),#8c52ff,#03f7eb,#3d53e0,#f95bf6,#8c52ff) border-box; animation:stAng 6s linear infinite; box-shadow:0 40px 80px -40px color-mix(in srgb,var(--color-brand-violet) 55%,transparent);} @keyframes stAng{to{--st-ang:360deg;}} [data-studio] .plan.featured::before,[data-studio] .pl2-flag{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%); background-size:250% 100%;background-repeat:no-repeat;animation:stSheen 5s ease-in-out 1s infinite;} [data-studio] .plan.enterprise{background-size:180% 180%;animation:stDrift 12s ease-in-out infinite alternate;} @keyframes stDrift{from{background-position:0% 0%;}to{background-position:100% 100%;}} html.m-on [data-studio] :is(.plans-wrap,.pl2-grid).reveal :is(.plan li,.pl2-list li){opacity:0;transform:translateX(-8px); transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] :is(.plans-wrap,.pl2-grid).reveal.in :is(.plan li,.pl2-list li){opacity:1;transform:none;} [data-studio] :is(.plan,.pl2-card) li:nth-child(1){transition-delay:.35s;} [data-studio] :is(.plan,.pl2-card) li:nth-child(2){transition-delay:.42s;} [data-studio] :is(.plan,.pl2-card) li:nth-child(3){transition-delay:.49s;} [data-studio] :is(.plan,.pl2-card) li:nth-child(4){transition-delay:.56s;} [data-studio] :is(.plan,.pl2-card) li:nth-child(5){transition-delay:.63s;} [data-studio] :is(.plan,.pl2-card) li:nth-child(n+6){transition-delay:.7s;} [data-studio] .pl2-ws-row li{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .pl2-ws-row li:hover{transform:translateY(-3px);} /* security split: each assurance slides in, and lights under the pointer */ html.m-on [data-studio] .sec-split.reveal .sec-list li{opacity:0;transform:translateX(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease;} html.m-on [data-studio] .sec-split.reveal.in .sec-list li{opacity:1;transform:none;} [data-studio] .sec-list li:nth-child(1){transition-delay:.2s;} [data-studio] .sec-list li:nth-child(2){transition-delay:.28s;} [data-studio] .sec-list li:nth-child(3){transition-delay:.36s;} [data-studio] .sec-list li:nth-child(4){transition-delay:.44s;} [data-studio] .sec-list li:nth-child(5){transition-delay:.52s;} [data-studio] .sec-list li:nth-child(n+6){transition-delay:.6s;} [data-studio] .sec-list li{position:relative;isolation:isolate;overflow:hidden;} [data-studio] .sec-list li::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 62%);transition:opacity .35s ease;} [data-studio] .sec-list li.is-spot::after{opacity:1;} [data-studio] .sec-list li [data-lucide]{transition:transform .6s cubic-bezier(.34,1.56,.64,1);} [data-studio] .sec-list li:hover [data-lucide]{transform:scale(1.18) rotate(-8deg);} /* the file's journey: the line draws, each stop lights as it passes */ [data-studio] .dsx-flow{--n:5;} [data-studio] .dsx-flow::before{transform-origin:left;transform:scaleX(var(--p,1));opacity:.7;} [data-studio] .dsx-flow > li{--on:clamp(0,calc((var(--p,1) * (var(--n) + .5) - var(--k,0)) * 2.5),1);} [data-studio] .dsx-flow > li:nth-child(1){--k:0;} [data-studio] .dsx-flow > li:nth-child(2){--k:1;} [data-studio] .dsx-flow > li:nth-child(3){--k:2;} [data-studio] .dsx-flow > li:nth-child(4){--k:3;} [data-studio] .dsx-flow > li:nth-child(5){--k:4;} [data-studio] .dsx-flow > li .dsx-ico{scale:calc(.85 + var(--on) * .15); box-shadow:0 0 0 calc(var(--on) * 6px) color-mix(in srgb,var(--color-primary) 14%,transparent),0 14px 30px -14px color-mix(in srgb,var(--color-primary) calc(var(--on) * 60%),transparent);} [data-studio] .dsx-flow > li :is(b,span:not(.dsx-ico),em){opacity:calc(.4 + var(--on) * .6);transform:translateY(calc((1 - var(--on)) * 8px));} [data-studio] .dsx-col{position:relative;isolation:isolate;overflow:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .dsx-col::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(360px circle at var(--sx,50%) var(--sy,0%),color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 62%);transition:opacity .35s ease;} [data-studio] .dsx-col.is-spot::after{opacity:1;} html.m-on [data-studio] .dsx-kn.reveal .dsx-col li{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .dsx-kn.reveal.in .dsx-col li{opacity:1;transform:none;} [data-studio] .dsx-col li:nth-child(1){transition-delay:.25s;} [data-studio] .dsx-col li:nth-child(2){transition-delay:.32s;} [data-studio] .dsx-col li:nth-child(3){transition-delay:.39s;} [data-studio] .dsx-col li:nth-child(4){transition-delay:.46s;} [data-studio] .dsx-col li:nth-child(n+5){transition-delay:.53s;} /* the engine's numbers: each card's line runs out as its number counts */ [data-studio] .ctl-stats > div{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .ctl-stats > div:hover{transform:translateY(-4px);box-shadow:0 24px 48px -26px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .gx-stats li{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} [data-studio] .gx-stats li:hover{transform:translateY(-2px);} /* ---------- 14. Consultancy pages: services, platform, the five E's ---------- */ /* services: each card tilts; its figure settles as it arrives, then its chips */ [data-studio] .svc{position:relative;isolation:isolate; transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .svc.is-spot,[data-studio] .svc:hover{--lift:-6px;transition:transform .2s ease-out,box-shadow .4s ease,border-color .4s ease; box-shadow:0 34px 70px -34px color-mix(in srgb,var(--color-brand-violet) 50%,transparent);} [data-studio] .svc-body{position:relative;} [data-studio] .svc-body::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(360px circle at var(--sx,50%) calc(var(--sy,0%) - 40%),color-mix(in srgb,var(--color-primary) 8%,transparent),transparent 62%);transition:opacity .35s ease;} [data-studio] .svc.is-spot .svc-body::after{opacity:1;} html.m-on [data-studio] .svc.reveal{transform:perspective(1000px) translateY(40px) scale(.97); transition:opacity .9s ease calc(var(--i,0) * 90ms),transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms),box-shadow .4s ease,border-color .4s ease;} html.m-on [data-studio] .svc.reveal.in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));} html.m-on [data-studio] .svc.reveal.in:is(.is-spot,:hover){transition:opacity .9s ease,transform .2s ease-out,box-shadow .4s ease,border-color .4s ease;} html.m-on [data-studio] .svc.reveal .svc-art img{scale:1.18;transition:scale 1.8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms + .15s),transform .9s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .svc.reveal.in .svc-art img{scale:1;} html.m-on [data-studio] .svc.reveal .svc-chips li{opacity:0;scale:.8;transition:opacity .45s ease,scale .6s cubic-bezier(.34,1.56,.64,1),background .3s ease,color .3s ease;} html.m-on [data-studio] .svc.reveal.in .svc-chips li{opacity:1;scale:1;} [data-studio] .svc-chips li:nth-child(1){transition-delay:calc(var(--i,0) * 90ms + .45s);} [data-studio] .svc-chips li:nth-child(2){transition-delay:calc(var(--i,0) * 90ms + .5s);} [data-studio] .svc-chips li:nth-child(3){transition-delay:calc(var(--i,0) * 90ms + .55s);} [data-studio] .svc-chips li:nth-child(4){transition-delay:calc(var(--i,0) * 90ms + .6s);} [data-studio] .svc-chips li:nth-child(5){transition-delay:calc(var(--i,0) * 90ms + .65s);} [data-studio] .svc-chips li:nth-child(6){transition-delay:calc(var(--i,0) * 90ms + .7s);} [data-studio] .svc-chips li:nth-child(n+7){transition-delay:calc(var(--i,0) * 90ms + .75s);} [data-studio] .svc:hover .svc-chips li{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface));} /* what sets the platform apart: three claims, one after another */ html.m-on [data-studio] .plat-claims.reveal{opacity:1;transform:none;} html.m-on [data-studio] .plat-claims.reveal li{opacity:0;translate:0 24px;transition:opacity .8s ease,translate 1s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;} html.m-on [data-studio] .plat-claims.reveal.in li{opacity:1;translate:0 0;} html.m-on [data-studio] .plat-claims.reveal li:nth-child(2){transition-delay:.12s,.12s,0s,0s;} html.m-on [data-studio] .plat-claims.reveal li:nth-child(3){transition-delay:.24s,.24s,0s,0s;} [data-studio] .plat-claims li{position:relative;isolation:isolate;overflow:hidden;} [data-studio] .plat-claims li:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px color-mix(in srgb,var(--color-brand-violet) 45%,transparent);} [data-studio] .plat-claims li::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 62%);transition:opacity .35s ease;} [data-studio] .plat-claims li.is-spot::after{opacity:1;} /* the platform cards: the screen leans back and lifts under the pointer */ [data-studio] .plat-card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;} [data-studio] .plat-card:hover{transform:translateY(-6px);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--color-brand-violet) 50%,transparent);} [data-studio] .plat-shot{perspective:1200px;} [data-studio] .plat-shot img{transform:rotateX(calc(var(--rx,0deg) * 1.4)) rotateY(calc(var(--ry,0deg) * 1.4));transform-origin:50% 100%; transition:transform .4s ease-out,box-shadow .4s ease;} [data-studio] .plat-card:hover .plat-shot img{box-shadow:0 30px 60px -24px rgba(20,11,53,.5);} html.m-on [data-studio] .plat.reveal .plat-pts li{opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .plat.reveal.in .plat-pts li{opacity:1;transform:none;} [data-studio] .plat-pts li:nth-child(1){transition-delay:.4s;} [data-studio] .plat-pts li:nth-child(2){transition-delay:.48s;} [data-studio] .plat-pts li:nth-child(3){transition-delay:.56s;} [data-studio] .plat-pts li:nth-child(n+4){transition-delay:.64s;} [data-studio] .plat-logo{transition:transform .6s cubic-bezier(.16,1,.3,1);} [data-studio] .plat-card:hover .plat-logo{transform:translateY(-3px) scale(1.03);} /* the five E's: the mark floats, the headline rises with the block */ [data-studio] .e5-mark{animation:stFloat 6s ease-in-out infinite;} [data-studio] .e5-mark span,[data-studio] .e5-mark sup{background-size:200% 200%;animation:stDrift 8s ease-in-out infinite alternate;} html.m-on [data-studio] .e5-head.reveal .is-split .wi{transform:translateY(108%);transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi) * 42ms + .15s);} html.m-on [data-studio] .e5-head.reveal.in .is-split .wi{transform:none;} html.m-on [data-studio] .e5-head.reveal .e5-mark{opacity:0;scale:.6;rotate:-8deg;transition:opacity .8s ease,scale 1.1s cubic-bezier(.34,1.56,.64,1),rotate 1.1s cubic-bezier(.34,1.56,.64,1);} html.m-on [data-studio] .e5-head.reveal.in .e5-mark{opacity:1;scale:1;rotate:0deg;} /* confidential list that reveals on its own (BreedForward) */ html.m-on [data-studio] .sec-list.reveal{opacity:1;transform:none;} html.m-on [data-studio] .sec-list.reveal li{opacity:0;transform:translateX(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .sec-list.reveal.in li{opacity:1;transform:none;} /* the engagement orbit and pipeline keep their own motion; they gain a glow */ [data-studio] .orbit-hub{box-shadow:0 40px 90px -40px color-mix(in srgb,var(--color-brand-violet) 55%,transparent);} /* ---------- 15. Contact: the call request in the hero, three steps, four ways in ---------- */ [data-studio] .ct-hero.edu-hero{padding-bottom:clamp(var(--space-12),5vw,var(--space-16));} html.js [data-studio] main#main > .ct-hero:first-child{padding-top:calc(var(--header-h) + clamp(var(--space-8),3.2vw,3rem));} [data-studio] .ct-hero h1{margin-top:var(--space-5);} [data-studio] .ct-points{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:var(--space-6) 0 0;padding:0;} [data-studio] .ct-points li{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px; font-size:var(--text-sm);font-weight:600;color:var(--color-text); background:color-mix(in srgb,var(--color-surface) 72%,transparent);border:1px solid var(--color-divider); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} [data-studio] .ct-points [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);} [data-studio] .ct-hero .hero-cta{margin-top:var(--space-8);align-items:center;gap:var(--space-4) var(--space-6);} [data-studio] .ct-wa-link{gap:.5rem;} [data-studio] .ct-wa-ico{display:inline-grid;width:1.15rem;height:1.15rem;color:#1DA851;} [data-studio] .ct-wa-ico svg{width:100%;height:100%;display:block;} [data-theme="dark"] [data-studio] .ct-wa-ico{color:#25D366;} html.m-on [data-studio] [data-hero] .st-hero-copy > .ct-points{transition-delay:.68s;} html.m-on [data-studio] [data-hero] .st-hero-copy > .hero-cta{transition-delay:.8s;} /* the request card: glass with a gradient edge; it leans only a little, and not at all while you type */ [data-studio] [data-hero] .ct-card.st-float{position:relative;align-self:center;border-radius:var(--radius-2xl); padding:clamp(var(--space-6),2.3vw,2.1rem);border:1px solid transparent;scroll-margin-top:calc(var(--header-h,72px) + 16px); background:linear-gradient(color-mix(in srgb,var(--color-surface) 92%,transparent),color-mix(in srgb,var(--color-surface) 92%,transparent)) padding-box, linear-gradient(140deg,color-mix(in srgb,var(--color-primary) 55%,transparent),var(--color-divider) 45%,color-mix(in srgb,var(--color-accent-bright) 45%,transparent)) border-box; transform:perspective(1300px) rotateY(calc(var(--mx,0) * 2deg)) rotateX(calc(var(--my,0) * -1.5deg));translate:none;} [data-studio] [data-hero] .ct-card.st-float:focus-within{transform:none;} @media (max-width:1079px){[data-studio] [data-hero] .ct-card.st-float{margin-top:var(--space-12);}} @media (max-width:560px){ [data-studio] .ct-points{gap:.4rem;} [data-studio] .ct-points li{font-size:var(--text-xs);padding:.36rem .7rem;} [data-studio] .ct-hero .hero-cta{gap:var(--space-4);} } [data-studio] .ct-card > *{position:relative;z-index:1;} [data-studio] .ct-card::after{z-index:0;} [data-studio] .ct-card-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1vw,1.75rem); letter-spacing:-.025em;line-height:1.1;margin:0 0 var(--space-2);} [data-studio] .ct-card.is-done :is(.ct-card-head,.ct-about){display:none;} [data-studio] .ct-card-head p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:46ch;} [data-studio] .ct-about{display:flex;align-items:center;gap:.5rem;margin-top:var(--space-5);padding:.6rem .85rem;border-radius:var(--radius-md); font-size:var(--text-sm);background:color-mix(in srgb,var(--color-accent-bright) 12%,transparent); border:1px solid color-mix(in srgb,var(--color-accent-bright) 30%,transparent);} [data-studio] .ct-about[hidden]{display:none;} [data-studio] .ct-about [data-lucide]{width:1rem;height:1rem;flex:none;color:var(--color-primary);} /* the form */ [data-studio] .ct-form{display:grid;gap:var(--space-4);margin-top:var(--space-5);} [data-studio] .ct-hint{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4;transition:opacity .25s ease;} [data-studio] .ct-hint.is-swap{opacity:0;} [data-studio] .ct-nw{white-space:nowrap;} [data-studio] .ct-form[hidden]{display:none;} [data-studio] .ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);} @media (max-width:560px){[data-studio] .ct-row{grid-template-columns:1fr;}} [data-studio] .ct-form .field label{display:flex;align-items:baseline;gap:.4rem;transition:color .3s ease;} [data-studio] .ct-form .field:focus-within label{color:var(--color-primary);} [data-studio] .ct-opt{font-weight:500;font-size:.8em;color:var(--color-text-muted);} [data-studio] .ct-form .field :is(input,select,textarea){width:100%;min-width:0;font:inherit;font-size:var(--text-base);color:var(--color-text); background:color-mix(in srgb,var(--color-surface-2) 85%,transparent); transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;} [data-studio] .ct-form .field :is(input,select,textarea):hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));} [data-studio] .ct-form .field :is(input,select,textarea):focus{background:var(--color-surface);} [data-studio] .ct-form textarea{resize:vertical;min-height:5.4rem;} [data-studio] .ct-form .field.is-invalid :is(input,select,textarea){border-color:#d64545;box-shadow:0 0 0 3px color-mix(in srgb,#d64545 16%,transparent);} [data-studio] .ct-form .field.is-invalid label{color:#c13a3a;} [data-theme="dark"] [data-studio] .ct-form .field.is-invalid label{color:#ff8a8a;} [data-studio] .ct-hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} [data-studio] .ct-submit{width:100%;justify-content:center;margin-top:var(--space-2);} [data-studio] .ct-form.is-busy .ct-submit{opacity:.8;cursor:progress;} [data-studio] .ct-form.is-busy .ct-submit [data-lucide]{animation:ctNudge 1s ease-in-out infinite;} @keyframes ctNudge{50%{transform:translateX(5px);}} [data-studio] .ct-note{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted);} [data-studio] .ct-note [data-lucide]{width:.9rem;height:.9rem;flex:none;margin-top:.1rem;} [data-studio] .ct-note a{color:var(--color-primary);font-weight:600;} [data-studio] .ct-status{margin-top:-.25rem;font-size:var(--text-sm);font-weight:600;color:var(--color-primary);} [data-studio] .ct-status:empty{margin:0;height:0;} [data-studio] .ct-status.is-error{color:#c13a3a;} [data-theme="dark"] [data-studio] .ct-status.is-error{color:#ff8a8a;} /* the form's rows follow the card in */ html.m-on [data-studio] [data-hero] :is(.ct-card-head,.ct-form > *){opacity:0;transform:translateY(10px);} html.m-on [data-studio] [data-hero].is-in :is(.ct-card-head,.ct-form > *){animation:stRowIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.7s + var(--r,0) * 60ms);} [data-studio] .ct-form > :nth-child(1){--r:1;} [data-studio] .ct-form > :nth-child(2){--r:2;} [data-studio] .ct-form > :nth-child(3){--r:3;} [data-studio] .ct-form > :nth-child(4){--r:4;} [data-studio] .ct-form > :nth-child(n+5){--r:5;} html.m-on:not(.m-live) [data-studio] [data-hero]:not(.is-in) :is(.ct-card-head,.ct-form > *){animation:stSafe .01s 2.4s forwards;} /* after sending */ [data-studio] .ct-done{display:grid;gap:var(--space-4);justify-items:start;outline:none;padding-block:var(--space-2);} [data-studio] .ct-done[hidden],[data-studio] .ct-done [hidden]{display:none;} [data-studio] .ct-done > *{animation:stRowIn .8s cubic-bezier(.16,1,.3,1) both;} [data-studio] .ct-done > :nth-child(2),[data-studio] .ct-done > :nth-child(3){animation-delay:.12s;} [data-studio] .ct-done > :nth-child(4),[data-studio] .ct-done > :nth-child(5){animation-delay:.22s;} [data-studio] .ct-done > :nth-child(6),[data-studio] .ct-done > :nth-child(7){animation-delay:.32s;} [data-studio] .ct-done > :nth-child(n+8){animation-delay:.42s;} [data-studio] .ct-done-ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff; background:linear-gradient(140deg,var(--color-primary),var(--color-indigo) 55%,var(--color-teal)); box-shadow:0 14px 34px -12px color-mix(in srgb,var(--color-primary) 65%,transparent);animation:ctPop .9s cubic-bezier(.34,1.56,.64,1) both !important;} [data-studio] .ct-done-ico [data-lucide]{width:28px;height:28px;} @keyframes ctPop{from{opacity:0;scale:.4;rotate:-25deg;}to{opacity:1;scale:1;rotate:0deg;}} [data-studio] .ct-done-h{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);letter-spacing:-.025em;line-height:1.12;text-wrap:balance;} [data-studio] .ct-done p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6;} [data-studio] .ct-done p a{color:var(--color-primary);font-weight:600;} [data-studio] .ct-book{display:grid;gap:var(--space-4);justify-items:start;width:100%;padding:var(--space-5);border-radius:var(--radius-xl); background:linear-gradient(140deg,var(--color-primary-soft),color-mix(in srgb,var(--color-accent-bright) 10%,transparent)); border:1px solid color-mix(in srgb,var(--color-primary) 22%,transparent);} [data-studio] .ct-book p{color:var(--color-text);} [data-studio] .ct-again{display:inline-flex;align-items:center;gap:.4rem;padding:0;border:0;background:none;cursor:pointer; font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);transition:color .3s ease;} [data-studio] .ct-again:hover{color:var(--color-primary);} [data-studio] .ct-again [data-lucide]{width:1rem;height:1rem;transition:transform .45s cubic-bezier(.16,1,.3,1);} [data-studio] .ct-again:hover [data-lucide]{transform:translateX(-3px);} /* three steps in one row, with the rail */ @media (min-width:761px){ [data-studio] .ct-steps{grid-template-columns:repeat(3,minmax(0,1fr));} [data-studio] .ct-steps::before,[data-studio] .ct-steps::after{display:block;} } /* four ways in */ [data-studio] .ct-chans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);} @media (max-width:1100px){[data-studio] .ct-chans{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:600px){[data-studio] .ct-chans{grid-template-columns:1fr;}} [data-studio] .ct-chan{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8) var(--space-6);} [data-studio] .ct-chan h3{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:-.02em;margin-top:var(--space-2);} [data-studio] .ct-chan :is(p,address){color:var(--color-text-muted);font-size:var(--text-sm);font-style:normal;line-height:1.6;} [data-studio] .ct-chan-act{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:var(--space-2);} [data-studio] .ct-chan .link-arrow{overflow-wrap:anywhere;} [data-studio] .ct-chan-wa .card-ico svg{width:1.4rem;height:1.4rem;} [data-studio] .ct-copy{position:relative;flex:none;width:2rem;height:2rem;display:grid;place-items:center;border-radius:.6rem;cursor:pointer; border:1px solid var(--color-divider);background:var(--color-surface);color:var(--color-text-muted); transition:color .3s ease,border-color .3s ease,transform .45s cubic-bezier(.16,1,.3,1);} [data-studio] .ct-copy:hover{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,var(--color-divider));transform:translateY(-2px);} [data-studio] .ct-copy [data-lucide]{width:.95rem;height:.95rem;} [data-studio] .ct-copied{position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 4px;opacity:0;pointer-events:none;white-space:nowrap; padding:.2rem .5rem;border-radius:.35rem;font-size:.7rem;font-weight:700;background:var(--color-text);color:var(--color-bg); transition:opacity .2s ease,translate .25s ease;} [data-studio] .ct-copy.is-copied{color:var(--color-primary);border-color:var(--color-primary);} [data-studio] .ct-copy.is-copied .ct-copied{opacity:1;translate:-50% 0;} [data-studio] .ct-social{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding:var(--space-2) 0 0;} [data-studio] .ct-social a{display:inline-block;padding:.38rem .8rem;border-radius:999px;border:1px solid var(--color-divider); font-size:var(--text-sm);font-weight:600;color:var(--color-text);transition:color .3s ease,border-color .3s ease,transform .45s cubic-bezier(.16,1,.3,1);} [data-studio] .ct-social a:hover{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-2px);} [data-studio] .ct-pin{position:absolute;top:var(--space-8);right:var(--space-6);display:inline-flex;align-items:center;gap:.45rem; font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--color-text-muted);font-variant-numeric:tabular-nums;} [data-studio] .ct-pin i{width:8px;height:8px;border-radius:50%;background:var(--color-primary);animation:ctPing 2.4s ease-out infinite;} @keyframes ctPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-primary) 55%,transparent);}80%,100%{box-shadow:0 0 0 .6rem transparent;}} @media (max-width:1100px) and (min-width:601px){[data-studio] .ct-pin{top:var(--space-8);}} /* the words follow each card in */ html.m-on [data-studio] .ct-chan.reveal :is(h3,address,.ct-chan-act,.ct-social){opacity:0;transform:translateY(8px); transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);} html.m-on [data-studio] .ct-chan.reveal h3{transition-delay:calc(var(--i,0) * 90ms + .35s);} html.m-on [data-studio] .ct-chan.reveal address{transition-delay:calc(var(--i,0) * 90ms + .45s);} html.m-on [data-studio] .ct-chan.reveal :is(.ct-chan-act,.ct-social){transition-delay:calc(var(--i,0) * 90ms + .55s);} html.m-on [data-studio] .ct-chan.reveal.in :is(h3,address,.ct-chan-act,.ct-social){opacity:1;transform:none;} /* ---------- reduced motion: a still page ---------- */ @media (prefers-reduced-motion:reduce){ .st-aurora i{animation:none;} [data-studio] [data-hero] .edu-hero-inner::before,[data-studio] [data-hero] .edu-hero-inner::after{animation:none;} [data-studio] .edu-snapshot{transform:none;translate:none;} [data-studio] .card,[data-studio] .card.reveal,[data-studio] .card.reveal.in{transform:none;} [data-studio] .pslide:not(.is-current){opacity:1;scale:1;} [data-studio] .pslide-art img{scale:1;} [data-studio] .vt-play::before{animation:none;opacity:0;} [data-studio] .vtile{transform:none;} [data-studio] .gshot:not(.is-current){opacity:1;scale:1;} [data-studio] .gshot:not(.is-current) figcaption{transform:none;opacity:1;} [data-studio] .trk-build li,[data-studio] .trk-tags li,[data-studio] .trk-sub,[data-studio] .trk-sidelabel span{animation:none;} [data-studio] .tag,[data-studio] .pslide-ico,[data-studio] .pslide-state s,[data-studio] .snap-watch .sw-play,[data-studio] .prog-mod[open] .ses{animation:none;} [data-studio] .pslide:not(.is-current) .pslide-body > *{opacity:1;transform:none;} [data-studio] :is(.btn-primary,.btn-gold)::after{display:none;} [data-studio] .hv-media,[data-studio] .hv-play-ico::before,[data-studio] .vs-card.is-dvp::after,[data-studio] .suite-here, [data-studio] :is(.plan.featured,.pl2-card.is-pick),[data-studio] .plan.featured::before,[data-studio] .pl2-flag,[data-studio] .plan.enterprise{animation:none;} [data-studio] .tour .tscr-frame{transform:none;} [data-studio] .e5-mark,[data-studio] .e5-mark span,[data-studio] .e5-mark sup{animation:none;} [data-studio] .svc,[data-studio] .plat-shot img{transform:none;} [data-studio] .pil,[data-studio] .suite-card,[data-studio] :is(.plan,.pl2-card){transform:none;} [data-studio] [data-hero] .ct-card.st-float{transform:none;} [data-studio] .ct-done > *,[data-studio] .ct-done-ico,[data-studio] .ct-pin i,[data-studio] .ct-form.is-busy .ct-submit [data-lucide]{animation:none !important;} } html.m-reduce [data-studio] [data-parallax]{translate:none;} /* contact: ways to send the request when it could not be saved */ [data-studio] .ct-sendvia{display:flex;flex-wrap:wrap;gap:var(--space-3);width:100%;} [data-studio] .ct-sendvia .ct-sendvia-note{flex-basis:100%;margin:0;}