/* FIQRI PORTFOLIO / EDITORIAL ATMOSPHERE V1.8
 * Camera grammar — quiet film gates, edit points and compositing planes.
 * Visuals stay BEHIND content; don't alter the established type or gallery geometry.
 */
:root{--ed-ice:#b5d8ff;--ed-blue:#79aeef}
.hero,#work,.expertise{position:relative}
/* Chapter One must remain sticky; never reset its positioning context. */
.cinema-stick{position:sticky}
.hero>.editorial-atmosphere,
.cinema-stick>.editorial-atmosphere,
#work>.editorial-atmosphere,
.expertise>.editorial-atmosphere{
 position:absolute!important;inset:0!important;overflow:hidden;
 pointer-events:none!important;user-select:none;
 z-index:1;isolation:isolate;contain:paint;
}
#work>.editorial-atmosphere{z-index:0}
#work>.shell,.expertise>.shell{position:relative;z-index:2}
.hero>.shell{z-index:3}
.expertise>.editorial-atmosphere{z-index:0}
.editorial-atmosphere .ed-plane{
 position:absolute;inset:-9%;pointer-events:none;
 transform:translate3d(0,0,0) scale(1);
 transform-origin:50% 50%;will-change:transform;
}
.editorial-atmosphere .ed-plane--far{
 opacity:.33;
}
.editorial-atmosphere .ed-plane--mid{opacity:.52}
.editorial-atmosphere .ed-plane--near{opacity:.68}
.editorial-atmosphere .ed-particle{
 position:absolute;display:block;
 width:var(--ed-size,12px);height:var(--ed-size,12px);
 color:#bcdfff;
 opacity:var(--ed-opacity,.7);
 filter:drop-shadow(0 0 7px #74b3fa3a);
 transform:rotate(var(--ed-rotate,0deg));
 animation:ed-particle-breathe var(--ed-duration,9s) ease-in-out var(--ed-delay,0s) infinite alternate;
}
.editorial-atmosphere .ed-particle svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
.editorial-atmosphere .ed-particle--spark svg{fill:currentColor;stroke:none}
.editorial-atmosphere .ed-particle--perforation{color:#789fd0;opacity:.42}
.editorial-atmosphere .ed-particle--keyframe{color:#b8d9ff}
.editorial-atmosphere .ed-particle--crop{color:#8dbcf9}
.editorial-atmosphere .ed-particle--wave{color:#91c6fd}
.editorial-atmosphere .ed-plane--far .ed-particle{filter:blur(.45px) drop-shadow(0 0 8px #6a9de826)}
.editorial-atmosphere .ed-plane--near .ed-particle{filter:drop-shadow(0 0 9px #a7d7ff4d)}
.editorial-atmosphere .ed-depth-grid{
 position:absolute;inset:0;
 background-image:
  linear-gradient(to right,#9ecbff0c 1px,transparent 1px),
  linear-gradient(to bottom,#9ecbff0c 1px,transparent 1px);
 background-size:92px 92px;
 mask-image:radial-gradient(ellipse at 55% 55%,#0007,transparent 76%);
 opacity:.85;
 transform:rotate(-4deg);
}
.editorial-atmosphere .ed-depth-horizon{
 position:absolute;left:-12%;right:-12%;height:1px;
 top:var(--ed-horizon,48%);
 background:linear-gradient(90deg,transparent,#92c6ff26 23%,#b4dbff60 52%,#92c6ff20 81%,transparent);
 box-shadow:0 0 28px 1px #92bdfb17;
 transform:rotate(var(--ed-horizon-rotate,-7deg));
 opacity:.35;
}
.editorial-atmosphere .ed-film-rail{
 position:absolute;left:var(--ed-rail-left,6%);top:12%;bottom:10%;width:9px;
 display:flex;flex-direction:column;justify-content:space-around;
 opacity:.17;
 background:linear-gradient(to right,transparent,#a3c7f929,transparent);
 border-left:1px solid #a4cffa4f;
 border-right:1px solid #a4cffa4f;
}
.editorial-atmosphere .ed-film-rail i{
 display:block;width:4px;height:11px;border:1px solid #c3e1ff75;
 margin:0 auto;border-radius:1px;
}
.editorial-atmosphere .ed-film-rail--right{left:auto;right:var(--ed-rail-left,6%)}
@keyframes ed-particle-breathe{
 from{opacity:calc(var(--ed-opacity,.7)*.55);translate:0 -3px}
 to{opacity:var(--ed-opacity,.7);translate:0 5px}
}
/* Hero: cinematic depth behind the portrait and prose, never on top. */
.hero>.editorial-atmosphere .ed-depth-grid{
 background-size:110px 110px;opacity:.6;
 mask-image:linear-gradient(90deg,transparent 5%,#0008 50%,transparent 100%)
}
.hero>.editorial-atmosphere .ed-plane--far{opacity:.4}
.hero>.editorial-atmosphere .ed-plane--near{opacity:.56}
.hero>.editorial-atmosphere .ed-depth-horizon{top:65%;opacity:.33}
/* Chapter One: more dimensional camera-space detail, underneath floating cards. */
.cinema-stick>.editorial-atmosphere{z-index:2}
.cinema-stick>.editorial-atmosphere .ed-plane--far{opacity:.42}
.cinema-stick>.editorial-atmosphere .ed-plane--mid{opacity:.6}
.cinema-stick>.editorial-atmosphere .ed-depth-grid{
 background-size:78px 78px;opacity:.73;
 mask-image:radial-gradient(ellipse at 50% 52%,transparent 18%,#000a 72%,transparent 100%)
}
.cinema-stick>.editorial-atmosphere .ed-depth-horizon{opacity:.45}
/* Gallery: subdued so the videos/thumbnail images remain the hero. */
#work>.editorial-atmosphere .ed-plane--far{opacity:.22}
#work>.editorial-atmosphere .ed-plane--mid{opacity:.31}
#work>.editorial-atmosphere .ed-plane--near{opacity:.42}
#work>.editorial-atmosphere .ed-depth-grid{opacity:.4}
#work>.editorial-atmosphere .ed-film-rail{opacity:.11}
#work>.editorial-atmosphere .ed-depth-horizon{opacity:.24}
/* Expertise: a faint continuation of the cinematic motif, never a text overlay. */
.expertise>.editorial-atmosphere .ed-plane{opacity:.2}
.expertise>.editorial-atmosphere .ed-film-rail{opacity:.08}
/* Editorial polish: gentle details instead of more labels or badges. */
#work .work-card{backface-visibility:hidden}
#work .work-card::before{
 content:"";position:absolute;z-index:10;top:0;left:16%;right:16%;
 height:1px;background:linear-gradient(90deg,transparent,#b5ddffb8,transparent);
 opacity:0;transform:scaleX(.45);transform-origin:center;
 transition:opacity .38s ease,transform .55s cubic-bezier(.2,.8,.2,1);
 pointer-events:none;
}
#work .work-card:hover::before,#work .work-card:focus-within::before{
 opacity:.92;transform:scaleX(1)
}
#work .work-media{--ed-card-glow-x:50%;--ed-card-glow-y:50%}
#work .work-card .work-media::before{
 content:"";position:absolute;inset:0;z-index:6;
 background:radial-gradient(circle at var(--ed-card-glow-x) var(--ed-card-glow-y),
 #b4deff1e,transparent 47%);
 opacity:0;pointer-events:none;
 transition:opacity .3s ease;
}
#work .work-card:hover .work-media::before,#work .work-card:focus-within .work-media::before{
 opacity:1;
}
.expertise .skill{
 transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;
}
@media(hover:hover) and (pointer:fine){
 .expertise .skill:hover{
  transform:translateY(-5px);
  border-color:#9ac5f05c;
  box-shadow:0 18px 55px #020a175c,0 0 25px #7bb3fa0b;
 }
}
@media(max-width:900px){
 .editorial-atmosphere .ed-plane--near{opacity:.4}
 .editorial-atmosphere .ed-film-rail{display:none}
 .editorial-atmosphere .ed-depth-grid{background-size:112px 112px}
}
@media(max-width:640px){
 .hero>.editorial-atmosphere .ed-plane--far{opacity:.28}
 .cinema-stick>.editorial-atmosphere .ed-plane--near{opacity:.2}
 #work>.editorial-atmosphere .ed-plane--near,.expertise>.editorial-atmosphere .ed-plane--near{display:none}
 .editorial-atmosphere .ed-particle{animation-duration:13s}
 .editorial-atmosphere .ed-depth-horizon{opacity:.15}
}
@media(prefers-reduced-motion:reduce){
 .editorial-atmosphere .ed-plane{
  transform:none!important;will-change:auto!important;
 }
 .editorial-atmosphere .ed-particle{
  animation:none!important;translate:none!important;opacity:var(--ed-opacity,.7)
 }
 #work .work-card::before,.expertise .skill{transition:none!important}
 .expertise .skill:hover{transform:none!important}
}