/* =============================================
   UnClock Creatives — Coming Soon
   Exact Layout · Minimal Light Theme
   ============================================= */

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

:root {
  --bg-card:      #eceff4; /* Soft, minimal light grey-blue background fallback */
  --text-primary: #121315;
  --text-muted:   #7d838d;
  --ff:           'Outfit', sans-serif;
  --transition:   all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
  font-family: var(--ff);
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-card); /* Fallback */
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto; /* Allow scrolling on small height/mobile devices */
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ══════════════════════════════════════
   WINDOW CONTAINER
══════════════════════════════════════ */
.window-container {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  opacity: 0;
  animation: cardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ══════════════════════════════════════
   HEADER (Centered Brand logo only)
══════════════════════════════════════ */
.header {
  display: flex;
  align-items: center;
  justify-content: center; /* Horizontally center brand logo */
  padding: 5vh 2rem 2vh; /* Use height-relative padding to save vertical space on short screens */
  z-index: 10;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-logo {
  font-size: clamp(0.85rem, 2vw, 0.95rem); /* Responsive logo sizing */
  font-weight: 600;
  letter-spacing: 0.2em;
}

.divider {
  width: 1px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.12);
}

.wave-icon {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  opacity: 0.9;
}

/* ══════════════════════════════════════
   MAIN CONTENT (Dead Center Alignment)
══════════════════════════════════════ */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Vertically center the main content */
  padding: 2vh 2rem 8vh; /* Scale padding based on screen height */
}

/* Unified text and socials stack */
.main-stack {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 600px;
}

.headline {
  font-size: clamp(2rem, 7vw, 4.5rem); /* Safer minimum for small phones */
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  line-height: 1.15;
}

.sub-headline {
  font-size: clamp(0.85rem, 2vw, 1.02rem);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: clamp(1.8rem, 4vh, 2.5rem);
}

.vertical-line {
  width: 1px;
  height: clamp(20px, 4vh, 38px);
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: clamp(1.8rem, 4vh, 2.5rem);
}

.social-prompt {
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}


/* Social Row */
.social-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.65);
  background: transparent;
  transition: var(--transition);
}

.social-circle:hover {
  background-color: var(--text-primary);
  color: #ffffff;
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes cardEntrance {
  to {
    opacity: 1;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .header {
    padding: 3rem 1.5rem 1rem;
  }
  
  .content {
    padding: 1rem 1.5rem 6rem;
  }

  .brand-logo {
    font-size: 0.95rem; /* Standard readable logo on mobile */
  }

  .headline {
    font-size: 2.8rem; /* Prominent standard Coming Soon headline on mobile */
    margin-bottom: 0.8rem;
  }

  .sub-headline {
    font-size: 1rem; /* Standard readable description size */
    margin-bottom: 2rem;
  }

  .vertical-line {
    height: 32px;
    margin-bottom: 2rem;
  }

  .social-prompt {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
  }
}