@font-face {
  font-family: 'Romantic';
  src: url('ROMANTIC.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

body {
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Romantic', 'Times New Roman', Georgia, serif;
  color: #111;
}

/* ── CONTENT BOX ── */
.content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
  padding: 48px 64px;
  /* Stars are spawned outside this box via JS bounds check */
}

/* ── LOGO ── */
.logo {
  font-size: clamp(52px, 7vw, 80px);
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 32px;
  user-select: none;
  font-family: 'Romantic', serif;
  align-items: center;
}

/* ── NAV ── */
.nav {
  display: flex;
  gap: clamp(40px, 8vw, 100px);
  margin-bottom: 24px;
}

.nav a {
  font-size: clamp(28px, 1.5vw, 40px);
  color: #111;
  text-decoration: none;
  font-family: 'Romantic', serif;
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease, letter-spacing 0.35s ease;
  cursor: pointer;
}

.nav a:hover {
  opacity: 0.45;
  letter-spacing: 0.08em;
}

/* ── AUDIO PLAYER ── */
.player {
  width: clamp(260px, 36vw, 340px);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.progress-row {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  height: 16px;
}

.progress-track {
  width: 100%;
  height: 1.5px;
  background: #c8c8c8;
  position: relative;
  border-radius: 1px;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #111;
  border-radius: 1px;
  position: relative;
  transition: width 0.1s linear;
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #111;
  border-radius: 50%;
}

.time-display {
  font-size: 10px;
  color: #aaa;
  margin-top: 6px;
  font-family: 'Romantic', serif;
  letter-spacing: 0.02em;
}

/* ── ICON ── */
.icon-btn {
  cursor: pointer;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}

.icon-btn:hover {
  opacity: 0.7;
}

.icon-svg {
  width: 90px;
  height: 90px;
  overflow: visible;
}

/* Asterisk: completely static, never touched */
.asterisk {
  fill: #111;
  transition: fill 0.4s ease;
}

.arrows-ring path {
  fill: #111;
  transition: fill 0.4s ease;
}

/* Arrows ring: rotates around asterisk visual center */
.arrows-ring {
  transform-origin: 96px 48px;
  transition: transform 0.6s ease-in-out;
  transform: translateY(10px) rotate(0deg);
}

/* ── INVERTED STATE (playing) ── */
body.inverted {
  background: #111;
  color: #fff;
}

body.inverted .nav a       { color: #ddd; }
body.inverted .logo        { color: #ddd; }
body.inverted .progress-track  { background: #444; }
body.inverted .progress-fill   { background: #ddd; }
body.inverted .progress-fill::after { background: #ddd; }
body.inverted .time-display    { color: #666; }

body.inverted .asterisk        { fill: #ddd; }
body.inverted .arrows-ring path { fill: #ddd; }

/* default transition for smooth swap */
body {
  transition: background 0.4s ease, color 0.4s ease;
}

/* ── STATIC GLOWING STARS ── */
.static-star {
  position: fixed;
  pointer-events: none;
  z-index: 99;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.6), 0 0 10px 2px rgba(255,255,255,0.3);
  animation: glow-pulse var(--dur) ease-in-out infinite alternate;
  opacity: 0.4;
}

@keyframes glow-pulse {
  0%   { opacity: 0.4; box-shadow: 0 0 3px 1px rgba(255,255,255,0.4); }
  100% { opacity: 0.5;   box-shadow: 0 0 8px 3px rgba(255,255,255,0.8), 0 0 16px 4px rgba(255,255,255,0.3); }
}

/* ── SHOOTING STARS ── */
@keyframes shoot {
  0%   { opacity: 1; transform: rotate(var(--angle)) translateX(0); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(calc(var(--len) * 3)); }
}

.shooting-star {
  position: fixed;
  pointer-events: none;
  width: var(--len);
  height: 1.5px;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
  border-radius: 1px;
  animation: shoot 0.7s ease-out forwards;
  z-index: 999;
  transform-origin: left center;
}

/* ── PAGE TRANSITION OUT ── */
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.03); }
}

body.page-exit {
  animation: fadeOut 0.45s ease forwards;
  pointer-events: none;
}

/* ── ICON ROW (icon + volume buttons) ── */
.icon-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

/* ── VOLUME BUTTONS ── */
.vol-btn {
  background: none;
  border: none;
  font-family: 'Romantic', serif;
  font-size: 22px;
  color: #111;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: opacity 0.2s ease;
  user-select: none;
}

.vol-btn:hover { opacity: 0.45; }

body.inverted .vol-btn { color: #fff; }

/* ── DARK MODE BUTTON (top-left) ── */
.dark-mode-btn {
  position: fixed;
  top: 24px;
  left: 28px;
  background: none;
  border: none;
  font-family: 'Romantic', serif;
  font-size: 13px;
  color: #111;
  cursor: pointer;
  letter-spacing: 0.04em;
  z-index: 100;
  transition: opacity 0.25s ease, color 0.4s ease;
  user-select: none;
  padding: 0;
}

/* ── PAGE ENTER (returning from film) ── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-enter {
  animation: pageEnter 0.55s ease forwards;
}