/* YASMEEN mobile cinematic scroll motion — approved V8 refinement. */
:root{--v8-progress:0;--v8-hero:0;--v8-focus:0}
html,body{background:#000!important}
/* Black stays black; only pencil-thin light geometry lives above it. */
main{position:relative;isolation:isolate}
.v8-motion-stage{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:0;visibility:hidden}
.v8-rail{display:none}
.v8-kicker-line{height:1px;width:100%;margin-top:16px;background:#ffffff22;position:relative;overflow:hidden}
.v8-kicker-line>span{display:block;height:100%;width:100%;transform:scaleX(var(--v8-line,0));transform-origin:left center;background:#d5f768;box-shadow:0 0 6px rgba(213,247,104,.7)}
.scroll-indicator{animation:none!important;transition:border-color .25s,color .25s,background .25s;transform:none!important}
.scroll-indicator svg{width:19px;height:19px;display:block;transform:none!important}
.scroll-indicator:hover{border-color:#d5f768;background:#d5f76811}
.hero,.ticker,.work-section,.about-section,.contact-section,.site-footer{position:relative;z-index:1}
@media(max-width:740px){
  /* Stable indicator: no transform/keyframe bob or perpetual motion. */
  .scroll-indicator{width:45px;height:45px;border-color:#656e57;color:#d5f768;animation:none!important;transform:none!important;backface-visibility:hidden}
  .hero-bottom{gap:16px;min-height:55px}
  .hero-bottom>span:first-child{font-size:10px;letter-spacing:.12em}
  .hero-meta{position:relative;z-index:2}
  .hero,.work-section,.about-section,.contact-section{background:transparent!important}
  .hero{isolation:auto;overflow:visible}
  .hero-grid{position:relative;z-index:2}
  .hero-title{font-size:clamp(46px,12.6vw,69px);letter-spacing:-.085em}
  /* Your original image is the focal point; luminous wireframe curves sit behind. */
  .hero-visual{transform:translate3d(0,calc(var(--v8-hero) * -15px),0);will-change:transform}
  .hero-visual::before{content:"";position:absolute;inset:-17px -15px -8px 30px;border:1px solid rgba(213,247,104,.25);border-radius:48% 48% 0 0;z-index:-1;transform:translate3d(calc(var(--v8-hero) * 6px),calc(var(--v8-hero) * -9px),0);pointer-events:none}
  .hero-image-wrap{filter:saturate(.85);border:1px solid rgba(255,255,255,.25)}
  .hero-orbit{background:#d5f768;box-shadow:0 9px 40px #d5f76816}
  .v8-motion-stage{display:block;visibility:visible;opacity:var(--v8-bg-alpha, .72);transition:opacity .12s linear}
  .v8-orbit-scene{position:absolute;display:block;right:-62%;top:22vh;width:168vw;max-width:none;height:auto;overflow:visible;transform:translate3d(calc(var(--v8-progress) * -20px), calc(var(--v8-progress) * -150px), 0) rotate(calc(var(--v8-progress) * 34deg));will-change:transform;filter:drop-shadow(0 0 13px #d5f76813)}
  .v8-ring-group{transform-origin:283px 390px;transform:rotate(calc(var(--v8-hero) * 18deg));will-change:transform}
  .v8-crosshair{position:absolute;font-family:Arial,sans-serif;font-weight:300;font-size:18px;color:rgba(213,247,104,.32)}
  .v8-crosshair-one{left:8%;top:28vh;transform:translateY(calc(var(--v8-progress) * -80px))}
  .v8-crosshair-two{right:11%;top:73vh;transform:translateY(calc(var(--v8-progress) * -40px))}
  .v8-crosshair-three{left:22%;top:115vh;transform:translateY(calc(var(--v8-progress) * -160px))}
  .v8-rail{display:flex;position:fixed;z-index:55;right:9px;top:37vh;flex-direction:column;align-items:center;gap:9px;opacity:.75;pointer-events:none}
  .v8-rail-label{font:600 8px/1 'DM Sans',Arial,sans-serif;color:#c1c1b9;letter-spacing:0}
  .v8-rail-track{height:56px;width:1px;background:#ffffff42;position:relative;overflow:hidden}
  .v8-rail-track i{display:block;position:absolute;top:0;left:0;width:1px;height:100%;background:#d5f768;transform:scaleY(var(--v8-progress));transform-origin:top center;will-change:transform}
  .ticker{z-index:3}
  .work-section{overflow:hidden}
  .section-heading{position:relative}
  .work-section .section-heading h2{letter-spacing:-.075em}
  .project-media{overflow:hidden}
  .project-card{--v8-card-progress:0}
  .project-card .project-media:after{pointer-events:none}
  /* Quiet internal motion: projects lift a few pixels as they enter viewport. */
  .project-card .project-media img{transform:translate3d(0,calc((1 - var(--v8-card-progress)) * 10px),0) scale(calc(1.014 + (1 - var(--v8-card-progress)) * .045));transition:none;will-change:transform}
  .v8-kicker-line{margin-top:17px}
  .about-section{background:#000!important}
  .contact-section{background:#000!important}
}
@media(prefers-reduced-motion:reduce){
  .v8-motion-stage,.v8-rail{display:none!important}
  .hero-visual,.project-card .project-media img{transform:none!important}
  .v8-kicker-line span{transform:scaleX(1)!important}
}

/* Keep the editorial home page fully intact on desktop. */
@media(min-width:741px){.v8-kicker-line{display:none}}
/* Mihan cover: show the entire photographed corner LED instead of cropping the image. */
.project-feature-image.mihan-feature{background:#101014;isolation:isolate}
.project-feature-image.mihan-feature::before{content:"";position:absolute;inset:-25px;background:url("assets/mihan-cover.webp") center/cover no-repeat;filter:blur(28px) brightness(.5) saturate(.9);z-index:-1}
.project-feature-image.mihan-feature img{object-fit:contain;object-position:center;position:relative;z-index:1}
.project-media-mihan img{object-position:center 47%}
@media(max-width:740px){
 .project-feature-image.mihan-feature{aspect-ratio:4/3;min-height:280px}
 .project-media-mihan img{object-position:center 43%}
}