/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background-image: none; /* Default: no image */
}

/* Load Local Fonts */
@font-face {
    font-family: 'CustomFont';
    src: url('./hybrid_o.ttf') format('truetype');
}

@font-face {
    font-family: 'Lora';
    src: url('./lora.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('./roboto.ttf') format('truetype');
}

@font-face {
    font-family: 'TestFont';
    src: url('./gogo.ttf') format('truetype');
}

/* Body Styling */
html,
body {
    height: 100%;
}

body {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;

    color: #fff;
    font-family: 'TestFont', sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    overflow: hidden;
    margin: 0;
    position: relative; /* Required for the ::before pseudo-element */
}

body::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: var(--background-image, none) no-repeat center center;
    background-size: cover;
    opacity: 0.2; /* Adjust transparency */

    z-index: 0; /* Keep behind other elements */
    pointer-events: none; /* Prevent interference */
}

/* --- Song text color refinement (SAFE) --- */
#title,
.title {
  -webkit-text-stroke: 0 transparent !important;

  text-shadow:
     5px 0 0 #000, -5px 0 0 #000, 0 5px 0 #000, 0 -5px 0 #000,
     4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000,
     3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
     2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
     1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
     0 10px 22px rgba(0,0,0,0.6) !important;
    padding: 0.5rem;
}

#title, .title { color: #999999 !important; }

#subtitle {
    color: #d1bfa9; /* clearer parchment tone */
  font-size: 2.5rem;
  text-shadow:
     5px 0 0 #000, -5px 0 0 #000, 0 5px 0 #000, 0 -5px 0 #000,
     4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000,
     3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
     2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
     1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
     0 10px 22px rgba(0,0,0,0.6) !important;
    padding: 0.5rem;
}

#description {
  display: inline-block;
  max-width: 86%;
  padding: 10px 14px;

  font-family: 'TestFont', serif; /* Custom font for the title */
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.25px;

  /* color: rgba(235, 235, 235, 0.78); */
  color: rgba(235, 235, 235, 0.78);

  transform-origin: center;
  transition: transform 220ms ease;

  text-shadow:
     5px 0 0 #000, -5px 0 0 #000, 0 5px 0 #000, 0 -5px 0 #000,
     4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000,
     3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
     2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
     1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
     0 10px 22px rgba(0,0,0,0.6) !important;

  /* dark tinted plaque */
  background: linear-gradient(
    180deg,
    rgba(30, 36, 46, 0.55) 0%,
    rgba(20, 24, 32, 0.55) 100%
  );

  border-radius: 12px;
  position: relative;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 6px 16px rgba(0,0,0,0.28);

  border: 1px solid rgba(255,255,255,0.05);

  margin: 12px auto 10px auto;
  text-align: center;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sign-tilt-1{ transform: rotate(-1.4deg); }
.sign-tilt-2{ transform: rotate(0.9deg); }
.sign-tilt-3{ transform: rotate(-1.6deg); }
.sign-tilt-4{ transform: rotate(1.7deg); }
.sign-tilt-5{ transform: rotate(0.2deg); }

#description::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 6px 6px, #8a8a8a 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 6px) 6px, #8a8a8a 0 2px, transparent 2.6px),
    radial-gradient(circle at 6px calc(100% - 6px), #8a8a8a 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #8a8a8a 0 2px, transparent 2.6px);

  opacity: 0.6;
}

/* Container Styling */
.container {
    width: fit-content;
    max-width: 92vw;
    padding: 3rem;

    background: rgba(0, 0, 0, 0.70); /* Semi-transparent background */
    border-radius: 50%;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
    padding-bottom: 0;

    text-align: center;
    z-index: 1; /* Keep above the ::before background */
    position: relative; /* Required for layering */
}

/* Card look for both main embed and back embed */
.card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Make sure cards don’t try to sit side-by-side if legacy floats/flex exist */
.card,
.main-embed,
.sub-embed {
    width: 100%;
    clear: both;
    float: none;
    flex: 0 0 auto;
    align-self: stretch;
}

/* Back embed specific polish */
.sub-embed {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 12px 16px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
}

.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;

    text-decoration: none;
    color: #eee; /* light arrow */

    /* dark transparent grey */
    background: rgba(40, 40, 40, 0.55);

    border-radius: 50%;

    /* soft black shadow */
    box-shadow: 0 6px 14px rgba(0,0,0,0.7);

    backdrop-filter: blur(6px);           /* subtle glass look */
    -webkit-backdrop-filter: blur(6px);   /* safari */

    transition: transform 0.12s ease,
                background 0.12s ease,
                box-shadow 0.12s ease;
}

.back-link:hover {
    background: rgba(40, 40, 40, 0.75); /* darker on hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.85);
}

.back-link:active {
    transform: translateY(1px);
}

/* Title Styling */
.title {
    font-family: 'CustomFont', serif; /* Custom font for the title */
    font-size: 4.5rem;
    color: #ffdd57; /* Golden yellow */

    margin-bottom: 0.5rem;
    text-transform: uppercase; /* Capitalized title */
    letter-spacing: 3px; /* Spaced letters for impact */

    animation: fadeIn 1.5s ease-out forwards;
}

/* Subtitle Styling */
.subtitle {
    font-family: 'Lora', serif; /* Elegant serif font */
    font-size: 1.1rem;
    color: #bbb; /* Muted gray for contrast */
    margin-bottom: 1.5rem;
}

/* Content Styling */
.content {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd;

    animation: fadeIn 2.5s ease-out forwards;
}

/* Audio Player Styling */
.audio-player {
    margin: 1.5rem auto;

    width: 100%; /* Full-width */
    max-width: 600px; /* Restrict maximum width */

    border-radius: 10px;
    border: 1px solid #444;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);

    animation: fadeIn 3s ease-out forwards;
}

/* Download Link */
.download-link {
  display: inline-block;
  padding: 10px 18px;
  margin-top: 12px;

  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.4px;

  color: #e6e6e6;
  text-decoration: none;

  background: linear-gradient(
    180deg,
    #2a2f3a 0%,
    #1c212b 100%
  );

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.45);

  transition: all 0.25s ease;
}

.download-link:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.8);
}

.download-link:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.55);
}

/* Don't animate interactive UI on load */
.audio-player,
.download-link,
.back-link {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Debug Container */
#debug-container {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 100%;
    max-height: 200px;

    background-color: rgba(0, 0, 0, 0.8);
    color: white;

    padding: 10px;
    font-size: 0.9rem;

    overflow-y: auto;
    z-index: 9999; /* Ensure it appears on top */
    text-align: left; /* Align text for readability */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.title,
.subtitle,
.content {
    animation-fill-mode: forwards;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .title {
        font-size: 3rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .audio-player {
        max-width: 100%;
    }

    .download-link {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
}

.card.main-embed {
    border: none;
    border-radius: 36px !important;
}

.card { border: none !important; }

/* Prefer circle: let title area shrink to content */
.title-stack{
  position: relative;
  display: inline-block;     /* shrink to content */
  width: fit-content;        /* key: don't force wide */
  max-width: 86vw;           /* still safe on mobile */
  margin: 0 auto 1.4rem;
  text-align: center;
  padding-top: 0.25rem;
}

/* ARTIST behind */
.title-stack #title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1.8) scaleX(1.5);  /* ← stretch vertically */
  top: -0.35rem;             /* move artist UP = more visible */

  z-index: 1;
  pointer-events: none;

  /* override your global padding so it doesn't balloon */
  margin: 0 !important;
  padding: 0 !important;

  /* keep one line */
  max-width: 100%;

  white-space: nowrap;     /* never wrap */
  overflow: visible;       /* don't cut it */
  text-overflow: clip;     /* no ... */
  max-width: none;         /* allow full width */

  /* behind feel */
  opacity: 0.32;

  /* soften the massive stroke stack only for the background title */
  /* text-shadow: 0 10px 22px rgba(0,0,0,0.6) !important; */
}

/* SONG on top */
.title-stack #subtitle{
  display: inline-block;
  max-width: 86vw;
  position: relative;
  z-index: 2;
  opacity: 0.88;

  transform: translateY(1.4rem);  /* increase this */

  margin: 0 !important;
  padding: 0 !important;

  /* separation control: move subtitle DOWN */
  margin-top: 2.4rem;        /* increase this for more gap/less overlap */
}