/* ════════════════════════════════════════
   HERO REVEAL + FLOATING PORTFOLIO PREVIEW
   Add this AFTER cursor-magnetic.css
   ════════════════════════════════════════ */

/* ── Hero: character-by-character reveal ── */
.hero-reveal-line{
  overflow:hidden;
  display:block;
}
.hero-reveal-line .char{
  display:inline-block;
  transform:translateY(115%) rotate(4deg);
  opacity:0;
  will-change:transform;
}

/* Desktop tagline gets the same treatment */
#hero-tagline-desktop{
  opacity:0;
}
#hero-tagline-desktop.revealed{
  animation:tagFadeIn 1s ease forwards;
}
@keyframes tagFadeIn{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* ── Floating portfolio preview — follows cursor ── */
@media(min-width:1025px){
  .port-preview-float{
    position:fixed;
    top:0;left:0;
    width:280px;height:180px;
    border-radius:.85rem;
    overflow:hidden;
    pointer-events:none;
    z-index:500;
    opacity:0;
    transform:translate(-50%,-50%) scale(.85);
    transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    background:#0a0a14;
  }
  .port-preview-float.active{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  .port-preview-float video,
  .port-preview-float img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .port-preview-float .ppf-label{
    position:absolute;bottom:0;left:0;right:0;
    padding:.8rem 1rem;
    background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
    font-family:'Inter',sans-serif;
    font-size:.65rem;font-weight:600;letter-spacing:.08em;
    color:#fff;
  }
  /* hide the old fixed-position side preview on desktop — floating one replaces it */
  .port-preview{display:none!important}
}