/* ZZIZZELLA · CINEMATIC EMBERS · v2
   Atmospheric layer only. Original layout + forms remain separate.
*/
:root{--ember:#ff4d4f;--ember-soft:#ff8b74}
body{background:#09080b}
.site-header{background:rgba(9,8,11,.89);border-bottom-color:rgba(248,73,80,.12)}
.site-header::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,#8e222b 23%,rgba(255,104,106,.13) 53%,transparent 100%);opacity:.65;pointer-events:none}
.scroll-heat{position:fixed;top:0;left:0;width:0;height:2px;z-index:100;pointer-events:none;background:linear-gradient(90deg,#b21b30,#ff554e,#ffc7a4);box-shadow:0 0 12px #e13b41,0 0 25px #e13b4160;transition:width .08s linear}
.logo-mark{filter:drop-shadow(0 0 12px rgba(255,69,72,.23))}
.logo:hover .logo-mark{filter:drop-shadow(0 0 17px rgba(255,73,84,.48))}
/* Behind the hero lies actual textured smoke, not a red gradient pretending to be smoke. */
.hero{isolation:isolate}
.smoke-stage{position:absolute;top:-11%;right:0;bottom:-7%;left:0;z-index:0;pointer-events:none;overflow:hidden;transform:translateZ(0);-webkit-mask-image:linear-gradient(to bottom,transparent,black 8%,black 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent,black 8%,black 78%,transparent 100%)}
.smoke-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 41% 41% at 77% 59%,rgba(242,40,57,.20) 0%,rgba(165,18,38,.12) 32%,transparent 76%),radial-gradient(ellipse 31% 24% at 41% 33%,rgba(185,21,41,.07),transparent 80%);mix-blend-mode:screen;animation:heat-breathe 9s ease-in-out infinite alternate}
.smoke-image{position:absolute;display:block;background-repeat:no-repeat;background-position:center;background-size:contain;will-change:transform;mix-blend-mode:screen}
.smoke-image-one{width:95%;height:107%;right:-1%;top:7%;background-image:url('assets/smoke-red.webp');opacity:.98;animation:smoke-drift-a 22s ease-in-out infinite alternate}
.smoke-image-two{width:76%;height:96%;right:25%;top:7%;background-image:url('assets/smoke-shadow.webp');opacity:.58;transform:rotate(14deg) scale(1.08);animation:smoke-drift-b 29s ease-in-out infinite alternate}
.smoke-image-three{width:67%;height:86%;right:-10%;top:-19%;background-image:url('assets/smoke-shadow.webp');opacity:.39;transform:scaleX(-1);animation:smoke-drift-c 26s ease-in-out infinite alternate}
.ember-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.8}
.hero-copy,.hero-visual{z-index:2}
.hero h1{text-shadow:0 6px 26px rgba(0,0,0,.38)}
.hero h1 em{position:relative;color:#f14852;text-shadow:0 0 40px rgba(224,29,53,.12)}
.hero h1 em::after{content:"";position:absolute;bottom:-5px;left:8%;width:72%;height:2px;background:linear-gradient(90deg,transparent,#f54151 42%,rgba(255,137,107,.72) 57%,transparent);box-shadow:0 0 14px rgba(255,57,65,.65);opacity:.68;transform:rotate(-1deg)}
.hero-visual::before{content:"";position:absolute;inset:9% 4% 5%;pointer-events:none;background:radial-gradient(ellipse at 65% 73%,rgba(244,41,44,.14),transparent 49%);z-index:0}
.hero-visual .reel-front{box-shadow:0 38px 78px #000d,0 0 26px rgba(235,62,69,.12)}
.hero-visual .reel-back{box-shadow:0 26px 58px #000d,0 0 24px rgba(198,32,42,.16)}
.hero-visual .seal{box-shadow:0 15px 47px #0009,0 0 26px rgba(238,53,70,.27);background:radial-gradient(circle at 20% 15%,#f84a51,#cf263d 70%)}
.eyebrow i{animation:ember-pulse 4.6s ease-in-out infinite}
.button-red{position:relative;overflow:hidden;background:linear-gradient(112deg,#c92139 0%,#eb3c47 64%,#e2444a 100%);box-shadow:0 0 30px rgba(214,28,53,.13),inset 0 1px rgba(255,255,255,.14)}
.button-red::before{content:"";pointer-events:none;position:absolute;inset:-120% auto -120% -60%;width:30%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,220,212,.28),transparent);transition:left .6s cubic-bezier(.25,.46,.45,.94)}
.button-red:hover::before,.button-red:focus-visible::before{left:135%}
.button-red:hover{box-shadow:0 9px 32px rgba(233,51,59,.31)}
.button-outline{backdrop-filter:blur(9px);border-color:rgba(255,121,126,.34)}
.button-outline:hover{border-color:rgba(255,140,137,.84);box-shadow:inset 0 0 15px rgba(215,24,39,.08),0 0 24px rgba(202,28,46,.13)}
.ticker{background:linear-gradient(98deg,#ba2538,#e13945 44%,#ff6154 51%,#e13a47 72%,#b92539);box-shadow:0 -13px 35px rgba(224,32,47,.07),0 9px 22px #0005}
/* Thin molten glints give the lower sections a shared visual language. */
.section-top{position:relative}
.section-top::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:min(140px,30%);background:linear-gradient(90deg,#ed4450,#8f1b2d,transparent);box-shadow:0 0 15px rgba(255,67,68,.48)}
.service-card{box-shadow:inset 0 0 38px rgba(14,7,11,.32)}
.service-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(116deg,transparent 40%,rgba(255,74,80,.045) 66%,transparent 80%);opacity:0;transition:opacity .35s}
.service-card:hover::after{opacity:1}
.service-card:hover{box-shadow:0 13px 55px rgba(85,10,28,.16),inset 0 0 38px rgba(14,7,11,.32)}
.work-section{position:relative;isolation:isolate;background:radial-gradient(ellipse at 82% 40%,rgba(105,19,33,.22),transparent 58%),#100c11}
.work-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:url('assets/smoke-shadow.webp') right 30%/min(950px,92vw) auto no-repeat;opacity:.38;mix-blend-mode:screen;animation:smoke-drift-b 38s ease-in-out infinite alternate}
.poster{transition:border-color .3s,box-shadow .3s,transform .3s;box-shadow:0 25px 40px rgba(0,0,0,.17)}
.poster:hover{border-color:rgba(241,101,111,.65);box-shadow:0 20px 50px rgba(125,22,39,.19);transform:translateY(-3px)}
.statement{isolation:isolate}
.statement::before,.statement::after{z-index:1}
.statement p{position:relative;z-index:2}
.statement .asterisk,.statement-small{position:relative;z-index:2}
.statement-smoke{position:absolute;inset:-15% 1%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 60%,rgba(186,33,46,.17),transparent 65%),url('assets/smoke-red.webp') center 57%/contain no-repeat;opacity:.41;filter:saturate(1.2);animation:statement-breathe 17s ease-in-out infinite alternate}
.course-panel{background:linear-gradient(128deg,#651525 0%,#36101d 47%,#0d0a10 96%)}
.course-panel::after{content:"";position:absolute;inset:-21% -20% -10% 30%;background:url('assets/smoke-red.webp') center /contain no-repeat;pointer-events:none;opacity:.67;mix-blend-mode:screen;animation:smoke-drift-a 26s ease-in-out infinite alternate}
.course-copy,.course-symbol{position:relative;z-index:2}
.form-box{box-shadow:0 20px 65px rgba(0,0,0,.16)}
.telegram-direct{transition:box-shadow .3s,border-color .3s,transform .3s}
.telegram-direct:hover{box-shadow:0 0 30px rgba(214,34,58,.1)}
@keyframes heat-breathe{0%{opacity:.69;transform:scale(.97)}100%{opacity:1;transform:scale(1.05)}}
@keyframes smoke-drift-a{0%{transform:translate3d(-4%,-1%,0) rotate(-5deg) scale(1.08)}50%{transform:translate3d(1%,-3%,0) rotate(2deg) scale(1.13)}100%{transform:translate3d(5%,-6%,0) rotate(5deg) scale(1.09)}}
@keyframes smoke-drift-b{0%{transform:translate3d(3%,3%,0) rotate(8deg) scale(1.05)}100%{transform:translate3d(-6%,-5%,0) rotate(-3deg) scale(1.16)}}
@keyframes smoke-drift-c{0%{transform:translate3d(-3%,2%,0) scaleX(-1) scale(1.05)}100%{transform:translate3d(4%,-6%,0) scaleX(-1) scale(1.17)}}
@keyframes statement-breathe{0%{opacity:.34;transform:scale(.97) translateY(14px)}100%{opacity:.55;transform:scale(1.13) translateY(-13px)}}
@keyframes ember-pulse{0%,100%{box-shadow:0 0 9px rgba(230,55,70,.5)}50%{box-shadow:0 0 19px rgba(252,85,75,.84),0 0 28px rgba(252,85,75,.18)}}
@media(max-width:780px){.smoke-stage{top:-6%;bottom:4%;left:0;right:0;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 88%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,black 88%,transparent 100%)}.smoke-image-one{width:130%;height:63%;right:-25%;top:39%;opacity:.99}.smoke-image-two{width:129%;height:47%;right:2%;top:-5%;opacity:.38}.smoke-image-three{width:125%;height:52%;right:-12%;top:32%;opacity:.40}.ember-canvas{opacity:.67}.hero-copy{isolation:isolate}.hero-visual .seal{box-shadow:0 9px 32px #000b,0 0 30px rgba(238,53,70,.23)}.work-section::before{background-position:center 55%;background-size:110% auto;opacity:.2}}
@media(max-width:480px){.smoke-stage{left:0;right:0}.smoke-image-one{width:155%;height:67%;right:-19%;top:35%}.smoke-image-two{width:138%;top:-9%;right:-7%;opacity:.39}.smoke-image-three{width:137%;right:-24%;opacity:.39}.hero h1 em::after{bottom:-2px;height:1px}.hero h1{position:relative}.button-red{box-shadow:0 0 25px rgba(223,31,55,.16)}.statement-smoke{background-size:170% auto}}
@media(prefers-reduced-motion:reduce){.smoke-image,.smoke-stage::before,.work-section::before,.statement-smoke,.course-panel::after,.eyebrow i{animation:none!important}.smoke-image-one{transform:none!important}.smoke-image-two,.smoke-image-three{opacity:.33}.scroll-heat{transition:none}}
/* Pausing work when the hero is out of view keeps long pages inexpensive to scroll. */
.smoke-stage:not(.is-active) .smoke-image,.smoke-stage:not(.is-active)::before{animation-play-state:paused}
/* Motion layers must never widen the page, especially on mobile. */
.work-section{overflow:hidden}