/* ==========================================================================
   Ramah motion: styles for assets/js/motion.js and the sticky header.
   Entrance hidden states apply only under html.ramah-motion (added by JS), so
   without JS or with reduced motion all content is visible.
   ========================================================================== */

/* ---------- Sticky header (core.js toggles .is-scrolled / .is-hidden) ---------- */
/* Out of flow already (was absolute), so fixed does not move the page on load. */
.ramah-header { position: fixed; transition: transform 0.35s var(--ramah-ease), background-color 0.35s ease, backdrop-filter 0.35s ease; }
.ramah-header__inner { transition: min-block-size 0.35s var(--ramah-ease), padding-block 0.35s var(--ramah-ease); }
.ramah-header__logo img { transition: transform 0.35s var(--ramah-ease); }
.ramah-header.is-scrolled { background-color: rgb(28 28 30 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ramah-header.is-scrolled .ramah-header__inner { min-block-size: 72px; padding-block: 5px; }
.ramah-header.is-scrolled .ramah-header__logo img { transform: scale(0.78); }
.ramah-header.is-hidden { transform: translate3d(0, -100%, 0); }
/* A backdrop-filter would make the fixed mobile menu relative to the header box. */
.ramah-nav-open .ramah-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 1023px) {
	.ramah-header.is-scrolled .ramah-header__inner { min-block-size: 64px; }
}

/* ---------- Scroll progress hairline ---------- */
.ramah-progress { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 60; block-size: 2px; background: var(--ramah-red-500, #a6192e); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
:root[dir="rtl"] .ramah-progress { transform-origin: right center; }
.admin-bar .ramah-progress { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .ramah-progress { inset-block-start: 46px; } }

/* ---------- Entrances (data-anim) ---------- */
.ramah-motion [data-anim]:not(.is-in) { opacity: 0; }
.ramah-motion [data-anim="rise"]:not(.is-in) { transform: translate3d(0, 28px, 0); }
.ramah-motion [data-anim="slide-start"]:not(.is-in), .ramah-motion [data-anim="slide-end"]:not(.is-in) { transform: translate3d(var(--ramah-m-x), 0, 0); }
.ramah-motion [data-anim="zoom-in"]:not(.is-in) { transform: scale(0.92); }
.ramah-motion [data-anim="blur-in"]:not(.is-in) { filter: blur(12px); }
.ramah-motion [data-anim="mask-up"]:not(.is-in), .ramah-motion [data-anim="mask-start"]:not(.is-in) { opacity: 1; clip-path: var(--ramah-m-clip); }

/* Start = inline-start: right in RTL, left in LTR. */
[data-anim="slide-start"] { --ramah-m-x: -48px; }
[data-anim="slide-end"] { --ramah-m-x: 48px; }
:root[dir="rtl"] [data-anim="slide-start"] { --ramah-m-x: 48px; }
:root[dir="rtl"] [data-anim="slide-end"] { --ramah-m-x: -48px; }
[data-anim="mask-up"] { --ramah-m-clip: inset(100% 0 0 0); }
[data-anim="mask-start"] { --ramah-m-clip: inset(0 100% 0 0); }
:root[dir="rtl"] [data-anim="mask-start"] { --ramah-m-clip: inset(0 0 0 100%); }

.ramah-motion [data-anim].is-in { animation-duration: 0.8s; animation-timing-function: var(--ramah-ease); animation-fill-mode: both; animation-delay: var(--ramah-delay, 0s); }
.ramah-motion [data-anim="rise"].is-in { animation-name: ramah-m-rise; }
.ramah-motion [data-anim="fade"].is-in { animation-name: ramah-m-fade; }
.ramah-motion [data-anim="slide-start"].is-in, .ramah-motion [data-anim="slide-end"].is-in { animation-name: ramah-m-slide; }
.ramah-motion [data-anim="zoom-in"].is-in { animation-name: ramah-m-zoom; }
.ramah-motion [data-anim="blur-in"].is-in { animation-name: ramah-m-blur; animation-duration: 1.1s; }
.ramah-motion [data-anim="mask-up"].is-in, .ramah-motion [data-anim="mask-start"].is-in { animation-name: ramah-m-mask; animation-duration: 1.1s; }
.ramah-motion [data-anim].is-in:not(.is-done) { will-change: transform, opacity; }
.ramah-motion [data-anim].is-done { animation: none; }

@keyframes ramah-m-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes ramah-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ramah-m-slide { from { opacity: 0; transform: translate3d(var(--ramah-m-x), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ramah-m-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes ramah-m-blur { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes ramah-m-mask { from { clip-path: var(--ramah-m-clip); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Split words (data-split) ---------- */
.ramah-m-word { display: inline-block; }
.ramah-motion [data-split]:not(.is-in) .ramah-m-word { opacity: 0; transform: translate3d(0, 0.45em, 0); }
.ramah-motion [data-split].is-in .ramah-m-word { animation: ramah-m-word 0.9s var(--ramah-ease) both; animation-delay: var(--ramah-delay, 0s); }
@keyframes ramah-m-word { from { opacity: 0; transform: translate3d(0, 0.45em, 0); } to { opacity: 1; transform: none; } }

/* ---------- Draw (data-draw on plain elements; SVG shapes are styled inline by JS) ---------- */
.ramah-motion .ramah-m-hdraw { transform-origin: left center; transition: transform 1.2s var(--ramah-ease); }
:root[dir="rtl"] .ramah-motion .ramah-m-hdraw { transform-origin: right center; }
.ramah-motion .ramah-m-hdraw:not(.is-in) { transform: scaleX(0); }

/* ---------- Hero intro (data-hero background) ---------- */
.ramah-motion .ramah-m-kb { animation: ramah-m-kb 2.4s var(--ramah-ease) both; }
@keyframes ramah-m-kb { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- Sway (data-sway, data-sway="flag") ---------- */
.ramah-motion [data-sway] { transform-origin: top center; animation: ramah-m-sway var(--ramah-sway-dur, 6s) ease-in-out infinite; }
.ramah-motion [data-sway="flag"] { animation-name: ramah-m-flag; transform-origin: left center; }
:root[dir="rtl"] .ramah-motion [data-sway="flag"] { transform-origin: right center; }
@keyframes ramah-m-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ramah-m-flag { 0%, 100% { transform: skewY(-1.2deg) scaleX(1); } 50% { transform: skewY(1.2deg) scaleX(0.97); } }

/* ---------- Tilt and magnetic (fine pointers only; JS sets the transform) ---------- */
.ramah-motion [data-tilt] { transition: transform 0.5s var(--ramah-ease); transform-style: preserve-3d; }
.ramah-motion [data-tilt]:hover, .ramah-motion [data-magnetic]:hover { will-change: transform; }
.ramah-motion [data-magnetic] { transition: transform 0.45s var(--ramah-ease), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

/* ---------- Card image zoom (.ramah-zoom on the card) ---------- */
.ramah-zoom { overflow: hidden; }
.ramah-zoom img { transition: transform 0.8s var(--ramah-ease); }
.ramah-zoom:is(:hover, :has(:focus-visible)) img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.ramah-zoom img { transition: none; }
	.ramah-zoom:is(:hover, :has(:focus-visible)) img { transform: none; }
}