/* Full-site editorial language; decorative layers are noninteractive */
:root{--editorial-red:#e01828;--editorial-ink:#070709}
body{background:#070709}
main{position:relative;isolation:isolate}
main:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent 11.8%,rgba(255,255,255,.018) 12%,transparent 12.2%),radial-gradient(ellipse at 75% 28%,rgba(142,12,24,.09),transparent 38%);}
.editorial-section{position:relative;isolation:isolate;overflow:clip;background-color:transparent!important;border-top:1px solid rgba(255,255,255,.075);--editorial-drift:0px;--editorial-fade:.7}
.editorial-section:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(110deg,rgba(6,6,8,.96) 4%,rgba(6,6,8,.82) 48%,rgba(6,6,8,.93) 100%),url('assets/editorial-hero.png');background-size:cover;background-position:center;opacity:.22;filter:grayscale(1) contrast(1.3);transform:translate3d(0,var(--editorial-drift),0) scale(1.12)}
.editorial-section:after{content:'REC  ●    24 FPS   /   4K    •    AHMED_WAHEED / MASTER';position:absolute;z-index:-1;top:24%;right:3%;max-width:80%;color:rgba(255,255,255,.075);font:600 clamp(9px,1vw,13px)/1.4 monospace;letter-spacing:.23em;writing-mode:vertical-rl;pointer-events:none}
.editorial-section .section-top{position:relative;border-bottom:1px solid rgba(255,255,255,.13);padding-bottom:18px}
.editorial-section .section-top:after{content:'●';position:absolute;right:0;bottom:-9px;color:var(--editorial-red);font-size:13px}
.editorial-section .section-heading h2,.editorial-section .about-copy h2,.editorial-section.contact h2{font-weight:900;letter-spacing:-.065em;line-height:.95;text-shadow:0 9px 34px rgba(0,0,0,.55)}
.editorial-section .section-heading h2 i,.editorial-section .about-copy h2 i,.editorial-section.contact h2 i{color:#e32232}
.editorial-section .reel-frame,.editorial-section .project-card,.editorial-section .brand-card,.editorial-section .service,.editorial-section .toolkit-card{box-shadow:0 18px 70px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.editorial-section .section-heading,.editorial-section .about-copy,.editorial-section .service{transform-style:preserve-3d}
.editorial-section.work:before{background-position:70% 20%;opacity:.25}
.editorial-section.brands-section:before{background-position:20% 50%;opacity:.16}
.editorial-section.about:before{background-position:80% 70%;opacity:.22}
.editorial-section.services:before,.editorial-section.toolkit-section:before{opacity:.13}
.editorial-section.contact:before{opacity:.3;background-position:55% 65%}
.editorial-section .section-heading h2,.editorial-section .about-copy h2{transform:translate3d(0,var(--editorial-type-shift,0px),0)}
/* Intro — editing room / kinetic typography / paper tear */
.editorial-intro{background:#050507!important;isolation:isolate;color:#f3f0ed;overflow:hidden}
.editorial-intro .ei-noise{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(115deg,rgba(135,0,20,.13),transparent 60%),url('assets/editorial-hero.png');background-position:center;background-size:cover;filter:grayscale(.9) brightness(.28);animation:eiZoom 10s ease-out both}
.editorial-intro .ei-top,.editorial-intro .ei-bottom{position:absolute;z-index:20;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font:600 11px/1.5 monospace;letter-spacing:.16em}
.editorial-intro .ei-top{top:5%}.editorial-intro .ei-bottom{bottom:5%}.ei-rec,.ei-dot{color:#ff2436}
.editorial-intro .ei-stage{position:absolute;inset:10% 0 18%;display:grid;place-items:center;perspective:1000px}
.editorial-intro .ei-sequence{position:relative;z-index:6;text-align:center;transform-style:preserve-3d}
.ei-overline{font:600 clamp(9px,1vw,13px) monospace;letter-spacing:.34em;color:#c8c2c2}
.ei-words{height:clamp(58px,11vh,110px);position:relative;margin-top:12px}
.ei-words b{position:absolute;left:0;right:0;top:0;font:900 clamp(40px,9vw,125px)/1 'Manrope',sans-serif;letter-spacing:-.08em;opacity:0;transform:translateY(45px) rotateX(-25deg);filter:blur(16px);animation:eiWord 1.4s ease-out both}
.ei-words b:nth-child(1){animation-delay:1.2s}.ei-words b:nth-child(2){animation-delay:2.6s}.ei-words b:nth-child(3){animation-delay:4s}
.ei-name{display:flex;flex-direction:column;font:900 clamp(52px,13vw,190px)/.83 'Manrope',sans-serif;letter-spacing:-.085em;opacity:0;transform:scale(1.45) translateZ(70px);filter:blur(18px);animation:eiName 2.1s cubic-bezier(.2,.8,.2,1) 6s forwards}
.ei-name strong{color:#e01828}.ei-sequence p{margin-top:22px;font:500 clamp(10px,1.3vw,16px) monospace;letter-spacing:.26em;opacity:0;animation:eiAppear .8s 7.6s forwards}
.ei-panel{position:absolute;z-index:3;width:clamp(150px,24vw,350px);height:clamp(120px,22vh,230px);padding:18px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(20,20,24,.45);backdrop-filter:blur(10px);box-shadow:0 25px 80px #000;transform:rotateY(18deg) rotateZ(-9deg);opacity:0;animation:eiPanel 3s 1s forwards}
.ei-panel>span{font:600 10px monospace;letter-spacing:.15em}.ei-panel-left{left:-2%;top:3%}.ei-panel-right{right:-2%;bottom:4%;transform:rotateY(-18deg) rotateZ(8deg);animation-delay:2s}
.ei-mini-frame{margin-top:15px;border:1px solid rgba(255,255,255,.12);padding:22px 12px;background:linear-gradient(135deg,#1d1e21,#050506);font:12px/2 monospace;color:#b5b5b8}.ei-curves{height:70%;display:flex;gap:15px;align-items:end;justify-content:center}.ei-curves i{width:21%;border:1px solid rgba(255,255,255,.3);border-radius:50%;aspect-ratio:1;background:conic-gradient(#d52d3b,#e7cc62,#66a0cc,#d52d3b)}
.ei-tear{position:absolute;left:-5%;right:-5%;height:38%;z-index:8;background:linear-gradient(125deg,#39060b,#a80c1c 52%,#27070b);box-shadow:0 15px 40px #000;clip-path:polygon(0 0,100% 0,100% 88%,90% 94%,79% 89%,67% 97%,54% 89%,41% 96%,28% 87%,17% 95%,0 89%);animation:eiTearTop 2s cubic-bezier(.4,0,.2,1) 6s forwards}
.ei-tear-top{top:-15%;transform:translateY(0)}.ei-tear-bottom{bottom:-15%;transform:rotate(180deg);animation-name:eiTearBottom}
.ei-timeline{position:absolute;z-index:10;left:15%;right:15%;bottom:13%;height:50px;border:1px solid rgba(255,255,255,.2);background:rgba(8,9,12,.72);backdrop-filter:blur(8px);border-radius:8px;overflow:hidden;opacity:0;animation:eiAppear 1s 2.4s forwards}
.ei-timeline-head{display:flex;justify-content:space-between;padding:5px 10px;font:9px monospace;color:#ccc}.ei-timeline-clips{display:flex;gap:3px;padding:0 7px;height:21px}.ei-timeline-clips i{flex:1;border:1px solid #697895;background:rgba(70,99,137,.48)}.ei-timeline-clips i:nth-child(2n){background:rgba(43,111,100,.45)}.ei-timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#f33;left:5%;animation:eiPlayhead 7s linear 2.5s forwards}
.editorial-intro .v8-skip{position:static;transform:none;opacity:1;pointer-events:auto;z-index:30;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.28);border-radius:30px;padding:12px 18px;color:white;cursor:pointer}
@keyframes eiWord{0%{opacity:0;transform:translateY(45px) rotateX(-25deg);filter:blur(16px)}25%,65%{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)}100%{opacity:0;transform:translateY(-35px);filter:blur(8px)}}
@keyframes eiName{to{opacity:1;transform:scale(1) translateZ(0);filter:blur(0)}}
@keyframes eiAppear{to{opacity:1}}
@keyframes eiPanel{to{opacity:.52;transform:rotateY(0) rotateZ(0)}}
@keyframes eiTearTop{to{transform:translateY(-125%)}}
@keyframes eiTearBottom{to{transform:rotate(180deg) translateY(-125%)}}
@keyframes eiPlayhead{to{left:95%}}
@keyframes eiZoom{from{transform:scale(1.2)}to{transform:scale(1)}}
@media(max-width:700px){.ei-panel{opacity:0!important}.ei-timeline{left:6%;right:6%;bottom:15%}.editorial-intro .ei-top,.editorial-intro .ei-bottom{left:5%;right:5%;font-size:9px}.ei-name{font-size:clamp(54px,15vw,100px)}.ei-words b{font-size:clamp(45px,12vw,80px)}.editorial-section:after{display:none}}
@media(prefers-reduced-motion:reduce){.editorial-intro .ei-noise,.ei-words b,.ei-name,.ei-panel,.ei-tear,.ei-timeline,.ei-timeline-playhead,.ei-sequence p{animation:none!important}.ei-name,.ei-sequence p{opacity:1;filter:none;transform:none}.ei-tear{display:none}.editorial-section:before,.editorial-section .section-heading h2,.editorial-section .about-copy h2{transform:none!important}}
