/* Ravak Motion Hero — widget-scoped styles. No global scrolling or theme overrides. */
.rvk-motion-hero {
  --rvk-hero-height: 100svh;
  --rvk-mobile-hero-height: 88svh;
  --rvk-collage-width: 1400px;
  --rvk-collage-height: 76vh;
  --rvk-pad: 24px;
  --rvk-gap: 18px;
  --rvk-mobile-gap: 28px;
  --rvk-mobile-pad: 16px;
  --rvk-mobile-width: 92%;
  --rvk-mobile-panel-height: 68vw;
  --rvk-text-width: 88%;
  --rvk-text-bottom: 44px;
  --rvk-text-x: 50%;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  overflow: clip;
  background: #181818;
  isolation: isolate;
}
.rvk-motion-hero *, .rvk-motion-hero *::before, .rvk-motion-hero *::after { box-sizing: border-box; }
.rvk-motion-hero .rvk-stage {
  position: relative;
  width: 100%;
  height: var(--rvk-hero-height);
  min-height: 320px;
  overflow: clip;
  isolation: isolate;
  direction: ltr;
}
@media (min-width: 1024px) {
  .rvk-motion-hero.rvk-mode-min .rvk-stage { height: max(100svh, var(--rvk-hero-height)); }
}
.rvk-motion-hero .rvk-collage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(100% - 2 * var(--rvk-pad)), var(--rvk-collage-width));
  height: min(calc(100% - 20px), var(--rvk-collage-height));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rvk-motion-hero .rvk-target-main {
  position: absolute;
  left: 27%; top: 7%; width: 46%; height: 86%;
  pointer-events: none;
}
.rvk-motion-hero .rvk-side {
  position: absolute;
  z-index: 2;
  width: var(--rvk-slot-w);
  height: var(--rvk-slot-h);
  left: var(--rvk-slot-x);
  top: var(--rvk-slot-y);
  will-change: transform, opacity;
  pointer-events: auto;
}
.rvk-motion-hero .rvk-slot--lt { --rvk-slot-w: 21%; --rvk-slot-h: 31%; --rvk-slot-x: 2%; --rvk-slot-y: 5%; }
.rvk-motion-hero .rvk-slot--lb { --rvk-slot-w: 24%; --rvk-slot-h: 36%; --rvk-slot-x: 0%; --rvk-slot-y: 58%; }
.rvk-motion-hero .rvk-slot--rt { --rvk-slot-w: 20%; --rvk-slot-h: 34%; --rvk-slot-x: 78%; --rvk-slot-y: 2%; }
.rvk-motion-hero .rvk-slot--rb { --rvk-slot-w: 23%; --rvk-slot-h: 38%; --rvk-slot-x: 76%; --rvk-slot-y: 56%; }
@media (min-width: 1024px) {
  .rvk-motion-hero .rvk-side .rvk-media-frame {
    width: calc(100% - var(--rvk-gap) / 2);
    height: calc(100% - var(--rvk-gap) / 2);
  }
}
.rvk-motion-hero .rvk-main {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform-origin: top left;
  will-change: transform, width, height, opacity;
}
.rvk-motion-hero .rvk-media-frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #292929;
}
.rvk-motion-hero .rvk-main .rvk-media-frame { border-radius: 18px; }
.rvk-motion-hero .rvk-media-element,
.rvk-motion-hero .rvk-empty-media,
.rvk-motion-hero .rvk-mobile-poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.rvk-motion-hero .rvk-media-element { object-fit: cover; object-position: center; }
.rvk-motion-hero .rvk-video { z-index: 1; }
.rvk-motion-hero .rvk-video-poster { z-index: 0; }
.rvk-motion-hero .rvk-video.rvk-video-failed { display: none; }
.rvk-motion-hero .rvk-mobile-poster { display: none; }
.rvk-motion-hero .rvk-empty-media {
  background: linear-gradient(145deg, #41413b, #232321 62%, #111);
}
.rvk-motion-hero .rvk-empty-main {
  background: radial-gradient(ellipse at 54% 46%, #565045 0%, #34302b 40%, #101010 100%);
}
.rvk-motion-hero .rvk-overlay {
  position: absolute;
  z-index: 4;
  bottom: var(--rvk-text-bottom);
  left: var(--rvk-text-x);
  width: max-content;
  max-width: var(--rvk-text-width);
  padding: 8px 18px;
  transform: translateX(-50%);
  text-align: center;
  direction: rtl;
  pointer-events: none;
  color: #fff;
  font-size: clamp(20px, 3.2vw, 58px);
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 2px 22px #0009;
}
.rvk-motion-hero.rvk-with-gradient .rvk-main .rvk-media-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to top, #0008, transparent);
}

/* Compact scroll cue: a small mouse with its wheel plus two staggered upward arrows. */
.rvk-motion-hero {
  --rvk-scroll-hint-size: 18px;
  --rvk-scroll-hint-gap: 12px;
  --rvk-scroll-hint-x: 0px;
  --rvk-scroll-hint-y: 0px;
}
.rvk-motion-hero .rvk-overlay.rvk-overlay--hint-side {
  max-width: calc(var(--rvk-text-width) - (var(--rvk-scroll-hint-size) * 2) - (var(--rvk-scroll-hint-gap) * 2));
}
.rvk-motion-hero .rvk-scroll-hint {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--rvk-scroll-hint-size) * .42);
  color: #fff;
  font-size: var(--rvk-scroll-hint-size);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.rvk-motion-hero .rvk-scroll-hint--above {
  left: calc(50% + var(--rvk-scroll-hint-center-shift, 0px));
  bottom: calc(100% + var(--rvk-scroll-hint-gap) - var(--rvk-scroll-hint-y));
  transform: translateX(-50%);
}
.rvk-motion-hero .rvk-scroll-hint--left {
  right: calc(100% + var(--rvk-scroll-hint-gap) - var(--rvk-scroll-hint-x));
  top: calc(50% + var(--rvk-scroll-hint-y));
  transform: translateY(-50%);
}
.rvk-motion-hero .rvk-scroll-hint--right {
  left: calc(100% + var(--rvk-scroll-hint-gap) + var(--rvk-scroll-hint-x));
  top: calc(50% + var(--rvk-scroll-hint-y));
  transform: translateY(-50%);
}
.rvk-motion-hero .rvk-scroll-hint-mouse {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: calc(var(--rvk-scroll-hint-size) * 1.12);
  height: calc(var(--rvk-scroll-hint-size) * 1.78);
  border: 1.4px solid currentColor;
  border-radius: 999px;
  opacity: .9;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 9%, transparent);
}
.rvk-motion-hero .rvk-scroll-hint-wheel {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 2px;
  height: 22%;
  border-radius: 3px;
  background: currentColor;
  transform: translateX(-50%);
  animation: rvkMotionMouseWheel 1.65s cubic-bezier(.45,0,.25,1) infinite;
}
.rvk-motion-hero .rvk-scroll-hint-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--rvk-scroll-hint-size) * .85);
  height: calc(var(--rvk-scroll-hint-size) * 1.7);
}
.rvk-motion-hero .rvk-scroll-hint-arrows svg {
  display: block;
  width: 100%;
  height: 58%;
  overflow: visible;
  animation: rvkMotionArrowUp 1.45s cubic-bezier(.45,0,.25,1) infinite;
}
.rvk-motion-hero .rvk-scroll-hint-arrows svg + svg { animation-delay: .28s; }
@keyframes rvkMotionMouseWheel {
  0% { opacity: 0; transform: translate(-50%,0); }
  18% { opacity: 1; }
  72% { opacity: .9; transform: translate(-50%,90%); }
  100% { opacity: 0; transform: translate(-50%,125%); }
}
@keyframes rvkMotionArrowUp {
  0% { opacity: 0; transform: translateY(5px); }
  22% { opacity: .9; }
  80% { opacity: .72; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-9px); }
}
/* Static state is used in the editor, with reduced motion, and when motion is disabled. */
@media (min-width: 1024px) {
  .rvk-motion-hero.rvk-static .rvk-main {
    width: min(calc(100% - 2 * var(--rvk-pad)), var(--rvk-collage-width));
    height: min(calc(100% - 20px), var(--rvk-collage-height));
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame {
    position: absolute;
    left: 27%; top: 7%; width: 46%; height: 86%;
    pointer-events: auto;
  }
  .rvk-motion-hero.rvk-native .rvk-stage { position: sticky; top: 0; }
}
@media (max-width: 1023.98px) {
  .rvk-motion-hero .rvk-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .rvk-motion-hero .rvk-main {
    order: 0;
    position: relative;
    flex: none;
    top: auto; left: auto;
    height: var(--rvk-mobile-hero-height);
    width: 100%;
    min-height: 180px;
    transform: none;
    will-change: height;
  }
  .rvk-motion-hero .rvk-main .rvk-media-frame { border-radius: 0; }
  .rvk-motion-hero .rvk-collage {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rvk-mobile-gap);
    width: 100%;
    height: auto;
    padding: var(--rvk-mobile-gap) var(--rvk-mobile-pad);
    position: relative;
    top: auto; left: auto;
    transform: none;
    pointer-events: auto;
  }
  .rvk-motion-hero .rvk-target-main { display: none; }
  .rvk-motion-hero .rvk-side {
    position: relative;
    order: var(--rvk-mobile-order);
    top: auto; left: auto;
    width: min(var(--rvk-mobile-width), 100%);
    height: var(--rvk-mobile-panel-height);
    min-height: 180px;
    align-self: center;
    flex: none;
    will-change: transform, opacity;
  }
  .rvk-motion-hero .rvk-main .rvk-media-element { object-position: center center; }
  .rvk-motion-hero .rvk-mobile-poster { display: block; z-index: 1; }
  .rvk-motion-hero .rvk-main .rvk-video { z-index: 2; }
  .rvk-motion-hero.rvk-with-gradient .rvk-main .rvk-media-frame::after { z-index: 3; }
  .rvk-motion-hero .rvk-overlay {
    font-size: clamp(17px, 5vw, 38px);
    bottom: var(--rvk-text-bottom);
  }
  .rvk-motion-hero .rvk-scroll-hint--left { right: calc(100% + min(var(--rvk-scroll-hint-gap), 8px) - var(--rvk-scroll-hint-x)); }
  .rvk-motion-hero .rvk-scroll-hint--right { left: calc(100% + min(var(--rvk-scroll-hint-gap), 8px) + var(--rvk-scroll-hint-x)); }
}
@media (prefers-reduced-motion: reduce) {
  .rvk-motion-hero .rvk-side,
  .rvk-motion-hero .rvk-main,
  .rvk-motion-hero .rvk-overlay,
  .rvk-motion-hero .rvk-scroll-hint-arrows svg,
  .rvk-motion-hero .rvk-scroll-hint-wheel { animation: none !important; transition: none !important; }
}

/* V2 — measured, center-dominant editorial composition. All five bounds derive
   from one collage box rather than independently offset coordinates. */
.rvk-motion-hero {
  --rvk-center-width: 50%;
  --rvk-left-lower-ratio: 82%;
  --rvk-right-upper-ratio: 80%;
  --rvk-grid-line: #92855e;
  --rvk-grid-size: 44px;
  --rvk-grid-opacity: .20;
  --rvk-grid-duration: 12s;
  --rvk-grid-top-fade: 22%;
  --rvk-grid-bottom-fade: 24%;
  background-color: #0a0a0a;
}
.rvk-motion-hero > .rvk-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: var(--rvk-grid-opacity);
  background-image: linear-gradient(var(--rvk-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rvk-grid-line) 1px, transparent 1px);
  background-size: var(--rvk-grid-size) var(--rvk-grid-size);
  mask-image: linear-gradient(to bottom, transparent 0%, black var(--rvk-grid-top-fade), black calc(100% - var(--rvk-grid-bottom-fade)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--rvk-grid-top-fade), black calc(100% - var(--rvk-grid-bottom-fade)), transparent 100%);
  animation: rvk-grid-shift var(--rvk-grid-duration) linear infinite;
}
.rvk-motion-hero > .rvk-grid--down_right { --rvk-grid-x: 1; --rvk-grid-y: 1; }
.rvk-motion-hero > .rvk-grid--down_left { --rvk-grid-x: -1; --rvk-grid-y: 1; }
.rvk-motion-hero > .rvk-grid--up_right { --rvk-grid-x: 1; --rvk-grid-y: -1; }
.rvk-motion-hero > .rvk-grid--up_left { --rvk-grid-x: -1; --rvk-grid-y: -1; }
@keyframes rvk-grid-shift {
  from { background-position: 0 0; }
  to { background-position: calc(var(--rvk-grid-size) * var(--rvk-grid-x, 1)) calc(var(--rvk-grid-size) * var(--rvk-grid-y, 1)); }
}
.rvk-motion-hero > .rvk-stage { z-index: 1; }
@media (min-width: 1024px) {
  .rvk-motion-hero .rvk-collage {
    height: min(calc(100% - 52px), var(--rvk-collage-height));
    --rvk-side-room: calc((100% - var(--rvk-center-width) - 2 * var(--rvk-gap)) / 2);
  }
  .rvk-motion-hero .rvk-target-main,
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame {
    top: 0;
    left: calc((100% - var(--rvk-center-width)) / 2);
    width: var(--rvk-center-width);
    height: 100%;
  }
  .rvk-motion-hero .rvk-side {
    --rvk-slot-w: var(--rvk-side-room);
    width: var(--rvk-side-room);
    left: auto; top: auto;
  }
  .rvk-motion-hero .rvk-slot--lt { left: 0; top: 0; height: calc((100% - var(--rvk-gap) - 4%) * .55); }
  .rvk-motion-hero .rvk-slot--lb { left: 0; bottom: 4%; height: calc((100% - var(--rvk-gap) - 4%) * .45); }
  .rvk-motion-hero .rvk-slot--rt { right: 0; top: 5%; height: calc((100% - var(--rvk-gap) - 5%) * .42); }
  .rvk-motion-hero .rvk-slot--rb { right: 0; bottom: 0; height: calc((100% - var(--rvk-gap) - 5%) * .58); }
  .rvk-motion-hero .rvk-side .rvk-media-frame { width: 100%; height: 100%; }
  .rvk-motion-hero .rvk-slot--lb .rvk-media-frame { width: var(--rvk-left-lower-ratio); margin-left: auto; }
  .rvk-motion-hero .rvk-slot--rt .rvk-media-frame { width: var(--rvk-right-upper-ratio); }
  .rvk-motion-hero.rvk-static .rvk-main { pointer-events: none; }
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame { pointer-events: auto; }
}
/* Hover/focus content is not displayed or clickable without explicit activation. */
.rvk-motion-hero .rvk-hover {
  --rvk-hover-color: #fff;
  --rvk-hover-button: #ffc32e;
  --rvk-hover-backdrop: #000;
  --rvk-hover-opacity: 54%;
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: clamp(16px, 3vw, 34px);
  direction: rtl;
  color: var(--rvk-hover-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--rvk-hover-backdrop) var(--rvk-hover-opacity), transparent), transparent 115%);
  transition: opacity .38s ease, visibility .38s;
}
.rvk-motion-hero .rvk-hover-content { width: 100%; text-align: right; }
.rvk-motion-hero .rvk-hover-title { margin: 0 0 7px; font-size: clamp(18px, 2vw, 34px); line-height: 1.3; font-weight: 700; }
.rvk-motion-hero .rvk-hover-subtitle { margin: 0 0 15px; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.65; }
.rvk-motion-hero .rvk-hover-link {
  display: inline-flex;
  padding: 9px 17px;
  border: 1px solid var(--rvk-hover-button);
  border-radius: 5px;
  text-decoration: none;
  color: var(--rvk-hover-button);
  font-size: 13px;
}
.rvk-motion-hero .rvk-hover-content > * { transform: translateY(11px); opacity: 0; transition: opacity .38s ease, transform .38s ease; }
.rvk-motion-hero .rvk-hover-content > :nth-child(2) { transition-delay: .045s; }
.rvk-motion-hero .rvk-hover-content > :nth-child(3) { transition-delay: .09s; }
.rvk-motion-hero .rvk-media-frame.rvk-hover-active > .rvk-hover {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.rvk-motion-hero .rvk-media-frame.rvk-hover-active .rvk-hover-content > * { transform: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .rvk-motion-hero.rvk-static .rvk-side .rvk-media-frame:hover > .rvk-hover,
  .rvk-motion-hero.rvk-composed .rvk-side .rvk-media-frame:hover > .rvk-hover,
  .rvk-motion-hero.rvk-composed .rvk-main .rvk-media-frame:hover > .rvk-hover {
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .rvk-motion-hero.rvk-static .rvk-side .rvk-media-frame:hover .rvk-hover-content > *,
  .rvk-motion-hero.rvk-composed .rvk-media-frame:hover .rvk-hover-content > * {
    transform: none; opacity: 1;
  }
}
/* Main media content on touch devices is driven exclusively by scroll progress.
   CSS transitions are disabled because JS writes the same values every scrub frame. */
.rvk-motion-hero .rvk-main .rvk-media-frame.rvk-mobile-scroll-managed > .rvk-hover,
.rvk-motion-hero .rvk-main .rvk-media-frame.rvk-mobile-scroll-managed .rvk-hover-content > * {
  transition: none !important;
}
.rvk-motion-hero .rvk-main .rvk-media-frame.rvk-mobile-scroll-info-active > .rvk-hover {
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame:hover > .rvk-hover,
  .rvk-motion-hero.rvk-composed .rvk-main .rvk-media-frame:hover > .rvk-hover {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame:hover .rvk-hover-content > *,
  .rvk-motion-hero.rvk-composed .rvk-main .rvk-media-frame:hover .rvk-hover-content > * {
    opacity: 0; transform: translateY(11px);
  }
}
.rvk-motion-hero .rvk-hover-link:focus-visible,
.rvk-motion-hero .rvk-media-frame:focus-visible { outline: 3px solid #ffc32e; outline-offset: -4px; }
@media (max-width: 1023.98px) {
  .rvk-motion-hero .rvk-hover { padding: 20px; }
  .rvk-motion-hero .rvk-collage { --rvk-side-room: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .rvk-motion-hero > .rvk-grid { animation: none; }
  .rvk-motion-hero .rvk-hover, .rvk-motion-hero .rvk-hover-content > * { transition: none; transform: none; }
}

/* Desktop-only legacy hover fallback. Touch/coarse devices reveal the central
   information from the Hero Motion scroll progress, never from sticky :hover. */
@media (hover: hover) and (pointer: fine) {
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame:hover > .rvk-hover { opacity: 1; visibility: visible; pointer-events: auto; }
  .rvk-motion-hero.rvk-static .rvk-main .rvk-media-frame:hover .rvk-hover-content > * { opacity: 1; transform: none; }
}

/* Focus reveals server-rendered content even when JavaScript cannot load. */
.rvk-motion-hero.rvk-static .rvk-media-frame:focus-within > .rvk-hover { opacity: 1; visibility: visible; pointer-events: auto; }
.rvk-motion-hero.rvk-static .rvk-media-frame:focus-within .rvk-hover-content > * { opacity: 1; transform: none; }

/* V2.1 — mask only the grid: vertical parent mask and an independent horizontal
   pseudo-element mask. Avoid cross-browser mask-composite/intersect semantics. */
.rvk-motion-hero { --rvk-grid-side-fade: 20%; }
.rvk-motion-hero > .rvk-grid {
  background-image: none;
  animation: none;
}
.rvk-motion-hero > .rvk-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background-image: linear-gradient(var(--rvk-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rvk-grid-line) 1px, transparent 1px);
  background-size: var(--rvk-grid-size) var(--rvk-grid-size);
  animation: rvk-grid-shift var(--rvk-grid-duration) linear infinite;
}
.rvk-motion-hero > .rvk-grid--fade-all::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--rvk-grid-side-fade), black calc(100% - var(--rvk-grid-side-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black var(--rvk-grid-side-fade), black calc(100% - var(--rvk-grid-side-fade)), transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .rvk-motion-hero > .rvk-grid::before { animation: none; }
}

/* V2.2 — only fully exited media lose hit testing, never the grid or root.
   The JavaScript inert attribute additionally excludes hidden hover links from tabs. */
@media (min-width: 1024px) {
  .rvk-motion-hero.rvk-fully-exited .rvk-main,
  .rvk-motion-hero.rvk-fully-exited .rvk-side { pointer-events: none; }
}

/* Project 02: scoped title color beats global heading themes without affecting saved color. */
.rvk-motion-hero .rvk-hover .rvk-hover-title { color: var(--rvk-hover-title-color, var(--rvk-hover-color, #fff)) !important; }
/* Never display an entering side panel over the shrinking central video. */
@media (min-width:1024px) {
 .rvk-motion-hero.rvk-motion-active .rvk-side { clip-path: inset(0 var(--rvk-entry-clip-right, 0px) 0 var(--rvk-entry-clip-left, 0px)); }
}

.rvk-motion-hero { --rvk-scroll-factor: 100; }

/* Motion Hero professional hover button: preserves legacy per-panel border/text color. */
.rvk-motion-hero { --rvk-hover-button-duration:250ms; --rvk-post-exit-gap:0px; }
.rvk-motion-hero .rvk-hover-link { align-items:center;justify-content:center;min-height:40px;max-width:100%;box-sizing:border-box;line-height:1.45;transition:color var(--rvk-hover-button-duration) ease,background-color var(--rvk-hover-button-duration) ease,border-color var(--rvk-hover-button-duration) ease,box-shadow var(--rvk-hover-button-duration) ease,transform var(--rvk-hover-button-duration) ease; }
.rvk-motion-hero .rvk-hover-link:hover,.rvk-motion-hero .rvk-hover-link:focus-visible { background-color:var(--rvk-hover-button);color:#0a0a0a; }


/* RAVAK Motion Hero responsive interaction + mobile central media controls. */
.rvk-motion-hero .rvk-media-frame.rvk-mobile-info-visible > .rvk-hover { opacity:1; visibility:visible; pointer-events:none; }
.rvk-motion-hero .rvk-media-frame.rvk-mobile-info-visible > .rvk-hover .rvk-hover-content > * { opacity:1; transform:none; }
.rvk-motion-hero .rvk-media-frame.rvk-mobile-info-visible > .rvk-hover .rvk-hover-link { pointer-events:auto; }
.rvk-motion-hero.rvk-paused > .rvk-grid::before,
.rvk-motion-hero.rvk-page-hidden > .rvk-grid::before { animation-play-state:paused !important; }
@media (max-width:1023.98px) {
  .rvk-motion-hero .rvk-main {
    width:min(var(--rvk-mobile-main-width,100%),var(--rvk-mobile-main-max-width,100%));
    max-width:calc(100% - 2 * var(--rvk-mobile-main-edge-gap,0px));
    align-self:center;
    margin-inline:auto;
    transform:translate3d(var(--rvk-mobile-main-x,0px),var(--rvk-mobile-main-y,0px),0) scale(calc(var(--rvk-mobile-main-scale,100) / 100));
    transform-origin:center top;
    height:var(--rvk-mobile-main-height,var(--rvk-mobile-hero-height));
  }
  .rvk-motion-hero.rvk-has-mobile-main-settings .rvk-main .rvk-media-frame {
    border-radius:var(--rvk-mobile-main-radius,14px) !important;
  }
  .rvk-motion-hero.rvk-has-mobile-main-settings .rvk-main .rvk-media-element {
    object-fit:var(--rvk-mobile-main-fit,cover);
    object-position:var(--rvk-mobile-main-object-position,center center);
  }
  .rvk-motion-hero.rvk-with-gradient.rvk-has-mobile-main-settings .rvk-main .rvk-media-frame::after {
    background:linear-gradient(to top,color-mix(in srgb,#000 var(--rvk-mobile-main-overlay,42%),transparent),transparent 100%);
  }
}

/* Keep large motion layers unpromoted until this hero is actively animating. */
.rvk-motion-hero .rvk-side,
.rvk-motion-hero .rvk-main { will-change: auto; }
.rvk-motion-hero.rvk-motion-active:not(.rvk-paused):not(.rvk-page-hidden) .rvk-side { will-change: transform, opacity; }
.rvk-motion-hero.rvk-motion-active:not(.rvk-paused):not(.rvk-page-hidden) .rvk-main { will-change: transform, opacity; }
@media (max-width:1023.98px) {
  .rvk-motion-hero.rvk-motion-active:not(.rvk-paused):not(.rvk-page-hidden) .rvk-main { will-change: transform, opacity; }
}


/* Mobile panels remain visually absent until their own upward fade-in begins. */
@media (max-width: 1023.98px) {
  .rvk-motion-hero.rvk-motion-active .rvk-side { visibility: hidden; opacity: 0; will-change: transform, opacity; }
  .rvk-motion-hero.rvk-motion-active .rvk-side.rvk-mobile-entered { visibility: visible; }
}
.rvk-motion-hero .rvk-hover-link { gap: .55em; }
.rvk-motion-hero .rvk-hover-link-icon { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.rvk-motion-hero .rvk-hover-link-icon svg { width:1em; height:1em; }


/* V2.11.68 — mobile is a static, CSS-only composition. Content stays readable
   even when JavaScript or the one-shot entrance observer is unavailable. */
@media (max-width: 1023.98px) {
  .rvk-motion-hero .rvk-hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: none !important;
  }
  .rvk-motion-hero .rvk-hover-content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rvk-motion-hero .rvk-hover-link { pointer-events: auto !important; }
  .rvk-motion-hero .rvk-main,
  .rvk-motion-hero .rvk-side { will-change: auto !important; }
  .rvk-motion-hero.rvk-mobile-entrance-pending .rvk-main,
  .rvk-motion-hero.rvk-mobile-entrance-pending .rvk-overlay {
    opacity: 0;
    translate: 0 16px;
  }
  .rvk-motion-hero.rvk-mobile-entrance .rvk-main,
  .rvk-motion-hero.rvk-mobile-entrance .rvk-overlay {
    animation: rvkHeroMobileFadeUp 560ms cubic-bezier(.2,.7,.2,1) both;
  }
  .rvk-motion-hero.rvk-mobile-entrance .rvk-overlay { animation-delay: 55ms; }

  /* Side media cards reveal individually as they enter the viewport. */
  .rvk-motion-hero.rvk-mobile-side-reveal-ready .rvk-side:not(.rvk-mobile-side-entered) {
    opacity: 0;
    translate: 0 18px;
  }
  .rvk-motion-hero.rvk-mobile-side-reveal-ready .rvk-side.rvk-mobile-side-entered {
    animation: rvkHeroMobileFadeUp 560ms cubic-bezier(.2,.7,.2,1) both;
  }
}
@keyframes rvkHeroMobileFadeUp {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rvk-motion-hero.rvk-mobile-entrance-pending .rvk-main,
  .rvk-motion-hero.rvk-mobile-entrance-pending .rvk-overlay {
    opacity: 1 !important;
    translate: none !important;
  }
  .rvk-motion-hero.rvk-mobile-entrance .rvk-main,
  .rvk-motion-hero.rvk-mobile-entrance .rvk-overlay { animation: none !important; }
  .rvk-motion-hero.rvk-mobile-side-reveal-ready .rvk-side {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}

/* V2.11.77 — independent full-page screenshot reveal cards and dedicated style controls. Kept isolated from
   the legacy media/hover rules so cards without this mode remain unchanged. */
.rvk-motion-hero .rvk-fullpage-frame {
  display: block;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}
.rvk-motion-hero a.rvk-fullpage-frame { cursor: pointer; }
.rvk-motion-hero .rvk-fullpage-frame > .rvk-media-element {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  object-fit: initial !important;
  object-position: top center !important;
  transform: translate3d(0, 0, 0);
  transform-origin: top center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.rvk-motion-hero .rvk-fullpage-overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  min-height: 42%;
  padding: 34px 18px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.68) 30%, rgba(0,0,0,.25) 68%, transparent 100%);
  transition: opacity .42s ease, visibility .42s ease;
}
.rvk-motion-hero .rvk-fullpage-meta {
  display: flex;
  direction: rtl;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  transform: translate3d(0, 14px, 0);
  opacity: 0;
  transition: opacity .42s ease, transform .48s cubic-bezier(.2,.75,.25,1);
}
.rvk-motion-hero .rvk-fullpage-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: right;
}
.rvk-motion-hero .rvk-fullpage-title {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.rvk-motion-hero .rvk-fullpage-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  padding: 3px 9px;
  color: rgba(255,255,255,.96);
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
  backdrop-filter: blur(8px);
}
.rvk-motion-hero .rvk-fullpage-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.12);
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  font-size: 19px;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.rvk-motion-hero .rvk-fullpage-icon svg { display: block; width: 1em; height: 1em; }
.rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-active > .rvk-fullpage-overlay,
.rvk-motion-hero .rvk-fullpage-frame:focus-visible > .rvk-fullpage-overlay {
  opacity: 1;
  visibility: visible;
}
.rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-active > .rvk-fullpage-overlay .rvk-fullpage-meta,
.rvk-motion-hero .rvk-fullpage-frame:focus-visible > .rvk-fullpage-overlay .rvk-fullpage-meta {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.rvk-motion-hero .rvk-fullpage-frame:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .rvk-motion-hero .rvk-fullpage-frame:hover > .rvk-fullpage-overlay { opacity: 1; visibility: visible; }
  .rvk-motion-hero .rvk-fullpage-frame:hover > .rvk-fullpage-overlay .rvk-fullpage-meta { opacity: 1; transform: translate3d(0,0,0); }
}
/* Optional per-card mode: keep the overlay visible at rest, then add only a
   restrained upward nudge while the screenshot reveal is active. */
.rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-overlay-always > .rvk-fullpage-overlay {
  opacity: 1;
  visibility: visible;
}
.rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-overlay-always > .rvk-fullpage-overlay .rvk-fullpage-meta {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-overlay-always.rvk-fullpage-active > .rvk-fullpage-overlay .rvk-fullpage-meta,
.rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-overlay-always:focus-visible > .rvk-fullpage-overlay .rvk-fullpage-meta {
  transform: translate3d(0,-6px,0);
}
@media (hover: hover) and (pointer: fine) {
  .rvk-motion-hero .rvk-fullpage-frame.rvk-fullpage-overlay-always:hover > .rvk-fullpage-overlay .rvk-fullpage-meta {
    transform: translate3d(0,-6px,0);
  }
}
@media (max-width: 1023.98px) {
  /* Full-page cards use a more compact resting height so the active card
     reads as the clear focal point while it expands in the viewport center. */
  .rvk-motion-hero .rvk-side.rvk-fullpage-side {
    height: min(var(--rvk-mobile-panel-height), 48vw);
    min-height: 180px;
    transition: height .56s cubic-bezier(.2,.75,.25,1);
  }
  .rvk-motion-hero .rvk-side.rvk-fullpage-side.rvk-fullpage-active {
    height: calc(max(180px, min(var(--rvk-mobile-panel-height), 48vw)) + clamp(56px, 9vw, 90px));
    z-index: 4;
  }
  .rvk-motion-hero .rvk-fullpage-overlay { min-height: 46%; }
  .rvk-motion-hero .rvk-fullpage-title { font-size: 18px; }
  .rvk-motion-hero .rvk-fullpage-badge { font-size: 12px; }
  .rvk-motion-hero .rvk-fullpage-icon { width: 40px; height: 40px; font-size: 18px; }
}
/* Wide touch tablets keep the desktop collage geometry but use the same
   viewport-center activation and a small, direction-aware card expansion. */
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  .rvk-motion-hero .rvk-side.rvk-fullpage-side { transition: height .56s cubic-bezier(.2,.75,.25,1); }
  .rvk-motion-hero .rvk-slot--lt.rvk-fullpage-side { height: 25%; }
  .rvk-motion-hero .rvk-slot--lb.rvk-fullpage-side { height: 29%; }
  .rvk-motion-hero .rvk-slot--rt.rvk-fullpage-side { height: 27%; }
  .rvk-motion-hero .rvk-slot--rb.rvk-fullpage-side { height: 31%; }
  .rvk-motion-hero .rvk-slot--lt.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 4%) * .55 + clamp(24px, 3vw, 42px)); z-index: 4; }
  .rvk-motion-hero .rvk-slot--lb.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 4%) * .45 + clamp(24px, 3vw, 42px)); z-index: 4; }
  .rvk-motion-hero .rvk-slot--rt.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 5%) * .42 + clamp(24px, 3vw, 42px)); z-index: 4; }
  .rvk-motion-hero .rvk-slot--rb.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 5%) * .58 + clamp(24px, 3vw, 42px)); z-index: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .rvk-motion-hero .rvk-fullpage-frame > .rvk-media-element,
  .rvk-motion-hero .rvk-fullpage-overlay,
  .rvk-motion-hero .rvk-fullpage-meta,
  .rvk-motion-hero .rvk-side.rvk-fullpage-side { transition: none !important; animation: none !important; }
  .rvk-motion-hero .rvk-fullpage-overlay { opacity: 1; visibility: visible; }
  .rvk-motion-hero .rvk-fullpage-meta { opacity: 1; transform: none; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .rvk-motion-hero .rvk-side.rvk-fullpage-side.rvk-fullpage-active { height: var(--rvk-mobile-panel-height); }
}
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .rvk-motion-hero .rvk-slot--lt.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 4%) * .55); }
  .rvk-motion-hero .rvk-slot--lb.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 4%) * .45); }
  .rvk-motion-hero .rvk-slot--rt.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 5%) * .42); }
  .rvk-motion-hero .rvk-slot--rb.rvk-fullpage-side.rvk-fullpage-active { height: calc((100% - var(--rvk-gap) - 5%) * .58); }
}