/* Motion for the code-drawn FrostLoop brand. Everything here stops for people who asked for less motion. */
.fl-flake, .fl-penguin { display: block; overflow: visible; }
.fl-flake .fl-spin { animation: fl-spin 70s linear infinite; }
.fl-flake .fl-glint { animation: fl-glint 5.5s cubic-bezier(.4,0,.2,1) infinite; }
.fl-flake .fl-spk { transform-box: fill-box; transform-origin: center; animation: fl-twinkle 3.2s ease-in-out infinite; }
.fl-flake .fl-spk.s2 { animation-delay: -1.1s; } .fl-flake .fl-spk.s3 { animation-delay: -2.2s; }
.fl-flake .fl-bub { animation: fl-float 5s ease-in-out infinite; } .fl-flake .fl-bub.b2 { animation-delay: -1.2s; } .fl-flake .fl-bub.b3 { animation-delay: -2.4s; } .fl-flake .fl-bub.b4 { animation-delay: -3.4s; }
a:hover .fl-flake, .fl-flake:hover { filter: drop-shadow(0 0 10px rgba(99,184,255,.7)); }

.fl-penguin { --lx: 0; --ly: 0; }
.fl-penguin .fl-bob { animation: fl-bob 4.6s ease-in-out infinite; transform-origin: 110px 280px; }
.fl-penguin .fl-breathe { animation: fl-breathe 3.6s ease-in-out infinite; transform-origin: 110px 270px; }
.fl-penguin .fl-eye { animation: fl-blink 5.6s infinite; }
.fl-penguin .fl-pupil { transform: translate(calc(var(--lx) * 3px), calc(var(--ly) * 2.4px)); transition: transform .12s ease-out; }
.fl-penguin .fl-wing { animation: fl-wave 4.8s ease-in-out infinite; }
.fl-penguin:hover .fl-wing, .penguin-btn:hover .fl-wing { animation: fl-wave-fast .7s ease-in-out infinite; }

.fl-lockup { width: min(100%, 440px); margin: 0 auto; }
.fl-lock-top { display: flex; align-items: center; gap: 14px; justify-content: center; }
.fl-word { font: 700 3rem/1 var(--sans, system-ui); letter-spacing: -.02em; white-space: nowrap; }
.fl-word b { color: #0c1f3b; font-weight: 700; }
.fl-word i { font-style: normal; background: linear-gradient(100deg, #3d9bff 0%, #8f8cf5 38%, #f58f9a 70%, #f2a33a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fl-shimmer 6s ease-in-out infinite; }
.fl-tag { margin-top: 8px; font: 500 .8rem var(--sans, system-ui); letter-spacing: .09em; color: #3f4f68; white-space: nowrap; }
.fl-ribbon { display: block; width: 100%; height: auto; margin-top: -4px; overflow: visible; }
.fl-ribbon-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fl-draw 2.2s .3s cubic-bezier(.4,0,.2,1) forwards; }
.fl-lockup { position: relative; }
.fl-lockup .fl-sparks { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; }
.fl-lockup .fl-sparks i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 4px rgba(255,190,110,.9), 0 0 4px 1px #fff; offset-path: path('M8 52 C 80 52 124 14 214 14 C 306 14 332 62 384 54 C 432 46 420 8 372 12 C 316 16 268 68 178 68 C 100 68 64 52 8 52'); offset-rotate: 0deg; animation: fl-travel 6s linear infinite; animation-delay: var(--d, 0s); opacity: 0; }

@keyframes fl-spin { to { transform: rotate(360deg); } }
@keyframes fl-glint { 0%, 55% { transform: translateX(-80px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(330px); opacity: 0; } }
@keyframes fl-twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes fl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fl-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4px) rotate(1.2deg); } }
@keyframes fl-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.02); } }
@keyframes fl-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes fl-wave { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-16deg); } 70% { transform: rotate(6deg); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(4deg); } }
@keyframes fl-wave-fast { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-20deg); } }
@keyframes fl-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
@keyframes fl-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-flake *, .fl-penguin *, .fl-lockup *, .fl-word i { animation: none !important; } .fl-ribbon-path { stroke-dashoffset: 0; } }

/* ---- the pitch-day artwork with code-made motion */
.fl-art { display: inline-block; position: relative; perspective: 1100px; vertical-align: bottom; }
.fl-art img { display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.fl-art.pg img, .fl-art.fk img, .fl-art.wm img, .fl-art.wc img { height: var(--h); width: auto; }
.fl-art.lg { width: var(--w); } .fl-art.lg img { width: 100%; height: auto; }
.fl-art-bob { animation: fl-art-bob 5.2s ease-in-out infinite; transform-origin: 50% 100%; }
.fl-art.pg .fl-art-bob { animation: fl-art-breathe 4.2s ease-in-out infinite; }
.fl-art.wm .fl-art-bob, .fl-art.wc .fl-art-bob { animation: none; }
.fl-art-tilt { --ga: 0; transition: transform .2s ease-out; position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; transform-style: preserve-3d; will-change: transform; }
.fl-art:hover .fl-art-tilt { filter: drop-shadow(0 8px 14px rgba(47,111,228,.25)); }
.fl-glare { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,var(--ga, 0)), rgba(255,255,255,0) 46%), linear-gradient(110deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  background-size: 100% 100%, 260% 100%; background-repeat: no-repeat; background-position: 0 0, -160% 0; mix-blend-mode: soft-light; animation: fl-sweep 6.5s cubic-bezier(.4,0,.2,1) infinite; }
.fl-art.wm .fl-glare, .fl-art.wc .fl-glare { background-size: 0 0, 260% 100%; }
.fl-art.wm .fl-glare, .fl-art.wc .fl-glare { animation-duration: 5.2s; animation-delay: 1.2s; }
.fl-art .sp { position: absolute; left: var(--x); top: var(--y); width: 13px; height: 13px; margin: -6px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px rgba(120,190,255,.95)); animation: fl-art-twinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.fl-art.lg .sp { width: 16px; height: 16px; margin: -8px; }
.fl-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

@keyframes fl-art-bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-5px) rotate(.6deg); } }
@keyframes fl-art-breathe { 0%, 100% { transform: translateY(0) scale(1, 1) rotate(-1deg); } 50% { transform: translateY(-3px) scale(1.012, 1.022) rotate(1deg); } }
@keyframes fl-sweep { 0%, 58% { background-position: 0 0, -160% 0; } 100% { background-position: 0 0, 160% 0; } }
@keyframes fl-art-twinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fl-art *, .fl-art { animation: none !important; transition: none !important; } .fl-art .sp, .fl-route { display: none; } }

/* the snowflake is cut out of the logo, where its right arm runs on into the ribbon: let that arm fade out instead of ending in a hard edge */
.fl-art.fk .fl-art-tilt { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%); }

/* ---- the wordmark in live text */
.fl-w { display: inline-flex; align-items: center; font: 800 var(--fs, 40px)/1 'Montserrat', var(--sans, system-ui); letter-spacing: -.02em; white-space: nowrap; }
.fl-w b { font-weight: 800; background: linear-gradient(180deg, #24385c 0%, #0a1b3a 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fl-lp { display: inline-flex; align-items: center; }
.fl-lp i { font-style: normal; } .fl-lp i.l { background: linear-gradient(180deg, #59b0ff, #2f6fe4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fl-lp i.p { background: linear-gradient(180deg, #fbbd68, #f08a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fl-inf { width: 1.27em; height: .65em; margin: 0 .015em; align-self: flex-end; margin-bottom: .02em; overflow: visible; }
.fl-w em { font-style: normal; font-size: .46em; font-weight: 800; letter-spacing: .06em; margin-left: .55em; padding: .2em .62em; border-radius: .6em; color: #fff; background: linear-gradient(135deg, #2f6fe4, #0b3a63); box-shadow: 0 .2em .6em rgba(47,111,228,.35); align-self: center; }
/* ---- the full logo: art on the left, the name set large to its right, ribbon running under it */
.fl-logo2 { position: relative; width: var(--w); height: calc(var(--w) * .4); }
.fl-art.mk { width: calc(var(--w) * .913); position: absolute; left: 0; bottom: 0; } .fl-art.mk img { width: 100%; height: auto; }
.fl-lw { position: absolute; left: 33%; top: 6%; }
.fl-lw .fl-w { --fs: calc(var(--w) * .0995); }

/* dark mode: the lettering switches to a light version (no white plate behind it) */
.fl-art img.dk { display: none; }
html[data-theme='dark'] .fl-art img.dk { display: block; }
html[data-theme='dark'] .fl-art img.lt:has(+ img.dk) { display: none; }