/* ── Quote marks (.eos-quotes) — background artwork that draws itself ──
   The pair of oversized quote marks behind "In Her Words" on Meet the
   Doctor. Site-wide artwork: the same pair sits behind a Home section, so
   this is a module file rather than anything page-specific — drop the code
   module into a group and it works.

   HOW IT IS BUILT. The marks are VECTOR, not the
   Desktop_Site_Wide_Quote_Mark_Left.webp in the media library. A raster
   cannot be drawn on — there is no shape to reveal progressively — so the
   Figma path is inlined in the code module and the raster is unused here.

   Figma gives one mark as a single path holding BOTH commas, and puts the
   second mark on the page as that same mark rotated 180 degrees (which is
   why only a "Left" asset was ever exported). The markup follows that: one
   path, used twice, the second rotated.

   POSITIONING IS IN THIS FILE, unusually — the badge keeps its placement in
   the builder because an editor may want to nudge it, but these two marks
   are a fixed composition measured off the Figma, and splitting them across
   two code modules with four sets of builder offsets would be worse. The
   container fills its group (position:absolute; inset:0), so every value
   below is a percentage of the grey panel and holds at any panel size.

   Figma, as fractions of the panel:
     desktop  panel 968x572   left mark (64,134) 183x136   right (721,303)
     mobile   panel 319x441   left mark (19,50)  127x94    right (172,247)

   Wiring: js/reveal.js (adds `is-in` on scroll; nothing else). */

/* The code module holding the artwork. Taken out of flow here rather than
   with builder offsets for two reasons: a static code module would still
   consume one of the group's row gaps even at zero height, and `inset:0`
   makes the module exactly the group's box without depending on a height
   setting. (0,2,0) so Divi's own module styles, which land at (0,1,0) in a
   sheet that may load after this one, cannot win the position. */
/* Both boxes, not just the module: Divi wraps a code module's content in its
   own `position: relative` .et_pb_code_inner, and with the artwork inside
   taken out of flow that wrapper measures ZERO high — so the artwork was
   stretching to fill nothing and every `top` percentage below resolved to 0.
   Stretching the wrapper as well is what gives those percentages the panel's
   real height to work against. */
.et_pb_module.eos-quotes-host,
.et_pb_module.eos-quotes-host > .et_pb_code_inner {
  position       : absolute;
  inset          : 0;
  /* It covers the whole panel, so it must never be a hit-test target. Today
     it happens not to be — Divi makes every module position:relative, so the
     panel's own modules share this paint layer and win on DOM order — but
     that is luck, not design, and it would silently swallow a click on the
     text or an arrow the moment anything reorders. */
  pointer-events : none;
}

.eos-quotes {
  position       : absolute;
  inset          : 0;
  /* Behind the panel's text but still above the panel's own background.
     Requires the group to establish a stacking context — its z-index is set
     to 0 in the builder for exactly that reason; without it this would sink
     behind the grey too. */
  z-index        : -1;
  pointer-events : none;   /* decorative: never eat a click or a text drag */
}

.eos-quotes__mark {
  position     : absolute;
  width        : 18.9%;         /* 183 of 968 */
  aspect-ratio : 183 / 136;     /* both breakpoints' marks share this ratio */
  color        : var(--darkest-teal);   /* Figma #324E5B */
  opacity      : 0.1;                   /* Figma's own layer opacity */
}

.eos-quotes__mark svg { display: block; width: 100%; height: 100%; }

.eos-quotes__mark_l { left: 6.6%;  top: 23.4%; }

/* The second mark IS the first, turned around — same path, no second export.
   Rotating also flips the wipe below, so this one draws from its own tip
   just like the other, which is what makes the pair read as handwritten. */
.eos-quotes__mark_r {
  left      : 74.5%;
  top       : 53.0%;
  transform : rotate(180deg);
}

/* Mobile is a different composition, not a scaled one: the marks are bigger
   relative to a much narrower panel and sit closer together. 1024px is
   Divi's tabletWide edge, the same breakpoint the section's layout flips at. */
@media (max-width: 1024px) {
  .eos-quotes__mark   { width: 39.8%; }   /* 127 of 319 */
  .eos-quotes__mark_l { left: 6.0%;  top: 11.3%; }
  .eos-quotes__mark_r { left: 53.9%; top: 56.0%; }
}


/* ── .eos-quotes-wide — the Home reviews composition ─────────────────
   Same two marks, same 183x136 artwork, laid out differently: Figma Group 12
   (4056:868) is 1134x298 with a mark in each opposite corner, against In Her
   Words' 840x305. It is also positioned rather than filling its host — the
   group is 117.1% of the text block's width and centred on it, so it reaches
   past the copy on both sides.

   Hence `position: relative` and an aspect-ratio here instead of `inset: 0`:
   the code module carries the box (absolute, left -8.55%, width 117.1%) and
   this fills it. z-index 0 rather than -1 because this section has no
   coloured panel to sit on top of — the module is the group's first child, so
   the heading and quote paint over it on DOM order alone.

   Overrides the breakpoint block above deliberately: one composition at every
   width here, because the marks scale with the text block rather than being
   re-laid-out the way the In Her Words panel is. */
.eos-quotes-wide {
  position     : relative;
  inset        : auto;
  width        : 100%;
  aspect-ratio : 1134 / 298;
  z-index      : 0;
}

.eos-quotes-wide .eos-quotes__mark   { width: 16.1%; }   /* 183 of 1134 */
.eos-quotes-wide .eos-quotes__mark_l { left: 0;     top: 0; }
.eos-quotes-wide .eos-quotes__mark_r { left: 83.9%; top: 54.4%; }

/* Phone is a different composition, not the desktop one scaled — the same
   trap In Her Words set. Figma Group 33 (4102:909) is 360x350, nearly square,
   against the desktop Group 12's wide, shallow 1134x298; the marks are more
   than twice as large relative to the box (35.3% against 16.1%) and the
   second one sits lower and further left (64.7%/73.1% against 83.9%/54.4%).
   Scaling the desktop values instead left two small marks bunched against the
   heading. 767px is Divi's phone edge, which is where the module's own
   position and width switch too. */
@media (max-width: 767px) {
  .eos-quotes-wide                     { aspect-ratio: 360 / 350; }
  .eos-quotes-wide .eos-quotes__mark   { width: 35.3%; }   /* 127 of 360 */
  .eos-quotes-wide .eos-quotes__mark_l { left: 0;     top: 0; }
  .eos-quotes-wide .eos-quotes__mark_r { left: 64.7%; top: 73.1%; }
}


/* ── Armed ──────────────────────────────────────────────────────────
   js/reveal.js stamps `eos-reveal-js` on <html> before first paint, and
   that class is the ONLY thing that hides anything here. No script means no
   animation — never a missing graphic. */
html.eos-reveal-js .eos-quotes__wipe {
  transform        : scaleY(0);
  transform-box    : fill-box;   /* scale against the rect, not the viewBox */
  transform-origin : top;
}


/* ── Playing ────────────────────────────────────────────────────────
   Each mark is revealed by a mask rect growing downward over it. A comma's
   tail starts at the top and its ball sits at the bottom, so a downward
   sweep paints it tip-first — the direction you would draw it by hand.

   Why a sweep and not a stroke tracing the centreline (the trick the badge
   smile uses): a comma is a tail wrapped into a ring, and a mask stroke wide
   enough to cover the ~33-unit band spills straight across the ring's hole,
   revealing both of its sides at once. The sweep has no such failure mode.

   The right mark starts before the left has finished, so the pair reads as
   one gesture rather than two separate events. */
html.eos-reveal-js .eos-quotes.is-in .eos-quotes__mark_l .eos-quotes__wipe {
  animation : eos-quotes-wipe 0.75s ease-out forwards;
}

html.eos-reveal-js .eos-quotes.is-in .eos-quotes__mark_r .eos-quotes__wipe {
  animation : eos-quotes-wipe 0.75s ease-out 0.55s forwards;
}

@keyframes eos-quotes-wipe { to { transform: scaleY(1); } }


/* Motion off: land on the finished artwork. Overrides the armed state rather
   than the animation, so nothing is caught mid-sweep. */
@media (prefers-reduced-motion: reduce) {
  html.eos-reveal-js .eos-quotes__wipe { transform: scaleY(1); }
  html.eos-reveal-js .eos-quotes.is-in .eos-quotes__mark_l .eos-quotes__wipe,
  html.eos-reveal-js .eos-quotes.is-in .eos-quotes__mark_r .eos-quotes__wipe { animation: none; }
}