/* EltaierTech, variant A "Aurora" : gfx/core.css
   Containers and label type for the "Aurora Blueprint, quiet edition" graphics.
   Reuses the custom properties of ../styles.css (--hair, --hair-2, --display, --radius ...) with literal fallbacks.
   Loaded by <link rel="stylesheet" href="gfx/core.css">; core.js adds the link itself if it is missing. */

:root {
  --gfx-core: 1;                                   /* marker read by core.js */
  /* CSS mirror of PAL in core.js, for the few CSS-only motions (tick pop, pill ring, photo push-in) */
  --gfx-structure: rgba(255, 255, 255, .16);
  --gfx-ghost: rgba(154, 154, 166, .55);
  --gfx-line: rgba(187, 164, 255, .9);
  --gfx-lilac: #BBA4FF;
  --gfx-head: #E4DAFF;
  --gfx-violet: #8B4DF7;
  --gfx-deep: #6A28D9;
  --gfx-grad0: #7A3DF0;
  --gfx-grad1: #5B8CFF;
  --gfx-indigo: #5B8CFF;
  --gfx-white: #F2F2F5;
  --gfx-fill: rgba(139, 77, 247, .10);
  --gfx-fill-lit: rgba(139, 77, 247, .22);
  --gfx-ground: #141419;
  --gfx-label: #D9D3EA;
  --gfx-muted: #A3A3B0;
  --gfx-resolved: linear-gradient(135deg, #7A3DF0, #5B8CFF);
  --gfx-resolved-stroke: rgba(187, 164, 255, .8);
  --gfx-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));   /* the CSS twin of easeOut */
  --gfx-pop: 320ms;
  --gfx-state: 480ms;
  --gfx-stagger: 90ms;
  --gfx-soften: 700ms;
  --gfx-rule: var(--hair, rgba(255, 255, 255, .09));
}

/* ---------- stage: the transparent container every graphic is drawn in ---------- */
/* No tile, no well, no lattice, no card-in-card, no backdrop-filter. */
.gfx-stage {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
/* a stage at the top of a glass card ends with one hairline rule */
.gfx-stage.gfx-stage--rule { border-bottom: 1px solid var(--gfx-rule); margin-bottom: 22px; }
.gfx-stage.gfx-stage--rule-lg { border-bottom: 1px solid var(--gfx-rule); margin-bottom: 24px; }

/* aspect-ratio boxes (or set --gfx-ar / --gfx-h on the element) */
.gfx-stage.gfx-ar { aspect-ratio: var(--gfx-ar, 16 / 9); }
.gfx-stage.gfx-ar-1x1 { aspect-ratio: 1 / 1; }
.gfx-stage.gfx-ar-4x3 { aspect-ratio: 4 / 3; }
.gfx-stage.gfx-ar-16x9 { aspect-ratio: 16 / 9; }
.gfx-stage.gfx-ar-2x1 { aspect-ratio: 2 / 1; }
.gfx-stage.gfx-ar-3x1 { aspect-ratio: 3 / 1; }
.gfx-stage.gfx-ar-4x1 { aspect-ratio: 4 / 1; }
.gfx-stage.gfx-h { height: var(--gfx-h, 96px); }
.gfx-stage.gfx-mark { width: 44px; height: 44px; flex: none; }          /* the 44px marks */

/* ---------- layers (weight of two classes, so `.glow > *` never wins) ---------- */
.gfx-host > .gfx-canvas {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none;
  display: block; pointer-events: none;
}

/* ---------- labels: real DOM text over the canvas, never canvas text ---------- */
.gfx-host .gfx-label {
  position: absolute; left: 0; top: 0; z-index: 2;
  margin: 0; padding: 0;
  font: 500 11px/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--gfx-muted);
  pointer-events: none; transition: none;
  -webkit-user-select: none; user-select: none;
}
/* photo chip: the same type on a glass pill */
.gfx-host .gfx-label.gfx-chip {
  padding: 6px 10px; border-radius: 999px;
  background: rgba(16, 16, 20, .66);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--gfx-label);
}
.gfx-host .gfx-chip > .gfx-chip__no { font-weight: 500; color: var(--gfx-lilac); margin-right: .7em; }
@media (max-width: 680px) {
  .gfx-host .gfx-label { font-size: 10px; }
}

/* ---------- glass frame: the site's card surface, for harnesses and standalone frames ---------- */
/* Stages never use this on themselves; it exists so a stage can be previewed on the glass it will sit on. */
.gfx-glass {
  position: relative;
  background: linear-gradient(180deg, rgba(38, 38, 46, .55), rgba(28, 28, 34, .45));
  border: 1px solid var(--hair, rgba(255, 255, 255, .09));
  border-radius: var(--radius, 22px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -40px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* window / photo frame outline: radius 8, one hairline */
.gfx-frame { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--hair-2, rgba(255, 255, 255, .16)); background: var(--bg-2, #141419); }

/* ---------- lifecycle classes written by core.js ---------- */
/* CSS-only motion: put .gfx-anim on the animated element; it pauses while its host is off-screen or the tab is hidden */
.gfx-host.gfx-paused .gfx-anim, .gfx-host.gfx-paused.gfx-anim { animation-play-state: paused !important; }
.gfx-host.gfx-still .gfx-anim, .gfx-host.gfx-still.gfx-anim { animation: none !important; transition: none !important; }

/* failure fallback for an empty .gfx-stage: one quiet hairline with a ring node, never a blank box.
   (A site element used as a host simply gets its static markup back.) */
.gfx-stage.gfx-failed::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 1;
  background: linear-gradient(90deg, var(--gfx-structure), rgba(255, 255, 255, 0));
}
.gfx-stage.gfx-failed::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; z-index: 1;
  box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--gfx-violet); background: var(--gfx-ground);
}

@media (prefers-reduced-motion: reduce) {
  .gfx-host .gfx-anim, .gfx-host.gfx-anim { animation: none !important; transition: none !important; }
}