/* Fruit Factory — cinematic layer (page curtain, grain, progress, reveals). Shared by index + career. */
:root{ --fx-ease:cubic-bezier(.77,0,.18,1); --fx-out:cubic-bezier(.16,1,.3,1); }
html{ overflow-anchor:none; }

/* ---- film grain + vignette ---- */
body::after{
  content:""; position:fixed; inset:-60%; z-index:9000; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:fxGrain 1.1s steps(6) infinite;
}
@keyframes fxGrain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-5%,-2%)} 80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)} }

/* ---- scroll progress + back to top ---- */
.fx-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9500; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--mango),var(--pink),var(--green)); pointer-events:none; }
[dir="rtl"] .fx-progress{ transform-origin:100% 50%; }
.fx-top{
  position:fixed; z-index:56; inset-inline-start:24px; bottom:24px; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff; cursor:pointer; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,var(--pink),#b80f5c); box-shadow:0 14px 34px -10px rgba(240,25,122,.7);
  opacity:0; transform:translateY(24px) scale(.8); pointer-events:none; transition:opacity .4s var(--fx-out), transform .5s var(--fx-out);
}
.fx-top.show{ opacity:1; transform:none; pointer-events:auto; }
.fx-top:hover{ transform:translateY(-5px) scale(1.06); }
.fx-top svg{ width:22px; height:22px; }

/* ---- scroll reveals (added by fx.js) ---- */
.fx-r{ opacity:0; transform:translateY(46px); filter:blur(6px); transition:opacity .9s var(--fx-out), transform .9s var(--fx-out), filter .9s var(--fx-out); transition-delay:var(--d,0ms); }
.fx-r.in{ opacity:1; transform:none; filter:none; }

/* ---- hero entrance ---- */
@keyframes fxRise{ from{ opacity:0; transform:translateY(60px); filter:blur(10px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes fxLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion:reduce){
  body::after{ display:none !important; }
  .fx-r{ opacity:1; transform:none; filter:none; transition:none; }
  .fx-top{ transition:none; }
}