/* Nasar Design — interaction-led motion system
   Load AFTER styles.css and full-width.css. */
:root {
  --motion-ink: #0a0a0a;
  --motion-green: #039317;
  --motion-teal: #38bebf;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Scroll reveals: shorter, softer, and less repetitive than the first pass. */
.js-reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 20px, 0) scale(.992);
  transition:
    opacity .62s var(--motion-ease),
    transform .72s var(--motion-ease),
    filter .62s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}
.logo-tile.js-reveal { transform: translate3d(0, 14px, 0) scale(.97); }
.logo-tile.js-reveal.is-visible { transform: translate3d(0, 0, 0) scale(1); }
.project-card.js-reveal { transform: translate3d(0, 25px, 0) scale(.985); }
.project-card.js-reveal.is-visible { transform: translate3d(0, 0, 0) scale(1); }
.project-card.js-reveal.is-visible:hover { transform: translate3d(0, -4px, 0) scale(1); }
.testimonial-card.js-reveal { transform: translate3d(0, 12px, 0) scale(.99); }
.testimonial-card.js-reveal.is-visible { transform: translate3d(0, 0, 0) scale(1); }

/* Avoid constant floating loops. Hero movement responds to the visitor instead. */
.hero-ambient,
.ambient-two,
.hero-profile-card,
.preview-one,
.preview-two,
.hero-square,
.footer-watermark {
  animation: none !important;
}
.hero {
  --pointer-x: 50%;
  --pointer-y: 35%;
  --pointer-alpha: .7;
  transition: background-color .3s ease;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--pointer-alpha);
  background: radial-gradient(440px circle at var(--pointer-x) var(--pointer-y), rgba(56,190,191,.16), transparent 72%);
  mix-blend-mode: screen;
  transition: opacity .3s ease;
}
.hero-giant { animation: motion-type-in .9s var(--motion-ease) both !important; }
.hero-nav-pill { animation: motion-pill-in .7s .1s var(--motion-ease) both !important; }
.hero-copy { animation: motion-copy-in .75s .18s var(--motion-ease) both !important; }
.hero-collage { transform: none !important; translate: var(--parallax-x, 0px) var(--parallax-y, 0px); transition: translate .16s ease-out; }
.hero-profile-card,
.hero-preview,
.hero-square {
  translate: var(--item-x, 0px) var(--item-y, 0px);
  transition: translate .22s ease-out, box-shadow .28s ease;
  will-change: translate;
}
.hero-profile-card { animation: motion-card-in .75s .24s var(--motion-ease) both !important; }
.preview-one { animation: motion-card-in .8s .32s var(--motion-ease) both !important; }
.preview-two { animation: motion-card-in .85s .4s var(--motion-ease) both !important; }
.hero-square { animation: motion-card-in .75s .46s var(--motion-ease) both !important; }
.hero-collage:hover .hero-profile-card { box-shadow: 0 18px 48px #0009, 0 0 0 1px rgba(56,190,191,.35); }

.hero-scroll-cue {
  position: absolute;
  left: 5%;
  bottom: 22px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 6px 0;
  color: rgba(255,255,255,.76);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
  cursor: pointer;
  transition: color .2s ease, gap .25s ease;
}
.hero-scroll-cue:hover { color: #fff; gap: 14px; }
.cue-mouse {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: 16px;
  height: 23px;
  padding-top: 4px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 99px;
}
.cue-mouse i { width: 2px; height: 5px; border-radius: 2px; background: var(--motion-teal); animation: cue-scroll 1.5s ease-in-out infinite; }
.cue-arrow { font-size: 14px; line-height: 1; }

/* Project discovery filters */
.project-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 0 18px;
}
.project-filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.project-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid #e7e7e7;
  border-radius: 999px;
  color: #555;
  background: rgba(255,255,255,.58);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.project-filter span { color: #929292; font-size: 9px; font-variant-numeric: tabular-nums; }
.project-filter:hover { transform: translateY(-2px); border-color: #c8e9cc; color: #111; }
.project-filter[aria-pressed="true"] { color: #fff; border-color: #111; background: #0a0a0a; box-shadow: 0 5px 14px #00000015; }
.project-filter[aria-pressed="true"] span { color: #b1dcb7; }
.project-filter-status { margin: 0; color: #858585; font-size: 10px; }
.project-card.is-filter-hidden { opacity: 0; transform: translate3d(0, 12px, 0) scale(.975) !important; pointer-events: none; }
.project-card[hidden] { display: none !important; }
.project-card.filter-enter { animation: project-arrive .42s var(--motion-ease) both; }

/* Interactive project cards: a gentle 3-D lean and a soft pointer-lit surface. */
.project-card { transform-style: preserve-3d; }
.project-media {
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .3s ease;
  will-change: transform;
}
.project-media::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(280px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255,255,255,.18), transparent 72%);
  transition: opacity .25s ease;
}
.project-card:hover .project-media::before,
.project-card:focus-visible .project-media::before { opacity: 1; }
.project-card:hover .project-media { box-shadow: 0 20px 42px rgba(0,0,0,.12); }
.project-media > img { transition: transform .7s var(--motion-ease), filter .35s ease; }
.project-card:hover .project-media > img { transform: scale(1.045); filter: saturate(1.04); }
.project-card:active .project-media { transition-duration: .1s; }
.project-caption { position: relative; overflow: hidden; }
.project-caption::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--motion-green), var(--motion-teal)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--motion-ease); }
.project-card:hover .project-caption::after { transform: scaleX(1); }

/* Magnetic links only travel a few pixels; they never hijack the cursor. */
.is-magnetic { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: translate .16s ease-out, color .2s ease, background .2s ease; }

/* Testimonial rail becomes draggable with a visibly active card. */
.testimonial-toolbar { gap: 14px; }
.testimonial-count { min-width: 64px; }
.testimonials.is-draggable { cursor: grab; user-select: none; }
.testimonials.is-dragging { cursor: grabbing; scroll-behavior: auto !important; scroll-snap-type: none !important; }
.testimonials.is-dragging .testimonial-card { pointer-events: none; }
.testimonial-card { transform-origin: center bottom; transition: transform .3s var(--motion-ease), box-shadow .3s ease, background .3s ease; }
.testimonial-card.is-in-view { box-shadow: 0 12px 32px rgba(0,0,0,.055); }
.testimonial-card.is-in-view .avatar { box-shadow: 0 0 0 3px rgba(3,147,23,.1); }
.testimonial-card .avatar { transition: box-shadow .25s ease, transform .25s ease; }
.testimonial-card:hover .avatar { transform: scale(1.08); }
.testimonial-arrow:not(:disabled):active { transform: scale(.92); }

/* Fine interaction states */
.logo-tile { transition: transform .28s var(--motion-ease), box-shadow .28s ease, background .25s ease; }
.logo-tile:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 14px 28px #0000000b; }
.topbar { transition: box-shadow .25s ease, background .25s ease; }
.topbar.has-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.055); }
.back-to-top { transition: opacity .22s ease, transform .32s var(--motion-ease), background .2s ease; }
.back-to-top.is-visible:hover { transform: translateY(-4px) scale(1.04); }

@keyframes motion-type-in { from { opacity: 0; transform: translate(-50%, 18px); filter: blur(7px); } to { opacity: .78; transform: translate(-50%, 0); filter: blur(0); } }
@keyframes motion-pill-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-copy-in { from { opacity: 0; translate: 0 16px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes motion-card-in { from { opacity: 0; translate: 0 13px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cue-scroll { 0%,100% { transform: translateY(0); opacity: .45; } 45% { transform: translateY(5px); opacity: 1; } }
@keyframes project-arrive { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); filter: blur(3px); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } }

@media (max-width: 1000px) {
  .project-toolbar { align-items: flex-start; }
  .project-filter-status { padding-top: 9px; }
}
@media (max-width: 680px) {
  .hero-scroll-cue { left: 6%; bottom: 13px; font-size: 8px; }
  .project-toolbar { padding-bottom: 13px; gap: 9px; }
  .project-filter-group { gap: 5px; }
  .project-filter { padding: 9px 11px; font-size: 10px; }
  .project-filter-status { width: 100%; padding-top: 0; }
  .project-media { transform: none !important; }
  .testimonials.is-draggable { cursor: auto; }
  .testimonial-card { flex-basis: calc((100% - 8px) / 2.08) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal, .js-reveal.is-visible,
  .logo-tile.js-reveal, .logo-tile.js-reveal.is-visible,
  .project-card.js-reveal, .project-card.js-reveal.is-visible,
  .testimonial-card.js-reveal, .testimonial-card.js-reveal.is-visible {
    opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important;
  }
  .hero-giant, .hero-nav-pill, .hero-copy, .hero-profile-card, .preview-one, .preview-two, .hero-square, .cue-mouse i {
    animation: none !important; transition: none !important;
  }
  .hero-collage, .hero-profile-card, .hero-preview, .hero-square, .project-media, .project-media > img, .is-magnetic,
  .project-filter, .testimonial-card, .logo-tile, .project-card.filter-enter {
    transition: none !important; animation: none !important; translate: none !important;
  }
}