/* Zakaria Aziza — V06 Signature Experience */
:root{
  --za-signal:#8cf7ff;
  --za-acid:#d9ff75;
  --za-violet:#8c78ff;
  --za-ink:#05070b;
  --za-ease:cubic-bezier(.18,.78,.16,1);
}

body.signature-v06{--signature-safe:clamp(18px,2.2vw,34px)}

/* Signature mark — persistent, but quieter than navigation */
.za-signature-mark{position:fixed;z-index:94;inset-inline-start:var(--signature-safe);bottom:22px;width:44px;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:grid;place-items:center;background:rgba(6,8,12,.68);backdrop-filter:blur(18px) saturate(1.35);box-shadow:0 16px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);pointer-events:auto;cursor:default;isolation:isolate;transition:.45s var(--za-ease)}
.za-signature-mark::before,.za-signature-mark::after{content:"";position:absolute;border-radius:50%;inset:6px;border:1px solid rgba(140,247,255,.18);transition:.6s var(--za-ease)}
.za-signature-mark::after{inset:-7px;border-style:dashed;border-color:rgba(217,255,117,.15);animation:zaOrbit 14s linear infinite}
.za-signature-mark b{font-size:9px;letter-spacing:.08em;color:#f7fbff;font-weight:700}.za-signature-mark small{position:absolute;right:-11px;top:-5px;font-size:6px;letter-spacing:.12em;color:var(--za-acid);background:#090c12;padding:2px 4px;border-radius:4px;border:1px solid rgba(217,255,117,.16)}
.za-signature-mark:hover{transform:scale(1.08) rotate(-4deg);border-color:rgba(140,247,255,.34);box-shadow:0 18px 54px rgba(0,0,0,.34),0 0 34px rgba(140,247,255,.08)}
.za-signature-mark:hover::before{transform:rotate(135deg) scale(.82);border-color:rgba(140,247,255,.42)}
@keyframes zaOrbit{to{transform:rotate(360deg)}}

/* Brand gets a small custom sigil without interfering with locale text replacement */
.site-header .brand{display:inline-flex;align-items:center;gap:10px}
.site-header .brand::before{content:"ZA";width:25px;height:25px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:inline-grid;place-items:center;font-size:6px;line-height:1;letter-spacing:.04em;color:var(--za-signal);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 5px rgba(140,247,255,.02);transition:.4s var(--za-ease)}
.site-header .brand:hover::before{transform:rotate(20deg);border-color:rgba(140,247,255,.42);box-shadow:0 0 20px rgba(140,247,255,.12),inset 0 0 0 5px rgba(140,247,255,.035)}

/* Route beacon */
.za-route-beacon{position:absolute;z-index:12;top:clamp(98px,11vw,145px);inset-inline-end:clamp(22px,4vw,62px);display:flex;align-items:center;gap:10px;color:rgba(225,234,244,.58);font-size:7px;letter-spacing:.15em;text-transform:uppercase;pointer-events:none}
.za-route-beacon i{width:6px;height:6px;border-radius:50%;background:var(--za-acid);box-shadow:0 0 14px rgba(217,255,117,.78);animation:zaSignalPulse 2.2s ease-in-out infinite}.za-route-beacon b{color:#eef4fb;font-weight:600}.za-route-beacon em{font-style:normal;color:var(--za-signal)}
@keyframes zaSignalPulse{50%{opacity:.36;transform:scale(.72)}}
main>section:first-child{position:relative}

/* Hero signature orbit */
.hero-media .za-hero-orbit{position:absolute;z-index:9;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);width:clamp(92px,9vw,138px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;background:rgba(4,7,10,.19);backdrop-filter:blur(7px);mix-blend-mode:screen;pointer-events:none;overflow:visible}
.hero-media .za-hero-orbit::before,.hero-media .za-hero-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(140,247,255,.22);inset:12px}.hero-media .za-hero-orbit::after{inset:-9px;border-style:dashed;border-color:rgba(217,255,117,.24);animation:zaOrbit 18s linear infinite reverse}.za-hero-orbit strong{font-size:clamp(18px,2vw,30px);letter-spacing:-.07em;color:#fff;text-shadow:0 0 20px rgba(140,247,255,.34)}.za-hero-orbit span{position:absolute;bottom:18px;font-size:5px;letter-spacing:.25em;color:rgba(255,255,255,.66)}
html[dir="rtl"] .hero-media .za-hero-orbit{right:auto;left:clamp(14px,2vw,28px)}

/* Motion Archive / showreel-ready feature */
.signature-reel-section{position:relative;overflow:hidden;padding:clamp(82px,10vw,150px) 0;background:radial-gradient(circle at 70% 15%,rgba(140,120,255,.12),transparent 28%),radial-gradient(circle at 20% 80%,rgba(140,247,255,.08),transparent 30%),#05070b;color:#eef4fb}
.signature-reel-section::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);pointer-events:none}
.signature-reel-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(32px,7vw,110px);align-items:end;margin-bottom:clamp(34px,5vw,70px)}
.signature-reel-head h2{max-width:900px;font-size:clamp(46px,7.8vw,118px);line-height:.86;letter-spacing:-.065em;margin:10px 0 0}.signature-reel-head .signature-reel-copy{max-width:560px;color:#99a5b5;line-height:1.75}
.signature-reel-stage{position:relative;min-height:clamp(430px,62vw,780px);border:1px solid rgba(255,255,255,.12);border-radius:clamp(22px,3vw,38px);overflow:hidden;background:#06080c;box-shadow:0 60px 150px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.045);isolation:isolate;cursor:crosshair}
.signature-reel-frame{position:absolute;inset:0;opacity:0;transform:scale(1.07);filter:saturate(.52) contrast(1.08);transition:opacity 1s ease,transform 1.5s var(--za-ease),filter 1.1s ease}.signature-reel-frame.is-active{opacity:1;transform:scale(1);filter:saturate(.9) contrast(1.04)}.signature-reel-frame img{width:100%;height:100%;object-fit:cover;display:block}.signature-reel-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,8,.12),rgba(3,5,8,.06) 45%,rgba(3,5,8,.62)),linear-gradient(90deg,rgba(3,5,8,.3),transparent 36%,rgba(3,5,8,.12));pointer-events:none}
.signature-reel-hud{position:absolute;z-index:8;inset:0;pointer-events:none;padding:clamp(16px,2vw,28px);display:flex;flex-direction:column;justify-content:space-between}.signature-reel-hud-top,.signature-reel-hud-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px}.signature-reel-system{display:flex;align-items:center;gap:9px;font-size:7px;letter-spacing:.17em;color:rgba(255,255,255,.66);text-transform:uppercase}.signature-reel-system i{width:6px;height:6px;border-radius:50%;background:#ff6e65;box-shadow:0 0 14px rgba(255,110,101,.7);animation:zaSignalPulse 1.8s ease-in-out infinite}.signature-reel-time{font-variant-numeric:tabular-nums;font-size:8px;letter-spacing:.18em;color:#dfe8f2}.signature-reel-name{font-size:clamp(28px,5.4vw,84px);line-height:.85;letter-spacing:-.055em;max-width:650px;text-transform:uppercase;text-wrap:balance}.signature-reel-name small{display:block;margin-bottom:9px;color:var(--za-signal);font-size:7px;letter-spacing:.18em;font-weight:500}.signature-reel-timeline{position:absolute;z-index:9;left:clamp(18px,2vw,28px);right:clamp(18px,2vw,28px);bottom:clamp(56px,7vw,88px);height:1px;background:rgba(255,255,255,.18);display:flex;justify-content:space-between;align-items:center}.signature-reel-timeline::before{content:"";position:absolute;left:0;top:0;width:var(--reel-progress,33.333%);height:1px;background:linear-gradient(90deg,var(--za-violet),var(--za-signal),var(--za-acid));box-shadow:0 0 16px rgba(140,247,255,.45);transition:width .75s var(--za-ease)}.signature-reel-dot{appearance:none;border:0;width:10px;height:10px;border-radius:50%;background:#090c11;box-shadow:0 0 0 1px rgba(255,255,255,.25);padding:0;cursor:pointer;pointer-events:auto;transition:.35s var(--za-ease)}.signature-reel-dot.is-active{background:var(--za-signal);box-shadow:0 0 0 4px rgba(140,247,255,.08),0 0 18px rgba(140,247,255,.55);transform:scale(1.12)}.signature-reel-index{display:flex;gap:9px;align-items:center;font-size:7px;letter-spacing:.18em;color:#8b96a5}.signature-reel-index b{font-weight:600;color:#f5f8fb}.signature-reel-note{max-width:460px;text-align:end;font-size:8px;line-height:1.55;letter-spacing:.06em;color:#8d99a8}
.signature-reel-crosshair{position:absolute;z-index:7;width:42px;height:42px;pointer-events:none;opacity:0;transition:opacity .25s ease;transform:translate(-50%,-50%)}.signature-reel-crosshair::before,.signature-reel-crosshair::after{content:"";position:absolute;background:rgba(140,247,255,.5);box-shadow:0 0 10px rgba(140,247,255,.22)}.signature-reel-crosshair::before{left:50%;top:0;width:1px;height:100%}.signature-reel-crosshair::after{top:50%;left:0;height:1px;width:100%}.signature-reel-stage:hover .signature-reel-crosshair{opacity:.8}
html[dir="rtl"] .signature-reel-note{text-align:start}

/* Work page: projects behave like cinematic chapters */
.work-case{position:relative;isolation:isolate;overflow:hidden}.work-case::before{content:attr(data-za-chapter);position:absolute;z-index:0;top:50%;inset-inline-end:-.02em;transform:translateY(-50%);font-size:clamp(120px,28vw,420px);line-height:.7;letter-spacing:-.08em;font-weight:800;color:rgba(255,255,255,.018);pointer-events:none}.work-case.white-section::before{color:rgba(0,0,0,.025)}
.work-case .container{position:relative;z-index:2}.work-case-media,.anonymous-frame,.dynexor-frame{transition:transform .85s var(--za-ease),box-shadow .8s ease,filter .8s ease}.work-case.future-near .work-case-media,.work-case.future-near .anonymous-frame,.work-case.future-near .dynexor-frame{box-shadow:0 42px 110px rgba(0,0,0,.2)}.work-case-media img{transition:transform 1.2s var(--za-ease),filter .9s ease}.work-case:hover .work-case-media img{transform:scale(1.035);filter:saturate(1.05) contrast(1.03)}
.za-case-signal{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:#7d8998}.za-case-signal i{width:22px;height:1px;background:linear-gradient(90deg,var(--za-signal),transparent)}

/* About timeline receives a signal line, visually connecting chapters */
.about-chapters{position:relative}.about-chapters::before{content:"";position:absolute;z-index:0;top:4%;bottom:4%;left:50%;width:1px;background:linear-gradient(transparent,rgba(140,247,255,.18) 10%,rgba(140,120,255,.18) 50%,rgba(217,255,117,.16) 90%,transparent)}.about-chapter{position:relative}.about-chapter::after{content:"";position:absolute;z-index:4;top:50%;left:50%;width:7px;height:7px;border-radius:50%;background:#080b10;border:1px solid rgba(140,247,255,.6);box-shadow:0 0 0 7px rgba(140,247,255,.035),0 0 20px rgba(140,247,255,.16);transform:translate(-50%,-50%)}

/* Section titles get a subtle signature scan on hover */
h1,h2{position:relative}.signature-v06 h2:hover{text-shadow:10px 0 34px rgba(140,247,255,.05),-10px 0 34px rgba(140,120,255,.05)}

@supports(view-transition-name:root){::view-transition-old(root){animation:zaOld .36s ease both}::view-transition-new(root){animation:zaNew .62s var(--za-ease) both}@keyframes zaOld{to{opacity:0;transform:scale(.99);filter:blur(5px)}}@keyframes zaNew{from{opacity:0;transform:scale(1.012);filter:blur(8px)}}}

@media(max-width:1180px){.za-signature-mark{display:none}.za-route-beacon{top:96px}.signature-reel-head{grid-template-columns:1fr;gap:22px}.about-chapters::before,.about-chapter::after{display:none}}
@media(max-width:767px){.site-header .brand::before{width:22px;height:22px}.za-route-beacon{top:82px;inset-inline-end:18px}.za-route-beacon span:nth-of-type(2),.za-route-beacon em{display:none}.hero-media .za-hero-orbit{width:80px}.signature-reel-section{padding:72px 0}.signature-reel-head h2{font-size:clamp(44px,14vw,70px)}.signature-reel-stage{min-height:520px;border-radius:22px}.signature-reel-frame img{object-position:center}.signature-reel-name{font-size:42px}.signature-reel-note{max-width:220px;font-size:7px}.signature-reel-hud-bottom{align-items:flex-end}.signature-reel-time{display:none}.signature-reel-timeline{bottom:74px}.work-case::before{font-size:56vw}}
@media(prefers-reduced-motion:reduce){.za-signature-mark::after,.za-route-beacon i,.hero-media .za-hero-orbit::after,.signature-reel-system i{animation:none!important}.signature-reel-frame,.work-case-media,.work-case-media img{transition:none!important}}