/* ═══ txrev.css — the per-treatment REVIEW ACT (2026-08-25) ═══════════════════
   One act on a treatment page: her film of the woman who did the treatment in the
   middle, the messages that came afterwards scattered around it on porcelain
   paper, and one or two lines in their own words. No labels, no captions, no
   boxes: the photographs and the messages carry it.

   Loads AFTER /wp-content/themes/yaara-awwwards/assets/css/yaara.css (tokens) + shell.css (.wrap/.act/.h2) and
   AFTER edu.css, whose .edu-lb lightbox shell this act re-uses for the film.
   The porcelain paper recipe is copied here on purpose so the act never has to
   pull reviews.css onto a treatment page. Every rule is namespaced .txr / .txr-*.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── the section ───────────────────────────── */
.txr{position:relative}
.txr[hidden]{display:none}
.txr__head{display:block}
.txr__stagewrap{margin-top:clamp(30px,4vw,58px)}

/* the desktop stage: paper on one side, the circle in the middle, paper and
   her customers' own words on the other. Grid areas, so nothing floats. */
.txr-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"a hub b";
  align-items:center;
  column-gap:clamp(20px,3vw,58px);
  row-gap:clamp(20px,2.4vw,32px);
  direction:rtl;
}
.txr-stage--nohub{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"a b"}
.txr-col{display:flex;flex-direction:column;align-items:center;min-width:0;
  gap:clamp(18px,2.4vw,34px)}
.txr-col--a{grid-area:a}
.txr-col--b{grid-area:b}

/* ─────────────────────────── the centre circle ───────────────────────── */
.txr-hub{--d:clamp(260px,30vw,400px);grid-area:hub;width:var(--d);justify-self:center;
  opacity:0;transform:scale(.94);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-mask)}
.txr.is-in .txr-hub{opacity:1;transform:none}

.txr-bub{position:relative;display:block;padding:0;border:0;background:none;
  cursor:pointer;width:var(--d);height:var(--d);border-radius:50%;isolation:isolate}
.txr-m{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--card);
  box-shadow:0 0 0 1px var(--line),0 26px 60px -28px rgba(96,66,32,.46);
  transition:box-shadow .5s var(--ease-out),transform .45s var(--ease-mask)}
.txr-m img,.txr-m video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.txr-m video{opacity:0;transition:opacity .45s var(--ease-out)}
.txr-hub.is-live .txr-m video{opacity:1}

.txr-bub:hover .txr-m,
.txr-bub:focus-visible .txr-m,
.txr-hub.is-live .txr-m{
  transform:scale(1.02);
  box-shadow:0 0 0 2px var(--honey),0 30px 66px -26px rgba(96,66,32,.5),
             0 0 34px rgba(201,164,104,.26)}
.txr-bub:focus-visible{outline:2px solid var(--honey-deep);outline-offset:8px;border-radius:50%}

/* the play seal rides the rim */
.txr-seal{position:absolute;bottom:5%;inset-inline-end:5%;
  width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);border-radius:50%;
  background:rgba(253,250,245,.94);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(96,66,32,.26),0 0 0 1px var(--line);
  transition:transform .4s var(--ease-mask)}
.txr-bub:hover .txr-seal{transform:scale(1.08)}
.txr-seal svg{width:14px;height:16px;fill:var(--honey-deep)}

/* ── the quote-centre variant: no film for this treatment, so her customer's
   own sentence takes the circle's place, large and unquoted ── */
.txr-hub--q{min-height:var(--d);display:grid;place-items:center;text-align:center}
.txr-qline{margin:0;font:400 clamp(22px,2.6vw,34px)/1.34 var(--f);color:var(--ink);
  direction:rtl;max-width:16ch;transition:opacity .45s var(--ease-out)}
.txr-hub--q.is-swap .txr-qline{opacity:0}

/* ───────────────── the porcelain paper (recipe from reviews.css) ─────────
   White paper, a hair of warm rim, a soft warm drop, a slight tilt. No border
   beyond the shadow, no desaturation, no bottom fade. */
.txr-card{--rot:0deg;--i:0;display:block;padding:0;border:0;background:none;
  cursor:pointer;width:clamp(190px,16vw,262px);max-width:100%;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-mask);
  transition-delay:calc(var(--i,0) * .09s)}
.txr.is-in .txr-card{opacity:1;transform:none}
.txr-card:focus-visible{outline:2px solid var(--honey-deep);outline-offset:6px;border-radius:9px}

/* display:block matters: a <span> holding a block child is split into two inline
   fragments, and each fragment paints its own white padded sliver above and
   below the card */
.txr-paper{display:block;position:relative;background:#fff;border-radius:7px;padding: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));
  transition:transform .45s var(--ease-mask),box-shadow .45s var(--ease-out)}
.txr-card:hover .txr-paper,
.txr-card:focus-visible .txr-paper{
  transform:rotate(0deg) scale(1.03) translateY(-3px);
  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 PDP band's slip geometry: uniform height, width from the shot's own
   aspect (so no Hebrew line loses its start), crop vertical-only, top-anchored;
   the full screenshot lives in the lightbox */
.txr-card{--ch:clamp(200px,18vw,272px);
  width:calc(var(--ch) * var(--ar,1.3));max-width:min(300px,26vw)}
.txr-shot{position:relative;display:block;overflow:hidden;border-radius:3px;
  background:#fff;aspect-ratio:var(--ar,1.3);height:auto;max-height:var(--ch)}
.txr-shot img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:top center;
  transition:opacity .38s var(--ease-out)}
.txr-card.is-swap .txr-shot img{opacity:0}

/* ───────────────── her customers' words, bare on the ground ─────────── */
.txr-notes{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);
  max-width:34ch;direction:rtl;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-mask);
  transition-delay:calc(var(--i,0) * .09s)}
.txr.is-in .txr-notes{opacity:1;transform:none}
.txr-q{margin:0;font:400 17px/1.62 var(--f);color:var(--ink-2)}

/* ───────────────────────── the screenshot lightbox ──────────────────────
   Adapted from the reviews image lightbox: the message alone, large, on a dark
   ground, so the writing inside it can actually be read. */
.txr-ilb{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 .34s var(--ease-out)}
.txr-ilb.is-shown{display:grid}
.txr-ilb.is-on{opacity:1}
.txr-ilb figure{margin:0;max-width:min(620px,92vw);max-height:86vh;
  display:grid;justify-items:center}
.txr-ilb img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;
  border-radius:6px;padding:10px;background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.45)}
.txr-ilb__x{position:absolute;top:clamp(14px,3vw,28px);inset-inline-end:clamp(14px,3vw,28px);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(250,247,242,.1);border:1px solid rgba(243,238,228,.28);
  color:#F6F0E4;font:300 22px/1 var(--f);display:grid;place-items:center;
  transition:background .3s var(--ease-out),transform .3s var(--ease-mask)}
.txr-ilb__x:hover{background:rgba(250,247,242,.22);transform:rotate(90deg)}
.txr-ilb__x:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

/* the page underneath holds still while a film or a message is open */
html.txr-open{overflow:hidden}
html.txr-open #cursor{opacity:0}

/* ───────────────────────────── reduced motion ──────────────────────────
   Everything is already where it belongs, the preview never wakes on its own,
   the poster and the seal stay, and the film still plays when she asks for it. */
@media(prefers-reduced-motion:reduce){
  .txr-hub,.txr-card,.txr-notes{opacity:1;transform:none;transition:none}
  .txr-m,.txr-seal,.txr-paper,.txr-qline,.txr-ilb,.txr-ilb__x{transition:none}
  .txr-bub:hover .txr-m,.txr-bub:focus-visible .txr-m,.txr-hub.is-live .txr-m{transform:none}
  .txr-card:hover .txr-paper,.txr-card:focus-visible .txr-paper{transform:rotate(var(--rot,0deg))}
  .txr-ilb.is-shown{opacity:1}
}

/* ───────────────────────────────── the phone ────────────────────────────
   The circle first and big enough to see her face, then the messages two to a
   row, then the words. Nothing is dropped and nothing is hidden. */
@media(max-width:760px){
  .txr-stage{grid-template-columns:repeat(2,1fr);grid-template-areas:none;
    column-gap:clamp(12px,3.4vw,18px);row-gap:clamp(20px,4.4vw,30px);
    align-items:start;justify-items:center}
  .txr-hub{--d:min(74vw,340px);grid-column:1/-1;grid-row:1;justify-self:center;
    margin-bottom:clamp(4px,2vw,12px)}
  .txr-col{display:contents}
  .txr-card{width:100%}
  .txr-notes{grid-column:1/-1;max-width:none;align-self:start}
  .txr-qline{max-width:18ch}
  .txr-ilb__x{width:48px;height:48px;top:max(14px,env(safe-area-inset-top,0px))}
  .txr-ilb figure{max-height:78vh}
  .txr-ilb img{max-height:70vh}
}

/* a touchscreen has no hover: the ring and the paper answer the press */
@media(hover:none){
  .txr-bub:active .txr-m{transform:scale(1.02);
    box-shadow:0 0 0 2px var(--honey),0 30px 66px -26px rgba(96,66,32,.5),
               0 0 34px rgba(201,164,104,.26)}
  .txr-card:active .txr-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)}
}