/* ===================================================================
   MAIN.CSS — Landing page & ring Instagram
=================================================================== */

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

:root {
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 20%, #dc2743 45%, #cc2366 70%, #bc1888 100%);
  --ring-size: 128px;
  --ring-border: 3px;
  --ring-gap: 3px;
  --bg: #0a0a0a;
  --text: #f0f0f0;
  --text-muted: #888;
  --accent: #bc1888;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---- LANDING ---- */
.landing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 24px;
  gap: 0;
  user-select: none;
}

/* Brilho de fundo */
.bg-glow {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(188,24,136,.12) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 50% 90%, rgba(240,148,51,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.landing > * { position: relative; z-index: 1; }

/* ---- PROFILE RING ---- */
.profile-wrap {
  position: relative;
  margin-bottom: 20px;
}

.profile-ring {
  display: block;
  width: calc(var(--ring-size) + (var(--ring-border) + var(--ring-gap)) * 2);
  height: calc(var(--ring-size) + (var(--ring-border) + var(--ring-gap)) * 2);
  border-radius: 50%;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background: var(--ig-gradient);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, filter .2s ease;
  animation: ring-appear .5s ease both;
}

.profile-ring:active { transform: scale(.95); }
.profile-ring.viewed { background: #3a3a3a !important; }
.profile-ring.no-stories { background: #2a2a2a; cursor: default; }

/* Anel pulsante quando há stories não vistos */
@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(188,24,136,.35); }
  50%       { box-shadow: 0 0 0 8px rgba(188,24,136,0); }
}
.profile-ring.unviewed {
  animation: ring-appear .5s ease both, ring-pulse 2.4s ease-in-out 1s infinite;
}

@keyframes ring-appear {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Gap branco entre gradiente e foto */
.profile-ring-gap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg);
  padding: var(--ring-gap);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-ring-img-wrap {
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-ring-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Ponto indicador de novo story */
.new-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ig-gradient);
  border: 2px solid var(--bg);
  display: none;
}
.new-dot.visible { display: block; }

/* ---- TEXTOS ---- */
.site-name {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  margin-top: 8px;
  animation: fade-up .5s .15s ease both;
}

.site-bio {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
  letter-spacing: .02em;
  animation: fade-up .5s .25s ease both;
}

.tap-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  color: var(--text-muted);
  font-size: .88rem;
  animation: fade-up .5s .4s ease both;
}

.tap-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  font-size: .75rem;
  animation: pulse-hint 2s 1.5s ease-in-out infinite;
}

@keyframes pulse-hint {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.1); }
}

.story-count {
  margin-top: 10px;
  font-size: .78rem;
  color: #555;
  animation: fade-up .5s .55s ease both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}