/* Safe-area aware; lens-driven XY panning; no flicker; live coords display */
html, body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Desktop-only short viewport adjustments */
@media screen and (min-width: 1024px) and (max-height: 820px) {
  :root { --lens-size: 170px; }

  .card {
    width: min(360px, 100vw);
    /* Reserve 30px top and bottom => 60px total */
    height: min(780px, calc(100svh - 60px));
  }

  .header {
    bottom: calc(90px + var(--safe-bottom));
    font-size: 11px;
  }

  .landing-labels { bottom: 12px; }

  .release-text { bottom: calc(110px + var(--safe-bottom)); }
  #releaseText-u, #releaseText-c, #releaseText-w, #releaseText-y { padding-top: 24px; }

  .audio-player { bottom: 110px; width: 320px; }

  /* Slightly smaller link display text inside releaseText-y */
  .link-text, .release-text .link-text {
    font-size: 34px !important;
    line-height: 34px !important;
  }
}

:root {
  --lens-size: 200px;
  --zoom: 2.3;
  --blur: 7px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Instagram In-App Browser specific sizing using dynamic viewport units */
.instagram-iab html, .instagram-iab body {
  height: calc(var(--vh, 1vh) * 100);
}

.instagram-iab .card {
  height: min(844px, calc(var(--vh, 1vh) * 100));
}

/* Use runtime safe-area as fallback when IAB hides native env() */
.instagram-iab {
  --safe-top: var(--safe-top-runtime, 0px);
  --safe-bottom: var(--safe-bottom-runtime, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background: transparent;
  overflow: hidden;
}

.face-icon {
  position: absolute;
  width: 45px;
  height: auto;
  top: var(--top);
  left: var(--left);
  animation: blink 3s steps(1) infinite;
  animation-delay: var(--delay);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Remove duplicate card styles as they're defined below */

@keyframes blink {
  0%, 94% {
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: url('desktop_bg_img.png') no-repeat center center;
  background-size: cover;
  color: #eaeaea;
  position: relative; /* For absolute positioning of card */
  touch-action: none; /* Prevent browser handling of all panning and zooming gestures */
  -webkit-overflow-scrolling: none;
  overscroll-behavior: none;
}

/* Larger icons for desktop */
@media screen and (min-width: 768px) {
  .face-icon {
    width: 75px; /* Larger but still maintaining density */
  }
}

.card {
  width: min(390px, 100vw);
  height: min(844px, 100dvh);
  margin: 0 auto;
  background: #111;
  border-radius: clamp(0px, calc((100vw - 390px) * 99999), 16px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  --landing-labels-height: 120px;
  
  /* Center the card when it's smaller than the viewport */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
}

.header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(110px + var(--safe-bottom)); /* 10px below landing-labels */
  text-align: center;
  color: #FFF;
  font-family: Orbitron;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 98%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 6px 8px;
  z-index: 20;
  width: auto;
  white-space: nowrap;
  will-change: filter, transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}

/* Apply pixelation and fade-in animation to header text */
.header-default {
  display: inline;
  opacity: 1;
  animation: pixelToFocusAndFade 7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.header-release {
  display: none;
  opacity: 0;
}

/* When any release text is visible, swap the header text */
.card:has(.release-text[style*="display: block"]) .header-default {
  display: none;
}

.card:has(.release-text[style*="display: block"]) .header-release {
  display: inline;
  opacity: 1;
  animation: pixelToFocusAndFade 7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pixelToFocusAndFade {
  0% {
    opacity: 0;
    filter: blur(2px) contrast(8) saturate(2);
    transform: translateX(-50%) scale(1.03);
    visibility: visible;
  }
  5% {
    opacity: 1;
    filter: blur(1.8px) contrast(6) saturate(1.8);
    transform: translateX(-50%) scale(1.025);
  }
  10% {
    filter: blur(1.5px) contrast(4) saturate(1.6);
    transform: translateX(-50%) scale(1.02);
  }
  15% {
    filter: blur(1px) contrast(3) saturate(1.4);
    transform: translateX(-50%) scale(1.015);
  }
  20% {
    filter: blur(0.5px) contrast(2) saturate(1.2);
    transform: translateX(-50%) scale(1.005);
  }
  25% {
    opacity: 1;
    filter: blur(0) contrast(1) saturate(1);
    transform: translateX(-50%) scale(1);
  }
  85% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}

/* Header text states */
.header-release {
  display: none;
  opacity: 0;
}

.header-default {
  display: inline;
  opacity: 1;
}

/* When any release text is visible, swap the header text */
.card:has(.release-text[style*="display: block"]) .header-default {
  display: none;
  opacity: 0;
}

.card:has(.release-text[style*="display: block"]) .header-release {
  display: inline;
  opacity: 1;
}

.btn-center{
  display: none; /* Hide the button */
}
.btn-center:active{ transform: translateY(1px); }

/* Close button now reuses .btn-center but sits top-right and is circular */
.btn-center.release-close {
  top: auto;
  right: auto;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #FFF;
  font-family: "Bitcount Prop Single Cursive", "Bitcount Prop Single", system-ui; /* Inheriting font from Which House if not specified */
  font-size: 16px;
  font-style: normal;
  font-weight: 250; /* Assuming similar weight as .release-text */
  border-radius: 18px;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  position: absolute;
  bottom: calc(117px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

/* Keep coords visually separate */
.coords {
  position: absolute;
  top: calc(16px + var(--safe-top));
  right: 8px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.45);
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 4;
  backdrop-filter: blur(2px);
  opacity: 0; /* Hidden but code preserved */
}

.magnify {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  background: #000;
  cursor: grab;
  margin: 0; padding: 0; border: 0;
  pointer-events: auto;
  z-index: 11;
}

/* Disable magnifier interaction when any release text is visible */
.card:has(.release-text[style*="display: block"]) .magnify {
  pointer-events: none;
  cursor: default;
}
.magnify:active { cursor: grabbing; }

.magnify img.source {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  transition: filter .3s ease;
  will-change: left, top, filter;
  object-fit: cover;
  z-index: 12;
}

/* Ensure blur is applied when any release text is visible */
.card:has(.release-text[style*="display: block"]) .magnify img.source {
  filter: blur(var(--blur));
  transition: filter .3s ease;
}

/* Blur when magnifier is active or when release text is shown */
.magnify.active img.source,
.ucwy-letter[style*="L"] ~ .card figure img.source,
.release-text[style*="display: block"] ~ .magnify img.source,
#releaseText-u[style*="display: block"] ~ .magnify img.source,
#releaseText-c[style*="display: block"] ~ .magnify img.source,
#releaseText-w[style*="display: block"] ~ .magnify img.source,
#releaseText-y[style*="display: block"] ~ .magnify img.source {
  filter: blur(var(--blur));
  transition: filter .3s ease;
  will-change: filter;
}

.lens {
  position: absolute;
  left: 0; top: 0;
  width: var(--lens-size);
  height: var(--lens-size);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .16s ease, transform .16s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,.40), 0 0 0 2px rgba(255,255,255,.85) inset, 0 0 0 1px rgba(255,255,255,.7);
  background: rgba(0,0,0,.2);
  will-change: transform, left, top;
  z-index: 13;

  --bg-image: none;
  --bg-w: 0px; --bg-h: 0px;
  --bg-x: 0px; --bg-y: 0px;
}
.magnify.active .lens { opacity: 1; transform: scale(1); }

.lens::before {
  content: "";
  position: absolute; inset:0; display:block;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: var(--bg-w) var(--bg-h);
  background-position: var(--bg-x) var(--bg-y);
}

/* Keep the tiny white grain dots inside lens (currently disabled) */
.lens::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0; /* Set to .35 to re-enable grain effect */
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.7) 1px, transparent 1.5px);
  background-size: 12px 12px;
}

/* Overlay & markers (uses <img class="ol">) */
.lens .ol{
  position:absolute;
  left:0; top:0;
  pointer-events:none;
  transform: translate(-50%, -50%);
  z-index:14;
  display:none; /* Hidden by default, shown by JS */
}
.magnify.active .lens .ol{ display:block; }

/* Green center dot (overlay center) */
.lens .ol-point{
  position:absolute; left:0; top:0;
  width:8px; height:8px; border-radius:50%;
  background:#3cff4b;
  border:2px solid rgba(0,0,0,.65);
  transform: translate(-50%, -50%);
  z-index:15;
  display:none; /* Hidden by default, shown by JS */
  opacity: 0; /* Disabled but code preserved */
}
.magnify.active .lens .ol-point{ display:block; }

/* Red fallback dot when overlay image is missing */
.lens .ol-fallback{
  position:absolute; left:0; top:0;
  width:10px; height:10px; border-radius:50%;
  background:#ff2b2b;
  border:2px solid rgba(0,0,0,.75);
  transform: translate(-50%, -50%);
  z-index:15;
  display:none; /* Hidden by default, shown by JS */
}

/* Toggle visibility based on load status, controlled by JS */
.magnify.active .lens[data-ol-missing] .ol{ display:none; }
.magnify.active .lens[data-ol-missing] .ol-point{ display:none; }
.magnify.active .lens[data-ol-missing] .ol-fallback{ display:block; }

/* Tooltip that follows the lens when overlay is visible */
.lens-tip{
  position:absolute;
  left:0; top:0;
  color: #FFF;
  font-family: Orbitron;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 98%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  pointer-events:none;
  z-index: 14;
  opacity:0;
  transition: opacity .12s ease;
  white-space: nowrap;
  display:none;
}

.img-error {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 20;
}

.hint {
  position:absolute;
  bottom: calc(8px + var(--safe-bottom));
  left:0; right:0; text-align:center;
  font-size:12px; opacity:.6;
}

/* Release text overlay (on-release), centered, scrollable, no background */
.release-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(130px + var(--safe-bottom));
  padding: 20px 15px;
  padding-top: calc(60px + var(--safe-top));
  text-align: center;
  line-height: 1.45;
  font-size: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  pointer-events: auto;
  mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  display: none;
  visibility: hidden;
}

/* Only show when explicitly set to display: block */
.release-text[style*="display: block"] {
  display: block;
  visibility: visible;
}

/* When JS sets display: block, we show with animation */
.release-text[style*="display: block"] {
  opacity: 1;
  visibility: visible;
}

/* When any release text is visible, blur the source image */
.release-text[style*="display: block"] ~ figure img.source,
#releaseText-u[style*="display: block"] ~ figure img.source,
#releaseText-c[style*="display: block"] ~ figure img.source,
#releaseText-w[style*="display: block"] ~ figure img.source,
#releaseText-y[style*="display: block"] ~ figure img.source {
  filter: blur(var(--blur));
  transition: filter .3s ease;
}
  

.release-text {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.release-text::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.release-text[hidden] { display: none; }
@keyframes pixelToFocus {
  0% {
    opacity: 0;
    filter: blur(2px) contrast(8) saturate(2);
    transform: scale(1.03);
  }
  20% {
    opacity: 1;
    filter: blur(1.8px) contrast(6) saturate(1.8);
    transform: scale(1.025);
  }
  40% {
    filter: blur(1.5px) contrast(4) saturate(1.6);
    transform: scale(1.02);
  }
  60% {
    filter: blur(1px) contrast(3) saturate(1.4);
    transform: scale(1.015);
  }
  80% {
    filter: blur(0.5px) contrast(2) saturate(1.2);
    transform: scale(1.005);
  }
  100% {
    opacity: 1;
    filter: blur(0) contrast(1) saturate(1);
    transform: scale(1);
  }
}

/* Initial state for all direct children of release-text */
.release-text > * {
  opacity: 0;
  will-change: filter, transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Only animate when release text is explicitly set to display: block */
.release-text[style*="display: block"] > * {
  animation: pixelToFocus 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Stagger the animations from top to bottom */
.release-text[style*="display: block"] > *:nth-child(1) { animation-delay: 0s; }
.release-text[style*="display: block"] > *:nth-child(2) { animation-delay: 0.15s; }
.release-text[style*="display: block"] > *:nth-child(3) { animation-delay: 0.3s; }
.release-text[style*="display: block"] > *:nth-child(4) { animation-delay: 0.45s; }
.release-text[style*="display: block"] > *:nth-child(5) { animation-delay: 0.6s; }
.release-text[style*="display: block"] > *:nth-child(6) { animation-delay: 0.75s; }
.release-text[style*="display: block"] > *:nth-child(7) { animation-delay: 0.9s; }
.release-text[style*="display: block"] > *:nth-child(8) { animation-delay: 1.05s; }
.release-text[style*="display: block"] > *:nth-child(9) { animation-delay: 1.2s; }
.release-text[style*="display: block"] > *:nth-child(10) { animation-delay: 1.35s; }

/* Release-text only font styling (Bitcount Prop Single Cursive) */
.release-text, #releaseText {
  color: #FFF;
  text-align: center;
  font-family: "Bitcount Prop Single Cursive", "Bitcount Prop Single", system-ui;
  font-size: 21px;
  font-style: normal;
  font-weight: 250; /* 250 */
  line-height: 24px; /* 100% */
  margin-bottom: 0px;
}

/* Exclude link text from general release text styling */
.release-text .link-text,
.release-text .link-text a {
  font-size: 40px !important;
  line-height: 40px !important;
  font-family: "Bitcount Prop Single Roman", "Bitcount Prop Single", system-ui, sans-serif !important;
}

/* Style all links in release text to be white */
.release-text a {
  color: #FFF !important;
  text-decoration: none;
  -webkit-animation: linkBlink 4s ease-in-out infinite;
  animation: linkBlink 4s ease-in-out infinite;
  display: inline-block;
  padding: 0 1px;
  transform-origin: left center;
}

/* Stagger animation for credits links */
.release-text a:nth-of-type(1) {
  animation-delay: 0.3s;
}

.release-text a:nth-of-type(2) {
  animation-delay: 0.8s;
}

.release-text a:nth-of-type(3) {
  animation-delay: 1.5s;
}

.release-text a:hover {
  color: #FFF !important;
  background-color: transparent;
  -webkit-animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  will-change: transform, filter;
}

#releaseText-c {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(130px + var(--safe-bottom));
  padding: 20px 15px;
  padding-top: 30px;
  overflow-y: hidden;
  mask-image: none;
}

#releaseText-u {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(180px + var(--safe-bottom));
  padding: 20px 15px;
  padding-top: 30px;
  overflow-y: auto;
  text-align: center;
  mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}

/* Keep the title centered but allow track items to align left */
#releaseText-w {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(130px + var(--safe-bottom));
  padding: 20px 15px;
  padding-top: 30px;
  overflow-y: hidden;
  text-align: center;
  mask-image: none;
}


.release-text-c-active-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

.release-text-char {
  color: #FFF;
  text-align: center;
  font-family: "Bitcount Prop Single Roman", "Bitcount Prop Single", "Yarndings 12 Charted", system-ui;
  font-size: 25px; /* Reduced font size for all Yarndings characters */
  font-style: normal;
  font-weight: 400;
  line-height: 92%;
}

.track-item-c {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  flex-wrap: nowrap;
  margin-bottom: 50px;
  width: 100%;
}

.track-item-c .release-text-char {
  font-size: 20px;
  line-height: 70%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  animation: linkBlink 4s ease-in-out infinite;
}

/* Stagger animation for track numbers */
.track-item-c:nth-child(1) .release-text-char {
  animation-delay: 0.3s;
}

.track-item-c:nth-child(2) .release-text-char {
  animation-delay: 1.2s;
}

.track-item-c:nth-child(3) .release-text-char {
  animation-delay: 1.3s;
}

.track-item-c:nth-child(4) .release-text-char {
  animation-delay: 0.5s;
}

.track-item-c:hover .release-text-char,
.track-item-c:hover .release-text-title,
.track-trigger:hover ~ .track-trigger,
.track-trigger:hover {
  color: #FFF;
  background-color: transparent;
  -webkit-animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  will-change: transform, filter;
}

/* Active state for currently playing track */
.track-item-c[data-active="true"] .release-text-char,
.track-item-c[data-active="true"] .release-text-title {
  -webkit-animation: pixelActive 2s ease-in-out infinite !important;
  animation: pixelActive 2s ease-in-out infinite !important;
  will-change: transform, filter;
}

.release-text-title {
  color: #FFF;
  font-family: "Bitcount Prop Single Roman", "Bitcount Prop Single", system-ui;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 70%;
  text-align: left;
  align-self: flex-start;
  margin: 0;
  cursor: pointer;
  animation: linkBlink 4s ease-in-out infinite;
}

/* Stagger animation for track titles */
.track-item-c:nth-child(1) .release-text-title {
  animation-delay: 0.3s;
}

.track-item-c:nth-child(2) .release-text-title {
  animation-delay: 1.2s;
}

.track-item-c:nth-child(3) .release-text-title {
  animation-delay: 1.3s;
}

.track-item-c:nth-child(4) .release-text-title {
  animation-delay: 0.5s;
}



/* --- Landing labels: artist + ucwy (added per request) --- */
.landing-labels{
  position: absolute;
  left: 14px;
  bottom: 20px; /* Positioned relative to the bottom of the .card */
  z-index: 30;
  text-align: left;
  pointer-events: auto;

  display: flex !important; /* Force display to ensure visibility */
  opacity: 1 !important;    /* Force opacity to ensure visibility */
  visibility: visible !important; /* Force visibility */
  flex-direction: column;
  gap: 0px;
}

.artist-ucwy-line {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: baseline;
}

/* Bitcount class (uniquifier = 1, weight = 400) */
.bitcount-prop-single-1 {
  color: transparent;
  font-family: "Bitcount Prop Single", "Bitcount Prop Single Cursive", system-ui, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
  font-size: 57px;
  line-height: 98%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin: 0;
  position: relative;
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: visible; /* Ensure text isn't cut off */
}

@keyframes decodeText {
  0% { content: "xnvwmks"; }
  4% { content: "l3vw1sa"; }
  8% { content: "xevn3sa"; }
  12% { content: "Leev1sa"; }
  16% { content: "Leevnxa"; }
  20% { content: "Leevisa"; }
  100% { content: "Leevisa"; }
}

.bitcount-prop-single-1 {
  color: transparent;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1000;
}

.bitcount-prop-single-1::before {
  content: "Leevisa";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #FFF;
  animation: decodeText 3s steps(1) forwards;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variation-settings: inherit;
}

.bitcount-prop-single-1:hover {
  color: #FFF;
  background-color: transparent;
  -webkit-animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: transform, filter;
}

/* Yarndings class for 'ucwy' */
.yarndings-12-charted {
  display: flex; /* Make it a flex container */
  gap: 0px; /* Add some space between letters, adjust as needed */
  color: #FFF;
  /* font-family: "Yarndings 12 Charted", system-ui, sans-serif; */
  /* font-weight: 400; */
  /* font-style: normal; */
  /* font-size: 41px; */
  /* line-height: 92%; */
  /* -webkit-font-smoothing: antialiased; */
  /* -moz-osx-font-smoothing: grayscale; */
  /* display: inline-block; */
  margin: -15px;
}

.ucwy-letter {
  color: #FFF;
  font-family: "Yarndings 12 Charted", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 41px;
  line-height: 92%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  transform-style: preserve-3d;
  will-change: transform, color;
}

/* Individual letter animations */
.ucwy-letter:nth-child(1) { /* u */
  animation: 
    linkBlink 4s ease-in-out infinite,
    flip8bit 8s steps(1) infinite;
}

.ucwy-letter:nth-child(2) { /* c */
  animation: 
    linkBlink 4s ease-in-out infinite 0.5s,
    flip8bit 8s steps(1) infinite 2s;
}

.ucwy-letter:nth-child(3) { /* w */
  animation: 
    linkBlink 4s ease-in-out infinite 1s,
    flip8bit 8s steps(1) infinite 4s;
}

.ucwy-letter:nth-child(4) { /* y */
  animation: 
    linkBlink 4s ease-in-out infinite 1.5s,
    flip8bit 8s steps(1) infinite 6s;
}

/* Stagger the animations for each letter */
#u-letter {
  animation: 
    linkBlink 4s ease-in-out infinite 0.3s,
    flip8bit 8s steps(1) infinite 2s;
}

#c-letter {
  animation: 
    linkBlink 4s ease-in-out infinite 1.2s,
    flip8bit 8s steps(1) infinite 4s;
}

#w-letter {
  animation: 
    linkBlink 4s ease-in-out infinite 1.3s,
    flip8bit 8s steps(1) infinite 6s;
}

#y-letter {
  animation: 
    linkBlink 4s ease-in-out infinite 0.5s,
    flip8bit 8s steps(1) infinite 8s;
}

@keyframes flip8bit {
  0%, 95%, 100% { transform: rotateX(0deg); }
  96%, 99% { transform: rotateX(180deg); }
}

/* Hover effect */
.ucwy-letter:hover {
  color: #000;
  background-color: #FFF;
  transform: translateY(-3px);
  animation: none;
}

/* Which House" and EP styling */
.which-house-ep {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: baseline;
  position: static; /* Change to static as it's now inside a flex column */
  left: auto;
  bottom: auto; /* Remove specific positioning */
  z-index: 30;
  text-align: left;
  pointer-events: none;
  margin-top: -10px;
}


.which-house {
  color: #FFF;
  font-family: "Bitcount Prop Single Cursive", "Bitcount Prop Single", system-ui;
  font-size: 49px;
  font-style: normal;
  font-weight: 250;
  line-height: 92%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin: 0;
  position: relative;
}

.which-house::after {
  content: '"';
  position: absolute;
  right: -12px;
  top: 0;
}



.ep-text {
  color: #FFF;
  font-family: "Bitcount Prop Single Cursive", "Bitcount Prop Single", system-ui; /* Inheriting font from Which House if not specified */
  font-size: 16px;
  font-style: normal;
  font-weight: 250; /* Assuming similar weight as .release-text */
  line-height: 92%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin: 0;
}

.percare-text {
  color: #FFF;
  font-family: Orbitron;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 98%; /* 16.66px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin-top: -5px;
}

.sm-title {
  color: #FFF;
  text-align: center;
  font-family: "Bitcount Prop Single", system-ui, sans-serif;
  font-size: 17px;
  font-style: light;
  font-weight: 200;
  line-height: 98%; /* 16.66px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 30px;
}



.release-text .sm-title + div {
  margin-top: 0; /* Remove extra spacing after sm-title */
}

.first-paragraph-spacing {
  margin-top: 0;
}

/* Audio Player Styling */
.audio-player {
  position: absolute;
  bottom: 130px; /* Lowered by 40px from previous position */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center horizontally */
  width: 360px; /* Set a specific width to prevent overflow/resizing issues */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically */
  gap: 5px; /* Spacing between header row and controls row */
  color: #FFF;
  font-size: 14px;
  z-index: 10000; /* Increased z-index to ensure it's on top of release-text */
  display: none; /* Ensure hidden on load */
}

.audio-header-row {
  display: flex;
  justify-content: space-between; /* Push title left, and the right group right */
  align-items: center;
  width: 100%; /* Take full width of parent */
  margin-bottom: 5px; /* Space between header and controls */
}

.audio-right-header-group {
  display: flex;
  align-items: center;
  gap: 10px; /* Spacing between duration and close button */
}

.audio-track-title {
  flex-grow: 1; /* Allow title to take available space */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0; /* Reset default margins */
  color: #FFF; /* Applying the new color */
  text-align: left; /* Applying the new alignment */
  font-family: "Bitcount Prop Single", system-ui, sans-serif; /* Applying the new font family */
  font-size: 17px; /* Applying the new font size */
  font-style: normal; /* Changed from 'light' to 'normal' as font-style usually takes normal, italic, oblique */
  font-weight: 200; /* Applying the new font weight */
  line-height: 98%; /* 16.66px */ /* Applying the new line height */
}

.audio-duration-total {
  color: #FFF;
  text-align: left;
  font-family: "Bitcount Prop Single", system-ui, sans-serif;
  font-size: 17px;
  font-style: normal; /* Changed from 'light' to 'normal' */
  font-weight: 200;
  line-height: 98%; /* 16.66px */
  margin: 0; /* Remove default margin */
}

.audio-controls-row {
  display: flex; /* Changed to flex */
  flex-direction: row; /* Horizontal flow for contents */
  width: 100%; /* Take full width of parent */
  gap: 10px; /* Spacing between scrubber and other elements */
  height: 50px; /* Explicit height for the row */
  align-items: center; /* Align items vertically in the row */
}

.audio-scrubber {
  flex-grow: 1; /* Allow scrubber to take available space */
  position: relative; /* Essential for positioning audio-time */
  height: 46px; /* Explicit height for the scrubber area */
  cursor: pointer;
  flex-shrink: 0;
  /* Removed width: 100% */
}

.audio-scrubber .scrubber-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audio-time {
  position: absolute; /* Absolute positioning within scrubber */
  top: 50%; /* Vertically center */
  left: 0%; /* Initial position at start of scrubber */
  transform: translateY(-50%) translateX(-50%); /* Adjust for own size to truly center */
  display: flex; /* Use flex to vertically center content */
  align-items: center; /* Vertically center the time text */
  height: auto; /* Allow height to be determined by content */
  z-index: 2; /* Place on top of the background */
  margin: 0; /* Reset default margins */
  font-family: "Yarndings 12 Charted";
  font-size: 42px; /* Restored original size */
  font-style: normal;
  font-weight: 400;
  line-height: 111%; /* 46.62px */
}

.audio-close {
  background: none;
  border: none;
  color: #FFF;
  font-family: "Bitcount Prop Single", system-ui, sans-serif;
  font-size: 24px; /* Adjust size for 'X' */
  cursor: pointer;
  padding: 0 5px;
  flex-shrink: 0;
}

.audio-close:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

/* Styling for releaseText-y (Links) */
#releaseText-y {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(130px + var(--safe-bottom));
  padding: 20px 15px;
  padding-top: 30px;
  overflow-y: hidden;
  text-align: center;
  mask-image: none;
}

.links-grid-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
}

.link-item {
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.link-item p {
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* Link text (BANDCAMP, STREAM, etc.) */
.link-text {
  color: #FFF;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: "Bitcount Prop Single Roman", "Bitcount Prop Single", system-ui, sans-serif;
  font-size: 40px !important;
  font-style: normal;
  font-weight: 250;
  display: flex;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes linkBlink {
  0% { 
    color: #FFF;
    background-color: transparent;
  }
  45% { 
    color: #FFF;
    background-color: transparent;
  }
  50% { 
    color: #000;
    background-color: #FFF;
  }
  55% { 
    color: #FFF;
    background-color: transparent;
  }
  100% { 
    color: #FFF;
    background-color: transparent;
  }
}

@keyframes linkBlink {
  0% { 
    color: #FFF;
    background-color: transparent;
    filter: blur(0.2px);
  }
  45% { 
    color: #FFF;
    background-color: transparent;
    filter: blur(0.2px);
  }
  50% { 
    color: #000;
    background-color: #FFF;
    filter: blur(0.5px);
  }
  55% { 
    color: #FFF;
    background-color: transparent;
    filter: blur(0.2px);
  }
  100% { 
    color: #FFF;
    background-color: transparent;
    filter: blur(0.2px);
  }
}

@keyframes pixelHover {
  0% {
    filter: blur(0) contrast(1) saturate(1);
    transform: scale(1);
  }
  50% {
    filter: blur(1px) contrast(3) saturate(1.4);
    transform: scale(1.02);
  }
  100% {
    filter: blur(0) contrast(1) saturate(1);
    transform: scale(1);
  }
}

@keyframes pixelActive {
  0% {
    filter: blur(0.5px) contrast(2) saturate(1.2);
    transform: scale(1.01);
  }
  50% {
    filter: blur(1px) contrast(2.5) saturate(1.3);
    transform: scale(1.015);
  }
  100% {
    filter: blur(0.5px) contrast(2) saturate(1.2);
    transform: scale(1.01);
  }
}

.link-text a {
  color: #FFF;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.3s ease;
  -webkit-animation: linkBlink 4s ease-in-out infinite;
  animation: linkBlink 4s ease-in-out infinite;
}

/* Stagger animation for each main link */

.link-item:nth-child(1) .link-text a {  /* BANDCAMP */
  animation-delay: 0.3s;
}

.link-item:nth-child(2) .link-text a {  /* STREAM */
  animation-delay: 1.2s;
}

.link-item:nth-child(3) .link-text a {  /* INSTAGRAM */
  animation-delay: 1.3s;
}

.link-item:nth-child(4) .link-text a {  /* PERCARE */
  animation-delay: 0.5s;
}

.link-text a:hover {
  color: #FFF;
  background-color: transparent;
  -webkit-animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: transform, filter;
}

/* PERCARE027 specific styling - positioned from bottom of viewport */
.percare027-bottom {
  position: absolute;
  bottom: 100px; /* Position from bottom of release text area */
  left: 0;
  right: 0;
  text-align: center;
}

.percare027-bottom .link-item {
  text-align: center;
  margin: 0 auto;
}

/* PERCARE links row - display side by side */
.percare-links-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Space between the two links */
}

#releaseText-y .percare027-text,
#releaseText-y .percare025-text {
  font-size: 18px !important; /* Much smaller to fit both on same line */
  line-height: 18px !important; /* Match line height to font size */
  margin: 0; /* Remove default margins */
}

#releaseText-y .percare027-text a,
#releaseText-y .percare025-text a {
  font-size: 18px !important; /* Ensure the links are also 18px */
  line-height: 18px !important; /* Match line height to font size */
}

/* Left Edge CTA - Only visible on Desktop and Tablet */
.left-edge-cta {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: auto;
  display: none; /* Hidden by default */
}

.cta-link {
  color: #FFF;
  font-family: "Bitcount Prop Single Roman", "Bitcount Prop Single", system-ui, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 70%;
  text-decoration: none;
  display: block;
  animation: linkBlink 4s ease-in-out infinite;
  cursor: pointer;
  will-change: transform, filter;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cta-link:hover {
  color: #000;
  background-color: #FFF;
  -webkit-animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: pixelHover 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: transform, filter;
}

/* Right Edge CTA - Only visible on Desktop and Tablet */
.right-edge-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: auto;
  display: none; /* Hidden by default */
}

/* Show CTA on Tablet and Desktop breakpoints */
@media screen and (min-width: 768px) {
  .left-edge-cta {
    display: block;
  }
  
  .right-edge-cta {
    display: block;
  }
  
  /* Hide PERCARE027 CTA in ReleaseText-y overlay on desktop and tablet */
  .percare027-bottom {
    display: none;
  }
}

/* Desktop-only short viewport adjustments (placed at end to win cascade) */
@media screen and (min-width: 1024px) and (max-height: 860px) {
  :root { --lens-size: 170px; }

  .card {
    width: min(360px, 100vw);
    /* Reserve 30px top and bottom => 60px total */
    height: min(780px, calc(100svh - 60px));
  }

  .header {
    bottom: calc(90px + var(--safe-bottom));
    font-size: 11px;
  }

  .landing-labels { bottom: 12px; }

  .release-text { bottom: calc(110px + var(--safe-bottom)); }
  #releaseText-u, #releaseText-c, #releaseText-w, #releaseText-y { padding-top: 24px; }

  .audio-player { bottom: 110px; width: 320px; }

  .link-text, .release-text .link-text {
    font-size: 34px !important;
    line-height: 34px !important;
  }
}