/* ============================================================
   installation.css — page styles for /installation.html
   Currently holds one thing: the CIB-04 entry glyph that sits at
   the end of the "sustained mutual attention" paragraph.

   Kept out of styles.css deliberately. styles.css is loaded by
   every page on the site, so changing it would force a ?v= bump
   across all of them for a mark that appears on exactly one page.
   This mirrors overview.css (CDS-01) and cars-05.css (CARS-05).
   ============================================================ */

/* The glyph rides inside the paragraph, so it must not disturb the
   line box. inline-flex + a baseline nudge keeps the measure intact. */
.cib-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  height: 1.55em;
  margin-left: 0.4em;
  vertical-align: -0.36em;
  border: 0;
  border-radius: 3px;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 220ms ease, transform 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Held at an angle rather than flat on. A horizontal iron at this size reads
   as an arrow or a pen; tilted, the handle-ferrule-tip silhouette is legible
   at a glance. The rotation lives on the svg so the link's own hover lift
   stays independent of it. */
.cib-entry svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  transform: rotate(-45deg);
}

/* Body of the iron: the site's interface cyan, same family as every
   other quiet affordance on the site. */
.cib-entry .cib-entry-body {
  fill: none;
  stroke: var(--cyan, #45D3E8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 220ms ease;
}

/* The tip is the only part allowed to go amber, and only when the
   glyph is being attended to. Amber means heat everywhere in CIB-04
   and it must not leak into the resting state. */
.cib-entry .cib-entry-tip {
  fill: none;
  stroke: var(--cyan, #45D3E8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 260ms ease, filter 260ms ease;
}

.cib-entry .cib-entry-glow {
  fill: var(--gold, #E8A94A);
  opacity: 0;
  transition: opacity 260ms ease;
}

.cib-entry:hover,
.cib-entry:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.cib-entry:hover .cib-entry-tip,
.cib-entry:focus-visible .cib-entry-tip {
  stroke: var(--gold, #E8A94A);
  filter: drop-shadow(0 0 3px rgba(232, 169, 74, 0.75));
}

.cib-entry:hover .cib-entry-glow,
.cib-entry:focus-visible .cib-entry-glow {
  opacity: 0.9;
}

.cib-entry:focus-visible {
  outline: 1px solid var(--cyan, #45D3E8);
  outline-offset: 3px;
}

.cib-entry:active {
  transform: translateY(0);
}

/* Touch devices never fire :hover, so a hover-only affordance is an
   invisible affordance on a phone. Give it a resting warmth instead —
   enough to read as a control, not enough to shout. */
@media (hover: none), (pointer: coarse) {
  .cib-entry {
    opacity: 0.8;
  }

  .cib-entry .cib-entry-tip {
    stroke: var(--gold, #E8A94A);
  }

  .cib-entry .cib-entry-glow {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cib-entry,
  .cib-entry .cib-entry-tip,
  .cib-entry .cib-entry-glow,
  .cib-entry .cib-entry-body {
    transition: none;
  }

  .cib-entry:hover,
  .cib-entry:focus-visible {
    transform: none;
  }
}

/* ============================================================
   NMX-LCY — the pink zinnia that leads to /artifacts/music/
   heavy-serenade.html (NMIXX, "HEAVY SERENADE").

   It sits on its own perch at the bottom-right of the
   "Post-Installation Verification" section, after the last
   paragraph. At rest it is a closed bud on a green calyx that
   breathes slowly. On hover / keyboard focus (and on the first tap
   on touch, via the .bloom class set by the page script) it grows
   2.4x and blooms: three rings of petals untwist and open, outer
   ring first, with a slight overshoot, then the yellow floret
   centre pops in. Closing runs the rings in reverse, inner first.

   Ported from the owner's zinnia-glyph-preview.html (2026-10-02).
   Changes from the preview: it grows up-and-left from its bottom-
   right corner (growing rightward would push past the column and
   widen the page on a phone), a visible focus ring instead of
   outline:none, the close sequence reversed, and the bud is larger
   than an inline glyph by request.

   Page-specific on purpose (rule 21a): nothing here touches
   styles.css, so no site-wide ?v= bump.
   ============================================================ */

.zin-perch {
  display: flex;
  justify-content: flex-end;
  /* The top margin is the room the bloom rises into: the flower grows
     upward by 0.8 x 1.4 x its size (about 49px at 44px), so the open
     flower never covers the paragraph above it. Measured, not guessed. */
  margin: 54px 0 1.6em;
  /* the bloom scales up out of this box; it must not clip it */
  overflow: visible;
}

.zin-glyph {
  --zin-size: 44px;
  position: relative;
  display: inline-block;
  width: var(--zin-size);
  height: var(--zin-size);
  flex: 0 0 var(--zin-size);
  margin-right: 6px;
  border-radius: 50%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  /* grow inward from the right edge and mostly upward, so the bloom
     rises into the space beside the paragraph instead of off the column
     edge or down into the pagenav rule below */
  transform-origin: 100% 80%;
  transition: transform .6s cubic-bezier(.2, 1.2, .3, 1);
}

.zin-glyph .zin-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  filter: drop-shadow(0 0 3px rgba(224, 48, 158, .35));
}

/* Petals. transform-box:view-box + origin 0 0 = the flower's centre,
   because the viewBox is centred on 0,0. --a is each petal's angle,
   --d its ring's stagger. Closed: twisted 40deg and squeezed into the bud. */
.zin-glyph .zp {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: rotate(calc(var(--a) + 40deg)) scale(.2, .34);
  /* closing: reverse the stagger so the inner ring folds first */
  transition: transform .55s cubic-bezier(.4, 0, .6, 1) calc(.34s - var(--d));
}

.zin-glyph .zin-disc {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scale(.25);
  opacity: .15;
  transition: transform .3s ease 0s, opacity .25s ease 0s;
}

.zin-glyph .zin-calyx {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: opacity .4s ease .3s, transform .5s ease .3s;
}

/* ---- the bloom ---- */
.zin-glyph:hover,
.zin-glyph:focus-visible,
.zin-glyph.bloom {
  transform: scale(2.4);
  z-index: 5;
}

.zin-glyph:hover .zp,
.zin-glyph:focus-visible .zp,
.zin-glyph.bloom .zp {
  transform: rotate(var(--a)) scale(1, 1);
  transition: transform .85s cubic-bezier(.2, 1.35, .35, 1) var(--d);
}

.zin-glyph:hover .zin-disc,
.zin-glyph:focus-visible .zin-disc,
.zin-glyph.bloom .zin-disc {
  transform: scale(1);
  opacity: 1;
  transition: transform .7s cubic-bezier(.2, 1.5, .4, 1) .35s, opacity .4s ease .3s;
}

.zin-glyph:hover .zin-calyx,
.zin-glyph:focus-visible .zin-calyx,
.zin-glyph.bloom .zin-calyx {
  opacity: 0;
  transform: scale(1.8);
  transition: opacity .5s ease .2s, transform .6s ease .2s;
}

.zin-glyph:focus-visible {
  outline: 1px solid var(--cyan, #45D3E8);
  outline-offset: 3px;
}

/* gentle idle breathing so it reads as a bud, not a dot */
@keyframes zin-idle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.zin-glyph:not(:hover):not(:focus-visible):not(.bloom) .zin-svg {
  animation: zin-idle 3.6s ease-in-out infinite;
}

/* Phones: a touch smaller at rest so the 2.4x bloom (about 96px) stays
   comfortably inside a 320px column. Growth is leftward, so nothing can
   cross the right edge of the page. */
@media (max-width: 760px) {
  .zin-glyph { --zin-size: 40px; margin-right: 4px; }
  .zin-perch { margin-top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .zin-glyph,
  .zin-glyph .zp,
  .zin-glyph .zin-disc,
  .zin-glyph .zin-calyx,
  .zin-glyph:hover .zp,
  .zin-glyph:focus-visible .zp,
  .zin-glyph.bloom .zp,
  .zin-glyph:hover .zin-disc,
  .zin-glyph:focus-visible .zin-disc,
  .zin-glyph.bloom .zin-disc,
  .zin-glyph:hover .zin-calyx,
  .zin-glyph:focus-visible .zin-calyx,
  .zin-glyph.bloom .zin-calyx {
    transition-duration: .01s;
    transition-delay: 0s;
  }

  .zin-glyph .zin-svg { animation: none !important; }
}