155 lines
4.5 KiB
SCSS
155 lines
4.5 KiB
SCSS
// Konfety po výsledku kola štěstí, převzaté z Luncheru
|
|
.wheel-confetti {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2000; // nad modalem (bootstrap 1055)
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
|
|
> span {
|
|
position: absolute;
|
|
will-change: transform, opacity;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
|
|
// Vrh: rychle vzhůru do vrcholu (zpomalení), pak volný pád (zrychlení)
|
|
@keyframes confetti-throw {
|
|
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
|
|
6% { opacity: 1; }
|
|
38% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
|
|
88% { opacity: 1; }
|
|
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1); opacity: 0; }
|
|
}
|
|
|
|
// Déšť: plynulý pád shora s mírným houpáním
|
|
@keyframes confetti-rain {
|
|
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; animation-timing-function: ease-in-out; }
|
|
8% { opacity: 1; }
|
|
40% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); animation-timing-function: ease-in; }
|
|
88% { opacity: 1; }
|
|
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); opacity: 0; }
|
|
}
|
|
|
|
.confetti-emoji {
|
|
line-height: 1;
|
|
}
|
|
|
|
// ============================================
|
|
// Konfety ve stylu Hell Girl
|
|
// ============================================
|
|
.confetti-hg {
|
|
filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
|
|
}
|
|
|
|
.confetti-hg-badge {
|
|
padding: 4px 14px;
|
|
border: 1px solid #c8102e;
|
|
outline: 1px solid rgb(200 16 46 / 0.4);
|
|
outline-offset: 2px;
|
|
color: #fff4ee;
|
|
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
|
font-weight: 800;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 1px;
|
|
white-space: nowrap;
|
|
text-shadow: 0 0 8px rgb(232 52 79 / 0.7);
|
|
}
|
|
|
|
// Nápis „poslání do pekla" — černá deska s rudým lemem, vynoří se z mlhy
|
|
.confetti-hg-banner {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 14px 48px;
|
|
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
|
font-weight: 800;
|
|
font-size: clamp(2rem, 7vw, 4rem);
|
|
letter-spacing: 0.3em;
|
|
white-space: nowrap;
|
|
color: #fff4ee;
|
|
background: linear-gradient(90deg, transparent, #12070a 15%, #12070a 85%, transparent);
|
|
border-top: 2px solid #c8102e;
|
|
border-bottom: 2px solid #c8102e;
|
|
text-shadow: 0 0 18px rgb(232 52 79 / 0.9), 0 0 4px #c8102e;
|
|
animation: hg-banner 2.6s ease both;
|
|
}
|
|
|
|
@keyframes hg-banner {
|
|
0% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; filter: blur(12px); }
|
|
25% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
|
75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
|
100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; filter: blur(8px); }
|
|
}
|
|
|
|
// Postava s hláškou — tmavý odznak s rudou září a bublina jako svitek
|
|
.confetti-voice {
|
|
position: absolute;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
max-width: min(460px, calc(100vw - 32px));
|
|
animation: confetti-voice 4.6s ease both;
|
|
}
|
|
|
|
.confetti-avatar {
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 84px;
|
|
height: 84px;
|
|
margin-bottom: 8px;
|
|
font-size: 46px;
|
|
border-radius: 50%;
|
|
border: 4px solid #12070a;
|
|
background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
|
|
box-shadow: 0 0 0 3px var(--speaker, #c8102e), 0 0 18px rgb(200 16 46 / 0.6);
|
|
}
|
|
|
|
.confetti-bubble {
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
padding: 12px 16px;
|
|
background: #170c0f;
|
|
color: #f3e6e2;
|
|
border: 1px solid var(--speaker, #c8102e);
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 16px rgb(0 0 0 / 0.6), 0 0 10px rgb(200 16 46 / 0.3);
|
|
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
|
|
|
p {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
small {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--speaker, #c8102e);
|
|
font-weight: 700;
|
|
}
|
|
|
|
// ocásek bubliny směrem k postavě
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -14px;
|
|
bottom: 14px;
|
|
border: 8px solid transparent;
|
|
border-right: 10px solid var(--speaker, #c8102e);
|
|
}
|
|
}
|
|
|
|
@keyframes confetti-voice {
|
|
0% { opacity: 0; transform: translateY(40px) scale(0.8); }
|
|
10% { opacity: 1; transform: translateY(0) scale(1.03); }
|
|
15% { transform: translateY(0) scale(1); }
|
|
85% { opacity: 1; transform: translateY(0); }
|
|
100% { opacity: 0; transform: translateY(20px); }
|
|
}
|