/* Usamify — interaction & motion layer (all public pages).
   Hover/focus states animate transform/opacity only. Hover effects are limited to real pointers;
   nothing is hover-only (captions and actions stay visible on touch). Reduced motion: no movement. */

/* ── Nav links: underline slides in from the left, out to the right ── */
.navbar__link { position:relative; }
.navbar__link::after {
  content:''; position:absolute; left:0; right:0; bottom:4px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--color-green),#9de4b2);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.navbar__link--active::after { transform:scaleX(1); opacity:.55; }
.navbar__link:focus-visible::after { transform:scaleX(1); transform-origin:left center; }

/* ── Buttons: lift + stronger glow (glow layer fades, no box-shadow animation), press feedback ── */
.btn--outline::after, .btn--nav-contact::after, .navbar .btn--nav::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(157,228,178,.45), 0 10px 28px rgb(var(--accent-rgb) / .28);
  opacity:0; transition:opacity .3s ease;
}
.btn--nav-contact { position:relative; transition:background .3s ease, translate .3s cubic-bezier(.2,.8,.2,1); }
.btn--primary::before { transition:opacity .3s ease, scale .3s ease; }
.btn, .btn--subscribe { transition-property:background,color,border-color,filter,opacity,transform,translate,scale; transition-duration:.3s; transition-timing-function:cubic-bezier(.2,.8,.2,1); }
.btn:active, .btn--subscribe:active, .btn--nav-contact:active { scale:.97; }

/* ── Cards: shared glow ring that fades in (opacity only) ── */
.testimonial-card { position:relative; transition:translate .45s cubic-bezier(.2,.8,.2,1); }
.testimonial-card::after, .portfolio-card::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .38), 0 22px 50px -18px rgb(var(--accent-rgb) / .38);
  opacity:0; transition:opacity .45s ease;
}
/* the project card clips its content, so its glow sits inside the edge */
.portfolio-card::after { inset:0; box-shadow:inset 0 0 0 1px rgb(var(--accent-rgb) / .4), inset 0 -60px 80px -50px rgb(var(--accent-rgb) / .35); }
.portfolio-card__image { transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.portfolio-card__overlay-title, .portfolio-card__overlay-category { transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.portfolio-item-card > a, .blog-card__link { display:block; transition:translate .45s cubic-bezier(.2,.8,.2,1); }
.portfolio-item-card__image, .blog-card__image { transition:transform .7s cubic-bezier(.2,.8,.2,1) !important; }
.portfolio-item-card__plus, .blog-card__plus { display:inline-block; transition:transform .45s cubic-bezier(.2,.8,.2,1); transform:scale(.6) rotate(-90deg); }
.blog-card__title { transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.portfolio-item-card__meta { transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.footer__socials a { transition:background .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }

@media (hover:hover) and (pointer:fine) {
  .navbar__link:hover::after { transform:scaleX(1); transform-origin:left center; opacity:1; }

  .btn:hover, .btn--subscribe:hover, .btn--nav-contact:hover { translate:0 -2px; }
  .btn--primary:hover { transform:none; }
  .btn--primary:hover::before { opacity:1; scale:1.06; }
  .btn--outline:hover::after, .btn--nav-contact:hover::after, .navbar .btn--nav:hover::after { opacity:1; }

  /* Home "Latest Projects": card lifts, image zooms, caption rises in */
  .portfolio-card:hover { transform:translateY(-6px); }
  .portfolio-card:hover::after { opacity:1; }
  .portfolio-card:hover .portfolio-card__image { transform:scale(1.06); }
  .portfolio-card__overlay-title, .portfolio-card__overlay-category { transform:translateY(12px); }
  .portfolio-card__overlay-category { transition-delay:.04s; }
  .portfolio-card:hover .portfolio-card__overlay-title, .portfolio-card:hover .portfolio-card__overlay-category { transform:none; }

  /* Portfolio page + "More projects" + blog cards */
  .portfolio-item-card > a:hover, .blog-card__link:hover { translate:0 -6px; }
  .portfolio-item-card > a:hover .portfolio-item-card__image, .blog-card__link:hover .blog-card__image { transform:scale(1.06); }
  .portfolio-item-card > a:hover .portfolio-item-card__overlay, .blog-card__link:hover .blog-card__overlay { opacity:1; visibility:visible; }
  .portfolio-item-card > a:hover .portfolio-item-card__plus, .blog-card__link:hover .blog-card__plus { transform:none; }
  .portfolio-item-card > a:hover .portfolio-item-card__meta { transform:translateX(4px); }
  .blog-card__link:hover .blog-card__title { transform:translateY(-4px); }

  .testimonial-card:hover { translate:0 -6px; }
  .testimonial-card:hover::after { opacity:1; }

  .footer__socials a:hover { transform:translateY(-3px) scale(1.08); }
}

/* Keyboard users get the same lift/zoom as mouse users */
.portfolio-card:focus-within::after, .testimonial-card:focus-within::after { opacity:1; }
.portfolio-item-card > a:focus-visible, .blog-card__link:focus-visible { translate:0 -6px; outline:2px solid var(--color-green); outline-offset:4px; border-radius:16px; }
.portfolio-item-card > a:focus-visible .portfolio-item-card__overlay, .blog-card__link:focus-visible .blog-card__overlay { opacity:1; visibility:visible; }
.portfolio-item-card > a:focus-visible .portfolio-item-card__plus, .blog-card__link:focus-visible .blog-card__plus { transform:none; }

/* ── My Advantage: pills wait above the pile until the drop starts (class set by JS only) ── */
.advantage__tags-pile.is-drop-pending .advantage__tag { opacity:0; }

@media (prefers-reduced-motion: reduce) {
  .navbar__link::after, .btn, .btn::after, .btn--primary::before, .testimonial-card, .testimonial-card::after, .portfolio-card::after,
  .portfolio-card__image, .portfolio-card__overlay-title, .portfolio-card__overlay-category, .portfolio-item-card > a, .blog-card__link,
  .portfolio-item-card__image, .blog-card__image, .portfolio-item-card__plus, .blog-card__plus, .blog-card__title, .portfolio-item-card__meta,
  .footer__socials a { transition:none !important; }
  .btn:hover, .btn:active, .testimonial-card:hover, .portfolio-item-card > a:hover, .blog-card__link:hover, .portfolio-item-card > a:focus-visible, .blog-card__link:focus-visible { translate:none !important; scale:none !important; }
  .portfolio-card:hover .portfolio-card__image, .portfolio-item-card > a:hover .portfolio-item-card__image, .blog-card__link:hover .blog-card__image,
  .footer__socials a:hover, .blog-card__link:hover .blog-card__title, .portfolio-item-card > a:hover .portfolio-item-card__meta { transform:none !important; }
  .portfolio-card__overlay-title, .portfolio-card__overlay-category { transform:none !important; }
}

/* ── Hero carousel before main.js runs (html.js is set in <head> by motion.js) ──
   Without this the server-rendered cards are stacked for the first frames and the whole hero/about block
   (and its % sized glow + light streak) jumps ~1,600px when the track is built: a 0.17 CLS. Lay them out
   in the final single row, with the active card centred like centerFirstCard(), until the track exists.
   No JS: the class is never set, so the cards stay stacked and all visible. */
html.js .hero__carousel:not(:has(> .hero__carousel-track)) { --carousel-gap:20px; display:flex; align-items:center; gap:var(--carousel-gap); }
html.js .hero__carousel:not(:has(> .hero__carousel-track)) > .project-card:first-child { margin-left:calc(50% - 1.5 * var(--carousel-card-w, var(--carousel-center-w)) - var(--carousel-gap)); }
html.js .hero__carousel:not(:has(> .hero__carousel-track)) > .project-card.is-active:first-child { margin-left:calc(50% - 0.5 * var(--carousel-card-w, var(--carousel-center-w))); }
@media (max-width:768px) {
  html.js .hero__carousel:not(:has(> .hero__carousel-track)) { --carousel-gap:16px; --carousel-card-w:min(86vw, 680px); }
}