/* XALO STUDIO V12 / Creative Studio — premium cinematic entrance */
body.creative-cinematic{--creative-accent:216,255,95;--creative-violet:139,101,255;background:#030303}
.creative-entry{position:fixed;inset:0;z-index:100500;background:#020202;display:grid;place-items:center;overflow:hidden;pointer-events:auto;transition:opacity .42s ease,visibility .42s ease}
.creative-entry::before{content:"";position:absolute;inset:-15%;background:radial-gradient(circle at 28% 70%,rgba(var(--creative-accent),.09),transparent 33%),radial-gradient(circle at 72% 24%,rgba(var(--creative-violet),.14),transparent 36%),linear-gradient(115deg,transparent 42%,rgba(255,255,255,.035) 50%,transparent 58%);filter:blur(8px);animation:creativeEntryGlow 2.1s ease-in-out infinite alternate}
.creative-entry::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020202 0 48.8%,rgba(255,255,255,.08) 49.7% 50.3%,#020202 51.2%);transform:scaleX(1);transform-origin:center;animation:creativeShutter 1.42s cubic-bezier(.76,0,.24,1) forwards}
.creative-entry-inner{position:relative;z-index:3;text-align:center;display:grid;gap:14px;justify-items:center;mix-blend-mode:screen}
.creative-entry-mark{width:84px;height:84px;border:1px solid rgba(255,255,255,.2);border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:0 0 80px rgba(var(--creative-violet),.12),inset 0 0 32px rgba(255,255,255,.03);animation:creativeMarkIn .9s cubic-bezier(.2,.8,.2,1) both}
.creative-entry-mark::before,.creative-entry-mark::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(var(--creative-accent),.22)}
.creative-entry-mark::before{inset:12px;border-style:dashed;animation:creativeSpin 9s linear infinite}.creative-entry-mark::after{inset:28px;background:radial-gradient(circle,rgba(var(--creative-accent),.45),rgba(var(--creative-accent),.06) 35%,transparent 70%);border:0;box-shadow:0 0 26px rgba(var(--creative-accent),.2)}
.creative-entry b{font-family:Syne,Manrope,sans-serif;font-size:clamp(1.5rem,3vw,2.55rem);letter-spacing:.16em;line-height:1;text-transform:uppercase}.creative-entry small{font-size:.58rem;letter-spacing:.32em;color:#8c8984;text-transform:uppercase}.creative-entry-line{width:min(320px,62vw);height:1px;overflow:hidden;background:rgba(255,255,255,.06)}.creative-entry-line i{display:block;width:100%;height:100%;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgb(var(--creative-accent)),#fff,transparent);animation:creativeLine 1.05s .15s cubic-bezier(.2,.8,.2,1) forwards}
body.creative-entry-done .creative-entry{opacity:0;visibility:hidden;pointer-events:none}
body.creative-entry-done .hero-video{animation:creativeHeroZoom 6s cubic-bezier(.2,.8,.2,1) both}

/* make entry into the actual studio feel deeper */
body.creative-cinematic .hero{background:#020202;isolation:isolate}
body.creative-cinematic .hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(65% 75% at 72% 42%,transparent 20%,rgba(0,0,0,.24) 72%),linear-gradient(180deg,rgba(0,0,0,.06),transparent 30%,rgba(0,0,0,.44) 100%)}
body.creative-cinematic .hero::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:38%;pointer-events:none;background:linear-gradient(180deg,transparent,#050505)}
body.creative-cinematic .hero-content{z-index:5}
body.creative-cinematic .hero-title{filter:drop-shadow(0 20px 65px rgba(0,0,0,.46))}
body.creative-cinematic .hero-title .hero-line:first-child>span{background:linear-gradient(105deg,#fff 5%,#fff 42%,#d8ff6a 50%,#fff 58%,#fff 95%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:creativeTitleSheen 6.5s ease-in-out infinite}
body.creative-cinematic .hero-bottom{position:relative;padding-top:24px}
body.creative-cinematic .hero-bottom::before{content:"";position:absolute;top:0;left:0;width:min(340px,38vw);height:1px;background:linear-gradient(90deg,rgba(var(--creative-accent),.72),rgba(255,255,255,.08),transparent);box-shadow:0 0 22px rgba(var(--creative-accent),.12)}
html[dir="rtl"] body.creative-cinematic .hero-bottom::before{background:linear-gradient(270deg,rgba(var(--creative-accent),.72),rgba(255,255,255,.08),transparent)}
body.creative-cinematic .hero-orbit{filter:drop-shadow(0 0 28px rgba(var(--creative-accent),.08))}
body.creative-cinematic .hero-grid{animation:creativeGridFloat 18s ease-in-out infinite alternate}
body.creative-cinematic .hero-metadata{z-index:5}
body.creative-cinematic .manifesto,body.creative-cinematic .work,body.creative-cinematic .services,body.creative-cinematic .story-panels,body.creative-cinematic .contact{isolation:isolate}
body.creative-cinematic .manifesto::after{content:"";position:absolute;z-index:0;width:55vw;height:55vw;right:-20vw;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(var(--creative-violet),.1),transparent 68%);filter:blur(60px);pointer-events:none}
body.creative-cinematic .work-card .work-media{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .5s ease}
@media(hover:hover) and (pointer:fine){body.creative-cinematic .work-card:hover .work-media{transform:translateY(-6px) scale(1.006);border-color:rgba(var(--creative-accent),.22);box-shadow:0 42px 130px rgba(0,0,0,.52),0 0 0 1px rgba(var(--creative-accent),.025)}body.creative-cinematic .service-card:hover{transform:translateY(-7px)}}
body.creative-cinematic .service-card{overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease}
body.creative-cinematic .service-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;background:radial-gradient(circle at 80% 12%,rgba(var(--creative-violet),.14),transparent 42%);transition:opacity .4s ease}
body.creative-cinematic .service-card:hover::before{opacity:.75}
body.creative-cinematic .story-panel{overflow:hidden}
body.creative-cinematic .story-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.018) 50%,transparent 64%);transform:translateX(-100%);transition:transform 1.2s ease}
body.creative-cinematic .story-panel.in-view::after{transform:translateX(100%)}
body.creative-cinematic .contact::before{content:"";position:absolute;width:65vw;height:65vw;right:-16vw;top:8%;border-radius:50%;background:radial-gradient(circle,rgba(var(--creative-violet),.14),rgba(var(--creative-accent),.035) 40%,transparent 70%);filter:blur(45px);animation:creativeContactGlow 11s ease-in-out infinite alternate;pointer-events:none}

@keyframes creativeEntryGlow{to{transform:translate3d(3%,2%,0) scale(1.06)}}
@keyframes creativeShutter{0%,42%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes creativeMarkIn{from{opacity:0;transform:scale(.78) rotate(-12deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes creativeSpin{to{transform:rotate(360deg)}}
@keyframes creativeLine{to{transform:translateX(100%)}}
@keyframes creativeHeroZoom{from{transform:scale(1.09);filter:saturate(.76) contrast(1.08) brightness(.64)}to{transform:scale(1.04);filter:saturate(.9) contrast(1.04) brightness(.78)}}
@keyframes creativeTitleSheen{0%,25%{background-position:100% 50%}60%,100%{background-position:-80% 50%}}
@keyframes creativeGridFloat{from{transform:translateY(-5px) scale(1.01)}to{transform:translateY(8px) scale(1.025)}}
@keyframes creativeContactGlow{from{transform:translate3d(0,-2%,0) scale(.96);opacity:.68}to{transform:translate3d(-5%,5%,0) scale(1.08);opacity:1}}
@media(max-width:720px){.creative-entry-mark{width:70px;height:70px}.creative-entry b{font-size:1.35rem}.creative-entry small{font-size:.49rem}.creative-entry::after{animation-duration:1.18s}body.creative-cinematic .hero-bottom::before{width:42vw}}
@media(prefers-reduced-motion:reduce){.creative-entry{display:none!important}body.creative-cinematic .hero-video,body.creative-cinematic .hero-grid,body.creative-cinematic .contact::before{animation:none!important}}