/* ═══ edu.css — the "עוד מיערה" educational-video act (T5, 2026-08-23) ═══
   A row of circular video bubbles in the PDP usage-ring vocabulary (gold ring,
   greyed until the hand arrives, caption underneath), and a porcelain lightbox
   that plays the clip large, with sound. RTL first. Loads AFTER yaara.css +
   shell.css; it borrows their tokens and adds no globals of its own.
   Every rule is namespaced .edu / .edu-b / .edu-lb. */

/* ───────────────────────────── the section ───────────────────────────── */
.edu{position:relative}
.edu[hidden]{display:none}
.edu__head{display:block}
.edu__rows{margin-top:clamp(28px,3.6vw,52px)}

.edu__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:flex-start;justify-content:flex-start;
  gap:clamp(20px,2.8vw,40px) clamp(14px,2vw,30px)}

/* the thin rule that separates her general films from this page's own */
.edu__rule{height:1px;border:0;margin:clamp(26px,3.4vw,46px) 0;
  background:linear-gradient(90deg,transparent,var(--line) 14%,
             rgba(178,139,82,.42) 50%,var(--line) 86%,transparent)}

/* ───────────────────────────── one bubble ────────────────────────────── */
.edu-b{--d:clamp(112px,10.4vw,158px);
  position:relative;display:flex;flex-direction:column;align-items:center;gap:11px;
  flex:0 0 var(--d);width:var(--d);min-width:0;
  opacity:0;transform:translateY(20px) scale(.95);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-mask);
  transition-delay:calc(var(--i,0) * .06s)}
.edu.is-in .edu-b{opacity:1;transform:none}

.edu-b__btn{position:relative;display:block;padding:0;border:0;background:none;
  cursor:pointer;width:var(--d);height:var(--d);border-radius:50%;isolation:isolate}
.edu-b__m{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--card);
  box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(96,66,32,.42);
  filter:grayscale(.74) brightness(1.05) contrast(.94);opacity:.8;
  transition:filter .55s var(--ease-out),opacity .55s var(--ease-out),
             box-shadow .5s var(--ease-out),transform .45s var(--ease-mask)}
.edu-b__m img,.edu-b__m video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.edu-b__m video{opacity:0;transition:opacity .45s var(--ease-out)}
.edu-b.is-live .edu-b__m video{opacity:1}

.edu-b__btn:hover .edu-b__m,
.edu-b__btn:focus-visible .edu-b__m,
.edu-b.is-live .edu-b__m{
  filter:none;opacity:1;transform:scale(1.03);
  box-shadow:0 0 0 2px var(--honey),0 22px 46px -20px rgba(96,66,32,.45),
             0 0 26px rgba(201,164,104,.26)}
.edu-b__btn:focus-visible{outline:2px solid var(--honey-deep);outline-offset:6px;border-radius:50%}

/* the play seal and the running time ride the rim */
.edu-b__p{position:absolute;bottom:4%;inset-inline-end:4%;
  width:clamp(26px,2.2vw,32px);height:clamp(26px,2.2vw,32px);border-radius:50%;
  background:rgba(253,250,245,.94);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(96,66,32,.26),0 0 0 1px var(--line);
  transition:transform .4s var(--ease-mask)}
.edu-b__btn:hover .edu-b__p{transform:scale(1.1)}
.edu-b__p svg{width:10px;height:11px;fill:var(--honey-deep)}
.edu-b__t{font:400 14.5px/1.55 var(--f);color:var(--ink-2);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.9em;transition:color .4s var(--ease-out)}
.edu-b:hover .edu-b__t{color:var(--ink)}

/* ── standing alone: the flagship PDPs load yaara.css but not shell.css, so the
   act carries the three shell rules it depends on, scoped to itself. edu.js adds
   these classes only when the page is actually missing them. ───────────────── */
.edu--act.act{padding-block:clamp(96px,12vh,150px)}
.edu--wrap .wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,4vw,56px)}
.edu--halo .h2{font:600 clamp(36px,4.6vw,72px)/1.08 var(--f);letter-spacing:-.015em;margin:0;
  background:linear-gradient(100deg,var(--ink) 34%,var(--honey) 50%,var(--ink) 66%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.edu--halo .h2--s{font-size:clamp(28px,3.4vw,52px)}

/* ─────────────────────────── the lightbox ────────────────────────────── */
.edu-lb[hidden]{display:none}
.edu-lb{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);overscroll-behavior:contain}
.edu-lb__scrim{position:absolute;inset:0;background:rgba(250,247,242,.9);
  backdrop-filter:blur(16px) saturate(1.05);opacity:0;
  transition:opacity .34s var(--ease-out)}
.edu-lb.is-on .edu-lb__scrim{opacity:1}

.edu-lb__box{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.4vw,16px);max-height:100%;
  opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .38s var(--ease-out),transform .5s var(--ease-mask)}
.edu-lb.is-on .edu-lb__box{opacity:1;transform:none}

.edu-lb__stage{position:relative;border-radius:16px;overflow:hidden;background:var(--dark);
  box-shadow:0 44px 90px -42px rgba(96,66,32,.62),0 0 0 1px rgba(84,64,40,.18)}
.edu-lb__stage video{display:block;background:var(--dark);
  height:min(70vh,720px);width:auto;max-width:min(92vw,460px)}
/* the whole stage is the play/pause target; the seal only shows the state */
.edu-lb__tap{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer}
.edu-lb__seal{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(253,250,245,.92);
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 10px 34px rgba(20,16,11,.28);
  opacity:0;transition:opacity .3s var(--ease-out)}
.edu-lb.is-paused .edu-lb__seal{opacity:1}
.edu-lb__seal svg{width:22px;height:24px;fill:var(--ink)}
.edu-lb__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:rgba(253,250,245,.22)}
.edu-lb__bar i{display:block;height:100%;width:0;background:var(--honey)}

.edu-lb__t{margin:0;font:400 15px/1.6 var(--f);color:var(--ink);text-align:center;
  max-width:min(92vw,460px)}
.edu-lb__ctl{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px)}
.edu-lb__b{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.72);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;transition:background .3s var(--ease-out),border-color .3s var(--ease-out),
  transform .3s var(--ease-mask)}
.edu-lb__b:hover{background:#fff;border-color:rgba(178,139,82,.5);transform:translateY(-2px)}
.edu-lb__b[disabled]{opacity:.35;cursor:default;transform:none}
.edu-lb__b svg{width:16px;height:16px;fill:currentColor}
/* where in her films you are. 14px and barely tracked: nothing on this site
   renders under 14px, and a tracked micro-caps counter is exactly the tell
   DESIGN_LANGUAGE bans */
.edu-lb__n{font:400 14px/1 var(--tick);letter-spacing:.05em;color:var(--ink-3);
  min-width:5ch;text-align:center}
.edu-lb__x{position:absolute;top:-8px;inset-inline-end:-8px;z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:rgba(253,250,245,.94);color:var(--ink);font:300 24px/1 var(--f);
  cursor:pointer;display:grid;place-items:center;
  transition:background .3s var(--ease-out),transform .3s var(--ease-mask)}
.edu-lb__x:hover{background:#fff;transform:rotate(90deg)}
@media(max-width:640px){
  .edu-lb__x{top:-6px;inset-inline-end:-2px;width:38px;height:38px}
  .edu-lb__stage video{height:min(62vh,620px)}
  .edu-lb__t{font-size:14px}
}

/* the page underneath holds still while the film plays */
html.edu-open{overflow:hidden}
html.edu-open #cursor{opacity:0}

/* ───────────────────────── reduced motion ────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .edu-b{opacity:1;transform:none;transition:none}
  .edu-b__m,.edu-b__p,.edu-b__t,.edu-lb__scrim,.edu-lb__box,.edu-lb__b,.edu-lb__x{transition:none}
  .edu-b__btn:hover .edu-b__m,.edu-b__btn:focus-visible .edu-b__m,.edu-b.is-live .edu-b__m{transform:none}
  .edu-lb__scrim,.edu-lb__box{opacity:1;transform:none}
}

/* ─────────────────────────────── the phone ────────────────────────────────
   Two bubbles a row instead of a crowded three, each big enough to read the
   frame; the lightbox controls all clear 44px and sit above the notch and the
   home indicator. Nothing is dropped, only resized. */
@media(max-width:640px){
  .edu__row{display:grid;grid-template-columns:repeat(2,1fr);
    gap:24px clamp(12px,3.4vw,18px);justify-items:center;align-items:start}
  .edu-b{--d:clamp(128px,40vw,172px);flex:0 0 auto;width:var(--d)}
  .edu-b__p{width:34px;height:34px;bottom:3%;inset-inline-end:3%}
  .edu-b__p svg{width:11px;height:12px}
  .edu-b__t{font-size:14px;line-height:1.5}

  .edu-lb{padding:max(14px,env(safe-area-inset-top,0px)) 12px
    max(14px,env(safe-area-inset-bottom,0px))}
  .edu-lb__x{width:44px;height:44px;top:-4px;inset-inline-end:-2px;font-size:26px}
  .edu-lb__stage video{height:min(58vh,600px);max-width:min(94vw,460px)}
  .edu-lb__box{gap:12px}
  .edu-lb__ctl{gap:6px}
  .edu-lb__b{width:46px;height:46px}
  .edu-lb__t{font-size:14.5px;max-width:min(94vw,460px)}
}

/* a touchscreen has no hover: the ring answers the press, and the preview is
   woken by the bubble reaching the middle of the screen (edu.js) */
@media(hover:none){
  .edu-b__btn:active .edu-b__m{
    filter:none;opacity:1;transform:scale(1.03);
    box-shadow:0 0 0 2px var(--honey),0 22px 46px -20px rgba(96,66,32,.45),
               0 0 26px rgba(201,164,104,.26)}
  .edu-b__btn:active .edu-b__p{transform:scale(1.1)}
}

/* cursor-normalized: dot off, native pointer on */
#cursor{display:none!important}
html,body{cursor:auto!important}

/* 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}