/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --s0-accent: #f1c40f;
  --s1-accent: #48c9b0;
  --s2-accent: #00d4d4;
  --s3-accent: #b0b8c1;

  --font-body:          'mr-eaves-modern', sans-serif;
  --font-display:  'newshound', sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background-color: #c0392b;
  transition: background-color 500ms ease;
}

/* ============================================================
   THREE.JS CANVAS
   ============================================================ */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* ============================================================
   PLATFORM SWITCHER
   ============================================================ */
#platform-switcher {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1001;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: all;
}

#platform-switcher:hover  { transform: scale(1.08); }
#platform-switcher:active { transform: scale(0.95); }

#platform-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

#platform-logo[data-platform="applemusic"] {
  width: 36px;
  height: 36px;
}

/* ============================================================
   SECTIONS WRAPPER
   ============================================================ */
#sections-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  /* No CSS transition — JS handles snap + tilt content */
}

/* ============================================================
   SECTIONS — transparent (body background shows through)
   ============================================================ */
.section {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: transparent;
}

.section-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(50vh - 36vmin);
  gap: 2vmin;
  will-change: transform;
}

/* ============================================================
   COVER IMAGES — invisible for sections 0-2 (Three.js renders),
   visible for section 3 (CSS circular portrait)
   ============================================================ */
.cover-image {
  width: 72vmin;
  height: 72vmin;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  user-select: none;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
}

/* Section 0-2 images keep pointer-events for click link opening */
#cover-0,
#cover-1,
#cover-2 {
  pointer-events: auto;
}

/* Section 3 — circular portrait */
#portrait-frame {
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 30;
  opacity: 0.52;
  mix-blend-mode: screen;
  mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,0.7) 62%,
    rgba(0,0,0,0) 78%
  );
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,0.7) 62%,
    rgba(0,0,0,0) 78%
  );
  box-shadow:
    0 0 30px 8px rgba(176,184,193,0.42),
    0 0 60px 20px rgba(176,184,193,0.21),
    0 0 100px 40px rgba(176,184,193,0.1);
  animation: portrait-glow-pulse 4s ease-in-out infinite;
  will-change: transform;
}
#portrait-frame.portrait-entering {
  animation: portrait-enter 0.8s ease forwards;
}
@keyframes portrait-enter {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes portrait-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(176,184,193,0.3), 0 0 24px 6px rgba(176,184,193,0.2), 0 0 60px 20px rgba(176,184,193,0.08); }
  50%       { box-shadow: 0 0 0 2px rgba(176,184,193,0.5), 0 0 32px 8px rgba(176,184,193,0.3), 0 0 80px 28px rgba(176,184,193,0.13); }
}

#portrait-radial-glow { display: none; }

/* Portrait img — full color */
#cover-3 {
  opacity: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  margin: 0;
  filter: none;
  pointer-events: auto;
}

/* Section 2 cover-wrapper */
.cover-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin: 0;
  border-radius: 6px;
  overflow: visible;
}
.cover-wrapper .cover-image { border-radius: 0; }
.cover-wrapper::after { display: none; }

/* ============================================================
   DEPTH SHADOW LAYER
   Container: fixed full-viewport, z-12. perspective set by JS during flip
   (perspective-origin defaults to 50% 50% = screen center — matches Three.js VP).
   Shadows: absolute within container, centered at 50%/50% = screen center.
   JS controls only transform each frame; left/top stay at 50% always.
   ============================================================ */
#flip-perspective-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}

#cover-1-shadow,
#cover-2-shadow {
  display: none;
}

#cover-0-shadow,
#cover-1-shadow,
#cover-2-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72vw;
  height: 72vw;
  border-radius: 6px;
  background: transparent;
  pointer-events: none;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  #cover-0-shadow,
  #cover-1-shadow,
  #cover-2-shadow {
    width: min(55vh, 55vw);
    height: min(55vh, 55vw);
  }
}

/* ============================================================
   MOON SURFACE (Section 3)
   ============================================================ */

/* ============================================================
   FLOATING SHAPES — Lichtenstein style
   ============================================================ */
.floating-btn {
  position: absolute;
  cursor: pointer;
  z-index: 25;
  --s: 1; /* scale, updated on hover */
}

#btn-0-a, #btn-0-b, #btn-0-c,
#btn-2-a, #btn-2-b, #btn-2-d {
  cursor: default;
  pointer-events: none;
}

/* Hover: pause animation, scale up */
.floating-btn:hover {
  --s: 1.1;
}

/* Circles — Section 0 */
.btn-circle {
  width:  clamp(44px, 14vmin, 100px);
  height: clamp(44px, 14vmin, 100px);
  border-radius: 50%;
  border: none;
}

#btn-0-a {
  background: #f39c12;
  animation: float-a 12s ease-in-out infinite;
  top: 11%;
  left: 6%;
  box-shadow:
    0 0 8px 2px  rgba(243,156,18,0.9),
    0 0 20px 6px rgba(243,156,18,0.5),
    0 0 40px 12px rgba(243,156,18,0.2);
}
#btn-0-b {
  background: #27ae60;
  animation: float-b 17s ease-in-out infinite;
  bottom: 9%;
  right: 5%;
  box-shadow:
    0 0 8px 2px  rgba(39,174,96,0.9),
    0 0 20px 6px rgba(39,174,96,0.5),
    0 0 40px 12px rgba(39,174,96,0.2);
}
#btn-0-c {
  background: #8e44ad;
  animation: float-c 21s ease-in-out infinite;
  top: 19%;
  right: 10%;
  box-shadow:
    0 0 8px 2px  rgba(142,68,173,0.9),
    0 0 20px 6px rgba(142,68,173,0.5),
    0 0 40px 12px rgba(142,68,173,0.2);
}
#btn-0-a:hover {
  box-shadow:
    0 0 8px 2px  rgba(243,156,18,0.9),
    0 0 30px 9px rgba(243,156,18,0.75),
    0 0 60px 18px rgba(243,156,18,0.35);
}
#btn-0-b:hover {
  box-shadow:
    0 0 8px 2px  rgba(39,174,96,0.9),
    0 0 30px 9px rgba(39,174,96,0.75),
    0 0 60px 18px rgba(39,174,96,0.35);
}
#btn-0-c:hover {
  box-shadow:
    0 0 8px 2px  rgba(142,68,173,0.9),
    0 0 30px 9px rgba(142,68,173,0.75),
    0 0 60px 18px rgba(142,68,173,0.35);
}

@keyframes breathe {
  0%,  100% { transform: scale(1.0); }
  50%        { transform: scale(1.08); }
}

#btn-0-a { animation: float-a 12s ease-in-out infinite, breathe 3.8s ease-in-out infinite; }
#btn-0-b { animation: float-b 17s ease-in-out infinite, breathe 5.1s ease-in-out infinite 0.9s; }
#btn-0-c { animation: float-c 21s ease-in-out infinite, breathe 4.4s ease-in-out infinite 2.1s; }

/* Wave rings — Section 1
   3 concentric circles: outer thinnest, inner thickest */
.btn-wave {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid currentColor; /* outermost ring — thinnest */
}

/* Middle ring */
.btn-wave::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Inner ring — thickest */
.btn-wave::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 4px solid currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#btn-1-a {
  color: #48c9b0;
  animation: float-b 14s ease-in-out infinite;
  top: 25%;
  left: 5%;
  filter:
    drop-shadow(0 0 6px rgba(72,201,176,0.95))
    drop-shadow(0 0 14px rgba(72,201,176,0.55))
    drop-shadow(0 0 28px rgba(72,201,176,0.25));
}
#btn-1-b {
  color: #48c9b0;
  animation: float-c 19s ease-in-out infinite;
  bottom: 18%;
  right: 32%;
  filter:
    drop-shadow(0 0 6px rgba(72,201,176,0.95))
    drop-shadow(0 0 14px rgba(72,201,176,0.55))
    drop-shadow(0 0 28px rgba(72,201,176,0.25));
}
#btn-1-c {
  color: #48c9b0;
  animation: float-a 23s ease-in-out infinite;
  top: 12%;
  right: 12%;
  filter:
    drop-shadow(0 0 6px rgba(72,201,176,0.95))
    drop-shadow(0 0 14px rgba(72,201,176,0.55))
    drop-shadow(0 0 28px rgba(72,201,176,0.25));
}

#btn-1-a:hover {
  filter:
    drop-shadow(0 0 9px rgba(72,201,176,0.95))
    drop-shadow(0 0 21px rgba(72,201,176,0.55))
    drop-shadow(0 0 42px rgba(72,201,176,0.25));
}
#btn-1-b:hover {
  filter:
    drop-shadow(0 0 9px rgba(72,201,176,0.95))
    drop-shadow(0 0 21px rgba(72,201,176,0.55))
    drop-shadow(0 0 42px rgba(72,201,176,0.25));
}
#btn-1-c:hover {
  filter:
    drop-shadow(0 0 9px rgba(72,201,176,0.95))
    drop-shadow(0 0 21px rgba(72,201,176,0.55))
    drop-shadow(0 0 42px rgba(72,201,176,0.25));
}

/* Triangle outlines — Section 2
   clip-path path() with two sub-paths in opposite winding → true hollow interior */
.btn-triangle-outline {
  width: 56px;
  height: 56px;
  background: transparent;
}

.btn-triangle-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Outer triangle clockwise, inner triangle counter-clockwise → non-zero rule punches hole */
  clip-path: path('M 28 3 L 55 53 L 1 53 Z M 28 11 L 7 48 L 49 48 Z');
  background: currentColor;
  transform: scale(2.8);
  transform-origin: center;
}

#btn-2-a, #btn-2-b, #btn-2-d {
  object-fit: contain;
}

#btn-2-a {
  width: clamp(210px, 67vmin, 340px); height: clamp(210px, 67vmin, 340px);
  animation: float-2a 13s ease-in-out infinite;
  top: -3%;
  left: -7%;
  filter:
    drop-shadow(0 0 2px rgba(224,224,224,1))
    drop-shadow(0 0 5px rgba(224,224,224,0.8))
    drop-shadow(0 0 10px rgba(224,224,224,0.4));
}
#btn-2-b {
  width: clamp(160px, 48vmin, 260px); height: clamp(160px, 48vmin, 260px);
  animation: float-2b 18s ease-in-out infinite;
  top: 12%;
  right: -3%;
  filter:
    drop-shadow(0 0 2px rgba(224,224,224,1))
    drop-shadow(0 0 5px rgba(224,224,224,0.8))
    drop-shadow(0 0 10px rgba(224,224,224,0.4));
}
#btn-2-d {
  width: clamp(70px, 23vmin, 130px); height: clamp(70px, 23vmin, 130px);
  animation: float-2d 16s ease-in-out infinite;
  top: 30%;
  left: 2%;
  filter:
    drop-shadow(0 0 2px rgba(224,224,224,1))
    drop-shadow(0 0 5px rgba(224,224,224,0.8))
    drop-shadow(0 0 10px rgba(224,224,224,0.4));
}

@keyframes float-2a {
  0%   { transform: translate(0px,    0px)   rotate(-15deg) scale(var(--s)); }
  20%  { transform: translate(12px,   6px)   rotate(-15deg) scale(var(--s)); }
  40%  { transform: translate(4px,  -10px)   rotate(-15deg) scale(var(--s)); }
  60%  { transform: translate(-8px,  -6px)   rotate(-15deg) scale(var(--s)); }
  80%  { transform: translate(-4px,   8px)   rotate(-15deg) scale(var(--s)); }
  100% { transform: translate(0px,    0px)   rotate(-15deg) scale(var(--s)); }
}
@keyframes float-2b {
  0%   { transform: translate(0px,    0px)   rotate(35deg) scale(var(--s)); }
  25%  { transform: translate(8px,  -12px)   rotate(35deg) scale(var(--s)); }
  50%  { transform: translate(14px,   4px)   rotate(35deg) scale(var(--s)); }
  75%  { transform: translate(-6px,  10px)   rotate(35deg) scale(var(--s)); }
  100% { transform: translate(0px,    0px)   rotate(35deg) scale(var(--s)); }
}
@keyframes float-2c {
  0%   { transform: translate(0px,   0px)    rotate(22deg) scale(var(--s)); }
  33%  { transform: translate(-10px,  8px)   rotate(22deg) scale(var(--s)); }
  66%  { transform: translate(6px,  -14px)   rotate(22deg) scale(var(--s)); }
  100% { transform: translate(0px,   0px)    rotate(22deg) scale(var(--s)); }
}
@keyframes float-2d {
  0%   { transform: translate(0px,   0px)    rotate(-20deg) scale(var(--s)); }
  33%  { transform: translate(-10px,  8px)   rotate(-20deg) scale(var(--s)); }
  66%  { transform: translate(6px,  -14px)   rotate(-20deg) scale(var(--s)); }
  100% { transform: translate(0px,   0px)    rotate(-20deg) scale(var(--s)); }
}
#btn-2-a:hover, #btn-2-b:hover, #btn-2-d:hover {
  filter:
    drop-shadow(0 0 9px rgba(224,224,224,0.95))
    drop-shadow(0 0 21px rgba(224,224,224,0.75))
    drop-shadow(0 0 42px rgba(224,224,224,0.35));
}

/* Float keyframes — use CSS var(--s) for composable hover scale */
@keyframes float-a {
  0%   { transform: translate(0px,    0px)    scale(var(--s)); }
  25%  { transform: translate(8px,  -12px)    scale(var(--s)); }
  50%  { transform: translate(14px,   4px)    scale(var(--s)); }
  75%  { transform: translate(-6px,  10px)    scale(var(--s)); }
  100% { transform: translate(0px,    0px)    scale(var(--s)); }
}
@keyframes float-b {
  0%   { transform: translate(0px,   0px)     scale(var(--s)); }
  33%  { transform: translate(-10px, 8px)     scale(var(--s)); }
  66%  { transform: translate(6px, -14px)     scale(var(--s)); }
  100% { transform: translate(0px,   0px)     scale(var(--s)); }
}
@keyframes float-c {
  0%   { transform: translate(0px,   0px)     scale(var(--s)); }
  20%  { transform: translate(12px,  6px)     scale(var(--s)); }
  40%  { transform: translate(4px,  -10px)    scale(var(--s)); }
  60%  { transform: translate(-8px,  -6px)    scale(var(--s)); }
  80%  { transform: translate(-4px,   8px)    scale(var(--s)); }
  100% { transform: translate(0px,   0px)     scale(var(--s)); }
}

/* ============================================================
   TEXT BLOCKS — fixed reference size, JS applies scale()
   ============================================================ */
.text-block {
  display: block;
  width: 500px;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 20;
  text-align: justify;
  text-align-last: justify;
  margin: 0;
  transform-origin: top center;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .section-inner { gap: 2vmin; }
}

#text-0 {
  color: var(--s0-accent);
  font-variation-settings: 'opsz' 12, 'wght' 300;
}
#text-1 { color: var(--s1-accent); }
#text-2 { color: var(--s2-accent); }

/* ============================================================
   SECTION 3 — ARTIST
   ============================================================ */
.section-inner-artist {
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  gap: 20px;
}
.section-inner-artist::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(176,184,193,0.12) 0%, transparent 70%);
  animation: aura-pulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes aura-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.2; }
}

.artist-text {
  text-align: center;
  margin-top: 3vmin;
  position: relative;
  z-index: 30;
}

.artist-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5.5vmin, 4rem);
  font-weight: 800;
  font-style: normal;
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    #5a5f66 0%,
    #9aa0a8 15%,
    #cdd2d8 30%,
    #f0f2f4 50%,
    #cdd2d8 70%,
    #9aa0a8 85%,
    #5a5f66 100%
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 14s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 160% center; }
  18%  { background-position: 160% center; }
  42%  { background-position: -60% center; }
  52%  { background-position: -40% center; }
  58%  { background-position: -60% center; }
  78%  { background-position: 140% center; }
  100% { background-position: 160% center; }
}

@keyframes word-blur-in {
  from { filter: blur(10px); opacity: 0; transform: translateY(6px); }
  to   { filter: blur(0);    opacity: 1; transform: translateY(0); }
}
.word-reveal {
  display: inline-block;
  animation: word-blur-in 0.55s ease forwards;
  opacity: 0;
}

.artist-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1.8vmin, 1rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(176, 184, 193, 0.55);
  margin-top: 1vmin;
  min-height: 1.4em;
}

/* ============================================================
   SECTION DOTS NAVIGATION
   ============================================================ */
#section-dots {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all 0.3s ease;
  cursor: pointer;
}
.dot.active {
  background: var(--accent, white);
  transform: scale(1.5);
  box-shadow: 0 0 6px 2px var(--accent, white);
}


/* ============================================================
   DESKTOP (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  /* Three.js desktop imgSize = min(0.55*worldH, 0.55*worldW) ≈ 55vmin */
  .cover-image {
    width: 55vmin;
    height: 55vmin;
  }

  .section-inner {
    padding-top: calc(50vh - 27.5vmin);
    gap: 2vmin;
  }

  #portrait-radial-glow {
    width: 400px;
    height: 80px;
  }

  #platform-logo[data-platform="applemusic"] {
    width: 43px;
    height: 43px;
  }

  #platform-logo {
    width: 36px;
    height: 36px;
  }

    #platform-switcher-group {
    top: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
  }

  #platform-switcher {
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
  }
}

#platform-switcher-group {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 48px;
  height: 48px;
}

.platform-satellite {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: translate(0px, 0px) scale(0.5);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.35s ease;
  will-change: transform, opacity;
}

.platform-satellite img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.platform-satellite img[data-platform="applemusic"] {
  width: 34px;
  height: 34px;
}

.platform-satellite.visible {
  opacity: 1;
  pointer-events: all;
}


.artist-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
}

.artist-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.artist-social a:hover {
  opacity: 1;
}

.social-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(0.82);
}