/* Kamran Iqbal — Motion system v4
   Deliberately restrained: editorial reveals, line-draws, staggered lists and subtle depth.
*/

:root{
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Stronger base reveal — enough to be perceptible without feeling theatrical. */
.reveal{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:
    opacity .82s var(--motion-ease-out),
    transform .92s var(--motion-ease-out);
  will-change:opacity,transform;
}
.reveal.delay-1{transition-delay:.12s;}
.reveal.delay-2{transition-delay:.22s;}
.reveal.is-visible{opacity:1; transform:translate3d(0,0,0);}

/* Directional editorial reveals applied by JS. */
.reveal.motion-left{transform:translate3d(-34px,16px,0);}
.reveal.motion-right{transform:translate3d(34px,16px,0);}
.reveal.motion-scale{transform:translate3d(0,20px,0) scale(.975);}
.reveal.motion-left.is-visible,
.reveal.motion-right.is-visible,
.reveal.motion-scale.is-visible{transform:none;}

/* Header entrance and navigation rhythm. */
.site-header{
  animation:headerEnter .72s var(--motion-ease-out) both;
}
.brand-mark{animation:brandMarkEnter .8s .08s var(--motion-ease-out) both;}
.site-nav > a{animation:navEnter .58s var(--motion-ease-out) both;}
.site-nav > a:nth-child(1){animation-delay:.12s;}
.site-nav > a:nth-child(2){animation-delay:.18s;}
.site-nav > a:nth-child(3){animation-delay:.24s;}
.site-nav > a:nth-child(4){animation-delay:.30s;}

/* Hero gets its own sequence so the first screen feels intentional. */
.hero-copy.is-visible .eyebrow,
.hero-copy.is-visible .section-label{animation:heroKicker .6s .06s var(--motion-ease-out) both;}
.hero-copy.is-visible h1{animation:heroTitle .92s .10s var(--motion-ease-out) both;}
.hero-copy.is-visible .hero-role{animation:heroText .72s .24s var(--motion-ease-out) both;}
.hero-copy.is-visible .hero-intro{animation:heroText .72s .32s var(--motion-ease-out) both;}
.hero-copy.is-visible .hero-actions{animation:heroText .72s .40s var(--motion-ease-out) both;}

.hero h1 em::after{
  transform:skewX(-14deg) scaleX(0);
  transform-origin:left center;
}
.hero-copy.is-visible h1 em::after{
  animation:accentDraw .7s .68s var(--motion-ease-out) forwards;
}

.hero-portrait.is-visible .portrait-frame{
  animation:portraitFrameIn .96s .18s var(--motion-ease-out) both;
}
.hero-portrait.is-visible .portrait-frame img{
  animation:portraitImageIn 1.15s .16s var(--motion-ease-out) both;
}
.hero-portrait.is-visible .portrait-signature,
.hero-portrait.is-visible .portrait-caption{
  animation:heroText .62s .62s var(--motion-ease-out) both;
}

/* Gentle depth. JS writes --parallax-y only while scrolling. */
.hero-portrait{--parallax-y:0px;}
.hero-portrait .portrait-frame{
  transform:translate3d(0,var(--parallax-y),0);
  transition:transform .12s linear;
}

/* Hero facts stagger rather than arriving as one slab. */
.hero-foot.is-visible > *{
  opacity:0;
  animation:rowRise .62s var(--motion-ease-out) forwards;
}
.hero-foot.is-visible > *:nth-child(1){animation-delay:.08s;}
.hero-foot.is-visible > *:nth-child(2){animation-delay:.16s;}
.hero-foot.is-visible > *:nth-child(3){animation-delay:.24s;}
.hero-foot.is-visible > *:nth-child(4){animation-delay:.32s;}

/* Section headings gain a small line-draw cue. */
.profile-heading h2,
.expertise-intro h2,
.recognition-intro h2,
.training-story-title h2,
.author-intro h2,
.ctc-heading h2,
.portfolio-title h1,
.contact-title h1{
  position:relative;
}
.profile-heading h2::after,
.expertise-intro h2::after,
.recognition-intro h2::after,
.training-story-title h2::after,
.author-intro h2::after,
.ctc-heading h2::after,
.portfolio-title h1::after,
.contact-title h1::after{
  content:"";
  display:block;
  width:74px;
  max-width:18vw;
  height:2px;
  margin-top:18px;
  background:var(--accent,#1579a4);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .72s .28s var(--motion-ease-out);
}
.profile-heading.is-visible h2::after,
.expertise-intro.is-visible h2::after,
.recognition-intro.is-visible h2::after,
.training-story-title.is-visible h2::after,
.author-intro.is-visible h2::after,
.ctc-heading.is-visible h2::after,
.portfolio-title.is-visible h1::after,
.contact-title.is-visible h1::after{transform:scaleX(1);}

/* Staggered rows. JS assigns --i. */
.expertise-lines.is-visible .expertise-item,
.recognition-list.is-visible article,
.book-list.is-visible .book-row,
.contact-direct.is-visible > a,
.gallery-grid .gallery-item.is-visible{
  opacity:0;
  transform:translate3d(0,20px,0);
  animation:staggerRow .62s var(--motion-ease-out) forwards;
  animation-delay:calc(var(--i,0) * 55ms + 90ms);
}

/* Make the expertise rules visibly draw across. */
.expertise-lines.is-visible .expertise-item::after{
  width:100%;
  transition-delay:calc(var(--i,0) * 45ms + 260ms);
}

/* Training story gets a subtle reveal edge and visual depth. */
.training-story-copy.is-visible{
  box-shadow:18px 18px 0 rgba(21,121,164,.05);
}
.training-story-copy{transition:opacity .82s var(--motion-ease-out), transform .92s var(--motion-ease-out), box-shadow .9s .35s var(--motion-ease-out);}
.home-training-photo img,
.gallery-item img{
  transition:transform .75s var(--motion-ease-out), filter .45s ease;
}
.home-training-photo:hover img,
.gallery-item:hover img{transform:scale(1.035);}

/* Buttons have a refined micro-interaction rather than bouncing. */
.button,
.button-primary,
.button-ghost,
.cta-link{
  transition:transform .28s var(--motion-ease-out), box-shadow .28s ease, background .28s ease, color .28s ease;
}
.button:hover,
.button-primary:hover,
.button-ghost:hover{transform:translate3d(0,-2px,0);}

/* Footer reveal as the page resolves. */
.site-footer .footer-grid,
.site-footer .footer-bottom{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .72s var(--motion-ease-out), transform .72s var(--motion-ease-out);
}
.site-footer.is-visible .footer-grid,
.site-footer.is-visible .footer-bottom{opacity:1; transform:none;}
.site-footer.is-visible .footer-bottom{transition-delay:.12s;}

/* Lightbox opening should feel polished. */
.lightbox[open]{animation:dialogIn .28s var(--motion-ease-out) both;}
.lightbox[open]::backdrop{animation:backdropIn .24s ease both;}

@keyframes headerEnter{
  from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:none;}
}
@keyframes brandMarkEnter{
  from{opacity:0; transform:rotate(-8deg) scale(.88);} to{opacity:1; transform:none;}
}
@keyframes navEnter{
  from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}
}
@keyframes heroKicker{
  from{opacity:0; letter-spacing:.22em; transform:translateY(10px);} to{opacity:1; transform:none;}
}
@keyframes heroTitle{
  from{opacity:0; transform:translate3d(0,42px,0); clip-path:inset(0 0 100% 0);} to{opacity:1; transform:none; clip-path:inset(0 0 0 0);}
}
@keyframes heroText{
  from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}
}
@keyframes accentDraw{
  from{transform:skewX(-14deg) scaleX(0);} to{transform:skewX(-14deg) scaleX(1);}
}
@keyframes portraitFrameIn{
  from{opacity:0; clip-path:inset(0 100% 0 0); transform:translate3d(20px,0,0);} to{opacity:1; clip-path:inset(0 0 0 0); transform:none;}
}
@keyframes portraitImageIn{
  from{opacity:.25; transform:scale(1.16) translate3d(10px,0,0);} to{opacity:1; transform:scale(1.09) translate3d(0,0,0);}
}
@keyframes rowRise{
  from{opacity:0; transform:translateY(15px);} to{opacity:1; transform:none;}
}
@keyframes staggerRow{
  from{opacity:0; transform:translate3d(0,20px,0);} to{opacity:1; transform:none;}
}
@keyframes dialogIn{
  from{opacity:0; transform:scale(.985) translateY(8px);} to{opacity:1; transform:none;}
}
@keyframes backdropIn{from{opacity:0;} to{opacity:1;}}

@media (max-width:860px){
  /* Keep motion lighter on small screens. */
  .reveal,
  .reveal.motion-left,
  .reveal.motion-right,
  .reveal.motion-scale{transform:translate3d(0,22px,0);}
  .hero-portrait .portrait-frame{transform:none!important; transition:none!important;}
  .site-nav > a{animation:none;}
}

@media (prefers-reduced-motion:reduce){
  .site-header,.brand-mark,.site-nav>a,
  .hero-copy.is-visible *,
  .hero-portrait.is-visible *,
  .hero-foot.is-visible > *,
  .expertise-lines.is-visible .expertise-item,
  .recognition-list.is-visible article,
  .book-list.is-visible .book-row,
  .contact-direct.is-visible > a,
  .gallery-grid .gallery-item.is-visible,
  .lightbox[open],.lightbox[open]::backdrop{
    animation:none!important;
  }
  .reveal,.reveal.motion-left,.reveal.motion-right,.reveal.motion-scale{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .hero h1 em::after,
  .profile-heading h2::after,
  .expertise-intro h2::after,
  .recognition-intro h2::after,
  .training-story-title h2::after,
  .author-intro h2::after,
  .ctc-heading h2::after,
  .portfolio-title h1::after,
  .contact-title h1::after{transform:scaleX(1)!important; transition:none!important;}
  .site-footer .footer-grid,.site-footer .footer-bottom{opacity:1!important; transform:none!important; transition:none!important;}
}