/* ===========================================================================
   holdhex.css - the inside of the purple hexagon (holdhex.js builds the SVG).
   Shared on purpose: the sigil over a atlas picture and the sigil over a
   Starmap star have to look and move identically. A page only has to give
   its .hold-hex box a position and a size - everything inside lives here.

   Colour: every part of the sigil is painted from the --hx-* variables, and
   the purple it has always been rides on each one as its fallback. That is
   what the star on Starmap wears, since the night sky has no card colour to
   borrow; a atlas card sets the variables higher up the tree (on the card
   itself, where its genre colour already lives) and the sigil takes it.
   Deliberately NOTHING is declared on .hold-hex: a value declared here would
   beat the one inherited from the card, and every card would come out purple
   again - which is exactly what happened the first time round.
   =========================================================================== */

/* the faint outline the bar walks around, and the star inside it are below */
.hold-hex .hx-svg { display: block; width: 100%; height: 100%;
  overflow: visible; }

/* the faint outline the bar walks around, and the star inside it */
.hold-hex .hx-track { fill: none; stroke: var(--hx-track, #be82ff); stroke-opacity: .26;
  stroke-width: 2.4; stroke-linejoin: round; }
.hold-hex .hx-star { fill: none; stroke: var(--hx-star, #d89cff); stroke-opacity: .5;
  stroke-width: 1.5; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  animation: hx-turn 9s linear infinite; }
.hold-hex .hx-star.alt { stroke: var(--hx-alt, #e8b6ff); stroke-opacity: .38;
  animation-duration: 12s; animation-direction: reverse; }
@keyframes hx-turn { to { transform: rotate(360deg); } }

/* the bar itself: a dash as long as the whole outline, pushed back to nothing
   and let forward again - 100% is a closed ring. The gradient it is painted
   with is built per hexagon by holdhex.js and arrives as a stroke attribute,
   because every card carries a colour of its own. */
.hold-hex .hx-fill {
  fill: none; stroke-width: 5.5; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 252; stroke-dashoffset: 252;
}
.hold-hex .hx-line .s1 { stop-color: var(--hx-light, #ffb8f4); }
.hold-hex .hx-line .s2 { stop-color: var(--hx-main, #c46bff); }
.hold-hex .hx-line .s3 { stop-color: var(--hx-deep, #7a34ff); }

/* the six sparks on the corners, waiting to be lit */
.hold-hex .hx-sp { opacity: .16; transition: opacity .2s ease; }
.hold-hex .hx-sp path { fill: var(--hx-spark, #ffe2ff); fill-opacity: .9; }
.hold-hex .hx-sp.lit { opacity: 1; animation: hx-twinkle 1s ease-in-out infinite; }
@keyframes hx-twinkle {
  0%, 100% { opacity: .6; filter: drop-shadow(0 0 3px var(--hx-tw, #d99cff)); }
  50% { opacity: 1; filter: drop-shadow(0 0 9px var(--hx-tw2, #ff9df0)); }
}

/* the little heart of it, breathing */
.hold-hex .hx-core { fill: var(--hx-core, #fff); opacity: .4;
  animation: hx-breathe 1.1s ease-in-out infinite; }
@keyframes hx-breathe { 0%, 100% { opacity: .28; } 50% { opacity: .95; } }

/* the ring closed: a flash of white inside the colour, and the whole thing
   blooms away */
.hold-hex.done { animation: hx-bloom .42s ease-out forwards; }
.hold-hex.done .hx-fill { stroke: #fff; stroke-width: 6.5;
  filter: drop-shadow(0 0 10px var(--hx-main, #c46bff))
          drop-shadow(0 0 22px var(--hx-deep, #7a34ff)); }
.hold-hex.done .hx-sp, .hold-hex.done .hx-star { stroke: #fff;
  animation: none; opacity: 1; }
@keyframes hx-bloom {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

/* A text link has no picture box to borrow, so its invitation sigil lives in
   a small fixed host above the link. It never takes a click for itself. */
.world-link-hold {
  position: fixed; z-index: 120; pointer-events: none;
  transform: translate(-50%, -50%);
}
.world-link-hold .hold-hex {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  transform: translate(-50%, -50%);
}
#world-link-note {
  position: fixed; z-index: 121; left: 50%; bottom: 22px;
  max-width: min(440px, calc(100vw - 32px)); padding: 9px 13px;
  transform: translateX(-50%); border: 1px solid var(--hair, #6f63a6);
  border-radius: 9px; background: rgba(12, 10, 28, .95); color: #e9e4ff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); font: 12.5px "Segoe UI", system-ui, sans-serif;
  text-align: center;
}
#world-link-note.good { border-color: #4ad07a; color: #baffd0; }
#world-link-note.bad { border-color: #ef6d86; color: #ffc4cf; }