@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Kalam:wght@400;700&family=Patrick+Hand&family=Reenie+Beanie&display=swap");

.ufo-tape-title-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.ufo-tape-title-frame {
  --label-left: 21%;
  --label-top: 17%;
  --label-width: 58%;
  --label-height: 12%;
  --label-rotate: -0.8deg;
  --ink-rotate: -0.55deg;
  --ink-offset-x: 0.4px;
  --ink-offset-y: 0.4px;
  --ink-baseline: 0px;
  --ink-font: "Kalam", "Caveat", "Patrick Hand", "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive;
  --ink-scale-x: 0.88;
  --ink-opacity: 0.9;
  --ink-blur: 0.16px;
  --ink-stroke: 0.045px;
  --title-left: 9%;
  --title-top: 37%;
  --title-solo-top: 40%;
  --title-width: 82%;
  --meta-for-left: 8%;
  --meta-from-left: 38%;
  --meta-top: 76%;
  --count-left: 78%;
  --count-top: 76%;
  --stamp-size: clamp(4px, 0.62vw, 8px);
  position: absolute;
  left: var(--label-left);
  top: var(--label-top);
  width: var(--label-width);
  height: var(--label-height);
  display: block;
  padding: 0;
  transform: rotate(var(--label-rotate));
  background:
    repeating-radial-gradient(circle at 18% 42%, rgba(47, 33, 18, 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(65, 49, 31, 0.07), transparent 12%, transparent 82%, rgba(65, 49, 31, 0.06)),
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.58), transparent 28%),
    linear-gradient(180deg, rgba(242, 229, 200, 0.94), rgba(221, 204, 168, 0.9));
  border: 1px solid rgba(69, 49, 27, 0.2);
  border-radius: 1px;
  box-shadow:
    0 2px 3px rgba(25, 17, 8, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -5px 12px rgba(82, 56, 27, 0.08);
  overflow: hidden;
  mix-blend-mode: multiply;
}

.ufo-tape-title-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 38%, rgba(34, 25, 17, 0.1) 0 0.45px, transparent 0.7px),
    radial-gradient(circle at 76% 64%, rgba(74, 56, 38, 0.085) 0 0.42px, transparent 0.72px),
    radial-gradient(circle at 41% 71%, rgba(35, 28, 18, 0.05) 0 0.36px, transparent 0.66px),
    repeating-linear-gradient(0deg, rgba(92, 64, 34, 0.06) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 74% 66%, rgba(79, 57, 33, 0.08), transparent 26%);
  background-size: 7px 6px, 9px 8px, auto, auto;
  opacity: 0.72;
  mix-blend-mode: multiply;
}

.ufo-tape-title-frame::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 54%;
  border-top: 1px solid rgba(85, 63, 38, 0.2);
  transform: rotate(0.18deg);
}

.ufo-tape-title-ink {
  position: absolute;
  left: var(--title-left);
  top: var(--title-top);
  z-index: 1;
  display: block;
  width: var(--title-width);
  max-width: 100%;
  font-family: var(--ink-font);
  font-size: clamp(12px, 2.15vw, 26px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.018em;
  text-align: left;
  color: rgba(34, 28, 22, 0.86);
  opacity: var(--ink-opacity);
  text-shadow:
    0.016em 0.011em 0 rgba(105, 82, 55, 0.1),
    -0.012em 0 0 rgba(31, 25, 20, 0.05);
  transform:
    translate(var(--ink-offset-x), calc(var(--ink-offset-y) + var(--ink-baseline)))
    rotate(var(--ink-rotate))
    skewX(-2deg)
    scaleX(var(--ink-scale-x));
  transform-origin: left center;
  filter: blur(var(--ink-blur));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  mix-blend-mode: multiply;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: var(--ink-stroke) rgba(32, 25, 19, 0.18);
}

.ufo-tape-title-frame[data-has-meta="false"] .ufo-tape-title-ink {
  top: var(--title-solo-top);
}

.ufo-tape-title-ink::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  color: rgba(50, 39, 29, 0.18);
  transform: translate(0.38px, 0.31px) rotate(0.14deg) scaleX(1.006);
  text-shadow: none;
  mix-blend-mode: multiply;
  opacity: 0.48;
  pointer-events: none;
}

.ufo-tape-title-meta,
.ufo-tape-title-count {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.36em;
  max-width: 30%;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--stamp-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(36, 27, 18, 0.76);
  opacity: 0.92;
  filter: blur(0.07px);
  mix-blend-mode: multiply;
  transform: rotate(0.16deg);
  white-space: nowrap;
}

.ufo-tape-title-meta b {
  font-weight: 500;
  color: rgba(36, 27, 18, 0.58);
}

.ufo-tape-title-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ufo-tape-title-meta--for {
  left: var(--meta-for-left);
  top: var(--meta-top);
}

.ufo-tape-title-meta--from {
  left: var(--meta-from-left);
  top: calc(var(--meta-top) + 1.5%);
}

.ufo-tape-title-count {
  left: var(--count-left);
  top: var(--count-top);
  justify-content: flex-end;
  letter-spacing: 0.08em;
  color: rgba(36, 27, 18, 0.68);
}

.ufo-tape-title-frame[data-title-size="long"] .ufo-tape-title-ink {
  font-size: clamp(11px, 1.88vw, 22px);
  line-height: 0.92;
}

.ufo-tape-title-frame[data-title-size="very-long"] .ufo-tape-title-ink {
  font-size: clamp(9px, 1.5vw, 17px);
  line-height: 0.95;
}

.ufo-tape-title-frame--ufo-black-gold-minimal {
  --label-left: 28.5%;
  --label-top: 14.6%;
  --label-width: 54.5%;
  --label-height: 15.2%;
  --label-rotate: -0.62deg;
  --title-left: 11%;
  --title-top: 34%;
  --title-solo-top: 41%;
  --title-width: 76%;
  --meta-for-left: 9%;
  --meta-from-left: 37%;
  --meta-top: 78%;
  --count-left: 77%;
  --count-top: 77%;
  --stamp-size: clamp(4px, 0.62vw, 7px);
  --ink-font: "Kalam", "Caveat", "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --ink-scale-x: 0.86;
  --ink-opacity: 0.9;
  --ink-blur: 0.13px;
  --ink-stroke: 0.035px;
  background:
    linear-gradient(90deg, rgba(65, 49, 31, 0.08), transparent 9%, transparent 88%, rgba(65, 49, 31, 0.08)),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.56), transparent 25%),
    linear-gradient(180deg, rgba(240, 230, 207, 0.95), rgba(209, 195, 166, 0.93));
  border-color: rgba(12, 10, 8, 0.24);
  box-shadow:
    0 3px 5px rgba(4, 3, 2, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -6px 12px rgba(82, 56, 27, 0.1);
}

.ufo-tape-title-frame--ufo-black-gold-minimal::before {
  background:
    repeating-linear-gradient(0deg, rgba(85, 62, 35, 0.075) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 72% 68%, rgba(79, 57, 33, 0.09), transparent 24%);
}

.ufo-tape-title-frame--ufo-black-gold-minimal::after {
  left: 6%;
  right: 6%;
  top: 56%;
  border-color: rgba(85, 63, 38, 0.22);
}

.ufo-tape-title-frame--ufo-clear-shell {
  --label-left: 16.6%;
  --label-top: 17.7%;
  --label-width: 67.2%;
  --label-height: 12.1%;
  --label-rotate: -0.55deg;
  --title-left: 18%;
  --title-top: 28%;
  --title-solo-top: 34%;
  --title-width: 64%;
  --meta-for-left: 11%;
  --meta-from-left: 42%;
  --meta-top: 76%;
  --count-left: 80%;
  --count-top: 76%;
  --stamp-size: clamp(4px, 0.56vw, 7px);
  --ink-font: "Kalam", "Patrick Hand", "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --ink-scale-x: 0.88;
  --ink-opacity: 0.86;
  --ink-blur: 0.12px;
  --ink-stroke: 0.03px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ufo-tape-title-frame--ufo-clear-shell::before {
  opacity: 0.2;
}

.ufo-tape-title-frame--ufo-clear-shell::after {
  opacity: 0.35;
}

.ufo-tape-title-frame--ufo-cream-red {
  --label-left: 17.6%;
  --label-top: 22.1%;
  --label-width: 64.8%;
  --label-height: 14.8%;
  --label-rotate: -0.35deg;
  --title-left: 18%;
  --title-top: 30%;
  --title-solo-top: 34%;
  --title-width: 66%;
  --meta-for-left: 10%;
  --meta-from-left: 40%;
  --meta-top: 77%;
  --count-left: 80%;
  --count-top: 77%;
  --stamp-size: clamp(4px, 0.58vw, 7px);
  --ink-font: "Reenie Beanie", "Kalam", "Caveat", "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --ink-scale-x: 0.92;
  --ink-opacity: 0.9;
  --ink-blur: 0.2px;
  --ink-stroke: 0.05px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ufo-tape-title-frame--ufo-cream-red::before {
  opacity: 0.26;
}

.ufo-tape-title-frame--ufo-cream-red::after {
  display: none;
}

.ufo-tape-title-frame--walkman .ufo-tape-title-ink {
  font-size: clamp(16px, 2.7vw, 36px);
}

@media (max-width: 640px) {
  .ufo-tape-title-frame {
    padding: 0;
    --stamp-size: 5px;
    --ink-opacity: 0.96;
    --ink-blur: 0px;
    --ink-stroke: 0.035px;
    transform: none;
    mix-blend-mode: normal;
  }

  .ufo-tape-title-ink {
    font-size: clamp(11px, 4.3vw, 21px);
    opacity: var(--ink-opacity);
    filter: none;
    transform:
      translate(var(--ink-offset-x), calc(var(--ink-offset-y) + var(--ink-baseline)))
      rotate(var(--ink-rotate))
      skewX(-1.2deg)
      scaleX(var(--ink-scale-x));
    mix-blend-mode: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .ufo-tape-title-ink::after {
    display: none;
  }

  .ufo-tape-title-meta,
  .ufo-tape-title-count {
    filter: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  .ufo-tape-title-frame[data-title-size="long"] .ufo-tape-title-ink {
    font-size: clamp(10px, 3.6vw, 17px);
  }

  .ufo-tape-title-frame[data-title-size="very-long"] .ufo-tape-title-ink {
    font-size: clamp(9px, 3vw, 15px);
  }

  .ufo-tape-title-frame--ufo-black-gold-minimal {
    --label-left: 28.8%;
    --label-top: 14.2%;
    --label-width: 54%;
    --label-height: 14.2%;
  }

  .ufo-tape-title-frame--ufo-black-gold-minimal .ufo-tape-title-ink {
    font-size: clamp(10px, 3.4vw, 17px);
    line-height: 0.86;
  }

  .ufo-tape-title-frame--ufo-clear-shell {
    --label-top: 17.6%;
    --label-height: 11.2%;
  }

  .ufo-tape-title-frame--ufo-cream-red {
    --label-top: 22%;
    --label-height: 13.4%;
  }
}