:root {
  --bg: #000000;
  --text: #6d5847;
  --text-soft: rgba(109, 88, 71, 0.88);
  --brand-gold: #ffd180;

  --brand-glow: 0;
  --shadow-x: 0px;
  --shadow-y: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Cormorant Garamond", "Times New Roman", "Noto Serif KR", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000000;
}

.sky {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  will-change: left, top, width, height;
}

.attic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (max-width: 768px) {
  .attic { transform: scale(2); }
}

.brand {
  position: absolute;
  left: 50%;
  bottom: 11vh;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  width: min(90vw, 520px);
}

.brand__name {
  margin: 0;
  font-size: clamp(2.1rem, 6.4vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--text), var(--brand-gold) calc(65% * var(--brand-glow, 0)));
  text-shadow:
    0 0 18px rgba(255, 230, 180, calc(0.12 + 0.35 * var(--brand-glow, 0))),
    0 0 calc(8px + 36px * var(--brand-glow, 0)) rgba(255, 200, 130, calc(0.45 * var(--brand-glow, 0))),
    var(--shadow-x, 0) var(--shadow-y, 0) calc(10px + 8px * var(--brand-glow, 0)) rgba(18, 10, 4, calc(0.95 * var(--brand-glow, 0)));
  filter: brightness(calc(1 + 0.25 * var(--brand-glow, 0)));
}

.brand__slogan {
  margin: 0.9em 0 0;
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--text-soft), var(--brand-gold) calc(55% * var(--brand-glow, 0)));
  font-style: italic;
  text-shadow:
    0 0 calc(4px + 18px * var(--brand-glow, 0)) rgba(255, 220, 160, calc(0.22 * var(--brand-glow, 0))),
    var(--shadow-x, 0) var(--shadow-y, 0) calc(6px + 6px * var(--brand-glow, 0)) rgba(18, 10, 4, calc(0.85 * var(--brand-glow, 0)));
  filter: brightness(calc(1 + 0.18 * var(--brand-glow, 0)));
}

@media (max-width: 768px) {
  .brand {
    bottom: 8vh;
    --brand-glow: 1;
  }
  .brand__slogan { letter-spacing: 0; }
}

.clock {
  position: absolute;
  top: 2.2vh;
  right: 2.4vw;
  z-index: 5;
  color: rgb(105 93 75 / 50%);
  font-family: "Cormorant Garamond", "Times New Roman", "Noto Serif KR", serif;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .clock {
    top: 1.4vh;
    right: 3.5vw;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
  }
}

.cursor-light {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 220, 160, 0.16) 0%,
    rgba(255, 220, 160, 0.08) 28%,
    rgba(255, 220, 160, 0.02) 55%,
    transparent 70%
  );
  mix-blend-mode: screen;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.6s ease;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
}

.cursor-light.is-visible {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cursor-light { display: none; }
}