/* Flores vase selector (screen27). */

/* Vase-selector (flores, screen27): 3 vases sit on a real 3D turntable - each
   .vase-slot is placed on a circle via rotateY(homeAngle + ringAngle)
   translateZ(radius), and .vase-body/.vase-fan each counter-rotate by the
   negative of that same angle ("billboarding") so they keep facing the
   camera instead of turning edge-on as the ring spins. --ring-angle lives on
   #vaseRing and is set from JS in 120deg steps; every slot inherits it
   through normal custom-property inheritance, no per-slot JS writes needed. */
.vase-stage {
  position: relative;
  width: 100%;
  height: 55vh;
  perspective: 1400px;
  /* Purely structural (no content of its own) - see .vase-body/.vase-fan-card
     below for why this whole chain is pointer-events:none. */
  pointer-events: none;
}

.vase-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* A .vase-slot used to be `inset: 0` - a full-stage-sized flat plane that
   rotateY swept through wildly different depths across its own huge surface
   (its edges are far from its rotation pivot), which let the front slot's
   plane cover/occlude clicks meant for the back vases and threw off where
   .vase-body/.vase-fan's own left:50% position actually landed post-rotation.
   A zero-size anchor point, pinned to the true bottom-center of the stage,
   rotates as a single point instead - no stray geometry to intercept clicks
   or wander off to an unexpected depth. */
.vase-slot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--slot-angle) + var(--ring-angle, 0deg))) translateZ(220px);
  transition: transform 0.9s ease, opacity 0.9s ease;
  pointer-events: none;
}

/* .vase-stage/.vase-ring/.vase-slot are flat/structural wrappers with no
   visible content of their own - even after shrinking .vase-slot to a
   zero-size point, testing found a click on a vase still hit .vase-ring
   instead of the vase underneath it (in a shared preserve-3d context,
   browsers don't reliably resolve overlapping flat and 3D-tilted planes by
   depth for hit-testing the way they do for painting). Turning off
   pointer-events on the whole structural chain and explicitly re-enabling it
   only on the actual clickable graphics (here, and on .vase-fan-card below)
   sidesteps that entirely - only real content can ever be a click target. */
/* .vase-body's own billboard rotateY/scale lives on this wrapper instead of
   on .vase-body directly, so .vase-body can hold .vase-shadow as a plain,
   non-3D child (see .vase-shadow's comment for why: it needs a `flat`
   ancestor to get reliable DOM-order paint order, and .vase-body itself
   would flatten its OWN 3D counter-rotation if it tried to be both the
   billboard AND that flat ancestor at once). Zero-size, same zero-size
   anchor-point pattern as .vase-slot/.vase-fan - structural only, so it
   stays pointer-events: none same as the rest of that chain. */
.vase-billboard {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: rotateY(calc(-1 * (var(--slot-angle) + var(--ring-angle, 0deg))));
  transition: transform 0.9s ease, opacity 0.9s ease;
}

.vase-body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5.5rem;
  height: 5.5rem;
  margin-left: -2.75rem;
  background: var(--vase-color, #ffffff);
  border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  pointer-events: auto;
}

/* Ground shadow, one per vase - a flat, faintly-transparent black ellipse
   sitting at the vase's own base, sized wider than the vase's own footprint
   so it actually peeks out past its sides (a shadow fully hidden under the
   vase it belongs to just reads as a smudge on the vase itself).

   This used to be .vase-slot's own child, positioned with its own billboard
   rotateY and a small translateZ nudge to force it behind .vase-body - but
   ANY fixed Z nudge inside a counter-rotation like that is only actually
   "behind" at the exact angle it was tuned for: the ring's own outer
   rotation re-projects that nudge by cos(current angle), which is +1 at the
   front (nudge passes through untouched) but crosses zero and goes negative
   partway through the 120deg sweep to/from a back position - right at that
   crossing, the nudge's effective sign flips, so shadow and body swap which
   one's in front for an instant. Tuning the nudge's sign per resting angle
   (front vs back) fixed the two rest states but not the sweep between them,
   which is exactly the flicker seen on a live rotation - no fixed Z value
   can ever be angle-proof here.

   Fixed at the root instead of re-tuned again: .vase-shadow is now a plain
   sibling of .vase-body inside .vase-billboard (see index.html and
   .vase-billboard's own comment), placed BEFORE it in the markup.
   .vase-billboard has no transform-style: preserve-3d of its own (it's the
   thing CARRYING the 3D counter-rotation, not participating in a shared 3D
   space itself), so its children are flattened onto one plane and paint in
   plain DOM order - same proven trick .vase-fan already uses for its own
   cards, and reliable at any angle, mid-transition or at rest, because it
   was never a 3D depth comparison to begin with. As a side effect this also
   fixes the shadow drifting away from a scaled-down back vase's actual base
   (documented as its own bug previously): riding inside the same
   .vase-billboard as .vase-body means it scales and drifts by the exact
   same amount, together, automatically - no separate math needed. */
.vase-shadow {
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 7.5rem;
  height: 1.4rem;
  margin-left: -3.75rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  pointer-events: none;
}

/* Each vase gets its own color (--vase-color, read by .vase-body above) -
   the neck (::before, background: inherit) picks it up automatically. Easy
   to swap - just change these three values. */
#vase1Body {
  --vase-color: #c97b63;
}

#vase2Body {
  --vase-color: #8a9a5b;
}

#vase3Body {
  --vase-color: #7a89ab;
}

/* The neck/lip: a smaller blob overlapping the body's top edge, same
   silhouette idea as idea4.PNG's narrower-necked gourd shape. A real child
   element now (was a ::before) - it needs to reliably paint on top of
   .vase-fan-stems-anchor's translateZ'd-back stem lines (see that rule's
   comment), and generated ::before/::after content turned out not to
   reliably respect 3D depth sorting against a separate sibling the way an
   ordinary element does - the translateZ fix alone visibly left the stems
   crossing over just the neck specifically, front vase excepted (it never
   pushes its stems this close), even though the same fix correctly kept
   them behind the rest of the vase body. */
.vase-neck {
  position: absolute;
  top: -1rem;
  left: 50%;
  width: 2rem;
  height: 1.7rem;
  transform: translateX(-50%);
  background: inherit;
  border-radius: 40% 40% 10% 10% / 60% 60% 20% 20%;
}

/* .vase-fan-stems-anchor shares this positioning exactly (see the comment
   on .vase-fan-stems below for why it's a separate element rather than
   living inside .vase-fan like the cards do), so every rule below that
   positions/rotates/scales .vase-fan lists the anchor too. */
.vase-fan,
.vase-fan-stems-anchor {
  position: absolute;
  left: 0;
  bottom: 6.5rem;
  width: 0;
  height: 0;
  transform: rotateY(calc(-1 * (var(--slot-angle) + var(--ring-angle, 0deg))));
  transition: transform 0.9s ease, opacity 0.9s ease;
}

/* Stems for the turntable's small resting fan (built once per vase in
   buildVaseFanStems, script.js) - the focused view's .vase-stems is a
   single flat, viewport-percentage SVG because the spread photos sit at
   fixed screen positions, but the turntable's fan is inside each vase's
   own rotating 3D transform (rotateY/translateZ plus the billboard
   counter-rotation), so a global viewport overlay can't follow it as the
   ring turns. This SVG lives in .vase-fan-stems-anchor - a dedicated
   sibling of .vase-body/.vase-fan sharing the exact same positioning (see
   above), NOT inside .vase-fan alongside the cards. It first lived there,
   but .vase-fan has no transform-style: preserve-3d of its own, so its
   children (stems and cards alike) get flattened onto .vase-fan's single
   plane for rendering - painting that flattened result is then just DOM
   order relative to the sibling .vase-body, which comes first in the
   markup, so the stems painted on top of the vase instead of behind it
   (confirmed from a screenshot). Moving the stems to their own sibling,
   placed BEFORE .vase-body in the markup, fixes the paint order the simple
   way - .vase-fan (with the cards) stays after .vase-body so those still
   paint on top, unaffected. */
.vase-fan-stems {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22vh;
  height: 10vh;
  transform: translateX(-50%);
  transform-origin: top center;
  pointer-events: none;
  /* Without this, the scaleY toggle below jumps instantly the moment
     .vase-slot--front changes (a plain class swap, no transition of its
     own) while the vase's actual rotation/position takes the usual 0.9s
     to catch up (.vase-slot's own transition) - the stems' length would
     snap to its new value immediately and then just sit there mismatched
     until the vase visually arrives to meet it, reading as the stems
     jumping first and the vase slowly catching up (confirmed from a
     recording of a back vase being clicked). Matching that same 0.9s here
     keeps the two in step. */
  transition: transform 0.9s ease;
}

/* .vase-fan's own zero-size pivot doesn't move when .vase-fan gets
   scale(0.68) for a back vase (scaling a zero-size box around its own
   center is a no-op for that single point) - but .vase-body is a REAL,
   non-zero box whose default transform-origin (its own center) DOES shift
   its rendered position when scaled, since scaling toward a center that
   isn't the bottom edge pulls that edge up as the box shrinks. The two
   scale anchors disagree, so a back vase's actual visible neck ends up
   noticeably below .vase-fan's pivot - the fan cards are forgiving of that
   small gap, but a literal connecting line makes it obvious (confirmed
   from a screenshot: the stems visibly stop short of the vase, front vase
   excepted since scale(1) has no such shift). Stretching the stems'
   reach down from the top (where they still meet the cards correctly)
   closes that gap without touching .vase-fan's shared pivot itself, which
   would also drag the cards down with it. 1.5 (mobile uses a separate,
   smaller 1.3 below) was arrived at by measuring, not guessing: with
   .vase-body/.vase-fan sized differently per breakpoint, the actual gap
   this needs to close differs too - tuning only against a mobile-width
   window (this same technique - measure the front vase's already-correct
   gap-to-body-size ratio live, then solve for the scaleY that gives a back
   vase that same ratio) got mobile right but left desktop still visibly
   short, confirmed from a screenshot. */
.vase-slot:not(.vase-slot--front) .vase-fan-stems {
  transform: translateX(-50%) scaleY(1.5);
}

.vase-fan-stems .vase-stem {
  stroke-width: 1.5;
}

@media (max-width: 600px) {
  .vase-fan-stems {
    width: 34vh;
    height: 16vh;
  }

  .vase-slot:not(.vase-slot--front) .vase-fan-stems {
    transform: translateX(-50%) scaleY(1.3);
  }
}

/* Fanned-out photo cards (idea4.PNG): each card pivots from the vase's neck
   point. transform-origin is the card's own bottom-center; translateY(-9vh)
   (executes first, moving the card straight up from the pivot) then
   rotate() (executes second, swinging that raised card around the pivot) is
   what makes this read as a fan/hand-of-cards rather than cards just
   rotating in place - translateX(-50%) last recenters the card horizontally
   on the pivot. */
.vase-fan-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 9vw;
  max-width: 110px;
  min-width: 56px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center bottom;
  transform: translateX(-50%) rotate(calc((var(--fan-index, 2) - 2) * 16deg)) translateY(-9vh);
  transition: transform 0.9s ease, opacity 0.6s ease;
}

/* Back vases: visibly smaller than the front one, per idea5.PNG - purely via
   an extra scale falloff on top of whatever perspective/translateZ already
   does, not via opacity (the spec calls for back vases staying fully visible,
   just less prominent - opacity dimming is reserved for the focused state's
   "other two vases vanish entirely", a distinct rule below). */
.vase-slot:not(.vase-slot--front) .vase-billboard,
.vase-slot:not(.vase-slot--front) .vase-fan {
  transform: rotateY(calc(-1 * (var(--slot-angle) + var(--ring-angle, 0deg)))) scale(0.68);
}

.vase-slot--front .vase-billboard,
.vase-slot--front .vase-fan {
  transform: rotateY(calc(-1 * (var(--slot-angle) + var(--ring-angle, 0deg)))) scale(1);
}

/* .vase-fan-stems-anchor gets its own copy of the two rules above (rather
   than sharing them, as it originally did) plus a translateZ(-1px): moving
   it out of the flattened .vase-fan and making it a direct preserve-3d
   sibling of .vase-body (see .vase-fan-stems-anchor's other rule, above)
   fixed the stacking for two of the three vases, but Chrome's resolution
   of which of two COPLANAR 3D planes paints on top isn't reliable (this
   codebase already ran into the equivalent issue for hit-testing early in
   this feature's build) - it held for the front vase and one back vase but
   not the other, confirmed from a screenshot. A tiny explicit depth offset
   removes the ambiguity entirely instead of hoping a tie always resolves
   the same way: 1px is imperceptible at these viewing distances/this
   perspective, but is enough for actual depth sorting (unambiguous, not a
   tie) to place it behind .vase-body every time. */
.vase-slot:not(.vase-slot--front) .vase-fan-stems-anchor {
  /* translateZ listed FIRST (outermost/applied last, same "outer = applied
     after everything else" rule this file's other fixes rely on) so it
     shifts along the camera-facing Z axis the billboard rotateY has
     already resolved to, not the vase's own pre-rotation local Z - the
     latter would mix into an X-shift too at some angles instead of staying
     a clean "further from camera" push. */
  transform: translateZ(-1px) rotateY(calc(-1 * (var(--slot-angle) + var(--ring-angle, 0deg)))) scale(0.68);
}

.vase-slot--front .vase-fan-stems-anchor {
  transform: translateZ(-1px) rotateY(calc(-1 * (var(--slot-angle) + var(--ring-angle, 0deg)))) scale(1);
}

@media (max-width: 600px) {
  .vase-stage {
    height: 46vh;
    perspective: 900px;
  }

  .vase-slot {
    transform: rotateY(calc(var(--slot-angle) + var(--ring-angle, 0deg))) translateZ(130px);
  }

  .vase-body {
    width: 4.2rem;
    height: 4.2rem;
    margin-left: -2.1rem;
  }

  .vase-shadow {
    width: 5.7rem;
    height: 1.05rem;
    margin-left: -2.85rem;
    bottom: -0.15rem;
  }

  .vase-fan,
  .vase-fan-stems-anchor {
    bottom: 5.2rem;
  }

  .vase-fan-card {
    width: 15vw;
    max-width: 80px;
    min-width: 44px;
    transform: translateX(-50%) rotate(calc((var(--fan-index, 2) - 2) * 16deg)) translateY(-14vh);
  }
}

/* Focused state (screen27--focused, toggled by the front-vase-body click
   handler in script.js): the two back vases vanish, the front vase enlarges
   and slides mostly off the bottom edge, and its photo fan reflows into a
   spread layout. .vase-fan gets an explicit 1/2.4 counter-scale so its
   reflow positions below can be authored in normal screen units instead of
   being compounded by the front vase's own 2.4x enlargement. */
/* .vase-hint-row is a plain .screen flex child (like every other screen's
   message/button pair) so it centers and spaces itself against .vase-stage
   the same automatic way on any aspect ratio - a fixed `position: absolute;
   bottom: Nrem` was tried instead and got the offset wrong in both
   directions at once (overlapping the vase on a short/wide desktop window,
   a huge gap on a tall/narrow mobile one), because a flat rem/vh offset
   from the viewport edge doesn't know where .vase-stage's own bottom edge
   actually ends up - flexbox already solves exactly that, for free.

   The one thing that still needs care: while a vase is focused, this row
   must come out of layout ENTIRELY (`display: none`, not just opacity: 0)
   - an opacity:0 flex child still occupies its box, which was exactly what
   shifted .vase-stage off the position the focused front vase's translateY
   math below (search "vase's own bottom edge flush with the viewport's
   bottom edge") was hand-derived against, throwing the vase out of line
   with its own stems (confirmed from a screenshot). `display: none` can't
   transition/fade, so this row now just appears/disappears instantly with
   the zoom in/out rather than fading - an acceptable trade for not being
   able to shift .vase-stage's position out from under the focused vase. */
.vase-hint-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 90%;
  max-width: 40rem;
  text-align: center;
}

/* "N/3" vase counter (see vaseCounter in script.js): same black text as
   the hint (#screen27 .message), just smaller and a bit softer. */
.vase-counter {
  font-size: 1.5rem;
  opacity: 0.7;
}

.vase-counter[hidden] {
  display: none;
}

.screen27--focused .vase-hint-row {
  display: none;
}

.vase-back-row {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.screen27--focused .vase-back-row {
  opacity: 1;
  pointer-events: auto;
}

/* Fading .vase-slot itself (rather than its children) looked like the vase
   folding/squishing shut before vanishing: .vase-slot needs
   transform-style: preserve-3d for its rotateY/translateZ positioning to
   combine with .vase-body/.vase-fan's counter-rotation billboarding, but
   per spec an element with both preserve-3d and fractional opacity gets its
   3D context flattened - its billboarded children collapse onto the slot's
   own rotated plane instead of staying face-on, which is exactly the
   squish. .vase-body/.vase-fan have no preserve-3d of their own, so fading
   them directly avoids the flatten entirely - a plain, undistorted fade. */
.screen27--focused .vase-slot:not(.vase-slot--front) {
  pointer-events: none;
}

/* .vase-shadow isn't listed here - it's a sibling of .vase-body inside
   .vase-billboard now (see .vase-shadow's comment), so fading the
   billboard's opacity to 0 already takes both down with it, no separate
   rule needed. */
.screen27--focused .vase-slot:not(.vase-slot--front) .vase-billboard,
.screen27--focused .vase-slot:not(.vase-slot--front) .vase-fan,
.screen27--focused .vase-slot:not(.vase-slot--front) .vase-fan-stems-anchor {
  opacity: 0;
  pointer-events: none;
}

/* .vase-fan-card has its own `pointer-events: auto` (needed so the resting
   turntable's small photos stay clickable) which overrides the inherited
   `none` from .vase-fan above - an ancestor's pointer-events doesn't reach a
   descendant that sets its own value. Targeting the cards directly (higher
   specificity than that base rule) is what actually blocks clicks on the
   faded-out back vases' photos while focused. */
.screen27--focused .vase-slot:not(.vase-slot--front) .vase-fan-card {
  pointer-events: none;
}

/* translateY listed before scale (so it's the outer/last-applied operation)
   gives a flat, unscaled shift - listing scale first would apply the shift
   inside the scaled space and amplify it, which is what sent the vase and
   its fan flying off-screen. Percentage units won't work here either now
   that .vase-slot is a zero-size anchor point (no box height to be a
   percentage of), hence vh.

   A single "Nvh" shift looked right at one window height and wrong at
   another: .vase-stage's own height is also a vh value, and the .screen
   flexbox vertically centers everything above this element too, so a plain
   translateY(Nvh) compounds with those other vh terms into a result that
   scales unpredictably with viewport height (confirmed by live-measuring
   getBoundingClientRect at two window sizes - the vase and its neck landed
   in completely different places even though the CSS never changed).
   calc(22.5vh + 190px) (desktop) is the one combination that cancels the
   other vh terms out algebraically: 22.5vh is the exact shift that puts the
   vase's own bottom edge flush with the viewport's bottom edge REGARDLESS
   of viewport height (derived from .vase-stage's 55vh height and the
   .screen flexbox centering both being fixed fractions of the same vh), and
   the flat +190px on top of that (not a vh value, so it doesn't scale) is
   what then pushes it the rest of the way down so only the neck peeks
   above the fold - consistently, at any window height. Mobile's version
   uses 27vh (from .vase-stage's 46vh height at that breakpoint) + 101px. */
.screen27--focused .vase-slot--front {
  transform: translateY(calc(22.5vh + 190px)) scale(2.4);
}

.screen27--focused .vase-slot--front .vase-billboard {
  transform: scale(1);
}

.screen27--focused .vase-slot--front .vase-body {
  cursor: default;
}

/* The 5 fan-card photos are NOT positioned here (unlike .vase-body above) -
   see the .vase-focus-overlay rules below for why and where they actually
   go when focused. */

@media (max-width: 600px) {
  .screen27--focused .vase-slot--front {
    transform: translateY(calc(27vh + 101px)) scale(1.8);
  }
}

/* The reflowed 5-photo spread (screen27--focused): originally these cards
   just got `transform: translate(Xvw, Yvh)` while still nested inside
   .vase-fan/.vase-slot--front. That inherits the SAME viewport-height
   compounding problem described above, times five, at arbitrary screen
   positions instead of one controlled peek amount - unrecoverable with a
   calc() trick since each card needs an independent X/Y, not one cancelled
   term. Fixed by having the click handler (script.js) physically move the
   front vase's 5 <img> cards out of .vase-fan and into this overlay instead
   for the duration of the focused state (moved back on the back-arrow).
   .vase-focus-overlay is a sibling of .vase-stage, positioned `fixed` -
   its nearest transformed/perspective ancestor is .stage (perspective,
   exactly viewport-sized), not the vase's own 1400px-perspective 3D stack,
   so top/left percentages here are true, uncompounded viewport fractions -
   the fix for the vase-body above works around the compounding, this one
   sidesteps it entirely. */
/* Flower "stems" connecting each spread photo down to the vase's neck.
   Static/declarative on purpose - the 5 photo positions above are already
   fixed viewport percentages, not something script.js computes per
   viewport, so the stems can be plain SVG paths using the same 0-100
   coordinate space rather than JS recalculating anything. preserveAspectRatio
   "none" makes the viewBox map straight onto the viewport's actual
   (non-square) aspect ratio, same as the cards' top/left percentages -
   the tradeoff is that non-uniform scaling would normally distort stroke
   width (thicker one way than the other), which vector-effect:
   non-scaling-stroke on each path (below) cancels out. A sibling of
   .vase-focus-overlay, not a child of it, so it doesn't get swept up by
   the script's `[...vaseFocusOverlay.children]` (which assumes every
   child is a fan-card being flown in/out). z-index below the overlay's 3,
   so photos visually sit in front of - growing out of - their own stem. */
.vase-stems {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Not tied directly to .screen27--focused - script.js adds this class only
   once the photos have actually landed in their spread positions (opening)
   and removes it immediately on the way back out (closing), so the stems
   appear/disappear on their own schedule rather than in lockstep with the
   photos. */
.vase-stems.vase-stems--visible {
  opacity: 1;
}

.vase-stem {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Filled, not stroked - a leaf reads as a small solid shape rather than an
   outline. currentColor (set per .vase-stem-group below) is what makes each
   leaf automatically match its own stem's shade without a second, separate
   set of per-leaf color rules that could drift out of sync with it. */
.vase-leaf {
  fill: currentColor;
}

/* A believable bunch reads as several different flowers, not five clones -
   a distinct, varied green per stem (not one repeated color) sells that,
   the same way the fan-card rotations and the curve shapes above (two
   curved, two gently curved, one straight) are each individually varied.
   Color lives on the group (stem + its leaves), not the stem path alone, so
   a stem's leaves inherit the same shade via currentColor. */
.vase-stem-group:nth-child(1) {
  color: #6b8f3f;
}

.vase-stem-group:nth-child(2) {
  color: #4f7942;
}

.vase-stem-group:nth-child(3) {
  color: #8aa866;
}

.vase-stem-group:nth-child(4) {
  color: #557153;
}

.vase-stem-group:nth-child(5) {
  color: #7ba05b;
}

.vase-focus-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* No transition declared here on purpose - the fly-in/fly-out between here
   and the vase's fan is a FLIP animation (see flipFromRect in script.js),
   which drives its own transform transition inline for the moment it needs
   one and clears it again once the flight lands. top/left/width themselves
   are never changed after a card is first placed, so nothing here would
   ever actually animate. */
.vase-focus-overlay .vase-fan-card {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 22vw;
  max-width: 220px;
  min-width: 140px;
}

.vase-focus-overlay .vase-fan-card:nth-child(1) {
  top: 18%;
  left: 25%;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.vase-focus-overlay .vase-fan-card:nth-child(2) {
  top: 15%;
  left: 75%;
  transform: translate(-50%, -50%) rotate(4deg);
}

.vase-focus-overlay .vase-fan-card:nth-child(3) {
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
}

.vase-focus-overlay .vase-fan-card:nth-child(4) {
  top: 78%;
  left: 25%;
  transform: translate(-50%, -50%) rotate(3deg);
}

.vase-focus-overlay .vase-fan-card:nth-child(5) {
  top: 78%;
  left: 75%;
  transform: translate(-50%, -50%) rotate(-4deg);
}

@media (max-width: 600px) {
  .vase-focus-overlay .vase-fan-card {
    width: 34vw;
    max-width: 160px;
    min-width: 100px;
  }
}