/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #08080e;
  --surface:  #0d0d18;
  --gold:     #c9a96e;
  --gold-dim: #7a5f38;
  --white:    #f0ece4;
  --muted:    #5a5670;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Montserrat', sans-serif;
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-ui);
  overflow: hidden;
}

/* ── Noise texture ── */
.noise {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* ── Grid overlay ── */
.grid-overlay {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(201,169,110,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ── Ambient orbs ── */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: orb-fade 2.4s ease forwards;
}

.orb-1 {
  width: 600px; height: 600px;
  top: -180px; left: -140px;
  background: radial-gradient(circle, rgba(110,80,200,0.28) 0%, transparent 70%);
  animation-delay: 0.2s;
}

.orb-2 {
  width: 500px; height: 500px;
  bottom: -160px; right: -100px;
  background: radial-gradient(circle, rgba(201,169,110,0.22) 0%, transparent 70%);
  animation-delay: 0.5s;
}

.orb-3 {
  width: 360px; height: 360px;
  top: 40%; left: 55%;
  background: radial-gradient(circle, rgba(80,120,200,0.12) 0%, transparent 70%);
  animation-delay: 0.8s;
}

@keyframes orb-fade {
  to { opacity: 1; }
}

/* ── Layout ── */
.container {
  position: relative; z-index: 10;
  width: 100%; height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(2rem, 5vw, 4rem);
}

/* ── Logo ── */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  opacity: 0;
  transform: translateY(-12px);
  animation: rise 1s cubic-bezier(.22,.68,0,1.2) 0.4s forwards;
}

.logo {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  letter-spacing: 0.55em;
  color: var(--gold);
  text-transform: uppercase;
}

.logo-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}

/* ── Center block ── */
.center-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(0px, 4vw, 60px);
}

.label {
  font-family: var(--font-ui);
  font-weight: 200;
  font-size: clamp(0.6rem, 1vw, 0.75rem);
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0;
  animation: rise 1s ease 0.9s forwards;
  margin-bottom: 2rem;
}

.headline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  font-size: clamp(3.4rem, 9vw, 9rem);
  color: var(--white);
}

.line {
  display: block;
  overflow: hidden;
}

.line span, .line {
  position: relative;
}

.line-1 {
  opacity: 0;
  transform: translateX(-30px);
  animation: slide-right 1.1s cubic-bezier(.22,.68,0,1) 1.1s forwards;
}

.line-2 {
  opacity: 0;
  transform: translateX(-30px);
  animation: slide-right 1.1s cubic-bezier(.22,.68,0,1) 1.3s forwards;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,169,110,0.7);
  margin-left: clamp(1.5rem, 5vw, 5rem);
}

.line-2 em {
  font-style: italic;
  font-weight: 300;
}

.line-3 {
  opacity: 0;
  transform: translateX(-30px);
  animation: slide-right 1.1s cubic-bezier(.22,.68,0,1) 1.5s forwards;
  margin-left: clamp(3rem, 10vw, 10rem);
}

/* ── Bottom bar ── */
.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  animation: rise 1s ease 2s forwards;
}

.url {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: clamp(0.55rem, 0.9vw, 0.7rem);
  letter-spacing: 0.35em;
  color: var(--muted);
  text-transform: lowercase;
}

.dot-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.4s ease, transform 0.4s ease;
}

.dot.active {
  background: var(--gold);
  transform: scale(1.4);
}

/* ── Animations ── */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .line-2 { margin-left: 1rem; }
  .line-3 { margin-left: 2rem; }
  .logo-line { display: none; }
}