/* ═══ reviews.css — R39 "reviews that pop" ═══════════════════════════════════
   Real customer screenshots, presented as physical objects: each one sits on a
   porcelain card with a warm shadow and a slight tilt, at full contrast, big
   enough to actually read. Loads AFTER /wp-content/themes/yaara-awwwards/assets/css/yaara.css (tokens). Works on
   the landing (document dir=rtl) and on a PDP (LTR document with rtl islands).

   (1) .rv-notes — THE LANDING BAND. Three large cards in the section's own
                   measured space, below the story column, where nothing can
                   overlap them. Opacity 1. Each card POPS in when it swaps
                   (scale .86 -> 1, back-out overshoot, one honey flash frame),
                   one card every 2 s in rotation, scroll parallax kept.
   (2) .rv-act   — THE DRIFT BAND. One sticky halo quote over a slow rightwards
                   run of the same cards, larger and at full contrast. The halo
                   quote and the cards, nothing else.
   ══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────── the porcelain card ─────────────────────
   One recipe, both components: white paper, a hair of warm rim, a soft warm
   drop, a slight tilt. No opacity games, no desaturation, no bottom fade. */
.rv-paper{
  position:relative;
  background:#fff;
  border-radius:7px;
  padding:var(--rv-pad,9px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(84,64,40,.10),
    0 2px 5px rgba(120,86,42,.07),
    0 18px 38px -16px rgba(120,86,42,.34);
  transform:rotate(var(--rot,0deg));
}
.rv-shot{
  position:relative;display:block;overflow:hidden;border-radius:3px;
  background:#fff;
}
.rv-shot img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:top center;
}
/* the honey flash: one frame of warm light across the paper as it lands.
   MULTIPLY, not screen: the card is white, and screen over white is white, so a
   screen flash is invisible on exactly the surface it is meant to light. Multiply
   with the champagne ramp turns the whole slip gold for a frame, then lets go. */
.rv-flash{
  position:absolute;inset:0;border-radius:7px;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,#F6E7CB 6%,#C79E5E 52%,#F3E2C4 96%);
  mix-blend-mode:multiply;
}

/* ══════════════════════════════════════════════════════════════════════════
   (1) THE LANDING BAND
   ══════════════════════════════════════════════════════════════════════════ */
.rv-notes{
  --rv-w:clamp(252px,21.5vw,318px);
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(26px,4vw,72px);
  margin-top:clamp(54px,7vh,96px);
  direction:rtl;
}
.rv-notes:empty{display:none}

.rv-slot{
  flex:0 0 var(--rv-w);width:var(--rv-w);
  margin-top:var(--lift,0px);
  will-change:transform;
}
.rv-slot .rv-paper{width:100%}
.rv-slot .rv-shot{width:100%;height:calc(var(--rv-w) / var(--nar,1.3))}

/* three papers pinned at three heights, three tilts. The stagger is what keeps
   a row of three from reading as a widget. The box of each slot is cut to the
   MIDDLE of the aspect band its pool is drawn from, and the shot is CONTAINED,
   never covered: a message that is cut off at the edge is exactly the thing the
   operator called out, and in Hebrew a horizontal crop eats the start of every
   line. The letterbox is warm porcelain, so it disappears into the paper. */
.rv-slot[data-slot="1"]{--rot:-2.3deg;--lift:0px;--nar:1.17}
.rv-slot[data-slot="2"]{--rot:1.7deg;--lift:34px;--nar:1.69}
.rv-slot[data-slot="3"]{--rot:-1.2deg;--lift:66px;--nar:2.46}
.rv-slot .rv-shot{background:#FCFAF5}
.rv-slot .rv-shot img{object-fit:contain;object-position:center}

/* the whole band arrives once, from below */
.rv-notes .rv-slot{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out,cubic-bezier(.22,.61,.36,1)),
             transform .9s var(--ease-mask,cubic-bezier(.19,1,.22,1));
  transition-delay:calc(var(--i,0) * .11s);
}
.rv-notes.is-in .rv-slot{opacity:1;transform:none}
/* once GSAP owns y for the parallax the entrance transform must let go */
.rv-notes.is-parallax .rv-slot{transition:opacity .8s var(--ease-out,ease)}

@media (hover:hover){
  .rv-slot .rv-paper{transition:box-shadow .45s var(--ease-out,ease)}
  .rv-slot:hover .rv-paper{
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 0 0 1px rgba(178,139,82,.34),
      0 3px 7px rgba(120,86,42,.09),
      0 26px 52px -18px rgba(120,86,42,.40);
  }
}

/* tablet: still three, a little tighter */
@media (max-width:1180px){
  .rv-notes{--rv-w:clamp(240px,22.5vw,286px);gap:clamp(18px,2.8vw,42px)}
  .rv-slot[data-slot="2"]{--lift:30px}
}

/* phone: the same three papers, stacked instead of spread. Nothing is
   dropped; the row becomes a short column and the tilts alternate so it still
   reads as a handful of slips rather than a list. */
@media (max-width:920px){
  .rv-notes{
    flex-wrap:wrap;flex-direction:column;align-items:center;
    justify-content:flex-start;
    gap:clamp(16px,4vw,26px);
    margin-top:clamp(40px,7vw,64px);
    --rv-w:min(74vw,320px);
  }
  .rv-slot{flex:0 0 auto}
  .rv-slot[data-slot="1"]{--rot:-1.8deg;--lift:0px;--nar:1.32}
  .rv-slot[data-slot="2"]{--rot:1.6deg;--lift:0px;--nar:1.62}
  .rv-slot[data-slot="3"]{--rot:-1deg;--lift:0px;--nar:2.1}
}

@media (prefers-reduced-motion:reduce){
  .rv-notes .rv-slot{opacity:1;transform:none;transition:none}
  .rv-flash{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   (2) THE DRIFT BAND — a PDP / packages section
   ══════════════════════════════════════════════════════════════════════════ */
.rv-act{
  position:relative;
  direction:rtl;text-align:right;
  background:var(--bg);
  --rv-cardh:clamp(244px,25vw,344px);
  --rv-gap:clamp(22px,3vw,52px);
}
.rv-act[hidden]{display:none}

.rv-stage{
  position:relative;
  display:grid;gap:clamp(26px,4vh,56px);
  padding-block:clamp(64px,9vh,110px);
  overflow:hidden;
}

.rv-head{
  max-width:1240px;margin:0 auto;width:100%;
  padding-inline:clamp(20px,4vw,56px);
  align-self:end;
}
/* the halo heading, self-contained: PDPs do not load shell.css.
   The gradient lives on .yinner, not on the h2: -webkit-background-clip:text
   only clips against text painted by the element itself, so a wrapper whose
   children are block boxes paints nothing at all. */
.rv-q{
  font:600 clamp(28px,3.6vw,56px)/1.15 var(--f,sans-serif);
  letter-spacing:-.012em;margin:0;max-width:19ch;
  min-height:2.3em;color:var(--ink,#33291D);
}
.rv-q .yline{display:block;overflow:hidden;padding-block:.06em}
.rv-q .yinner{
  display:block;opacity:1;transform:translateY(0);
  background:linear-gradient(100deg,var(--ink,#33291D) 34%,var(--honey,#B28B52) 50%,var(--ink,#33291D) 66%);
  background-size:260% 100%;background-position:100% 0;   /* 100% = the ink rest, same as every .h2 */
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:transform .55s var(--ease-mask,cubic-bezier(.19,1,.22,1)) .04s,
             opacity .55s var(--ease-mask,cubic-bezier(.19,1,.22,1)) .04s,
             background-position var(--t-editorial,1.4s) var(--ease-mask,cubic-bezier(.19,1,.22,1));
}
.rv-q.is-out .yinner{
  opacity:0;transform:translateY(-.9em);
  transition:transform .38s cubic-bezier(.55,.085,.68,.53),opacity .38s cubic-bezier(.55,.085,.68,.53);
}
.rv-q.is-pre .yinner{opacity:0;transform:translateY(1.05em);transition:none}

/* ── the run ── */
.rv-track{
  position:relative;width:100%;
  /* LTR box, RTL motion: the track's own axis must be predictable, so the
     doubled run starts at the left edge and overflows right. The DIRECTION OF
     TRAVEL carries the RTL reading (rightwards, see @keyframes). */
  direction:ltr;
  overflow:hidden;
  padding-block:clamp(22px,3vw,40px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  clip-path:inset(0 0 100% 0);      /* curtain — reviews.js wipes it open */
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1);
}
.rv-track.is-open{clip-path:inset(0 0 0 0)}
.rv-run{
  display:flex;direction:ltr;align-items:center;
  gap:var(--rv-gap);width:max-content;
  transform:translate3d(-50%,0,0);
  animation:rv-drift var(--dur,110s) linear infinite;
  will-change:transform;
}
@keyframes rv-drift{ to{ transform:translate3d(0,0,0) } }
.rv-run.rv-waapi{animation:none}

.rv-card{
  flex:0 0 auto;padding:0;margin:0;display:block;border:0;background:none;
  cursor:pointer;
  width:calc(var(--rv-cardh) * var(--wf,.8));
  transform:translateY(var(--dy,0px));
}
.rv-card .rv-paper{width:100%}
.rv-card .rv-shot{width:100%;height:calc(var(--rv-cardh) * var(--hf,1))}
.rv-card:focus-visible{outline:2px solid var(--honey-deep,#8E6B39);outline-offset:8px;border-radius:9px}
@media (hover:hover){
  .rv-card .rv-paper{transition:transform .42s var(--ease-mask,cubic-bezier(.19,1,.22,1)),
                                box-shadow .42s var(--ease-out,ease)}
  /* CSS-only fallback (no WAAPI): reviews.js swaps the drift onto the Web
     Animations API and slows it with updatePlaybackRate, which — unlike a
     changed animation-duration — never jumps the track's position. */
  html:not(.rv-scrolling) .rv-track:hover .rv-run:not(.rv-waapi){animation-duration:calc(var(--dur,110s) * 4)}
  html:not(.rv-scrolling) .rv-card:hover .rv-paper{
    transform:rotate(0deg) scale(1.045);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 0 0 1px rgba(178,139,82,.36),
      0 30px 60px -20px rgba(120,86,42,.44);
  }
}

/* phone / short viewport: nothing sticks, the run is a finger-scrollable strip */
@media (max-width:920px),(max-height:620px){
  .rv-act{min-height:0;padding-block:clamp(56px,10vw,90px);--rv-cardh:clamp(230px,58vw,300px)}
  .rv-stage{position:static;height:auto;overflow:visible;padding-block:0;gap:clamp(22px,4vw,34px)}
  .rv-q{min-height:0;max-width:none}
  .rv-track{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rv-track::-webkit-scrollbar{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rv-stage{position:static;height:auto}
  .rv-run{animation:none;transform:none}
  .rv-track{clip-path:none !important;overflow-x:auto}
}

/* ── lightbox ── */
.rv-lb{
  position:fixed;inset:0;z-index:200;display:none;
  direction:rtl;
  background:rgba(20,16,11,.82);
  backdrop-filter:blur(10px);
  padding:clamp(16px,4vw,48px);
  place-items:center;
  opacity:0;transition:opacity .38s var(--ease-out,ease);
}
.rv-lb.is-open{display:grid;opacity:1}
.rv-lb figure{margin:0;max-width:min(620px,92vw);max-height:86vh;display:grid;gap:14px;justify-items:center}
.rv-lb img{
  max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;
  border-radius:6px;padding:10px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);background:#fff;
}
.rv-lb button{
  position:absolute;background:rgba(250,247,242,.1);border:1px solid rgba(243,238,228,.28);
  color:#F6F0E4;width:46px;height:46px;border-radius:50%;cursor:pointer;
  font:300 22px/1 var(--f,sans-serif);display:grid;place-items:center;
  transition:background var(--t-ui,.3s) var(--ease-out,ease);
}
.rv-lb button:hover{background:rgba(250,247,242,.22)}
.rv-lb .rv-x{top:clamp(14px,3vw,28px);inset-inline-end:clamp(14px,3vw,28px)}
.rv-lb .rv-prev{inset-inline-end:clamp(10px,3vw,34px);top:50%;transform:translateY(-50%)}
.rv-lb .rv-next{inset-inline-start:clamp(10px,3vw,34px);top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .rv-lb .rv-prev,.rv-lb .rv-next{top:auto;bottom:14px;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PHONE — 390-430px, a finger instead of a pointer.
   Nothing is removed. The cards grow (they are photographs of her customers'
   messages, and at 184px the writing inside them is not readable), the run
   becomes a strip a finger scrubs, and the drift holds still while the finger
   is down so a tap lands where it was aimed.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .rv-act{--rv-cardh:clamp(280px,74vw,340px);--rv-gap:20px}
  .rv-q{font-size:clamp(32px,8.6vw,42px);line-height:1.14}
  .rv-track{scroll-padding-inline:18px}
  /* a slip may grow until it fills the screen and no further: a card wider
     than the phone can never be read whole, however large it is */
  .rv-card{width:min(calc(var(--rv-cardh) * var(--wf,.8)),84vw);
    scroll-snap-align:center}
  .rv-card .rv-shot{height:min(calc(var(--rv-cardh) * var(--hf,1)),72vh);
    background:#FCFAF5}
  /* and when the cap does bite, the message is letterboxed, never cropped:
     a horizontal crop eats the start of every Hebrew line */
  .rv-card .rv-shot img{object-fit:contain;object-position:center}
  /* snap only while the finger owns the track: a snap point and a running
     translate on the same box fight each other */
  .rv-track.is-held{scroll-snap-type:x proximity}
}

/* the finger is down: the tide stops, in both the WAAPI and the CSS path */
.rv-track.is-held .rv-run{animation-play-state:paused}

/* a touchscreen has no hover, so the card answers the press instead */
@media (hover:none){
  .rv-card .rv-paper{transition:transform .3s var(--ease-mask,cubic-bezier(.19,1,.22,1)),
                                box-shadow .3s var(--ease-out,ease)}
  .rv-card:active .rv-paper{
    transform:rotate(0deg) scale(1.03);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 0 0 1px rgba(178,139,82,.36),
      0 26px 54px -20px rgba(120,86,42,.42);
  }
}

/* the lightbox on a phone: bigger controls, clear of the notch and of the
   home indicator, and a horizontal swipe moves between the messages */
.rv-lb figure{touch-action:pan-y}
@media (max-width:640px){
  .rv-lb{padding-top:max(16px,env(safe-area-inset-top,0px));
    padding-bottom:max(76px,calc(env(safe-area-inset-bottom,0px) + 76px))}
  .rv-lb figure{max-height:78vh}
  .rv-lb img{max-height:70vh}
  .rv-lb button{width:48px;height:48px}
  .rv-lb .rv-x{top:max(14px,env(safe-area-inset-top,0px))}
  .rv-lb .rv-prev,.rv-lb .rv-next{bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .rv-lb .rv-prev{inset-inline-end:22vw}
  .rv-lb .rv-next{inset-inline-start:22vw}
}


/* reveal-safe: show reveal WRAPPERS only; never touch .ba slider clip/transform */
.rv,[data-rv],.wipe,.figw{opacity:1!important;visibility:visible!important}
.rv,[data-rv]{transform:none!important}
.wipe:not(.ba):not(.ba *){clip-path:none!important}