/* ==========================================================================
   HiSleep logos — shared by the storefront and the back office.
   <x-brand.mark>      H monogram (blue cup + yellow arch)
   <x-brand.wordmark>  "Hi Sleep" with stars and moon
   ========================================================================== */

:root { --hs-blue: #1585c6; --hs-yellow: #f3ea2a; --hs-ease: cubic-bezier(.22, 1, .36, 1); }

.hs-mark, .hs-wordmark { display: block; height: auto; overflow: visible; }
.hs-star, .hs-moon { fill: var(--hs-star, currentColor); }
.hs-sub { opacity: .9; }

/* ---------- H monogram: strokes draw themselves ---------- */
.hs-mark path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.hs-mark.is-animated .hs-cup { animation: hs-draw 1.1s var(--hs-ease) .1s both; }
.hs-mark.is-animated .hs-arch { animation: hs-draw 1.1s var(--hs-ease) .35s both; }
@keyframes hs-draw { from { stroke-dashoffset: 1; } }

/* re-draw on hover (used in the header) */
.hs-hover:hover .hs-mark .hs-cup, .hs-mark.hs-hover:hover .hs-cup { animation: hs-redraw-a .9s var(--hs-ease) both; }
.hs-hover:hover .hs-mark .hs-arch, .hs-mark.hs-hover:hover .hs-arch { animation: hs-redraw-b .9s var(--hs-ease) .15s both; }
@keyframes hs-redraw-a { from { stroke-dashoffset: -1; } }
@keyframes hs-redraw-b { from { stroke-dashoffset: 1; } }

/* endless loader: draw → hold → retract */
.hs-mark.is-looping .hs-cup { animation: hs-loop 2.4s var(--hs-ease) infinite; }
.hs-mark.is-looping .hs-arch { animation: hs-loop 2.4s var(--hs-ease) .3s infinite; }
@keyframes hs-loop { 0% { stroke-dashoffset: 1; } 45%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

/* gentle float for decorative marks */
.hs-float { animation: hs-float 9s ease-in-out infinite; }
@keyframes hs-float { 50% { transform: translateY(-14px) rotate(2deg); } }

/* ---------- Wordmark: moon rises, stars pop & twinkle, letters rise, the i-dot drops ---------- */
.hs-wordmark.is-animated .hs-moon { animation: hs-moon 1.2s var(--hs-ease) .15s both; }
@keyframes hs-moon { from { opacity: 0; transform: translateY(14px) scale(.85); } }

.hs-wordmark.is-animated .hs-star {
    animation: hs-pop .7s cubic-bezier(.34, 1.56, .64, 1) calc(.45s + var(--i) * .09s) both,
               hs-twinkle calc(2.6s + var(--i) * .45s) ease-in-out calc(1.6s + var(--i) * .3s) infinite;
}
@keyframes hs-pop { from { opacity: 0; transform: scale(0) rotate(-120deg); } }
@keyframes hs-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72) rotate(18deg); } }

.hs-wordmark.is-animated .hs-letter { animation: hs-rise .8s var(--hs-ease) calc(.25s + var(--i) * .06s) both; }
.hs-wordmark.is-animated .hs-dot { animation: hs-dot .9s cubic-bezier(.34, 1.7, .5, 1) 1s both; }
.hs-wordmark.is-animated .hs-sub { animation: hs-fade .8s ease 1.1s both; }
@keyframes hs-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hs-dot { 0% { opacity: 0; transform: translateY(-38px); } 60% { opacity: 1; } }
@keyframes hs-fade { from { opacity: 0; } }

/* stars spin once on hover */
.hs-hover:hover .hs-star { animation: hs-spin .9s var(--hs-ease) calc(var(--i) * .05s) both !important; }
@keyframes hs-spin { to { transform: rotate(144deg) scale(1.15); } }

/* "SLEEP GOOD | LIVE GOOD" strip, matching the logo */
.hs-tagline { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.hs-tagline b { background: var(--hs-yellow); color: #0b2547; padding: .32em .45em; border-radius: .25em; font-weight: 700; }
.hs-tagline span { color: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .hs-mark *, .hs-wordmark * { animation: none !important; }
}