html, body {
  height: 100%;
}

@font-face {
  font-family: "Fenul Standard TRIAL";
  src: url("Fonts/fenulstandard-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Estedad-VF";
  src: url("Fonts/Estedad-VF Thin.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

:root {
  /* Colors */
  --bg: #0b0b0c;
  --fg: #f5f5f7;
  --muted: #b9bcc3;
  --track: #2a2a2d;
  --accent: #e9e9eb;
  --accent-strong: #ffffff;
  
  /* Safe Areas */
  --sat-top: env(safe-area-inset-top, 0px);
  --sat-bottom: env(safe-area-inset-bottom, 0px);
  --sat-left: env(safe-area-inset-left, 0px);
  --sat-right: env(safe-area-inset-right, 0px);
  
  /* Dynamic Spacing */
  --base-unit: 4px;
  --content-spacing: calc(var(--base-unit) * 2 + var(--sat-bottom) / 4);
  /* Smaller baseline so bottom nav hugs the edge better on Chrome mobile */
  --nav-offset: clamp(12px, calc(var(--sat-bottom) + 8px), 28px);
  
  /* Phone Container */
  --phone-width: 390px;
  --phone-height: 844px;
  --phone-scale: min(1, min((100vw - var(--base-unit) * 5) / var(--phone-width), 
                           (100vh - var(--base-unit) * 5) / var(--phone-height)));
  
  /* Device Detection (updated by JS) */
  --device-scale: 1;
  --has-notch: 0;
  --has-toolbar: 0;
}

/* Force portrait orientation on mobile */
@media screen and (max-width: 768px) {
  html, body {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
  }
}

:root {
  /* Visual viewport 1% unit, set by JS */
  --vvh: 1vh;
  
  /* Vertical compression factor computed by JS (1 == no compression) */
  --vert-scale: 1;
  
  /* Bottom nav title scaling (1 == default) */
  --nav-title-scale: 1;
  
  /* Additional lift in design pixels to push bottom nav higher when UI covers it */
  --nav-lift: 0px;
  
  /* Stage vertical lift (moves player upward when needed) */
  --stage-lift: 0px;
  
  /* Artwork positioning and scale */
  --art-lift: 70px;   /* moves artwork upward */
  --art-scale-base: 0.55; /* reduced by 5% (60% -> 55%) */
  --art-scale: 0.55;      /* effective scale (updated by JS) */
  --art-lift-offset: 50px; /* manual framing offset (positive = move up) */
  /* Dynamic offsets computed in JS */
  --top-ui-offset: 0px;
  --bottom-ui-offset: 0px;
  --title-top-offset: 0px; /* extra push for title on Chrome */
  --top-ui-offset-phone: 0px;          /* phone-space px */
  --bottom-ui-offset-phone: 0px;       /* phone-space px */
  --title-top-offset-phone: 0px;       /* phone-space px */
  --bottom-tight-pad-phone: 0px;       /* extra pad when chrome bar is bottom */
  --track-list-bottom-offset: 20px;    /* dynamic bottom offset for track-list */
  --top-cta-offset: 20px;              /* dynamic top offset for top navigation */
  --title-top-offset-dynamic: 40px;    /* dynamic top offset for title section */
  /* Safari constant top bump (set by JS on mobile) */
  --safari-top-bump: 0px;
}

*{box-sizing:border-box}
html {
  background: #500e0e;  /* Dark red background for desktop */
  height: 100%;
  height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--fg);
  font-family: ui-serif, Charter, 'Times New Roman', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #500e0e;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Simple mobile optimization */
@media screen and (max-width: 743px) {
  html, body {
    background: var(--bg);
    height: 100%;
    overflow: hidden; /* prevent vertical scroll on small viewports */
  }
  
  body {
    display: block; /* avoid vertical centering constraints */
  }
  
  .phone {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
  }
}
/* PHONE FRAME: Responsive container */ 
/* Main phone frame container */
.phone {
  /* Responsive dimensions - fill viewport on mobile */
  width: 100vw;
  height: 100dvh;
  
  /* Basic layout */
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  pointer-events: none; /* TEMP: Let events pass through to children */
  
  /* Visual styling */
  background: var(--bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Responsive centering: ensure the scaled phone fills the viewport without side/top gaps */
html, body { height: 100%; }
body { display: flex; align-items: center; justify-content: center; }

/* Mobile: Phone container should be flush with viewport edge, not centered */
@media screen and (max-width: 743px) {
  html, body {
    height: 100dvh; /* Use dynamic viewport height */
    min-height: 100dvh; /* Ensure full height coverage */
  }
  
  body { 
    align-items: flex-start; /* Align to top instead of center */
    justify-content: center; /* Keep horizontal centering */
    padding: 0; /* Remove any body padding */
    margin: 0; /* Remove any body margin */
    overflow: hidden; /* Prevent any scrolling that could cause gaps */
  }
  
  .phone {
    margin: 0; /* Remove phone margin on mobile */
    position: relative;
    top: 0; /* Ensure it starts at top */
    /* CRITICAL: Override max constraints to fill viewport completely */
    max-width: none !important;
    max-height: none !important;
    min-height: 100dvh; /* Ensure it fills full dynamic viewport */
    min-width: 100vw; /* Ensure it fills full width */
  }
}

/* Make the container that holds .phone occupy the viewport to center scaling properly (mobile only) */
@media screen and (max-width: 743px) {
  .phone-wrapper {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Title section */
.title-section {
  width: 357.86px;
  max-width: calc(100% - 30px);  /* Ensure it fits on small screens like track-list */
  height: calc(170px * var(--vert-scale));
  flex-shrink: 0;
  position: relative;
  z-index: 5; /* Lower z-index so overlays can cover it */
  margin: calc((24px * var(--vert-scale)) + var(--title-top-offset-dynamic, 40px) + max(20px, env(safe-area-inset-top))) auto 0;  /* Auto-centered like track-list */
  transition: margin-top 0.3s ease; /* Smooth transitions when address bar moves */
  cursor: pointer; /* Make it clickable */
  pointer-events: auto; /* Ensure it can receive pointer events */
}

/* Slide-up text animation */
.slide-up-animate {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-up-animate.slide-up-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Top CTA slide-up animation - start hidden */
.top-cta {
  transform: translateY(100%);
}

.top-cta.slide-up-animate {
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.top-cta.slide-up-animate.slide-up-visible {
  transform: translateY(0);
}

/* Container for slide-up effect - creates mask for sliding elements */
.slide-up-container {
  overflow: hidden;
  position: relative;
}

/* Special handling for We Dance slide container within track-list */
.track-list .slide-up-container:has(.track-item.dance) {
  text-align: right;
  width: 100%;
  margin-bottom: 2px;
  /* Maintain consistent height during animation to prevent jumping */
  min-height: 20px; /* Use min-height instead of fixed height */
  position: relative;
}

/* Ensure We Dance element can be animated properly */
.track-item.dance.slide-up-animate {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

.track-item.dance.slide-up-animate.slide-up-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Slide-up hover effect for track buttons */
.bottom-nav .track {
  position: relative;
  overflow: hidden;
}

.hover-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.hover-container .original,
.hover-container .duplicate {
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-container .duplicate {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* Desktop only hover effects - link buttons only */
@media (hover: hover) and (pointer: fine) {
  /* Slide-up hover effect for link buttons only */
  .link-item:hover .hover-container .original {
    transform: translateY(-100%);
  }

  .link-item:hover .hover-container .duplicate {
    transform: translateY(-100%);
  }

  /* PERCARE links hover effects */
  .percare-links-row .link-item:hover .hover-container .original {
    transform: translateY(-100%);
  }

  .percare-links-row .link-item:hover .hover-container .duplicate {
    transform: translateY(-100%);
  }

  /* Desktop CTAs hover effects */
  .desktop-ctas .cta-left:hover .hover-container .original,
  .desktop-ctas .cta-right:hover .hover-container .original {
    transform: translateY(-100%);
  }

  .desktop-ctas .cta-left:hover .hover-container .duplicate,
  .desktop-ctas .cta-right:hover .hover-container .duplicate {
    transform: translateY(-100%);
  }

  /* Slide-up hover effect for track titles */
  .bottom-nav .track:hover .hover-container .original {
    transform: translateY(-100%);
  }

  .bottom-nav .track:hover .hover-container .duplicate {
    transform: translateY(-100%);
  }

  /* Slide-up hover effect for title section */
  .title-section:hover .hover-container .original {
    transform: translateY(-100%);
  }

  .title-section:hover .hover-container .duplicate {
    transform: translateY(-100%);
  }
  
  /* Debug: Add visual feedback for title section hover - REMOVED */

  /* Grouped hover effect for track 04 */
  .bottom-nav .track.hover-effect .hover-container .original {
    transform: translateY(-100%);
  }

  .bottom-nav .track.hover-effect .hover-container .duplicate {
    transform: translateY(-100%);
  }
}

/* Slide-up hover effect for link buttons */
.link-item {
  position: relative;
  overflow: hidden;
}

/* Reverse hover effect for top navigation buttons */
.top-cta .cta-btn {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px; /* Pill shape */
  color: #FFF;
  z-index: 1;
}

.top-cta .cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: 20px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.top-cta .cta-btn:hover:not(.active)::before {
  transform: scaleX(1);
}

.top-cta .cta-btn:hover:not(.active) {
  color: #000;
  border-color: #FFF;
}

.artist-name {
  color: #FFF;
  font-family: "Fenul Standard TRIAL";
  font-size: 55px;
  font-style: normal;
  font-weight: 400;
  line-height: 98%; /* 55.86px */
}

.album-title {
  color: #FFF;
  font-family: "Fenul Standard TRIAL";
  font-size: 57px;
  font-style: normal;
  font-weight: 400;
  line-height: 98%; /* 55.86px */
}

.album-title .ep {
  color: #FFF;
  font-family: Estedad-VF;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 143.574%; /* 17.229px */
  margin-left: 0px;
}

.label {
  color: #FFF;
  font-family: Estedad-VF;
  font-size: 64px;
  font-style: normal;
  font-weight: 300;
  line-height: 98%; /* 62.72px */
}

.label .catalog {
  color: #FFF;
  font-family: Estedad-VF;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 143.574%;
  position: relative;
  top: -2.8em; /* Align with top of 'E' */
  margin-left: 2px;
}

/* Layer 1: Background artwork */
.artwork {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - (var(--art-lift) + var(--art-lift-offset, 0px))));
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}


.artwork img {
  width: auto; /* preserve aspect ratio */
  height: min(2204px, 250vh); /* large base so scaled image still covers */
  object-fit: none;
  transition: filter 0.4s ease-out 0.3s;
  transform: translateX(0%) scale(var(--art-scale));
  transform-origin: center center;
  will-change: transform;
  max-width: none;
}

/* Smooth unblur for title and bottom nav on intro */
/* Removed intro blur transition from title and bottom nav */

/* Ensure initial load starts blurred until JS removes .intro-blur */
.phone.intro-blur .artwork img {
  filter: blur(20px) !important;
}

/* Apply intro blur to title and bottom nav as well */
/* Removed intro blur from title and bottom nav */

/* Apply blur when track is active */
.phone[data-active-track]:not([data-paused]) .artwork img {
  filter: blur(20px);
  transition: filter 200ms ease-out;
}

/* Title section remains visible when track is active */

/* Title section is always visible by default */
.title-section {
  display: block;
}

/* Hide title section only when overlays are open */
.info-overlay[aria-hidden="false"] ~ .title-section,
.links-overlay[aria-hidden="false"] ~ .title-section {
  display: none;
}

/* Remove blur while scrubbing and disable transitions to prevent jittering */
.phone[data-active-track][data-scrubbing="true"] .artwork img {
  filter: blur(0);
  transition: filter 180ms ease-out !important;
}

/* Temporarily disable playback blur so intro fade-to-sharp is visible */
.phone.suspend-active-blur[data-active-track]:not([data-paused]) .artwork img {
  filter: none !important;
}

/* If both classes are present, ensure intro blur wins */
.phone.suspend-active-blur.intro-blur .artwork img {
  filter: blur(20px) !important;
}

/* Content layers, ordered by z-index:
   0: Background artwork
   1: Main content
   2: Stage/timeline
   3: Navigation
   4: Overlays (video, time display)
*/
main {
  position: relative;
  z-index: 1;
}

/* Stage and controls */
.stage {
  position: relative;
  z-index: 2;
}

/* Active track width adjustments */
/* MAIN occupies remaining height between top and bottom nav */ 
main { 
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-top: clamp(8px, calc(60px * var(--vert-scale)), 60px);
}
/* Removed sticky-specific padding */
/* STAGE sits above nav, centered, closer to track titles */
.stage{
  width:100%; max-width:360px;
  display:grid; gap:8px; place-items:center;
  padding:0;               /* removed top/bottom padding for closer spacing */
  position: relative;
  z-index: 7;  /* Higher z-index for stage interaction */
  pointer-events: auto; /* Re-enable events for stage */
  transform: translateY(calc(-1 * var(--stage-lift) + var(--stage-mobile-offset, 0px)));
}

/* Mobile viewport adjustment - move stage down 50px for ~658px height viewports */
@media screen and (max-width: 743px) and (max-height: 700px) {
  .stage {
    transform: translateY(calc(-1 * var(--stage-lift) + var(--stage-mobile-offset, 0px) + 50px));
  }
}

/* Mobile artwork adjustment - move artwork down 40px */
@media screen and (max-width: 743px) {
  .artwork {
    transform: translate(-50%, calc(-50% - (var(--art-lift) + var(--art-lift-offset, 0px)) + 40px));
  }
}
/* Removed sticky-specific stage padding */
.timeline{
  position:relative; 
  width:100%; 
  height: calc(180px * var(--vert-scale)); 
  display:grid; 
  align-items:center; 
  justify-items:center;
  pointer-events: none; /* Allow events to pass through to children */
}
/* Progress track (currently hidden) */
.progress-track{
  position:absolute; left:0; right:0; top:50%; height:4px;
  transform:translateY(-50%);
  background:var(--track); border-radius:999px;
  opacity: 0;
}

/* Scrubber input styles */
.scrubber-input{
  -webkit-appearance:none; appearance:none;
  width:100%; background:transparent; 
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); 
  height:32px; 
  z-index: 8; /* Higher z-index for scrubber interaction */
  opacity: 1;  /* Ensure scrubber remains interactive */
  pointer-events: auto; /* Explicitly enable pointer events */
}

/* Hide default thumb */
.scrubber-input::-webkit-slider-thumb{ 
  -webkit-appearance:none; 
  width:1px; height:1px; 
  background:transparent; 
  border:0; 
}
.scrubber-input::-moz-range-thumb{ 
  width:1px; height:1px; 
  border:0; 
  background:transparent; 
}

/* Progress track fill (currently hidden) */
.scrubber-input::-webkit-slider-runnable-track{
  height:4px; 
  border-radius:999px; 
  z-index:1;
  background:transparent;
}
.scrubber-input::-moz-range-track{
  height:4px; 
  border-radius:999px;
  background:transparent;
}
/* Video thumb proxy with track-specific sizes */
.video-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.thumb-video{
  position: absolute; 
  top: 50%; 
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
  will-change: left, opacity;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  cursor: grab;
  z-index: 9; /* Higher z-index for thumb video interaction */
}

/* Removed dead CSS for media controls on images */

.thumb-video::backdrop {
  background-color: transparent;
}

.main-video {
  opacity: 0; 
  z-index: 4;
  cursor: grab;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
              left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
  pointer-events: auto;
}

/* Show video when track is active */
.timeline[data-active-track] .main-video {
  opacity: 1;
}

.trail-video {
  opacity: 0;
  z-index: 3;
  transition: transform 5s cubic-bezier(0.34, 1.56, 0.64, 1), 
              left 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.0s ease-out;
}

/* Hide trail videos by default - only show during scrubbing */
.timeline[data-active-track] .trail-video {
  opacity: 0;
}

/* Show trail videos only when scrubbing */
.timeline[data-active-track][data-scrubbing="true"] .trail-video {
  opacity: 0.6;
}

/* Create smooth gradient opacity effect for 15 trail videos - only during scrubbing */
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="1"] { opacity: 0.15; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="2"] { opacity: 0.2; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="3"] { opacity: 0.25; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="4"] { opacity: 0.3; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="5"] { opacity: 0.35; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="6"] { opacity: 0.4; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="7"] { opacity: 0.45; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="8"] { opacity: 0.5; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="9"] { opacity: 0.6; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="10"] { opacity: 0.7; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="11"] { opacity: 0.8; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="12"] { opacity: 0.9; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="13"] { opacity: 0.95; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="14"] { opacity: 0.98; }
.timeline[data-active-track][data-scrubbing="true"] .trail-video[data-trail="15"] { opacity: 1; }

.trail-video[data-trail="1"] { transition-delay: 0.45s; }
.trail-video[data-trail="2"] { transition-delay: 0.42s; }
.trail-video[data-trail="3"] { transition-delay: 0.39s; }
.trail-video[data-trail="4"] { transition-delay: 0.36s; }
.trail-video[data-trail="5"] { transition-delay: 0.33s; }
.trail-video[data-trail="6"] { transition-delay: 0.30s; }
.trail-video[data-trail="7"] { transition-delay: 0.27s; }
.trail-video[data-trail="8"] { transition-delay: 0.24s; }
.trail-video[data-trail="9"] { transition-delay: 0.21s; }
.trail-video[data-trail="10"] { transition-delay: 0.18s; }
.trail-video[data-trail="11"] { transition-delay: 0.15s; }
.trail-video[data-trail="12"] { transition-delay: 0.12s; }
.trail-video[data-trail="13"] { transition-delay: 0.09s; }
.trail-video[data-trail="14"] { transition-delay: 0.06s; }
.trail-video[data-trail="15"] { transition-delay: 0.03s; }

.thumb-video:active {
  cursor: grabbing;
}

/* Video sizes based on active track */
.timeline[data-active-track="01"] .thumb-video {
  width:183.83px; height:157.57px;
}

.timeline[data-active-track="02"] .thumb-video {
  width:136.05px; height:162.51px;
}

.timeline[data-active-track="03"] .thumb-video {
  width:219px; height:119.82px;
}

.timeline[data-active-track="04"] .thumb-video {
  width:137.07px; height:133.6px;
}
.time-display {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--fg);
  font-size: 12px;
  font-variant-numeric: Estedad-VF, tabular-nums;
  pointer-events: none;
  z-index: 4;
  backdrop-filter: blur(5px); /* Apply blur to the background */
  background: rgba(0, 0, 0, 0.5); /* Reduce opacity for better readability */
  padding: 4px 8px;
  border-radius: 4px;
  top: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
  transform-style: preserve-3d;  /* Create new stacking context */
  /* left position will be set dynamically in JS */
}
/* BOTTOM NAV — right aligned, no overlap, within frame */
.bottom-nav {
  position: absolute;
  bottom: max(var(--track-list-bottom-offset, 20px), env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  z-index: 3;
  pointer-events: auto; /* Re-enable events for bottom nav */
  transition: bottom 0.3s ease; /* Smooth transitions when address bar moves */
}

/* Responsive bottom nav positioning */
@media screen and (min-width: 769px) {
  .bottom-nav {
    bottom: 20px;  /* Desktop: closer to bottom */
  }
}

@media screen and (min-width: 1024px) {
  .bottom-nav {
    bottom: 30px;  /* Large screens: slightly more space */
  }
}

/* Tablet landscape adjustment */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .bottom-nav {
    bottom: 15px;  /* Tablet landscape: minimal space */
  }
}

/* Tablet (iPad mini 744×1024 and up): use desktop layout with fixed dimensions */
@media screen and (min-width: 744px) {
  html, body {
    height: 100vh;
    overflow: visible;
    background: #500e0e;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #500e0e;
    background-image: url('imgs/Bg_desktop_img.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* For absolute positioning of CTAs */
  }
  .phone {
    /* Fixed desktop dimensions - you can adjust these */
    width: 390px;
    height: 844px;
    border: 1px solid #222;
    border-radius: clamp(12px, 3vw, 24px);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    margin: 30px auto; /* 30px margin around the frame */
    background: transparent; /* Let body background show through */
    transform: scale(var(--desktop-scale, 1));
    transform-origin: center center;
  }
  .top-cta { 
    top: 20px; 
  }
  .title-section {
    margin: calc((24px * var(--vert-scale)) + 40px) auto 0;
  }
  .bottom-nav { 
    bottom: 20px; 
  }
  .bottom-nav .track-list { 
    margin-bottom: 0 !important; 
  }
}

/* Desktop/Tablet CTAs - positioned at browser edges */
.desktop-ctas {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  padding: 0 0px; /* 0px spacing from browser edges */
}

.desktop-ctas .cta-left {
  position: absolute;
  left: -50px; /* -50px to offset the internal padding */
  top: 50%;
  transform: translateY(-50%);
  min-width: max-content;
  width: auto;
}

.desktop-ctas .cta-right {
  position: absolute;
  right: -50px; /* -50px to offset the internal padding */
  top: 50%;
  transform: translateY(-50%);
  min-width: max-content;
  width: auto;
}

.desktop-ctas .cta-left,
.desktop-ctas .cta-right {
  color: #FFF;
  text-align: center;
  font-family: Estedad-VF;
  font-size: 25px;
  font-style: normal;
  font-weight: 200;
  line-height: 101%; /* 25.25px */
  text-decoration: none;
  pointer-events: auto;
  position: relative;
  overflow: visible; /* Changed from hidden to visible */
  transition: opacity 0.3s ease;
  padding: 0 50px; /* Add internal padding for text space */
  white-space: nowrap; /* Prevent text wrapping */
}

/* Desktop CTAs hover container structure */
.desktop-ctas .hover-container {
  position: relative;
  display: inline-block;
  overflow: visible; /* Changed from hidden to visible */
  width: auto;
  min-width: max-content;
}

.desktop-ctas .hover-container .original,
.desktop-ctas .hover-container .duplicate {
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: auto;
  white-space: nowrap;
}

.desktop-ctas .hover-container .duplicate {
  position: absolute;
  top: 100%;
  left: 0;
  width: auto;
}

.desktop-ctas .cta-left:hover,
.desktop-ctas .cta-right:hover {
  text-decoration: none;
}

/* Tablet font size adjustment */
@media screen and (min-width: 744px) and (max-width: 1024px) {
  .desktop-ctas .cta-left,
  .desktop-ctas .cta-right {
    font-size: 20px; /* Slightly smaller font for tablet */
  }
}

/* 768px specific - minimal margin for more text space */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .desktop-ctas {
    padding: 0 0px !important; /* 0px spacing from browser edges at 768px */
  }
  
  .desktop-ctas .cta-left {
    left: -50px !important; /* -50px to offset the internal padding */
  }
  
  .desktop-ctas .cta-right {
    right: -50px !important; /* -50px to offset the internal padding */
  }
}

/* 1024px specific - ensure edge positioning */
@media screen and (min-width: 1024px) {
  .desktop-ctas .cta-left {
    left: -50px !important; /* -50px to offset the internal padding */
  }
  
  .desktop-ctas .cta-right {
    right: -50px !important; /* -50px to offset the internal padding */
  }
}

/* Hide CTAs on mobile */
@media screen and (max-width: 743px) {
  .desktop-ctas {
    display: none;
  }
}

/* Hide PERCARE links in overlay on desktop/tablet since they're available as CTAs */
@media screen and (min-width: 744px) {
  .percare-links-row {
    display: none !important;
  }
}

/* Mobile: move the stage (audio players) down by 40px */
@media screen and (max-width: 480px) {
  :root { --stage-mobile-offset: 80px; }
}

.bottom-nav .track-list {
  width: 357.86px;  /* Match title section width */
  max-width: calc(100% - 30px);  /* Ensure it fits on small screens */
  margin: 0 auto var(--bottom-tight-pad-phone, 0px) auto;  /* Center like title section */
  padding: 0 0px;  /* Reduced padding since container fills viewport */
  text-align: right;
  box-sizing: border-box;
}

.bottom-nav .track-item {
  margin-bottom: 2px;
}

.bottom-nav .track {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: right;
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  justify-content: flex-end;
}

/* Double track item (Senses and Darkness) */
.bottom-nav .track-item.double {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  justify-content: flex-end;
}

.bottom-nav .track-item.double .track {
  width: auto;
}

/* Push Pause text to the left when track is active */
.bottom-nav .track-item.double .track.active .title {
  margin-left: 0px;
}

/* Hide duplicate text when track is active to prevent double text */
.bottom-nav .track.active .hover-container .duplicate {
  display: none;
}

/* Constrain span.num width when track 04 is active to reduce gap */
.phone[data-active-track="04"] .bottom-nav .track-item.double .track .num {
  max-width: 70px;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reduce desktop font size for span.title and adjust gap */
@media screen and (min-width: 481px) {
  .bottom-nav .track .title {
    font-size: calc(40px * var(--nav-title-scale));
  }
  
  .bottom-nav .track-item.double {
    gap: 6px;
  }
}

/* We Dance positioning */
.bottom-nav .track-item.dance {
  margin-top: -2px;
  padding-right: 0;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  transition: opacity 0.3s ease;
  position: relative; /* Required for transforms to work */
}

/* Ensure We Dance is positioned correctly within its container */
.track-list .slide-up-container .track-item.dance {
  position: relative;
  width: 100%;
  margin-top: -2px; /* Restore original margin */
}

/* Simplified: Let standard slide animation handle We Dance */

/* Hide We Dance when track 04 is active - override animation rules */
.phone[data-active-track="04"] .bottom-nav .track-item.dance {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity 0.3s ease !important;
}

.bottom-nav .track-item.dance .track {
  width: auto;
  padding-right: 0;
}

/* Specific style for We Dance text */
.bottom-nav .track-item.dance .title {
  padding-right: 0;
  margin-right: 0;
}

.bottom-nav .track .num { 
  color: #FFF;
  font-family: Estedad-VF;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  margin-right: 5px;
  margin-top: 6px;
}

.bottom-nav .track .title{ 
  color: #FFF;
  font-family: "Fenul Standard TRIAL";
  font-size: calc(41px * var(--nav-title-scale));
  font-weight: 300;
  line-height: 107%;
  display: inline;
  white-space: nowrap;
}

/* Removed incorrect sibling blur selectors targeting non-siblings */

.top-cta{
  position: absolute;
  top: max(var(--top-cta-offset, 20px), env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  width: calc(100% - 30px);
  max-width: 366px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  z-index: 10; /* Higher z-index to work within isolated stacking context */
  pointer-events: auto; /* Re-enable events for top CTA */
  transition: top 0.3s ease; /* Smooth transitions when address bar moves */
}

/* Removed all sticky positioning complexity - using simple absolute + safe-area-inset */

.top-cta .cta-btn{
  appearance: none;
  background: transparent;
  border: 0.75px solid rgba(255,255,255,0.95);
  padding: 1px 10px;
  color: #FFF;
  font-family: Estedad-VF;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 143.574%;
  cursor: pointer;
  border-radius: 999px;
}
.top-cta .cta-btn.active{
  background: rgba(255,255,255,0.9);
  color: #000;
  border-color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.top-cta .cta-btn[aria-disabled="true"]{ pointer-events: none; }

.top-cta .cta-btn:hover{
  border-color: #fff;
}

.top-cta .cta-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.info-overlay {
  position: absolute;
  inset: 0;
  padding: 0 15px;
  display: block;                 /* keep mounted for transitions */
  z-index: 6; /* Higher z-index for overlay interaction */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(0,0,0,0.4);
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  /* Hide scrollbars while preserving scrollability */
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
  opacity: 0;                 /* fade base */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms cubic-bezier(0.16, 1, 0.3, 1);
  contain: layout paint; /* isolate for smoother transforms */
}
.info-overlay::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Mobile: disable horizontal scrolling in the overlay */
@media screen and (max-width: 768px) {
  .info-overlay { overflow-x: hidden; touch-action: pan-y; }
  .links-overlay { overflow: hidden; touch-action: none; }
  /* Add extra bottom breathing room so last lines clear the address bar */
  .info-content { padding-bottom: calc(140px + var(--sat-bottom)); }
}

.info-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }
.info-overlay.closing { opacity: 0; filter: blur(8px); pointer-events: none; }

/* Links overlay */
.links-overlay {
  position: absolute;
  inset: 0;
  padding: 0 15px;
  display: block;                /* keep mounted for transitions */
  z-index: 6; /* Higher z-index for overlay interaction */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Image and gradient handled via pseudo-elements for animation control */
  background: transparent;
  overflow: hidden;             /* disable scroll */
  overscroll-behavior: none;    /* prevent rubber-banding */
  opacity: 0;                   /* fade base */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.links-overlay::-webkit-scrollbar{ width:0; height:0; display:none; }
.links-overlay::before{
  content: "";
  position: absolute; inset: 0;
  background-image: url('imgs/Press_L.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: calc(50% + 30px) 25%;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(16px) scale(1.25);
  z-index: 0;
  pointer-events: none;
}
.links-overlay::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35));
  z-index: 1;
  pointer-events: none;
}
.links-overlay[aria-hidden="false"]::before{
  animation: linksBgIn 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes linksBgIn{
  0%{ opacity:0; filter:blur(14px); transform: scale(1.25); background-position: calc(50% + 30px) 25%; }
  60%{ opacity:1; filter:blur(4px); transform: scale(1.25); background-position: calc(50% + 30px) 30%; }
  100%{ opacity:1; filter:blur(0); transform: scale(1.25); background-position: calc(50% + 30px) 25%; }
}

@media (prefers-reduced-motion: reduce){
  .links-overlay::before{ opacity:1; filter:none; transform: scale(1.25); background-position: calc(50% + 30px) 25%; }
  .links-overlay[aria-hidden="false"]::before{ animation: none; }
}

/* Mobile-specific positioning for Press_L.png - keep original scale, only move position */
@media screen and (max-width: 768px) {
  .links-overlay::before {
    background-position: calc(50% + 30px) 40%; /* Move image down on mobile - keep original scale */
    transform: translateY(66px) scale(1.2875); /* Increase scale by 3% (1.25 * 1.03) */
  }
  
  .links-overlay[aria-hidden="false"]::before {
    animation: linksBgInMobile 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* Mobile-specific animation for press image - maintain original scale */
@keyframes linksBgInMobile {
  0% { 
    opacity: 0; 
    filter: blur(14px); 
    transform: translateY(66px) scale(1.2875); 
    background-position: calc(50% + 30px) 40%; 
  }
  60% { 
    opacity: 1; 
    filter: blur(4px); 
    transform: translateY(66px) scale(1.2875); 
    background-position: calc(50% + 30px) 45%; 
  }
  100% { 
    opacity: 1; 
    filter: blur(0); 
    transform: translateY(66px) scale(1.2875); 
    background-position: calc(50% + 30px) 40%; 
  }
}

/* Extra small mobile devices - push image even further down, keep scale */
@media screen and (max-width: 480px) {
  .links-overlay::before {
    background-position: calc(50% + 30px) 50%; /* Move even further down on small screens */
    transform: translateY(70px) scale(1.2875); /* Increase scale by 3% (1.25 * 1.03) */
  }
  
  .links-overlay[aria-hidden="false"]::before {
    animation: linksBgInSmallMobile 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes linksBgInSmallMobile {
  0% { 
    opacity: 0; 
    filter: blur(14px); 
    transform: translateY(70px) scale(1.2875); 
    background-position: calc(50% + 30px) 50%; 
  }
  60% { 
    opacity: 1; 
    filter: blur(4px); 
    transform: translateY(70px) scale(1.2875); 
    background-position: calc(50% + 30px) 55%; 
  }
  100% { 
    opacity: 1; 
    filter: blur(0); 
    transform: translateY(70px) scale(1.2875); 
    background-position: calc(50% + 30px) 50%; 
  }
}

/* Landscape mobile positioning - adjust position only, keep scale */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .links-overlay::before {
    background-position: calc(50% + 30px) 35%; /* Slightly different positioning for landscape */
    transform: translateY(66px) scale(1.2875); /* Increase scale by 3% (1.25 * 1.03) */
  }
  
  .links-overlay[aria-hidden="false"]::before {
    animation: linksBgInLandscape 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes linksBgInLandscape {
  0% { 
    opacity: 0; 
    filter: blur(14px); 
    transform: translateY(66px) scale(1.2875); 
    background-position: calc(50% + 30px) 35%; 
  }
  60% { 
    opacity: 1; 
    filter: blur(4px); 
    transform: translateY(66px) scale(1.2875); 
    background-position: calc(50% + 30px) 40%; 
  }
  100% { 
    opacity: 1; 
    filter: blur(0); 
    transform: translateY(66px) scale(1.2875); 
    background-position: calc(50% + 30px) 35%; 
  }
}
.links-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }
.links-overlay.closing { opacity: 0; filter: blur(8px); pointer-events: none; }

.links-content {
  width: 350px;
  max-width: 100%;
  /* Align left edge with .title-section (357.86px centered in 390px phone) */
  margin: calc(70px + var(--sat-top)) 0 20px calc(((390px - 350px) / 2) - 15px);
  position: relative; /* Sit above animated background */
  z-index: 2;
}

.links-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.links-list li { margin: 0 0 -9px 0; }

.link-item {
  color: #FFF;
  font-family: Estedad-VF;
  font-size: 46px;
  font-style: normal;
  font-weight: 500; /* slightly thicker */
  line-height: 0.85;
  text-decoration: none;
  display: inline-block;
}
.link-item:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.link-item:hover { text-decoration: underline; }

/* PERCARE links row styling */
.percare-links-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 500px 0 0 0;
  width: 100%;
  gap: 20px;
  position: relative;
}

/* Mobile viewport height adjustments for PERCARE buttons */
@media screen and (max-width: 768px) {
  .percare-links-row {
    position: fixed;
    bottom: 20px;
    left: 15px;
    right: 15px;
    margin: 0;
    width: auto;
    z-index: 10;
  }
}

.percare-links-row .percare-left {
  text-align: left;
  position: relative;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 30px;
}

.percare-links-row .percare-right {
  text-align: right;
  position: relative;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 30px;
}

.info-content {
  max-width: 366px;
  margin: calc(70px + var(--sat-top)) auto 20px;
  color: #FFF;
  font-family: "Fenul Standard TRIAL", "Times New Roman", serif ;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Body description text in Estedad */
.info-content .info-body {
  font-family: Estedad-VF;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 1.2;
}

.info-content p { margin: 0 0 12px 0; will-change: auto; transform: none; }
/* Smooth transform and blur for scroll-scaling paragraphs */
.info-overlay .info-content p {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 160ms ease-out;
  transform-origin: center center;
}
/* Line-level scaling targets */
.info-overlay .info-content .info-line{
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 160ms ease-out;
  transform-origin: center center;
}
.info-overlay .info-content .word{ display: inline-block; white-space: pre; }

/* Mobile: slightly longer transform easing for smoother feel */
@media screen and (max-width: 480px) {
  .info-overlay .info-content .info-line{
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 200ms ease-out;
  }
}

.info-content .info-credits { font-family: "Fenul Standard TRIAL", "Times New Roman", serif; font-size: 28px; font-weight: 300; letter-spacing: -0.02em; }
.info-content .info-body p { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.info-content .info-credits p, .info-content .info-body p { display: block; }

@media screen and (max-width: 480px) {
  .title-section {
    height: calc(150px * var(--vert-scale));
    margin: calc((20px * var(--vert-scale)) + var(--title-top-offset-dynamic, 25px) + max(20px, env(safe-area-inset-top))) auto 0;  /* Auto-centered like track-list */
  }
  .artist-name {
    font-size: 44px;
  }
  .album-title {
    font-size: 46px;
  }
  .label {
    font-size: 52px;
  }
  .label .catalog {
    top: -2.2em;
  }

  /* Bottom nav typography scaling for mobile */
  .bottom-nav .track .title{
    font-size: 34px;
    line-height: 110%;
  }
  .bottom-nav .track .num{
    font-size: 10px;
    margin-top: 4px;
  }
  .bottom-nav .track-item.double{
    gap: 8px;
  }
  .bottom-nav .track-list{
    padding: 0 0px; /* Match desktop value for consistency */
  }
  
  /* Enhanced mobile track-list positioning for address bar handling */
  .bottom-nav {
    /* Use dynamic offset that responds to address bar position */
    bottom: max(var(--track-list-bottom-offset, 30px), env(safe-area-inset-bottom));
  }
  
  /* Ensure last track title has extra clearance */
  .bottom-nav .track-list .track-item:last-child {
    margin-bottom: var(--bottom-tight-pad-phone, 8px);
  }
}