/* ============================================================
   IMP4 Terms Plugin — styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* ---------- Wrapper ---------- */
.imp4-wrapper {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(to bottom, #020617, #1e1b4b, #020617);
  color: #fff;
  font-family: 'Vazirmatn', sans-serif;
  overflow: hidden;
}

/* ---------- Starry background ---------- */
.imp4-starry {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.imp4-blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(80px);
}

.imp4-blob-purple {
  top: 0;
  left: 25%;
  background: rgba(168, 85, 247, 0.10);
}

.imp4-blob-cyan {
  bottom: 0;
  right: 25%;
  background: rgba(6, 182, 212, 0.10);
}

.imp4-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: imp4-twinkle var(--dur, 3s) var(--delay, 0s) infinite ease-in-out;
}

@keyframes imp4-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1);   }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* ---------- Main ---------- */
.imp4-main {
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */
.imp4-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 3rem 1rem;
  text-align: center;
}

/* ---------- Handshake widget ---------- */
.imp4-handshake-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: imp4-hs-pulse 2.8s ease-in-out infinite;
}

@media (min-width: 768px) {
  .imp4-handshake-wrap { width: 320px; height: 320px; }
}

@keyframes imp4-hs-pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.04); }
}

/* Ambient glow layers */
.imp4-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.imp4-glow-cyan {
  background: rgba(34, 211, 238, 0.20);
  filter: blur(40px);
  animation: imp4-glow-a 3s ease-in-out infinite;
}

.imp4-glow-fuchsia {
  inset: 1.5rem;
  background: rgba(232, 72, 199, 0.25);
  filter: blur(28px);
  animation: imp4-glow-b 3s ease-in-out infinite;
}

@keyframes imp4-glow-a {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}

@keyframes imp4-glow-b {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.4; }
}

/* Decorative rings */
.imp4-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
}

.imp4-ring-outer {
  inset: 1rem;
  border-color: rgba(34, 211, 238, 0.40);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.3);
}

.imp4-ring-inner {
  inset: 2.5rem;
  border-color: rgba(236, 72, 153, 0.30);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
  animation: imp4-ring-spin 30s linear infinite;
}

@keyframes imp4-ring-spin {
  to { transform: rotate(360deg); }
}

/* Handshake icon */
.imp4-icon-wrap {
  position: relative;
  color: #67e8f9; /* cyan-300 */
  filter:
    drop-shadow(0 0 8px  rgba(34, 211, 238, 0.9))
    drop-shadow(0 0 16px rgba(168, 85, 247, 0.7))
    drop-shadow(0 0 24px rgba(236, 72, 153, 0.5));
}

.imp4-icon {
  width: 8rem;
  height: 8rem;
}

@media (min-width: 768px) {
  .imp4-icon { width: 10rem; height: 10rem; }
}

/* Spark particles — placed on a circle via CSS trig */
.imp4-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(34, 211, 238, 1), 0 0 16px rgba(236, 72, 153, 0.8);
  /* Orbit radius 110px for 260px container; scales with container via clamp */
  --r: 110px;
  transform: rotate(var(--a, 0turn)) translateX(var(--r));
  animation: imp4-spark-pulse 2s ease-in-out var(--d, 0s) infinite;
}

@media (min-width: 768px) {
  .imp4-spark { --r: 130px; }
}

@keyframes imp4-spark-pulse {
  0%, 100% { opacity: 0.3; transform: rotate(var(--a, 0turn)) translateX(var(--r)) scale(0.8); }
  50%       { opacity: 1;   transform: rotate(var(--a, 0turn)) translateX(var(--r)) scale(1.4); }
}

/* ---------- Titles ---------- */
.imp4-title {
  margin-top: 2rem;
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 20px rgba(6,182,212,0.5), 0 0 40px rgba(168,85,247,0.3);
  animation: imp4-fade-up 0.8s ease 0.3s both;
}

@media (min-width: 768px) {
  .imp4-title { font-size: 3.75rem; }
}

.imp4-subtitle {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: #9ca3af;
  max-width: 42rem;
  animation: imp4-fade-in 0.8s ease 0.5s both;
}

@media (min-width: 768px) {
  .imp4-subtitle { font-size: 1.25rem; }
}

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

@keyframes imp4-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Terms sections ---------- */
.imp4-terms {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.imp4-section {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

@media (min-width: 768px) {
  .imp4-section { padding: 2rem; }
}

.imp4-section-hidden  { opacity: 0; transform: translateY(20px); }
.imp4-section-visible { opacity: 1; transform: translateY(0);    }

.imp4-section-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.imp4-badge {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
}

.imp4-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
}

@media (min-width: 768px) {
  .imp4-section-title { font-size: 1.5rem; }
}

.imp4-section-content {
  color: #d1d5db;
  line-height: 1.8;
  font-size: 1rem;
  margin: 0;
  white-space: pre-line;
}

@media (min-width: 768px) {
  .imp4-section-content { font-size: 1.125rem; }
}

/* ---------- Footer ---------- */
.imp4-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.imp4-footer > div {
  max-width: 56rem;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 2rem;
}

.imp4-footer p:first-child {
  color: #9ca3af;
  font-size: 0.875rem;
  margin: 0 0 0.5rem;
}

.imp4-footer p:last-child {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
}