/* ============================================================
   MY FILM PRODUCTION — Motion / UI-FX Layer
   Drop-in enhancement. Works with existing markup.
   - Scroll reveals (independent of the old .fade-up system)
   - Staggered grid reveals
   - Hero entrance
   - Card 3D tilt + cursor spotlight
   - Magnetic + sheen + ripple buttons
   - Custom cursor (dot + ring)
   - Scroll progress bar
   All motion is gated behind prefers-reduced-motion and the
   .js-anim flag (added by animations.js) so no-JS / reduced-motion
   users always see fully-visible content.
   ============================================================ */

/* ---- tiny extras layered on the existing palette ---- */
:root{
  --fx-ease: cubic-bezier(.16,1,.3,1);
  --fx-spot: rgba(37,99,235,.12);   /* primary glow  */
  --fx-spot-2: rgba(245,158,11,.10); /* accent glow  */
}

/* ============================================================
   1. SCROLL REVEAL  (only active when motion is allowed)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  html.js-anim [data-reveal]{
    opacity: 0;
    transition: opacity .75s var(--fx-ease),
                transform .75s var(--fx-ease),
                clip-path .9s var(--fx-ease);
    transition-delay: var(--reveal-delay, 0s);
  }
  html.js-anim [data-reveal="up"]    { transform: translateY(36px); }
  html.js-anim [data-reveal="down"]  { transform: translateY(-36px); }
  html.js-anim [data-reveal="left"]  { transform: translateX(-44px); }
  html.js-anim [data-reveal="right"] { transform: translateX(44px); }
  html.js-anim [data-reveal="scale"] { transform: scale(.9); }
  html.js-anim [data-reveal="fade"]  { transform: none; }
  html.js-anim [data-reveal="clip"]  {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
  }

  /* revealed */
  html.js-anim [data-reveal].is-in{
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }

  /* ---- Hero entrance (plays once on load) ---- */
  html.js-anim .hero-content > *{
    opacity: 0;
    transform: translateY(30px);
  }
  html.js-anim.anim-ready .hero-content > *{
    animation: fxHeroIn .9s var(--fx-ease) forwards;
  }
  html.js-anim.anim-ready .hero-content > *:nth-child(1){ animation-delay:.15s; }
  html.js-anim.anim-ready .hero-content > *:nth-child(2){ animation-delay:.28s; }
  html.js-anim.anim-ready .hero-content > *:nth-child(3){ animation-delay:.41s; }
  html.js-anim.anim-ready .hero-content > *:nth-child(4){ animation-delay:.54s; }
  html.js-anim.anim-ready .hero-content > *:nth-child(5){ animation-delay:.67s; }

  @keyframes fxHeroIn{
    from{ opacity:0; transform: translateY(30px); }
    to  { opacity:1; transform: translateY(0); }
  }

  /* subtle float-in for the scroll cue */
  html.js-anim.anim-ready .hero-scroll{ animation: fxFade 1.2s var(--fx-ease) .9s both; }
  @keyframes fxFade{ from{opacity:0} to{opacity:1} }
}

/* ============================================================
   2. SCROLL PROGRESS BAR
   ============================================================ */
.fx-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 1100;
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   3. CARD 3D TILT + CURSOR SPOTLIGHT
   ============================================================ */
.fx-tilt{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease);
}
/* keep real content above the spotlight layer */
.fx-tilt > *:not(.fx-spot){ position: relative; z-index: 1; }

.fx-spot{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity .4s ease;
  background:
    radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
      var(--fx-spot), transparent 60%);
}
.fx-tilt:hover .fx-spot{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .fx-tilt{ transform: none !important; }
}

/* ============================================================
   4. BUTTONS — sheen sweep + ripple
   ============================================================ */
.btn-primary, .btn-blue, .nav-cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after, .btn-blue::after, .nav-cta::after{
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .65s var(--fx-ease);
  pointer-events: none;
  z-index: 2;
}
.btn-primary:hover::after, .btn-blue:hover::after, .nav-cta:hover::after{ left: 150%; }

/* magnetic smooth-return */
.fx-magnetic{ transition: transform .35s var(--fx-ease); }
@media (prefers-reduced-motion: reduce){ .fx-magnetic{ transition: none; } }

/* JS ripple */
.fx-ripple{
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 1;
  animation: fxRipple .6s ease-out forwards;
}
@keyframes fxRipple{
  to{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* ============================================================
   5. CUSTOM CURSOR  (only when JS enables it)
   ============================================================ */
html.fx-cursor, html.fx-cursor *{ cursor: none !important; }
/* but keep a usable caret in fields */
html.fx-cursor input,
html.fx-cursor textarea,
html.fx-cursor select,
html.fx-cursor [contenteditable="true"]{ cursor: text !important; }

.fx-cursor-dot, .fx-cursor-ring{
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483600;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.fx-cursor-dot{
  width: 6px; height: 6px;
  background: var(--accent);
}
.fx-cursor-ring{
  width: 34px; height: 34px;
  border: 1.5px solid rgba(37,99,235,.7);
  transition: width .25s var(--fx-ease), height .25s var(--fx-ease),
              border-color .25s ease, background-color .25s ease, opacity .25s ease;
}
html.fx-cursor.cursor-ready .fx-cursor-dot,
html.fx-cursor.cursor-ready .fx-cursor-ring{ opacity: 1; }

.fx-cursor-ring.is-hover{
  width: 56px; height: 56px;
  border-color: var(--accent);
  background: var(--fx-spot-2);
}
.fx-cursor-ring.is-down{ width: 26px; height: 26px; }

/* ============================================================
   6. MICRO-INTERACTIONS
   ============================================================ */
/* footer social pop */
.footer-social a{ transition: var(--transition), transform .3s var(--fx-ease); }
.footer-social a:hover{ transform: translateY(-3px); }

/* nav cta keeps its lift but a touch springier */
.nav-cta{ transition: var(--transition), transform .3s var(--fx-ease); }

/* portfolio overlay text slides up a hair on reveal */
@media (prefers-reduced-motion: no-preference){
  .portfolio-item .portfolio-overlay h4,
  .portfolio-item .portfolio-overlay span{
    transform: translateY(10px);
    transition: transform .45s var(--fx-ease);
  }
  .portfolio-item:hover .portfolio-overlay h4,
  .portfolio-item:hover .portfolio-overlay span{ transform: translateY(0); }
}

/* ============================================================
   ADD-ON: Floating WhatsApp button + footer social icons
   ============================================================ */

/* ---- Floating WhatsApp button (bottom-right, site-wide) ---- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:9990;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-float svg{ width:32px; height:32px; fill:#fff; position:relative; z-index:1; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 12px 30px rgba(37,211,102,.6); }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; z-index:0;
}
@media (prefers-reduced-motion: no-preference){
  .wa-float::after{ animation:waPulse 2.2s ease-out infinite; }
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.75); opacity:0; }
  100%{ transform:scale(1.75); opacity:0; }
}
@media (max-width:600px){
  .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-float svg{ width:28px; height:28px; }
}

/* ---- Footer social row (round icon buttons) ---- */
.footer-social{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:.85rem; }
.footer-social-label{ font-size:.85rem; opacity:.65; margin-right:2px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.footer-social a svg{ width:18px; height:18px; fill:currentColor; }
.footer-social a:hover{ transform:translateY(-3px); background:var(--primary); border-color:var(--primary); }
.footer-social a.wa:hover{ background:#25D366; border-color:#25D366; }