/* ═══════════════════════════════════════════════════════════════════
   ORNAMENTS
   The six she chose from the sketchbook, in place. Everything here is
   prefixed o- on purpose: .spark, .petal and .seal all already exist in
   the shared sheets, and the first of those switched a whole family of
   ornaments off before anyone noticed.

   Colours come from the wand cursor, pale gold, blush, lilac and cream,
   and lift a little at night so they stay legible against the onyx.
   Nothing here runs for a visitor who asks for reduced motion.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --o-gold:#E2B55E; --o-gold-pale:#FFF1C4; --o-gold-deep:#9C7434;
  --o-blush:#F4A7CF; --o-blush-pale:#FBE3F0; --o-rose:#C97BA6;
  --o-lilac:#C9B6EE; --o-lilac-deep:#A68DD6; --o-cream:#FFFDF8;
  /* by day the pale inks need a little body to read on bone paper */
  --o-lift:0;
}
html[data-sect="nocturnal"] { --o-lift:1; }

/* ── 1. Stardust trail ──────────────────────────────────────────────
   Tiny stars fall behind the pointer and fade. A mouse only pleasure,
   so it never fires on a phone, and sparse enough to stay a suggestion. */
.o-spark { position:fixed; pointer-events:none; z-index:9999; will-change:transform, opacity; }
.o-spark svg { display:block; overflow:visible; }
.o-g  { fill:var(--o-gold-pale);  stroke:var(--o-gold);       stroke-width:.7; }
.o-b  { fill:var(--o-blush-pale); stroke:var(--o-rose);       stroke-width:.7; }
.o-l  { fill:var(--o-lilac);      stroke:var(--o-lilac-deep); stroke-width:.7; }
@keyframes o-pop {
  0%   { transform:scale(0) rotate(0deg);      opacity:0; }
  30%  { transform:scale(1.1) rotate(40deg);   opacity:1; }
  100% { transform:scale(.2) rotate(110deg);   opacity:0; }
}

/* ── 4. Star burst ──────────────────────────────────────────────────
   Six stars spring from the point of a click and tumble as they fade. */
@keyframes o-fly { to { transform:translate(var(--dx), var(--dy)) scale(.25) rotate(140deg); opacity:0; } }
.o-burst { position:fixed; pointer-events:none; z-index:9999;
  animation:o-fly .8s cubic-bezier(.15,.7,.3,1) forwards; }

/* ── 8. Four point bloom ────────────────────────────────────────────
   Her own star opens to the left of a written link. Drawn as a
   background image so it adds no element and cannot shift the line. */
a.o-bloom { position:relative; }
a.o-bloom::before {
  content:''; position:absolute; left:-.95rem; top:50%; width:11px; height:11px; margin-top:-5.5px;
  pointer-events:none; opacity:0; transform:scale(.3) rotate(-45deg);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.3,1.5);
  background:no-repeat center / contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0,-10 C1.4,-4.2 4.2,-1.4 10,0 C4.2,1.4 1.4,4.2 0,10 C-1.4,4.2 -4.2,1.4 -10,0 C-4.2,-1.4 -1.4,-4.2 0,-10 Z' fill='%23C9B6EE' stroke='%23A68DD6' stroke-width='.7'/%3E%3C/svg%3E");
}
a.o-bloom:hover::before, a.o-bloom:focus-visible::before { opacity:1; transform:scale(1) rotate(0deg); }
/* at the start of a line there is no room to the left, so it sits after */
a.o-bloom.o-bloom--after::before { left:auto; right:-.95rem; }

/* ── 11. Prism sheen ────────────────────────────────────────────────
   One rainbow pass across a filled button, gone before it asks for
   attention. Ghost buttons are transparent, so they are left alone. */
.btn:not(.btn--ghost) { position:relative; overflow:hidden; isolation:isolate; }
.btn:not(.btn--ghost)::after {
  content:''; position:absolute; inset:0; z-index:-1; transform:translateX(-130%);
  background:linear-gradient(100deg, transparent 10%, rgba(255,241,196,.45),
             rgba(244,167,207,.4), rgba(201,182,238,.45), transparent 90%);
}
.btn:not(.btn--ghost):hover::after { animation:o-sheen 1.05s cubic-bezier(.3,.5,.3,1); }
@keyframes o-sheen { to { transform:translateX(130%); } }

/* ── 16. Dangling charm ─────────────────────────────────────────────
   A charm on a fine chain at the top corner of a card, swinging slowly
   enough that it is noticed once and then forgotten. */
/* The workshop cards are full in every corner and clip what leaves them,
   so the charm would land on the roman numeral. The enrol card has both
   top corners free, which is where a charm wants to hang anyway. */
.enrol-card { position:relative; }
.o-charm { position:absolute; top:0; right:1.6rem; z-index:3; pointer-events:none;
  transform-origin:50% 0; animation:o-swing 5.5s ease-in-out infinite; }
@keyframes o-swing { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
.o-charm line { stroke:var(--o-gold); stroke-width:.9; opacity:.85; }
.o-charm .o-bead { fill:var(--o-blush-pale); stroke:var(--o-rose); stroke-width:.7; }
.o-charm .o-tip  { fill:var(--o-gold-pale);  stroke:var(--o-gold);  stroke-width:.7; }
@media (max-width:640px) { .o-charm { right:1rem; transform:scale(.85); } }

/* ── 29. Sleepy moon ────────────────────────────────────────────────
   One crescent with its eyes closed, for the page that has nothing to
   show. It belongs to the 404 and nowhere else. */
.o-sleepy { display:block; width:5.5rem; height:5.5rem; margin:0 auto 1.4rem;
  animation:o-bob 5.5s ease-in-out infinite; }
@keyframes o-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
.o-sleepy .o-face  { fill:var(--o-gold-pale); stroke:var(--o-gold); stroke-width:1; }
.o-sleepy .o-eye   { stroke:var(--o-gold-deep); stroke-width:1.2; fill:none; stroke-linecap:round; }
.o-sleepy .o-blush { fill:var(--o-blush); opacity:.5; }
.o-sleepy .o-zzz   { font-family:var(--caps, sans-serif); fill:var(--o-lilac-deep); }

@media (prefers-reduced-motion:reduce) {
  .o-spark, .o-burst { display:none !important; }
  .o-charm, .o-sleepy { animation:none; }
  .btn:not(.btn--ghost):hover::after { animation:none; }
}