/* Register color properties for smooth transitions */
@property --bg-r { syntax: '<number>'; inherits: true; initial-value: 12; }
@property --bg-g { syntax: '<number>'; inherits: true; initial-value: 16; }
@property --bg-b { syntax: '<number>'; inherits: true; initial-value: 10; }

@property --outer-r { syntax: '<number>'; inherits: true; initial-value: 42; }
@property --outer-g { syntax: '<number>'; inherits: true; initial-value: 58; }
@property --outer-b { syntax: '<number>'; inherits: true; initial-value: 30; }

@property --middle-r { syntax: '<number>'; inherits: true; initial-value: 78; }
@property --middle-g { syntax: '<number>'; inherits: true; initial-value: 96; }
@property --middle-b { syntax: '<number>'; inherits: true; initial-value: 42; }

@property --inner-r { syntax: '<number>'; inherits: true; initial-value: 110; }
@property --inner-g { syntax: '<number>'; inherits: true; initial-value: 96; }
@property --inner-b { syntax: '<number>'; inherits: true; initial-value: 48; }

@property --core-r { syntax: '<number>'; inherits: true; initial-value: 186; }
@property --core-g { syntax: '<number>'; inherits: true; initial-value: 164; }
@property --core-b { syntax: '<number>'; inherits: true; initial-value: 108; }

@property --center-r { syntax: '<number>'; inherits: true; initial-value: 232; }
@property --center-g { syntax: '<number>'; inherits: true; initial-value: 220; }
@property --center-b { syntax: '<number>'; inherits: true; initial-value: 186; }

html {
  font-size: 0.625rem;
}

body {
  color: #fff;
  background: rgb(var(--bg-r), var(--bg-g), var(--bg-b));
  margin: 0;
  font-family: FT Base,-apple-system,system-ui,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 4.0rem;
  max-height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  transition: 
    --bg-r var(--color-transition) ease-in-out,
    --bg-g var(--color-transition) ease-in-out,
    --bg-b var(--color-transition) ease-in-out;
}

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  border-bottom: 0.1em solid #6a5c3a;
  padding-bottom: 4px;
  line-height: 1;
  transition: 0.1s ease;
}
a:hover{
  color: inherit;
  text-decoration: none;
  display: inline-block;
  border-bottom: 0.1em solid #ffffff;
  padding-bottom: 4px;
  line-height: 1;
}

main {
  padding: 3.6rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  position: relative;
  z-index: 1;
  height: auto;
  box-sizing: border-box;
}

#intro {
  align-self: start;
  font-size: 2.4rem;
  font-weight: 400;
}

#song {
  display: flex;
  justify-self: flex-end;
  align-self: start;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

#song-artist,
#song-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

#song-title {
  flex-shrink: 1;
  min-width: 0;
}

/* Add dash between artist and title on larger screens */
#song-artist::after {
  content: " - ";
  white-space: pre;
}

#song-artist:empty::after {
  content: none;
}

/* Remove the dash on mobile screens */
@media screen and (max-width: 480px) {
  #song-artist::after {
    content: none;
  }
}

#controls {
  grid-column: span 2;
  align-self: auto;
  justify-self: auto;
  display: block;
}

#controls > button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0 2rem 0 0;
  color: inherit;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.1s ease-in-out;
  filter: none;
}

#controls > button svg {
  display: block;
  width: 44px;
  height: 44px;
}

#controls > button:hover {
  opacity: 1;
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -ms-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  filter: none;
}

#controls .hide {
  display: none;
}

#download a {
  display: inline-block;
}

@media screen and (max-width: 960px) {
  main {
    grid-template-columns: 1fr;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 9rem;
    padding-top: 1.6rem;
    display: flex;
    flex-direction: column;
  }

  #intro {
    padding-top: 0;
    padding-left: 0.5rem;
    order: 1;
  }

  #controls {
    order: 2;
    padding-left: 0.5rem;
    grid-column: unset;
    margin-top: 3px;
  }

  #controls > button {
    transform: scale(1.15);
    width: auto;
    height: auto;
    padding-right: calc(2rem + 6px);
  }

  #song {
    order: 3;
    justify-self: flex-start;
    align-self: start;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 5rem 3.6rem 5rem;
    box-sizing: border-box;
    z-index: 5;
  }
}

@media screen and (max-width: 600px) {
  main {
    padding: 1.25rem 3rem;
    padding-bottom: 9rem;
  }

  #song {
    padding: 2rem 3rem 2.5rem 3rem;
    font-size: 2.4rem;
  }
  
  body {
    font-size: 2rem;
    line-height: 3rem;
  }
  
  #controls {
    padding-left: 11px;
  }
  
  #controls > button {
    padding-right: calc(1.5rem + 6px);
  }
}

/* Only apply stacked layout at very small screens where wrapping would occur */
@media screen and (max-width: 480px) {
  #song {
    flex-direction: column;
    white-space: normal;
    overflow: visible;
  }
  
  #song-artist {
    margin-top: 0;
    opacity: 1;
    order: 1;
  }
  
  #song-title {
    order: 0;
    opacity: 1;
    margin-bottom: 0.5rem;
  }
}

/*****************/
/* ENERGY SPHERE */
/*****************/

#energy-sphere-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

#energy-sphere-outer, #energy-sphere-middle, #energy-sphere-inner, #energy-sphere-core, #energy-sphere-center {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  pointer-events: none;
  transition: 
    --outer-r var(--color-transition) ease-in-out,
    --outer-g var(--color-transition) ease-in-out,
    --outer-b var(--color-transition) ease-in-out,
    --middle-r var(--color-transition) ease-in-out,
    --middle-g var(--color-transition) ease-in-out,
    --middle-b var(--color-transition) ease-in-out,
    --inner-r var(--color-transition) ease-in-out,
    --inner-g var(--color-transition) ease-in-out,
    --inner-b var(--color-transition) ease-in-out,
    --core-r var(--color-transition) ease-in-out,
    --core-g var(--color-transition) ease-in-out,
    --core-b var(--color-transition) ease-in-out,
    --center-r var(--color-transition) ease-in-out,
    --center-g var(--color-transition) ease-in-out,
    --center-b var(--color-transition) ease-in-out;
}

:root {
  /* Time-of-day color scheme - defaults to night */
  /* Separate R, G, B values for smooth @property transitions */
  --bg-r: 12; --bg-g: 16; --bg-b: 10;
  --outer-r: 42; --outer-g: 58; --outer-b: 30;
  --middle-r: 78; --middle-g: 96; --middle-b: 42;
  --inner-r: 110; --inner-g: 96; --inner-b: 48;
  --core-r: 186; --core-g: 164; --core-b: 108;
  --center-r: 232; --center-g: 220; --center-b: 186;
  
  /* Transition duration for color changes */
  --color-transition: 900s;
}

/* BAND 1: Outer glow - soft, diffuse */
#energy-sphere-outer {
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, 
    rgba(var(--outer-r), var(--outer-g), var(--outer-b), 0.9) 0%, 
    rgba(var(--outer-r), var(--outer-g), var(--outer-b), 0.6) 40%, 
    rgba(var(--outer-r), var(--outer-g), var(--outer-b), 0.2) 70%, 
    rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0) 100%
  );
  animation: pulse-outer 24s ease-in-out infinite alternate;
  filter: blur(40px);
}

/* BAND 2: The distinct ring - sharp, defined (Eno-style) */
#energy-sphere-middle {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, 
    rgba(var(--middle-r), var(--middle-g), var(--middle-b), 0) 0%,
    rgba(var(--middle-r), var(--middle-g), var(--middle-b), 0) 30%,
    rgba(var(--middle-r), var(--middle-g), var(--middle-b), 0.95) 50%,
    rgba(var(--middle-r), var(--middle-g), var(--middle-b), 0.9) 65%,
    rgba(var(--middle-r), var(--middle-g), var(--middle-b), 0.3) 85%,
    rgba(var(--middle-r), var(--middle-g), var(--middle-b), 0) 100%
  );
  animation: pulse-middle 21s ease-in-out infinite alternate;
  filter: blur(8px);
}

/* BAND 3: Inner core area */
#energy-sphere-inner {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, 
    rgba(var(--inner-r), var(--inner-g), var(--inner-b), 0.95) 0%, 
    rgba(var(--inner-r), var(--inner-g), var(--inner-b), 0.8) 50%, 
    rgba(var(--inner-r), var(--inner-g), var(--inner-b), 0.3) 80%, 
    rgba(var(--inner-r), var(--inner-g), var(--inner-b), 0) 100%
  );
  animation: pulse-inner 18s ease-in-out infinite alternate;
  filter: blur(25px);
}

#energy-sphere-core {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, 
    rgba(var(--core-r), var(--core-g), var(--core-b), 0.95) 0%, 
    rgba(var(--core-r), var(--core-g), var(--core-b), 0.5) 60%, 
    rgba(var(--core-r), var(--core-g), var(--core-b), 0) 100%
  );
  animation: pulse-core 15s ease-in-out infinite alternate;
  filter: blur(20px);
}

#energy-sphere-center {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, 
    rgba(var(--center-r), var(--center-g), var(--center-b), 1) 0%, 
    rgba(var(--center-r), var(--center-g), var(--center-b), 0.8) 40%, 
    rgba(var(--center-r), var(--center-g), var(--center-b), 0) 100%
  );
  animation: pulse-center 12s ease-in-out infinite alternate;
  filter: blur(10px);
}

@keyframes pulse-outer {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
  }
}

@keyframes pulse-middle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
}

@keyframes pulse-inner {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
}

@keyframes pulse-core {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.95;
  }
}

@keyframes pulse-center {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 1;
  }
}


html.tab-hidden #energy-sphere-outer,
html.tab-hidden #energy-sphere-middle,
html.tab-hidden #energy-sphere-inner,
html.tab-hidden #energy-sphere-core,
html.tab-hidden #energy-sphere-center {
  animation-play-state: paused;
}

/*******************/
/* ENVIRONMENT STATS */
/*******************/

#environment-stats {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3rem;
  z-index: 2;
  box-sizing: border-box;
}

@media screen and (min-width: 961px) {
  #environment-stats {
    padding: 3rem 12rem;
  }
}

.stat {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.stat-label {
  font-size: 1.47rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
  line-height: 1.4;
}

@media screen and (min-width: 961px) {
  .stat-label {
    line-height: 2.5rem;
  }
}

.stat-value {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 960px) {
  #environment-stats {
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    width: auto;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    padding: 3rem;
  }
  
  .stat {
    align-items: flex-start;
    text-align: left;
  }
  
  .stat-label {
    font-size: 1.3rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 600px) {
  #environment-stats {
    padding: 2.5rem;
    gap: 1.5rem 2.5rem;
  }
  
  .stat-label {
    font-size: 1.2rem;
  }
  
  .stat-value {
    font-size: 1.4rem;
  }
}

/*******************/
/* STATS TOGGLE    */
/*******************/

#stats-toggle {
  position: fixed;
  bottom: 3rem;
  left: 5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 2.76rem;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  line-height: 1;
  transition: color 0.12s ease, opacity 0.4s ease;
}

@media screen and (max-width: 960px) {
  #stats-toggle {
    top: 4.5rem;
    right: 5rem;
    bottom: auto;
    left: auto;
    font-size: 3.2rem;
    padding: 0.5rem;
  }
}

#stats-toggle:hover {
  color: #ffffff;
}

#stats-toggle.active {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 960px) {
  #stats-toggle.active {
    opacity: 1;
    pointer-events: auto;
    color: #ffffff;
  }
}

#environment-stats {
  transition: opacity 0.4s ease;
}

#environment-stats.hidden {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 600px) {
  #stats-toggle {
    right: 3rem;
    top: 3rem;
    font-size: 3.3rem;
  }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: url("data:image/png;base64,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") repeat;
  opacity: 0.04;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  #energy-sphere-outer,
  #energy-sphere-middle,
  #energy-sphere-inner,
  #energy-sphere-core,
  #energy-sphere-center {
    animation: none;
  }

  :root {
    --color-transition: 0s;
  }
}

/*****************/
/* PAGE AND FORM */
/*****************/

/* Page transitions */
.page {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.page.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

/* Home page - preserve grid layout */
#page-home {
  display: grid;
}

@media screen and (max-width: 960px) {
  #page-home {
    display: flex;
    flex-direction: column;
  }
}

/* Submit navigation link */
.submit-nav-link {
  position: fixed;
  bottom: 3.5rem;
  right: 5rem;
  font-size: 1.7rem;
  color: rgba(255, 255, 255, 0.35);
  border-bottom: none;
  z-index: 3;
  transition: color 0.12s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.submit-nav-link:hover {
  color: #fff;
  border-bottom: none;
}

.submit-nav-link .plus {
  font-weight: 500;
}

/* Hide submit link when on submit page or stats open */
body.page-submit-active .submit-nav-link,
body.stats-open .submit-nav-link {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hide stats toggle on submit page */
body.page-submit-active #stats-toggle {
  display: none;
}

@media screen and (max-width: 960px) {
  .submit-nav-link {
    bottom: 4rem;
  }
}

@media screen and (max-width: 800px) {
  .submit-nav-link {
    display: none;
  }
}