/* Siman logo animation (the red icon shoots in from the right and the wordmark is revealed behind it).
   Shared by the React <Logo/> and the static loading screen in index.html, so both play the exact same animation. */
/* ── Animated logo: the red icon shoots in from the right like a bullet and the wordmark is revealed behind it ── */
.siman-logo { position: relative; display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; max-width: 100%; --d: 1.05s; --delay: .25s; --ease: cubic-bezier(.22,.9,.28,1); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.siman-logo:hover { transform: scale(1.04); }
.siman-logo > img { display: block; position: relative; z-index: 1; }
/* bullet mode: base image = wordmark, uncovered from the right, always just behind the icon */
.siman-logo--bullet > img { animation: siman-text-reveal var(--d) var(--ease) var(--delay) both; }
.siman-logo__bullet { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: siman-bullet var(--d) var(--ease) var(--delay) both; }
.siman-logo__icon { display: block; width: 100%; height: 100%; object-fit: fill; clip-path: inset(0 calc(100% - var(--f) * 100%) 0 0); animation: siman-icon-flash .8s ease-out calc(var(--delay) + var(--d) - .1s) both; }
.siman-logo__trail { position: absolute; top: 50%; left: calc(var(--f) * 100% - 3%); width: 78%; height: 15%; border-radius: 99px; transform: translateY(-50%); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(225,37,27,.95), rgba(225,37,27,.35) 45%, rgba(225,37,27,0)); filter: blur(2.5px); opacity: 0; animation: siman-trail var(--d) ease-out var(--delay) both; }
.siman-logo__trail::before, .siman-logo__trail::after { content: ""; position: absolute; left: 6%; width: 70%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(225,37,27,.8), rgba(225,37,27,0)); }
.siman-logo__trail::before { top: -140%; } .siman-logo__trail::after { bottom: -140%; width: 55%; }
.siman-logo__burst { position: absolute; z-index: 0; left: calc(var(--cx) * 100%); top: 50%; height: 78%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(225,37,27,.7); pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.5); animation: siman-burst .75s ease-out calc(var(--delay) + var(--d) - .08s) both; }
/* custom (uploaded) logos: simple wipe */
.siman-logo--wipe > img { animation: siman-wipe .9s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes siman-text-reveal { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 calc(var(--f) * 100%)); } }
@keyframes siman-bullet { from { transform: translateX(calc((1 - var(--f)) * 100%)); } to { transform: translateX(0); } }
@keyframes siman-trail { 0% { opacity: 0; transform: translateY(-50%) scaleX(.15); } 14% { opacity: 1; transform: translateY(-50%) scaleX(1); } 72% { opacity: .85; } 100% { opacity: 0; transform: translateY(-50%) scaleX(.35); } }
@keyframes siman-icon-flash { 0% { filter: none; } 28% { filter: brightness(1.5) drop-shadow(0 0 7px rgba(255,70,55,.95)); } 100% { filter: none; } }
@keyframes siman-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 18% { opacity: .75; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.3); } }
@keyframes siman-wipe { from { clip-path: inset(0 0 0 100%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .siman-logo > img { animation: none !important; } .siman-logo__bullet, .siman-logo__burst { display: none; } .siman-logo:hover { transform: none; } }