/* Motion graphics and signature touches (js/motion.js) — both worlds. */

/* film grain */
.fx-grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-size: 140px 140px; animation: fxGrain .9s steps(6) infinite; }
@keyframes fxGrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* scroll progress */
.fx-progress { position: fixed; left: 0; right: 0; top: 0; height: 1.5px; z-index: 40; pointer-events: none; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(230,192,137,0), #e6c089 30%, #fff2d6 70%, rgba(230,192,137,.4)); box-shadow: 0 0 10px rgba(230,192,137,.6); }
html[dir="rtl"] .fx-progress { transform-origin: right; }

/* gold dust */
/* (only over the Featured Edition: js/motion.js fades it in and out with the film) */
.fx-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 14; pointer-events: none; mix-blend-mode: screen; opacity: 0; }

/* opening curtain */
.fx-curtain { position: fixed; inset: 0; z-index: 49; pointer-events: none; }
.fx-curtain .fc-half { position: absolute; top: 0; bottom: 0; width: 50.5%; background: radial-gradient(ellipse at 100% 50%, #22060f, #0a0205 75%); transition: transform 1.9s cubic-bezier(.77,0,.18,1); }
.fx-curtain .fc-l { left: 0; }
.fx-curtain .fc-r { right: 0; background: radial-gradient(ellipse at 0% 50%, #22060f, #0a0205 75%); }
.fx-curtain .fc-line { position: absolute; left: 50%; top: 50%; width: 1px; height: 0; translate: -50% -50%; background: linear-gradient(transparent, #e6c089, transparent); box-shadow: 0 0 18px rgba(230,192,137,.8); transition: height .9s cubic-bezier(.2,.7,.2,1), opacity .8s 1.1s; }
.fx-curtain .fc-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; font-family: var(--serif, serif); font-size: clamp(18px, 2.2vw, 28px); letter-spacing: .6em !important; padding-left: .6em; color: #f4e7da; white-space: nowrap; transition: opacity .7s .5s, letter-spacing 1.6s cubic-bezier(.2,.7,.2,1); }
.fx-curtain .fc-mark span { font-style: normal; }
.fx-curtain.open .fc-line { height: 100vh; opacity: 0; }
.fx-curtain.open .fc-l { transform: translateX(-101%); transition-delay: .55s; }
.fx-curtain.open .fc-r { transform: translateX(101%); transition-delay: .55s; }
.fx-curtain.open .fc-mark { opacity: 0; letter-spacing: 1.1em !important; }

/* running bands */
.fx-marquee { position: relative; overflow: hidden; direction: ltr; padding-block: clamp(14px, 1.8vw, 22px); background: #0c0306; border-block: 1px solid rgba(230,192,137,.16); }
.fx-marquee .fm-track { display: flex; width: max-content; direction: ltr; animation: fxRun calc(48s - 30s * var(--scroll-boost, 0)) linear infinite; }
.fx-marquee .fm-run { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); padding-right: clamp(22px, 3vw, 46px); white-space: nowrap; }
.fx-marquee span { font-family: "Bodoni Moda", var(--display, serif); font-style: italic; font-size: clamp(20px, 2.6vw, 40px); color: rgba(244,231,218,.86); letter-spacing: .02em !important; }
.fx-marquee span:nth-child(4n+1) { color: #e6c089; }
.fx-marquee i { font-style: normal; font-size: clamp(10px, 1vw, 14px); color: #e6c089; opacity: .8; }
.fx-marquee.rev .fm-track { animation-direction: reverse; }
@keyframes fxRun { to { transform: translateX(-50%); } }

/* letter reveals */
.fx-word { display: inline-block; white-space: nowrap; }
.fx-ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(4deg); filter: blur(6px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), filter .9s; transition-delay: calc(var(--i) * 28ms); }
.fx-in .fx-ch { opacity: 1; transform: none; filter: none; }

/* sound bars */
.fx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; margin-inline-end: 7px; vertical-align: -1px; }
.fx-eq b { display: block; width: 2px; height: 10px; background: currentColor; transform-origin: bottom; transform: scaleY(.2); border-radius: 1px; opacity: .85; }

/* pointer ring (computers only) */
.fx-ring { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.fx-ring.on { opacity: 1; }
.fx-ring::before { content: ""; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(230,192,137,.75); transition: transform .45s cubic-bezier(.2,.7,.2,1), background-color .3s, border-color .3s; }
.fx-ring.big::before { transform: scale(1.9); background: rgba(230,192,137,.08); border-color: rgba(255,236,200,.9); }
.fx-ring.lab::before { transform: scale(2.9); background: rgba(12,3,6,.42); backdrop-filter: blur(2px); }
.fx-ring.press::before { transform: scale(.8); }
.fx-ring .fr-label { position: absolute; left: 0; top: 0; translate: -50% -50%; font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 12px; color: #f4e7da; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.fx-ring.lab .fr-label { opacity: 1; }

/* buttons that lean toward the pointer */
.fx-mag { transition: translate .5s cubic-bezier(.2,.7,.2,1); }

/* the house words band before the motto */
.motto + .fx-marquee, .fx-marquee + .motto { border-top: 0; }

@media (max-width: 760px) {
  .fx-grain { opacity: .045; }
}
.motion-reduced .fx-grain { animation: none; }
.motion-reduced .fx-marquee .fm-track { animation-duration: 120s; }
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .fx-marquee .fm-track { animation: none !important; }
  .fx-ch { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Android phones: no blend modes on full-screen layers, no per-frame filter on moving canvases */
.android .fx-dust { mix-blend-mode: normal; }
.android #campaigns .cp-model { filter: none; }
.android .fx-progress { box-shadow: none; }
.fx-marquee.fm-off .fm-track { animation-play-state: paused; }