/* ============================================================
   FAREWELL.CSS — Section Selamat Tinggal (Epilog)
   KKN Digital Journal "JEJAK"
   ============================================================ */

.farewell {
  background-color: #0A0805;
  padding: var(--space-32) 0 var(--space-24);
  position: relative; overflow: hidden;
  min-height: 90vh;
  display: flex; flex-direction: column; justify-content: center;
}

/* Gradient atas dari refleksi */
.farewell::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, #0F0D0B, transparent);
  pointer-events: none;
}

/* Star-like particle (CSS only, dekoratif) */
.farewell::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(245,240,232,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 60%, rgba(245,240,232,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, rgba(245,240,232,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 45%, rgba(245,240,232,0.07) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 75%, rgba(245,240,232,0.09) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 85%, rgba(107,143,113,0.15) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 30%, rgba(107,143,113,0.10) 0%, transparent 100%);
  pointer-events: none;
}

.farewell__inner {
  max-width: 900px; margin: 0 auto;
  padding: 0 var(--px-mobile);
  text-align: center;
  position: relative; z-index: 1;
}
@media (min-width: 768px)  { .farewell__inner { padding: 0 var(--px-tablet); } }
@media (min-width: 1280px) { .farewell__inner { padding: 0 var(--px-desktop); } }

/* ── DATE RANGE ───────────────────────────────────────────── */
.farewell__date-range {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: rgba(245,240,232,0.30);
  margin-bottom: var(--space-10);
}

.farewell__date-range-divider {
  width: 32px; height: 1px;
  background: rgba(245,240,232,0.20);
}

/* ── MAIN TITLE ───────────────────────────────────────────── */
.farewell__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 9vw, 96px);
  font-weight: 700; color: var(--text-on-dark);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-8);

  /* Subtle gradient text */
  background: linear-gradient(
    135deg,
    rgba(245,240,232,1) 0%,
    rgba(245,240,232,0.65) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── SUBTITLE ─────────────────────────────────────────────── */
.farewell__subtitle {
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  color: rgba(245,240,232,0.45);
  line-height: var(--leading-relaxed);
  max-width: 640px; margin: 0 auto var(--space-16);
}

/* ── THANK YOU NOTE ───────────────────────────────────────── */
.farewell__thankyou {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,240,232,0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  max-width: 680px; margin: 0 auto var(--space-16);
  position: relative;
}

.farewell__thankyou::before {
  content: '✦';
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xl); color: var(--accent-sage);
  background: #0A0805; padding: 0 var(--space-3);
  line-height: 1;
}

.farewell__thankyou-text {
  font-family: var(--font-body);
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: rgba(245,240,232,0.60);
  line-height: var(--leading-loose);
}

.farewell__thankyou-text strong {
  font-weight: 600; color: rgba(245,240,232,0.85);
}

/* ── SIGNATURE ────────────────────────────────────────────── */
.farewell__signature {
  margin-top: var(--space-12);
}

.farewell__signature-line {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent-sage-light), var(--accent-earth));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-2);
}

.farewell__signature-sub {
  font-family: var(--font-ui);
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: rgba(245,240,232,0.25);
}

/* ── SCROLL BACK ──────────────────────────────────────────── */
.farewell__back-top {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-16);
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: rgba(245,240,232,0.25);
  cursor: pointer; border: none; background: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.farewell__back-top:hover { color: var(--accent-sage-light); }

.farewell__back-top svg {
  width: 14px; height: 14px;
  animation: floatUp 2s ease-in-out infinite;
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* ── CREDIT LINE ──────────────────────────────────────────── */
.farewell__credit {
  margin-top: var(--space-10);
  font-family: var(--font-ui); font-size: 11px;
  color: rgba(245,240,232,0.12);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}