/* RF School marketing page — what the compiled stylesheet (site.css) does not
   carry: the bundled fonts and the motion the reference did in JavaScript. */

@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url(/assets/fonts/Manrope-400.ttf) format("truetype"); }
@font-face { font-family: Manrope; font-weight: 500; font-display: swap; src: url(/assets/fonts/Manrope-500.ttf) format("truetype"); }
@font-face { font-family: Manrope; font-weight: 600; font-display: swap; src: url(/assets/fonts/Manrope-600.ttf) format("truetype"); }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/assets/fonts/Manrope-700.ttf) format("truetype"); }
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(/assets/fonts/Manrope-800.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(/assets/fonts/IBMPlexSansArabic-400.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url(/assets/fonts/IBMPlexSansArabic-500.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url(/assets/fonts/IBMPlexSansArabic-600.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url(/assets/fonts/IBMPlexSansArabic-700.ttf) format("truetype"); }

[hidden] { display: none !important; }

/* Light / dark switch: the moon offers dark, the sun offers light. */
.rf-theme .rf-i-sun { display: none; }
.dark .rf-theme .rf-i-sun { display: block; }
.dark .rf-theme .rf-i-moon { display: none; }
/* The logo is a picture on white: it keeps a white disc in dark mode. */
.dark .rf-pop { background-color: #fff; }
/* Native controls (the country list, scrollbars) follow the theme. */
html.dark { color-scheme: dark; }

/* Booking fields: a grid cell may shrink below its content, so the country
   code + number row stays inside the card on a narrow phone. */
#book .grid.gap-2 > * { min-width: 0; }

/* Background waves: translate only, so they stay on the GPU. */
@keyframes wave-drift-ltr { from { transform: translate3d(-10%, 0, 0); } to { transform: translate3d(10%, 0, 0); } }
@keyframes wave-drift-rtl { from { transform: translate3d(10%, 0, 0); } to { transform: translate3d(-10%, 0, 0); } }
.wave-layer {
  animation: wave-drift-ltr 16s linear infinite alternate;
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
  backface-visibility: hidden;
}
.wave-layer.slow { animation-duration: 26s; animation-direction: alternate-reverse; }
[dir="rtl"] .wave-layer { animation-name: wave-drift-rtl; }
@media (max-width: 768px) {
  .wave-layer { animation-duration: 10s; }
  .wave-layer.slow { animation-duration: 16s; }
  .wave-layer path { opacity: 0.7; stroke-width: 1.6; }
}

/* Hero: the logo pops in, the text rises. */
@keyframes rf-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes rf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rf-pop { animation: rf-pop 0.6s ease-out both; }
.rf-rise { animation: rf-rise 0.5s ease-out 0.1s both; }
.rf-static .rf-pop, .rf-static .rf-rise { animation: none; }

/* Publishers strip: two copies of the list, moved by half its width. */
@keyframes rf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rf-marquee { animation: rf-marquee 22s linear infinite; }

/* Reveal on scroll. Hidden only when scripts run (html.js), so the page is
   complete without them. */
.js .rf-reveal {
  opacity: 0;
  transform: translateY(var(--ry, 16px)) scale(var(--rs, 1));
  transition: opacity var(--rd, 0.5s) ease-out, transform var(--rd, 0.5s) ease-out;
  transition-delay: var(--rdl, 0s);
}
.js .rf-reveal.in { opacity: 1; transform: none; }
.js .rf-reveal.rf-instant { transition: none; }
/* Once shown, the card answers the pointer at once (no reveal delay). */
.js .rf-reveal.done {
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease-out;
  transition-delay: 0s;
}
.js .rf-lift.done:hover { transform: translateY(-3px); }

/* Quick-contact menu. */
@keyframes rf-fab-in { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: none; } }
.rf-fab-menu { animation: rf-fab-in 0.2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .wave-layer, .rf-pop, .rf-rise, .rf-marquee, .rf-fab-menu { animation: none; }
  .js .rf-reveal { opacity: 1; transform: none; transition: none; }
}