/* Al Khawaja v7 — cinematic dollar & euro hero motion.
   Pure CSS, layered like a short film: opening shot, falling banknotes,
   coin flips, a currency swap, a light vignette.
   Paused by the motion toggle (.motion-paused) and by reduced-motion settings. */

/* ---------- Opening shot ---------- */
.hero-backdrop{animation:scene-open 2.6s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*{animation:copy-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(1){animation-delay:.55s}
.hero-copy>:nth-child(2){animation-delay:.75s}
.hero-copy>:nth-child(3){animation-delay:.95s}
.hero-copy>:nth-child(4){animation-delay:1.15s}
.hero-copy>:nth-child(5){animation-delay:1.35s}
.hero-bottom{animation:copy-fade 1.4s ease 1.6s both}
@keyframes scene-open{0%{opacity:0;scale:1.14}55%{opacity:1}100%{opacity:1;scale:1}}
@keyframes copy-rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes copy-fade{from{opacity:0}to{opacity:1}}


/* ---------- Falling banknotes ---------- */
.money-rain{position:absolute;inset:0;overflow:hidden;perspective:900px;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 78%);mask-image:linear-gradient(90deg,#000 40%,transparent 78%)}
.bill{position:absolute;top:-150px;left:var(--x);width:calc(150px * var(--s));aspect-ratio:2.3;transform-style:preserve-3d;opacity:var(--o);animation:bill-fall var(--t) linear var(--d) infinite;will-change:transform}
.bill>i{position:absolute;inset:0;border-radius:calc(5px * var(--s));backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;font-style:normal;font-family:Georgia,'Times New Roman',serif}
.bill-back{transform:rotateY(180deg)}
.bill>i:before{content:'';position:absolute;inset:calc(5px * var(--s));border:1px solid currentColor;border-radius:calc(3px * var(--s));opacity:.45}
.bill>i:after{content:'';position:absolute;width:30%;aspect-ratio:.82;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid currentColor;opacity:.35;background:radial-gradient(circle at 50% 38%,#fff3 0 20%,transparent 21%)}
.bill b{position:absolute;top:8%;left:7%;font-weight:700;font-size:calc(17px * var(--s));line-height:1}
.bill u{position:absolute;bottom:8%;right:7%;text-decoration:none;font-weight:700;font-size:calc(17px * var(--s));line-height:1}
.bill em{position:absolute;right:9%;top:50%;translate:0 -50%;font-style:normal;font-size:calc(30px * var(--s));line-height:1;opacity:.9}
.bill-back b{font-size:calc(34px * var(--s));top:50%;left:50%;translate:-50% -50%}
.bill-back em{right:auto;left:9%}
.bill-usd>i{color:#2f4127;background:linear-gradient(115deg,#c3cfa9 0%,#9fb184 28%,#d8dcb8 52%,#93a679 74%,#b8c49b 100%)}
.bill-usd .bill-back{background:linear-gradient(115deg,#9fb184,#c7d1ad 50%,#8a9c70)}
.bill-eur>i{color:#5b3110;background:linear-gradient(115deg,#f1c487 0%,#d9934d 30%,#f5d39c 55%,#c98142 78%,#e9b06c 100%)}
.bill-eur .bill-back{background:linear-gradient(115deg,#d9934d,#f3cd93 50%,#c47a3c)}
.bill>i:last-child:before{inset:calc(9px * var(--s))}
@keyframes bill-fall{
  0%{transform:translate3d(0,0,0) rotateZ(var(--r)) rotateX(0deg) rotateY(0deg)}
  25%{transform:translate3d(calc(var(--dx) * .6),340px,40px) rotateZ(calc(var(--r) + 50deg)) rotateX(140deg) rotateY(50deg)}
  50%{transform:translate3d(calc(var(--dx) * -.2),680px,-30px) rotateZ(calc(var(--r) + 110deg)) rotateX(250deg) rotateY(110deg)}
  75%{transform:translate3d(calc(var(--dx) * .8),1020px,20px) rotateZ(calc(var(--r) + 160deg)) rotateX(400deg) rotateY(150deg)}
  100%{transform:translate3d(var(--dx),1380px,0) rotateZ(calc(var(--r) + 220deg)) rotateX(540deg) rotateY(180deg)}
}

/* ---------- Coins: 3D turn and periodic flip ---------- */
.currency-coin{animation:coin-turn 9s ease-in-out infinite;will-change:transform}
.coin-euro{animation-duration:11s;animation-delay:-4s}
@keyframes coin-turn{
  0%,100%{transform:rotateY(-22deg) rotateX(11deg) rotateZ(-16deg) scaleX(1)}
  40%{transform:rotateY(18deg) rotateX(4deg) rotateZ(-10deg) scaleX(1)}
  47%{transform:rotateY(12deg) rotateX(6deg) rotateZ(-12deg) scaleX(.05)}
  54%{transform:rotateY(6deg) rotateX(8deg) rotateZ(-14deg) scaleX(1)}
  80%{transform:rotateY(-30deg) rotateX(12deg) rotateZ(-18deg) scaleX(1)}
}

/* ---------- Currency swap: dollar and euro trade places ---------- */
.floating-dollar{animation:dollar-float 7.5s ease-in-out infinite,swap-dollar 18s cubic-bezier(.65,0,.35,1) 3s infinite}
.floating-euro{animation:euro-float 8.5s ease-in-out infinite,swap-euro 18s cubic-bezier(.65,0,.35,1) 3s infinite}
@keyframes swap-dollar{
  0%,30%{translate:0 0;scale:1;z-index:4}
  36%{translate:-30% -35%;scale:.82;z-index:4}
  42%,72%{translate:-46% -60%;scale:.7;z-index:2}
  78%{translate:-18% -28%;scale:.85;z-index:2}
  84%,100%{translate:0 0;scale:1;z-index:4}
}
@keyframes swap-euro{
  0%,30%{translate:0 0;scale:1;z-index:3}
  36%{translate:40% 50%;scale:1.2;z-index:5}
  42%,72%{translate:65% 86%;scale:1.42;z-index:5}
  78%{translate:30% 42%;scale:1.18;z-index:5}
  84%,100%{translate:0 0;scale:1;z-index:3}
}

@keyframes swap-dollar-sm{
  0%,30%{translate:0 0;scale:1;z-index:4}
  42%,72%{translate:-40% -42%;scale:.72;z-index:2}
  84%,100%{translate:0 0;scale:1;z-index:4}
}
@keyframes swap-euro-sm{
  0%,30%{translate:0 0;scale:1;z-index:3}
  42%,72%{translate:58% 52%;scale:1.25;z-index:5}
  84%,100%{translate:0 0;scale:1;z-index:3}
}

/* Exchange flash between the coins at the moment they swap */
.exchange-pulse{position:absolute;left:34%;top:38%;width:220px;aspect-ratio:1;margin:-110px 0 0 -110px;border-radius:50%;border:2px solid #f3d48d;background:radial-gradient(closest-side,transparent 70%,#e9c77c33);will-change:transform,opacity;opacity:0;pointer-events:none;z-index:6;animation:exchange-pulse 18s ease-out 3s infinite}
.pulse-late{animation-delay:15s}
@keyframes exchange-pulse{0%,34%{opacity:0;scale:.2}37%{opacity:.9;scale:.6}45%{opacity:0;scale:2.2}100%{opacity:0;scale:2.2}}

/* ---------- Vignette and quieter background ---------- */
.orbital-two,.orbital-three{animation:none}
.ambient-one{animation:none;opacity:.85}
.hero-shade{background-image:linear-gradient(270deg,rgba(9,11,13,.75) 0%,rgba(9,11,13,.45) 36%,transparent 57%),radial-gradient(ellipse at 40% 50%,transparent 50%,#05070880 100%)}
@media(max-width:860px){.hero-shade{background-image:linear-gradient(180deg,#090b0d77 0%,#090b0d11 45%,transparent 75%,#090b0d44 100%)}}


/* Stop every hero animation while the hero is scrolled out of view. */
.hero-offscreen .hero *,.hero-offscreen .hero *:before,.hero-offscreen .hero *:after{animation-play-state:paused!important}
@media(min-width:861px){.bill:nth-child(n+10){display:none}}

/* Lite mode (set by app.v7.js on slow devices): keep gentle floating, drop heavy layers. */
.motion-lite .money-rain,.motion-lite .exchange-pulse{display:none}
.motion-lite .currency-coin{animation:none}
.motion-lite .floating-dollar{animation:dollar-float 7.5s ease-in-out infinite}
.motion-lite .floating-euro{animation:euro-float 8.5s ease-in-out infinite}
.motion-lite .orbital,.motion-lite .orbit-dot,.motion-lite .ambient-symbol{animation:none}

/* ---------- Sizes ---------- */
@media(max-width:860px){
  /* Headline sits above the coins on small screens: keep notes in the lower scene. */
  .money-rain{-webkit-mask-image:linear-gradient(180deg,transparent 0 44%,#000 60%);mask-image:linear-gradient(180deg,transparent 0 44%,#000 60%)}
  .floating-dollar{animation-name:dollar-float,swap-dollar-sm}
  .floating-euro{animation-name:euro-float,swap-euro-sm}
  .bill:nth-child(n+7){display:none}
  .exchange-pulse{width:170px;margin:-85px 0 0 -85px}
}
@media(max-width:560px){
  .bill{width:calc(112px * var(--s))}
  .bill b,.bill u{font-size:calc(13px * var(--s))}
  .bill em{font-size:calc(23px * var(--s))}
  .bill-back b{font-size:calc(26px * var(--s))}
  .bill:nth-child(n+6){display:none}
}

/* ---------- Respect pause and accessibility settings ---------- */
@media(prefers-reduced-motion:reduce){
  .money-rain,.exchange-pulse{display:none}
  .hero-backdrop,.hero-copy>*,.hero-bottom{animation:none;opacity:1}
}