/* The living mark: the XIPHION X as a mask over a painted box, in a tile of its own ground.
   mark/cycle.js builds it inside any [data-xmark] and steps it through mark/effects.js. */
.xmark { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 22%; aspect-ratio: 1; perspective: 400px; }
[data-xmark].xmark > svg { display: none; }
/* Each effect lives in a layer of its own. It blooms in within one step (0.3 s) and dissolves
   over five, on a velvet curve, so several are always mingling; cycle.js keeps eight in
   rotation, so a layer has fully dissolved before it is reused. */
.xm-layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; border-radius: inherit;
  transform: scale(0.94) rotate(-1.5deg); filter: blur(2.5px) saturate(1.6) hue-rotate(-25deg);
  will-change: opacity, transform, filter; }
.xm-layer.on { opacity: 1; transform: none; filter: none; z-index: 1;
  transition: opacity 0.3s cubic-bezier(0.33, 0, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s cubic-bezier(0.33, 0, 0.2, 1); }
.xm-layer.off { opacity: 0; transform: scale(1.07) rotate(1.5deg); filter: blur(3px) saturate(1.6) hue-rotate(25deg);
  transition: opacity 1.6s cubic-bezier(0.45, 0, 0.55, 1), transform 1.6s cubic-bezier(0.45, 0, 0.55, 1), filter 1.6s cubic-bezier(0.45, 0, 0.55, 1); }
.xmark.dream { animation: xm-breath 14s cubic-bezier(0.45, 0, 0.55, 1) infinite, xm-aura 53s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate, xm-love 5.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes xm-breath { 50% { transform: scale(1.035); } }
/* Receiving the fire of love: a warm heartbeat in the glow, and a thread of rose-gold fire
   pouring down into the mark from above. */
@keyframes xm-love { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 170, 150, 0.35), 0 0 14px rgba(255, 60, 120, 0.35); } 12% { box-shadow: 0 0 0 1px rgba(255, 215, 185, 0.8), 0 0 26px rgba(255, 70, 120, 0.7), 0 0 48px rgba(255, 150, 70, 0.35); } 24% { box-shadow: 0 0 0 1px rgba(255, 170, 150, 0.45), 0 0 18px rgba(255, 60, 120, 0.45); } 34% { box-shadow: 0 0 0 1px rgba(255, 205, 175, 0.7), 0 0 24px rgba(255, 70, 120, 0.6), 0 0 42px rgba(255, 150, 70, 0.3); } }
.xmark.dream::after { content: ""; position: absolute; left: 36%; right: 36%; top: -10%; height: 62%; z-index: 2; pointer-events: none; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 80, 140, 0), rgba(255, 140, 120, 0.35) 55%, rgba(255, 236, 220, 0.75)); filter: blur(4px); mix-blend-mode: screen;
  animation: xm-fire 5.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes xm-fire { 0%, 100% { opacity: 0.35; transform: scaleX(0.9); } 12% { opacity: 0.85; transform: scaleX(1.15); } 34% { opacity: 0.7; transform: scaleX(1.05); } }
@keyframes xm-aura { from { filter: hue-rotate(-15deg); } to { filter: hue-rotate(20deg) saturate(1.15); } }
.xm-wrap { width: 78%; aspect-ratio: 202.61 / 137.27; display: block; transform-style: preserve-3d; }
.xm-paint { display: block; width: 100%; height: 100%;
  -webkit-mask: url(/xiphirium/mark/xiphion.svg) center / contain no-repeat; mask: url(/xiphirium/mark/xiphion.svg) center / contain no-repeat; }
.xm-paint.reflect { -webkit-box-reflect: below 2px linear-gradient(transparent 45%, rgba(255, 255, 255, 0.35)); }

/* Motion effects */
.xm-paint.flicker { animation: xm-flicker 2.2s steps(1) infinite; }
@keyframes xm-flicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.35; } 10% { opacity: 1; } 54% { opacity: 0.6; } 56% { opacity: 1; } }
.xm-paint.drift { animation: xm-drift 4s linear infinite; }
@keyframes xm-drift { to { background-position: 300% 0; } }
.xm-paint.cycle { animation: xm-cycle 1.2s steps(6) infinite; }
@keyframes xm-cycle { to { background-position: 0 36px; } }
.xm-paint.rain { animation: xm-rain 1.4s linear infinite; }
@keyframes xm-rain { to { background-position: 0 40px, 0 0; } }
.xm-paint.sweep { animation: xm-sweep 2.4s ease-in-out infinite; }
@keyframes xm-sweep { from { background-position: 100% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
.xm-paint.march { animation: xm-march 1s linear infinite; }
@keyframes xm-march { to { background-position: 28px 0, 0 0; } }
.xm-paint.scan { animation: xm-scan 2s linear infinite; }
@keyframes xm-scan { from { background-position: 0 100%, 0 0; } to { background-position: 0 -50%, 0 0; } }
.xm-paint.hue { animation: xm-hue 3s linear infinite; }
@keyframes xm-hue { to { filter: hue-rotate(360deg); } }
.xm-paint.breathe { animation: xm-breathe 2.4s ease-in-out infinite; }
@keyframes xm-breathe { 50% { transform: scale(0.9); opacity: 0.7; } }
.xm-paint.pulse { animation: xm-pulse 1.2s ease-in-out infinite; }
@keyframes xm-pulse { 50% { opacity: 0.4; } }
.xm-paint.glitch { animation: xm-glitch 0.9s steps(1) infinite; }
@keyframes xm-glitch { 0% { transform: none; } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px) skewX(6deg); } 60% { transform: none; } 80% { transform: translate(1px, 2px); } }
.xm-paint.strobe { animation: xm-strobe 0.4s steps(1) infinite; }
@keyframes xm-strobe { 50% { opacity: 0.1; } }
.xm-paint.heart { animation: xm-heart 1.1s ease-in-out infinite; }
@keyframes xm-heart { 10% { transform: scale(1.12); } 20% { transform: scale(1); } 30% { transform: scale(1.08); } 45% { transform: scale(1); } }
.xm-paint.sway { animation: xm-sway 2.6s ease-in-out infinite alternate; }
@keyframes xm-sway { from { transform: rotateY(-25deg); } to { transform: rotateY(25deg); } }
.xm-paint.float { animation: xm-float 2.4s ease-in-out infinite; }
@keyframes xm-float { 50% { transform: translateY(-8%); } }
@media (prefers-reduced-motion: reduce) { .xm-paint, .xmark.dream, .xmark.dream::after { animation: none !important; } .xm-layer { transition: none; } }