/* ============================================================================
   DocsOrigin · fx-illus.css — the "Certificate" illustration plates.
   ----------------------------------------------------------------------------
   ⚠ שכבה עצמאית לגמרי. היא לא נוגעת בשום כלל קיים של fx.css — כל המחלקות
     כאן חדשות ומצטרפות בהצטרפות מרצון (opt-in) על ידי מי שמחבר את ה-HTML.
     ⛔ אין כאן שום סלקטור שנוגע ב-.feat / .fi / .strip / .sec.

   ⛔ אין backdrop-filter. ⛔ אין אנימציה אינסופית. חשיפה בגלילה קיימת רק
     כש-CSS Scroll-driven Animations נתמך; אחרת האיור פשוט מוצג מיד.

   ⚠ RTL: האיורים **לא** מתהפכים. הם מרוכזים/סימטריים בכוונה כדי שהיפוך
     הפריסה יזיז אותם בלבד. ⛔ לעולם אל תוסיף כאן scaleX(-1).
   ========================================================================== */

.illus{
  display:block; max-width:100%; height:auto;
  /* אף פעם לא נגררים כמו תמונה בודדת — הם חלק מהקלף */
  -webkit-user-drag:none; user-select:none;
}

/* --------------------------------------------- הלוחית שבראש כרטיס תכונה --- */
.illus-plate{
  display:flex; align-items:center; justify-content:center;
  inline-size:100%; margin-block-end:16px; padding-block:6px;
  border-radius:10px;
  background:linear-gradient(180deg,#fdfdff 0%,#f6f8fd 100%);
  border:1px solid #eef0f6;
  box-shadow:inset 0 1px 0 #fff;
}

.illus-feat{ inline-size:100%; max-inline-size:178px; aspect-ratio:4/3; }

/* --------------------------------------------------------------- hover --- */
/* ⚠ .has-illus היא מחלקה **שלי** שמצטרפת לכרטיס — לא עיצוב של .feat. */
.has-illus:hover .illus-plate,
.has-illus:focus-within .illus-plate{
  border-color:#dee3f5;
  background:linear-gradient(180deg,#ffffff 0%,#f1f4fd 100%);
  box-shadow:inset 0 1px 0 #fff, 0 1px 10px rgba(47,69,196,.07);
}

@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .illus-plate{ transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
  .illus-feat{ transition:transform .3s cubic-bezier(.22,.7,.3,1), filter .3s ease; }
  .has-illus:hover .illus-feat,
  .has-illus:focus-within .illus-feat{ transform:translateY(-2px); filter:saturate(1.07); }
}

/* Progressive enhancement אמיתי: אין JS ואין מצב ביניים מוסתר בדפדפן
   שאינו תומך. שימוש ב-translate העצמאי גם אינו דורס את hover של האיור. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .illus-plate,.illus-family,.illus-globe{
      animation:illus-reveal linear both;
      animation-timeline:view(block);
      animation-range:entry 0% cover 24%;
    }
  }
}
@keyframes illus-reveal{
  from{ opacity:.2; translate:0 12px; }
  to  { opacity:1; translate:0 0; }
}

/* ------------------------------------------------ הגלובוס ברצועה הכהה --- */
.illus-globe{
  --illus-globe:72px;
  display:block; flex:none;
  inline-size:var(--illus-globe); block-size:var(--illus-globe);
}
.illus-globe .illus,
.illus.illus-globe{ inline-size:100%; block-size:100%; }

/* ------------------------------------- משפחת המסמכים (לוחית רחבה, לבן) --- */
.illus-family{ inline-size:100%; max-inline-size:320px; margin-inline:auto; aspect-ratio:8/5; }

/* --------------------------------------------------------------- צר --- */
@media (max-width:760px){
  .illus-feat{ max-inline-size:150px; }
  .illus-globe{ --illus-globe:60px; }
}

@media (prefers-reduced-motion:reduce){
  .illus-plate,.illus-feat,.illus-family,.illus-globe{
    animation:none; transition:none; transform:none; translate:none;
  }
}

/* ========================================================================== */
/* 2027 illustration direction — engraved plates, living paper, rare foil. */

.lp .illus-plate{
  position:relative; overflow:hidden; isolation:isolate;
  contain:layout paint;
  min-block-size:148px;
  background:
    radial-gradient(circle at 50% 8%,var(--plate-wash,rgba(88,112,231,.055)),transparent 52%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,244,255,.9)),
    #f7f8fc;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(50,76,179,.035);
}
.lp .illus-plate::before{
  content:''; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:
    url(art/guilloche-tile.svg) center / 172px repeat,
    linear-gradient(115deg,transparent 37%,rgba(255,255,255,.75) 48%,transparent 59%);
  opacity:.055;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 38%,transparent 82%);
          mask-image:radial-gradient(ellipse at center,#000 0 38%,transparent 82%);
}
.lp .illus-plate::after{
  content:''; position:absolute; z-index:2; inset:10px; pointer-events:none;
  border:1px solid rgba(56,85,223,.08); border-radius:10px;
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
}
.lp .illus-plate .illus{
  position:relative; z-index:1; object-fit:contain; object-position:center;
  filter:drop-shadow(0 12px 15px rgba(31,51,119,.11));
}

/* Every plate belongs to one family, but not to one repeated template. The
   restrained tonal changes give the six subjects their own atmosphere while
   keeping the illustration itself centred and therefore RTL/LTR neutral. */
.lp .feat:nth-child(1){ --plate-wash:rgba(62,92,225,.095); }
.lp .feat:nth-child(2){ --plate-wash:rgba(39,168,139,.075); }
.lp .feat:nth-child(3){ --plate-wash:rgba(188,137,33,.085); }
.lp .feat:nth-child(4){ --plate-wash:rgba(89,73,205,.075); }
.lp .feat:nth-child(5){ --plate-wash:rgba(34,143,188,.075); }
.lp .feat:nth-child(6){ --plate-wash:rgba(62,92,225,.06); }

/* The global engine turns the three-step area into a genuine campaign image.
   On small screens we retain the existing 11KB SVG and avoid the 440KB WebP. */
@media screen and (min-width:681px){
  .lp .how-visual{
    overflow:hidden; isolation:isolate;
    background:
      radial-gradient(circle at 50% 45%,rgba(46,88,238,.13),transparent 45%),
      linear-gradient(155deg,#fff,#f3f5fb);
  }
  .lp .how-visual::after{
    content:''; position:absolute; z-index:1; inset:-2%; pointer-events:none;
    /* fx-brand.css uses this same pseudo-element as a 70×2px foil rule.
       Reset those physical dimensions so the generated engine can actually
       fill the exhibit instead of rendering as an invisible hairline. */
    inline-size:auto; block-size:auto;
    background:url(art/global-document-engine-2027.webp) center / contain no-repeat;
    filter:drop-shadow(0 30px 32px rgba(20,39,102,.18));
    transform:scale(.96); transform-origin:50% 55%;
  }
  .lp .how-visual > *{ position:relative; z-index:2; }
  /* The generic scroll-reveal animation animates opacity back to 1.  The SVG
     is only a lightweight fallback here, so keep it out of the WebP exhibit. */
  .lp .how-visual .illus-family{ animation:none; opacity:.015; }
  .lp .how-visual .how-visual-index{
    z-index:3; color:rgba(24,45,118,.5); text-shadow:0 1px 0 #fff;
  }
  .lp .how-visual .how-note{ z-index:3; }
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .lp .how-visual::after{
      animation:living-engine-parallax 1ms linear both;
      animation-timeline:view(block);
      animation-range:entry 0% exit 100%;
    }
  }
  @media (hover:hover) and (pointer:fine){
    .lp .has-illus:hover .illus-plate::before,
    .lp .has-illus:focus-within .illus-plate::before{ opacity:.09; }
    .lp .has-illus:hover .illus-feat,
    .lp .has-illus:focus-within .illus-feat{ transform:translateY(-4px) scale(1.025); }
  }
}
@keyframes living-engine-parallax{
  from{ transform:translateY(-16px) scale(.94); }
  to{ transform:translateY(18px) scale(1.015); }
}

/* JS adds .is-art-visible once. The glint crosses each engraved plate one
   time, staggered by DOM order; content never waits for JS to become visible. */
@media (prefers-reduced-motion:no-preference){
  .art-motion .lp .feat.is-art-visible .illus-plate::before{
    animation:living-plate-glint .82s cubic-bezier(.2,.72,.24,1) both;
    animation-delay:calc(var(--art-order,0) * 55ms);
  }
}
@keyframes living-plate-glint{
  from{ background-position:center,-210px 0; }
  to{ background-position:center,210px 0; }
}

@media screen and (max-width:680px){
  .lp .illus-plate{ min-block-size:132px; }
  .lp .how-visual::after{ content:none; background-image:none; }
}

@media (prefers-contrast:more){
  .lp .illus-plate::before{ opacity:.025; }
  .lp .illus-plate::after{ border-color:rgba(56,85,223,.22); }
}

@media (prefers-reduced-motion:reduce){
  .lp .how-visual::after,.lp .illus-plate::before{
    animation:none !important; transition:none !important; transform:none;
  }
}

/* ========================================================================== */
/* Member onboarding cameo — lightweight existing SVG, framed as a miniature
   certificate exhibit. It is opt-in through .onb-art-directed and remains out
   of the layout (and out of the network request) below the wide breakpoint. */

.onb-art-cameo{ display:none; }

@media screen and (min-width:1200px){
  .onb.onb-art-directed{ container-type:inline-size; }
  .onb.onb-art-directed .onb-head{ padding-inline-end:178px; min-block-size:92px; }
  .onb.onb-art-directed > .onb-art-cameo{
    position:absolute; z-index:1; display:grid; place-items:center;
    inset-inline-end:24px; inset-block-start:18px;
    inline-size:142px; block-size:94px; padding:4px 7px;
    overflow:hidden; border:1px solid rgba(74,98,200,.14); border-radius:15px;
    background:
      radial-gradient(circle at 50% 38%,rgba(80,109,236,.105),transparent 56%),
      linear-gradient(145deg,#fff,#f1f4fc);
    box-shadow:inset 0 1px 0 #fff,inset 0 0 0 5px rgba(44,70,178,.025),
               0 13px 28px rgba(29,45,91,.09);
    pointer-events:none;
  }
  .onb.onb-art-directed > .onb-art-cameo::before{
    content:''; position:absolute; inset:7px; border:1px solid rgba(197,151,45,.16);
    border-radius:10px; pointer-events:none;
  }
  .onb.onb-art-directed > .onb-art-cameo img{
    position:relative; z-index:1; inline-size:124px; block-size:auto;
    object-fit:contain; filter:drop-shadow(0 9px 12px rgba(35,55,126,.13));
  }
}

@media screen and (min-width:1200px) and (prefers-reduced-motion:no-preference){
  .onb.onb-art-directed > .onb-art-cameo{
    animation:onb-cameo-arrive .48s cubic-bezier(.22,.72,.3,1) .12s both;
  }
}
@keyframes onb-cameo-arrive{
  from{ opacity:0; translate:0 9px; }
  to{ opacity:1; translate:0 0; }
}

@media (prefers-contrast:more){
  .onb.onb-art-directed > .onb-art-cameo{ border-color:currentColor; }
}

@media (prefers-reduced-motion:reduce){
  .onb.onb-art-directed > .onb-art-cameo{ animation:none !important; transition:none !important; translate:none; }
}

@media print{
  .onb-art-cameo{ display:none !important; }
}