/* ============================================================
   LUSION-FX — Smooth-scroll + cinematic card reveal
   Apply class .project-item OR opt existing .showcase-card via data-lusion
   ============================================================ */

/* Lenis required wrapper rules */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ── Card base (project-item OR opted showcase-card) ──────── */
.project-item,
.showcase-card[data-lusion]{
  --reveal-delay:0ms;
  --squash-y:1;
  --squash-x:1;
}
.project-item{
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
  will-change:transform,opacity,clip-path;
  transform-origin:center bottom;
}

.project-item-main{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#0f0d0a;
  transform:scale(var(--squash-x), var(--squash-y));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
html.lusion-fx-ready .showcase-card[data-lusion]{
  will-change:transform,opacity,clip-path;
  transform-origin:center bottom;
  transform:scale(var(--squash-x), var(--squash-y));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.project-item-image{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:4/5;
  border-radius:14px;
  background:#0f0d0a;
}
.project-item-image > img,
.project-item-image > video,
.showcase-card[data-lusion] .showcase-card__img{
  display:block;
  width:100%;
  height:120%;
  object-fit:cover;
  will-change:transform;
  transform:translate3d(0, var(--media-parallax, 0px), 0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}

/* ── Initial state (out of view) — gate behind JS-injected class ── */
html.lusion-fx-ready .project-item:not(.is-revealed),
html.lusion-fx-ready .showcase-card[data-lusion]:not(.is-revealed){
  opacity:0;
  transform:translate3d(0, 80px, 0) scale(.92);
  clip-path:inset(0 0 100% 0);
  -webkit-clip-path:inset(0 0 100% 0);
  filter:blur(8px);
}

/* ── Reveal in viewport ───────────────────────────────────── */
.project-item.is-revealed,
.showcase-card[data-lusion].is-revealed{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
  filter:blur(0);
  transition:
    opacity     1.2s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
    transform   1.2s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
    clip-path   1.3s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
    filter       .6s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms);
}

/* ── Footer (line-1 categoria, line-2 título + icon) ───────── */
.project-item-footer{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-block-start:18px;
  padding-inline:2px;
}
.project-item-line-1{
  font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(20,18,14,.55);
}
.project-item-line-2{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:'Satoshi','Inter','DM Sans',sans-serif;
  font-size:clamp(1.05rem,1.4vw,1.35rem);
  font-weight:500;
  color:#141210;
  letter-spacing:-.005em;
}
.project-item-line-2-icon{
  display:inline-flex;
  width:1.2em;height:1.2em;
  align-items:center;justify-content:center;
  transform:translateX(0);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  color:#8a6f3a;
}
.project-item-line-2-inner{
  display:inline-block;
  position:relative;
}
.project-item-line-2-inner::after{
  content:"";
  position:absolute;
  inset:auto 0 -2px 0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}

/* ── Hover micro-interactions ─────────────────────────────── */
.project-item:hover .project-item-image > img,
.project-item:hover .project-item-image > video,
.showcase-card[data-lusion]:hover .showcase-card__img{
  transform:translate3d(0, var(--media-parallax, 0px), 0) scale(1.04);
}
.project-item:hover .project-item-line-2-icon{
  transform:translateX(8px);
}
.project-item:hover .project-item-line-2-inner::after{
  transform:scaleX(1);
}
.project-item:hover .project-item-main{
  box-shadow:inset 0 0 0 1px rgba(232,200,122,.18),
             inset 0 -60px 80px -40px rgba(0,0,0,.4);
}

/* ── Grid container helper ────────────────────────────────── */
.project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,4vw,60px);
}
@media (min-width:1024px){
  .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
  .project-grid{grid-template-columns:1fr;gap:32px;}
}

/* ── Showcase-card hover enhancement (sem hide-state) ─────── */
.showcase-card{
  --media-parallax:0px;
  --squash-x:1;
  --squash-y:1;
}
html.lusion-fx-ready .showcase-card{
  transform:scale(var(--squash-x), var(--squash-y));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
html.lusion-fx-ready .showcase-card .showcase-card__img{
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  transform:translate3d(0, var(--media-parallax, 0px), 0);
  will-change:transform;
}
html.lusion-fx-ready .showcase-card:hover .showcase-card__img{
  transform:translate3d(0, var(--media-parallax, 0px), 0) scale(1.04);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .project-item,.showcase-card[data-lusion]{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    filter:none !important;
    transition:none !important;
  }
  .project-item-image > img,
  .project-item-image > video,
  .showcase-card[data-lusion] .showcase-card__img{
    transform:none !important;
    transition:none !important;
  }
}