/* Decorative motion: selection, logo wave, heat bar, toast, back-to-top,
   seasonal flourishes. Reduced-motion overrides stay at the bottom of this file. */

/* --------------------------------------------------------------------------
   Quirky cooling flourishes
   -------------------------------------------------------------------------- */

::selection { background: rgba(0, 180, 230, .35); color: var(--text); }

@keyframes tk-wave-flow {
    to { stroke-dashoffset: -40; }
}
@keyframes tk-shine {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}
@keyframes tk-snow-fall {
    from { transform: translateY(-8vh) rotate(0deg); }
    to   { transform: translateY(110vh) rotate(240deg); }
}
@keyframes tk-burst-fly {
    from { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    to   { opacity: 0; transform: translate(var(--tk-dx), var(--tk-dy)) scale(.4) rotate(var(--tk-rot)); }
}
@keyframes tk-pulse-glow {
    50% { box-shadow: 0 8px 22px rgba(0, 180, 230, .55), 0 0 0 8px rgba(0, 180, 230, .16); }
}
@keyframes tk-breathe {
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px var(--cyan-dim); }
}
@keyframes tk-frost-sweep {
    0%   { transform: scaleX(0); opacity: .55; }
    55%  { transform: scaleX(1); opacity: .35; }
    100% { transform: scaleX(1); opacity: 0; }
}
@keyframes tk-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tk-coolbar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 80;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(to right, var(--cyan), var(--cyan-bright));
    pointer-events: none;
}
html[dir="rtl"] .tk-coolbar { transform-origin: right; }
html[dir="ltr"] .tk-coolbar { transform-origin: left; }
html[dir="rtl"] .tk-coolbar { background: linear-gradient(to left, var(--cyan), var(--cyan-bright)); }

.tk-scrolled .tk-header {
    box-shadow: 0 10px 28px rgba(0, 180, 230, .08);
    border-bottom-color: var(--cyan-line);
}

.tk-frostwipe {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(180, 240, 255, .45), rgba(0, 180, 230, .12));
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}
html[dir="rtl"] .tk-frostwipe { transform-origin: right; }
.tk-frostwipe.is-on { animation: tk-frost-sweep .6s ease forwards; }

.tk-burst {
    position: fixed;
    inset: 0;
    z-index: 85;
    pointer-events: none;
    overflow: hidden;
}
.tk-burst__bit {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: var(--cyan-bright);
    box-shadow: 0 0 8px var(--cyan);
    animation: tk-burst-fly .65s ease-out forwards;
}
.tk-burst__bit:nth-child(odd) {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #fff;
}

.tk-snow {
    position: fixed;
    inset: 0;
    z-index: 35;
    pointer-events: none;
    overflow: hidden;
}
.tk-snow__flake {
    position: absolute;
    top: -8vh;
    color: var(--cyan-bright);
    animation-name: tk-snow-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

html[data-ice="on"] {
    --cyan: #4DDCFF;
    --cyan-bright: #9AF0FF;
    --cyan-dim: rgba(77, 220, 255, .16);
    --cyan-line: rgba(77, 220, 255, .42);
}
html[data-theme="light"][data-ice="on"] {
    --cyan: #00748C;
    --cyan-bright: #008BA3;
    --cyan-dim: rgba(0, 116, 140, .14);
    --cyan-line: rgba(0, 116, 140, .38);
}
html[data-ice="on"] body {
    background-image: radial-gradient(900px 320px at 50% -8%, rgba(77, 220, 255, .14), transparent 58%);
}
html[data-theme="light"][data-ice="on"] body {
    background-image: radial-gradient(900px 320px at 50% -8%, rgba(0, 116, 140, .10), transparent 58%);
}

.tk-heat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 4px 10px;
    padding-inline-end: 4px;
    border-radius: 999px;
    background: rgba(232, 87, 74, .14);
    border: 1px solid rgba(232, 87, 74, .35);
    max-width: 100%;
}
.tk-heat.is-peak {
    animation: tk-pulse-glow 1.8s ease-in-out infinite;
}
.tk-hero--photo .tk-heat {
    background: rgba(8, 10, 14, .5);
    border-color: rgba(255, 180, 160, .4);
    backdrop-filter: blur(8px);
}
.tk-heat__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    min-width: 0;
    padding: 4px 6px;
}
.tk-heat__link:hover { color: var(--text); }
.tk-hero--photo .tk-heat__link { color: #fff; }
.tk-heat__copy {
    font-size: .86rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-hero--photo .tk-heat__copy { color: #fff; }
.tk-heat__dismiss {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
}
.tk-heat__dismiss:hover { background: rgba(255,255,255,.12); }

.tk-toast {
    position: fixed;
    z-index: 70;
    inset-inline-start: 16px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 360px);
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-raised);
    border: 1px solid var(--cyan-line);
    box-shadow: var(--shadow);
    animation: tk-toast-in .35s ease;
}
.tk-toast[hidden] { display: none !important; }
.tk-toast__text { margin: 0; color: var(--text); font-weight: 700; font-size: .9rem; }
.tk-toast__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: var(--cyan-dim);
    color: var(--cyan);
    font: inherit;
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
}

.tk-totop {
    position: fixed;
    z-index: 46;
    inset-inline-end: 16px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--cyan-line);
    border-radius: 50%;
    background: var(--header-bg);
    color: var(--cyan);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
}
.tk-totop[hidden] { display: none !important; }
.tk-totop:hover { color: var(--cyan-bright); border-color: var(--cyan); }

.tk-ice-toggle {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--silver-dim);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    margin-inline-end: 8px;
}
.tk-ice-toggle:hover,
.tk-ice-toggle.is-active { color: var(--cyan); border-color: var(--cyan-line); }
.tk-footer__fun { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.tk-tabs__book { animation: tk-pulse-glow 2.6s ease-in-out infinite; }
.tk-empty__mark { animation: tk-breathe 2.8s ease-in-out infinite; }

.tk-service,
.tk-card.tk-tilt {
    transform-style: preserve-3d;
    will-change: transform;
}

html[data-ice="on"] .tk-logo-mark__wave {
    animation-duration: 1.05s;
}
html[data-ice="on"] .tk-logo-mark {
    filter: drop-shadow(0 0 12px rgba(77, 220, 255, .55));
}

.tk-greet {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--cyan);
}
.tk-hero--photo .tk-greet { color: #9AF0FF; }
.tk-greet[hidden] { display: none !important; }

.tk-season {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--cyan-line);
    background: var(--cyan-dim);
    color: var(--text);
    font-size: .86rem;
    font-weight: 700;
    max-width: 100%;
}
.tk-hero--photo .tk-season { color: #fff; background: rgba(0, 180, 230, .22); }
.tk-season:hover { color: var(--cyan-bright); }
.tk-season[hidden] { display: none !important; }
.tk-hero--photo .tk-heat { margin-bottom: 14px; }

.tk-hero__mist {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.22) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 42%, rgba(255,255,255,.16) 0 1.5px, transparent 3px),
        radial-gradient(circle at 71% 22%, rgba(255,255,255,.2) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 58%, rgba(255,255,255,.12) 0 1px, transparent 3px),
        radial-gradient(circle at 44% 70%, rgba(255,255,255,.14) 0 2px, transparent 3px);
    animation: tk-mist 12s ease-in-out infinite alternate;
    opacity: .55;
}
@keyframes tk-mist {
    from { transform: translateY(0); opacity: .4; }
    to   { transform: translateY(10px); opacity: .7; }
}

.tk-copyline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}
.tk-copy {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--silver-dim);
    border-radius: 999px;
    padding: 3px 10px;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}
.tk-copy:hover { color: var(--cyan); border-color: var(--cyan-line); }
.tk-copy--quiet { margin-inline-start: 8px; vertical-align: middle; }

.tk-desk {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--silver-dim);
}
.tk-desk[hidden] { display: none !important; }
.tk-desk__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--silver-faint);
}
.tk-desk.is-open .tk-desk__dot {
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(46, 204, 143, .2);
}
.tk-desk.is-closed .tk-desk__dot { background: var(--warn); }
.tk-desk__clock {
    color: var(--silver-faint);
    font-size: .78rem;
}

.tk-wadock {
    position: fixed;
    z-index: 55;
    inset-inline-start: 16px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 280px);
    padding: 10px 12px 10px 12px;
    border-radius: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--cyan-line);
    box-shadow: var(--shadow);
    color: var(--text);
    transform: translateY(12px);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.tk-wadock.is-in { transform: none; opacity: 1; }
.tk-wadock[hidden] { display: none !important; }
.tk-wadock:hover { color: var(--text); border-color: var(--cyan); }
.tk-wadock__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
}
.tk-wadock__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #1FA855;
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.tk-wadock__copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tk-wadock__copy strong { font-size: .88rem; }
.tk-wadock__copy span { font-size: .72rem; color: var(--silver-dim); font-weight: 600; }
.tk-wadock__close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--silver-dim);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}
.tk-wadock__close:hover { background: var(--cyan-dim); color: var(--text); }

.tk-empty--404 .tk-empty__mark {
    font-size: 1.4rem;
    color: var(--cyan);
}
.tk-empty--404 .tk-empty__mark::before { display: none; }
.tk-empty__code {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--cyan);
    margin: 0 0 4px;
}

.tk-badge--ok {
    position: relative;
    overflow: hidden;
}
.tk-badge--ok::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-120%);
    animation: tk-shine 2.8s ease-in-out infinite;
}

.tk-service:hover .tk-service__icon svg {
    animation: tk-fan .9s linear infinite;
}
@keyframes tk-fan {
    to { transform: rotate(18deg); }
}

@media (max-width: 720px) {
    .tk-wadock {
        bottom: calc(var(--tk-tabs-h, 64px) + var(--tk-safe-bottom, 0px) + 12px);
        inset-inline: 12px;
        max-width: none;
    }
    .tk-body:has(.tk-wadock.is-in) .tk-totop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-hero__mist,
    .tk-badge--ok::after,
    .tk-service:hover .tk-service__icon svg,
    .tk-wadock,
    .tk-dispatch-radar span { animation: none; transition: none; opacity: 1; transform: none; }
}

@media (max-width: 720px) {
    .tk-totop {
        bottom: calc(var(--tk-tabs-h, 64px) + var(--tk-safe-bottom, 0px) + 12px);
    }
    .tk-body:has(.tk-stickybar) .tk-totop,
    .tk-body.tk-body--sticky .tk-totop { display: none !important; }
    .tk-toast {
        bottom: calc(var(--tk-tabs-h, 64px) + var(--tk-safe-bottom, 0px) + 12px);
        inset-inline: 12px;
        max-width: none;
    }
    .tk-heat__copy { font-size: .8rem; }
    .tk-coolbar { top: var(--tk-safe-top, 0px); }
}

@media (prefers-reduced-motion: reduce) {
    .tk-logo-mark__wave,
    .tk-tabs__book,
    .tk-empty__mark,
    .tk-heat.is-peak,
    .tk-btn--primary::after,
    .tk-snow__flake { animation: none; }
    .tk-frostwipe.is-on { animation: none; opacity: 0; }
}