/* Heart treatment adapted from LilaRest / Uiverse (MIT; see licenses). */
.site-like {
  position: fixed; right: var(--theme-toggle-right, 24px);
  bottom: calc(var(--theme-toggle-bottom, 24px) + env(safe-area-inset-bottom, 0px));
  z-index: 1101; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; box-sizing: border-box; width: max-content; min-width: 0; height: 48px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--heading) 15%, var(--dark)); border-radius: 28px;
  background: color-mix(in srgb, var(--dark) 96%, var(--heading)); color: var(--heading);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--heading) 8%, transparent), 0 3px 12px #00000018;
  font-family: var(--main-font); font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.site-like[hidden] { display: none; }
.site-like svg { width: 18px; height: 18px; fill: transparent; stroke: var(--accent-orange); stroke-width: 1.8; transition: fill 200ms ease; }
.site-like[aria-pressed="true"] svg { fill: var(--accent-orange); }
.site-like[aria-disabled="true"] { cursor: default; }
.site-like:focus-visible:where(html:not([data-focus-input="pointer"]) *) { outline: 2px solid var(--portfolio-link, #0064ff); outline-offset: 4px; }
.site-like-count { min-width: 0; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.site-like-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keep the project canvas and its controls unchanged. */
html.portfolio-viewer-open .site-like { display: none; }
body > .mobile-back-to-top { bottom: calc(var(--theme-toggle-bottom, 24px) + 62px + env(safe-area-inset-bottom, 0px)); }
@media (hover: hover) and (pointer: fine) {
  .site-like:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--accent-orange) 8%, var(--dark)); border-color: color-mix(in srgb, var(--accent-orange) 45%, var(--dark)); }
  .site-like:not([aria-disabled="true"]):hover svg { fill: var(--accent-orange); animation: like-heart 1.2s ease-in-out infinite; }
}
@keyframes like-heart { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.13); } 45% { transform: scale(1); } 65% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .site-like, .site-like svg { transition: none; animation: none !important; } }

/* Keep the like control in the mobile safe area; home needs no scroll arrow. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .site-like {
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  body > .mobile-back-to-top {
    display: none;
  }
}

/* Align the heart and count optically with the bottom of the desktop clock digits. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .site-like { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* Shared orange treatment, inline on desktop and floating on mobile. */
.home-like-invite { display:none; }
@media(min-width:992px) {
  body > .site-like { display:none; }
  .home-like-invite { display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:auto; padding-top:28px; }
}
.home-like-invite .site-like-invite { position:relative; inset:auto; z-index:auto; display:inline-flex; }
.site-like.site-like-invite {
  width:max-content; min-width:0; height:44px; justify-content:center;
  padding:0 14px; border:0; border-radius:999px; color:#231300;
  font-size:16px; font-weight:500; line-height:24px; letter-spacing:-.4px;
  background:linear-gradient(180deg,#ffb34d 0%,#ff9500 45%,#ed7b00 100%);
  box-shadow:0 0 0 6px rgb(255 149 0 / .12),inset 0 2px 10px rgb(255 255 255 / .22);
  overflow:hidden; isolation:isolate; transition:transform .3s ease,box-shadow .3s ease;
}
.like-invite-content { display:flex; align-items:center; justify-content:center; gap:6px; }
/* Fade the glow to transparent inside the floating button's 18px safe margin.
   A blurred box shadow extends beyond the viewport and gets a hard lower edge. */
.site-like.site-like-invite > .like-glow {
  position:absolute; inset:-18px; z-index:-1; box-sizing:border-box;
  padding:18px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(ellipse closest-side at 50% 55%,rgb(237 123 0 / .42),rgb(237 123 0 / .22) 55%,transparent 100%);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.83; transition:opacity .25s ease;
}
.site-like-invite .site-like-count { min-width:0; }
.site-like.site-like-invite svg { stroke:currentColor; }
.site-like.site-like-invite[aria-pressed="true"] svg { fill:currentColor; }
@media(hover:hover) and (pointer:fine) {
  .site-like.site-like-invite:is(:hover, :focus-visible:where(html:not([data-focus-input="pointer"]) *)) { transform:translateY(-2px) scale(1.02); box-shadow:0 0 0 10px rgb(255 149 0 / .16),inset 0 2px 10px rgb(255 255 255 / .28); }
  .site-like.site-like-invite:is(:hover, :focus-visible:where(html:not([data-focus-input="pointer"]) *)) > .like-glow { opacity:1; }
  .site-like.site-like-invite:hover svg { fill:currentColor; animation:none; }
}
.site-like.site-like-invite:focus-visible:where(html:not([data-focus-input="pointer"]) *) { outline-color:var(--accent-orange); outline-offset:12px; }
.home-like-invite .site-like-invite[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) { .site-like.site-like-invite { transition:none; } .site-like.site-like-invite:is(:hover, :focus-visible:where(html:not([data-focus-input="pointer"]) *), :active) { transform:none; } }
.portfolio-viewer-about .about-place-clock {
  display:block; margin-top:20px; color:var(--heading); font-family:var(--main-font);
  font-size:24px; font-weight:400; line-height:1.3; font-variant-numeric:tabular-nums;
}


/* Reveal only a complete count, without an entrance transition. */
.site-like[data-like-pending] { visibility:hidden; pointer-events:none; }
.site-like.site-like-invite svg { transition:none; }

/* Preserve the orange surface instead of the legacy neutral hover fill. */
.site-like.site-like-invite:is(:hover, :focus-visible:where(html:not([data-focus-input="pointer"]) *), :active) {
  background:linear-gradient(180deg,#ffb34d 0%,#ff9500 45%,#ed7b00 100%);
}

/* Springbom bubbles: fixed shapes, animated only through transform and opacity. */
.site-like.site-like-invite {
  overflow:visible;
  touch-action:manipulation;
  transition:transform ease-in .1s, box-shadow ease-in .25s;
}
.site-like.site-like-invite:active { transform:scale(.9); }
.site-like.site-like-invite > .like-bubbles {
  position:absolute; inset:0; z-index:4; display:block; pointer-events:none;
}
.like-bubble {
  position:absolute; top:0; left:0; display:block; pointer-events:none;
  background-repeat:no-repeat; transform-origin:0 0; opacity:0;
  will-change:transform,opacity;
}
@media(prefers-reduced-motion:reduce) {
  .site-like.site-like-invite { transition:none; }
  .site-like.site-like-invite > .like-glow { transition:none; }
  .site-like.site-like-invite:is(:hover, :focus-visible:where(html:not([data-focus-input="pointer"]) *), :active) { transform:none; }
  .like-bubbles { display:none !important; }
}

/* A quiet shortcut hint belongs to the button's hover area, not its hit target. */
.site-like.site-like-invite > .site-like-secret-hint { display:none; }
@media (min-width:992px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .home-like-invite .site-like > .site-like-secret-hint {
    display:block; position:absolute; left:calc(100% + 24px); top:50%;
    transform:translateY(-50%); width:max-content; pointer-events:none;
    color:color-mix(in srgb, var(--heading) 55%, var(--dark));
    font-family:var(--main-font); font-size:13px; font-weight:450; line-height:1.2;
    letter-spacing:0; white-space:nowrap; text-transform:none;
    opacity:0; visibility:hidden; transition:opacity 160ms ease, visibility 160ms;
  }
  html:not([data-matrix-background="active"]) .home-like-invite .site-like:is(:hover, :focus-visible:where(html:not([data-focus-input="pointer"]) *)) > .site-like-secret-hint {
    opacity:1; visibility:visible;
  }
}