/* =========================================================
   GRAFIQUIX — PART 5: production motion and responsive polish
   This layer intentionally follows the supplied page styles.
   ========================================================= */

/* Reserve the larger logo frame. The final light/dark assets are added
   here once their uploaded filenames are available. */
.logo-slot{max-width:13rem;height:3.25rem;}
.logo-slot .logo-light-svg,.logo-slot .logo-dark-svg{display:none!important;}
.site-logo{width:auto!important;height:100%!important;max-width:100%;object-fit:contain;}
.logo-for-dark{display:none!important;}
[data-theme="dark"] .logo-for-light{display:none!important;}
[data-theme="dark"] .logo-for-dark{display:block!important;}
.work-card .img-slot>div{display:none;}
.work-card:nth-child(1) .img-slot{background-image:url('assets/portfolio-brand-identity.webp.png');}
.work-card:nth-child(2) .img-slot{background-image:url('assets/portfolio-web-design.webp.png');}
.work-card:nth-child(3) .img-slot{background-image:url('assets/portfolio-packaging.webp.png');}
.work-card:nth-child(4) .img-slot{background-image:url('assets/portfolio-visual-system.webp.png');}
.work-card .img-slot{background-position:center;background-size:cover;background-repeat:no-repeat;}
@media (max-width:37.4375em){.logo-slot{height:2.875rem;max-width:11.5rem;}}

/* Motion starts only when the element enters its view zone. This prevents
   entrance animations from being missed on short viewports. */
@media (prefers-reduced-motion:no-preference){
  .hero .word,.hero .hero-sub,.hero .hero-actions{animation:none;opacity:0;}
  .hero .word{transform:translateY(100%);}
  .hero .hero-sub,.hero .hero-actions{transform:translateY(1.1rem);}
  .hero.motion-in .word{animation:wordIn .6s var(--ease) forwards;}
  .hero.motion-in .hero-sub{animation:heroIn .9s var(--ease) .55s both;}
  .hero.motion-in .hero-actions{animation:heroIn .9s var(--ease) .7s both;}
  .hero.motion-in .word:nth-child(1){animation-delay:.05s;}
  .hero.motion-in .word:nth-child(2){animation-delay:.11s;}
  .hero.motion-in .word:nth-child(3){animation-delay:.17s;}
  .hero.motion-in .word:nth-child(4){animation-delay:.23s;}
  .hero.motion-in .word:nth-child(5){animation-delay:.29s;}
  .hero.motion-in .word:nth-child(6){animation-delay:.35s;}
  .hero.motion-in .word:nth-child(7){animation-delay:.41s;}
  .hero.motion-in .word:nth-child(8){animation-delay:.47s;}
}

/* Ensure reveal blocks reset when outside the reading zone, enabling a
   deliberate replay when visitors scroll back through a section. */
[data-reveal]{will-change:opacity,transform;}

@media (max-width:37.4375em){
  .hero{min-height:calc(100svh - 1rem);}
  .hero-inner{width:100%;}
  .marquee{width:100%;margin-top:2rem;}
  .ring-field{right:-45%;top:43%;}
}

@media (min-width:37.5em) and (max-height:44rem){
  .hero{padding-top:7.5rem;padding-bottom:2rem;}
  .hero h1{font-size:clamp(2.5rem,6vw,4.5rem);}
  .hero-sub{margin-top:1rem;}
  .hero-actions{margin-top:1.4rem;}
}