/* ============================================================
   WARZANV — socials page styles
   ============================================================ */

.page-hero {
  position: relative;
  min-height: 52svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 3rem;
  overflow: hidden;
}
.page-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
}
.page-hero__title .accent {
  color: transparent;
  background: linear-gradient(120deg, #ffe7c2, #ff8a1e 50%, #ffd24a);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.page-hero__rings {
  position: absolute; inset: 0;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.page-hero__rings i {
  position: absolute;
  border: 1px solid rgba(255, 138, 30, 0.16);
  border-radius: 50%;
  animation: ringPulse 7s ease-in-out infinite;
}
.page-hero__rings i:nth-child(1) { width: 32vmin; height: 32vmin; }
.page-hero__rings i:nth-child(2) { width: 52vmin; height: 52vmin; animation-delay: -2.3s; }
.page-hero__rings i:nth-child(3) { width: 74vmin; height: 74vmin; animation-delay: -4.6s; }
@keyframes ringPulse {
  50% { transform: scale(1.08); border-color: rgba(255, 180, 61, 0.32); }
}

/* ---------- YouTube spotlight ---------- */
.spotlight__frame {
  position: relative;
  margin-top: 3rem;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 170, 80, 0.22);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.6), 0 0 70px rgba(226, 100, 10, 0.22);
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
}
.spotlight__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.spotlight__glowline {
  position: absolute; inset: -1px;
  border-radius: 24px;
  pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 70%, rgba(255, 180, 61, 0.55), transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  animation: spinGlow 6s linear infinite;
}
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinGlow { to { --a: 360deg; } }

/* ---------- Sneak peaks ---------- */
.peeks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: 3rem;
  perspective: 1300px;
}
@media (max-width: 820px) { .peeks__grid { grid-template-columns: 1fr; } }
.peek {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 170, 80, 0.15);
  aspect-ratio: 4 / 3;
}
.peek img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.9s var(--ease-out), filter 0.9s;
  filter: brightness(0.9);
}
.peek:hover img { transform: scale(1.12); filter: brightness(1.08); }
.peek__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(12, 7, 2, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 210, 74, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

/* ---------- Instagram ---------- */
.insta__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: 3rem;
}
@media (max-width: 720px) { .insta__grid { grid-template-columns: 1fr; } }
.insta-post {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 170, 80, 0.15);
  aspect-ratio: 16 / 10;
  display: block;
}
.insta-post img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.insta-post:hover img { transform: scale(1.07); }
.insta-post__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  background: rgba(16, 9, 3, 0.55);
  backdrop-filter: blur(3px);
  color: var(--lilac);
  font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.45s;
}
.insta-post:hover .insta-post__overlay { opacity: 1; }
.insta-post__overlay svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Community ---------- */
.community {
  position: relative;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.community::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 110% at 50% 110%, rgba(226, 100, 10, 0.28), transparent 65%);
  pointer-events: none;
}
.community h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.community p { color: var(--muted); margin-bottom: 2.4rem; }
.community__btn { position: relative; z-index: 2; }
.community__sparks { position: absolute; inset: 0; pointer-events: none; }
.community__sparks i {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--primary-soft);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 180, 61, 0.9);
  animation: spark 5.5s ease-in-out infinite;
  opacity: 0;
}
@keyframes spark {
  0% { transform: translateY(20px) scale(0.4); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateY(-130px) scale(1); opacity: 0; }
}