/* ═══════════════════════════════════════════════════════════
   ECLIPSE — Animations & Visual Enhancements
═══════════════════════════════════════════════════════════ */

/* ── Scroll-reveal ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transition:
    opacity  0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="up"]    { transform: translateY(52px); }
[data-reveal="left"]  { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="scale"] { transform: scale(0.88); opacity: 0; }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.10s; }
[data-delay="2"] { transition-delay: 0.20s; }
[data-delay="3"] { transition-delay: 0.32s; }
[data-delay="4"] { transition-delay: 0.44s; }
[data-delay="5"] { transition-delay: 0.56s; }
[data-delay="6"] { transition-delay: 0.68s; }


/* ── Atmosphere / Vibe Section ─────────────────────────── */
.section-atmosphere {
  position: relative;
  height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05031B;
}

.section-atmosphere__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.1);
  transition: transform 10s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.section-atmosphere__bg.is-visible { transform: scale(1); }

.section-atmosphere__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    #05031B            0%,
    rgba(5,3,27,0.72) 20%,
    rgba(5,3,27,0.50) 50%,
    rgba(5,3,27,0.72) 80%,
    #05031B           100%
  );
}

.section-atmosphere__stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
}

.section-atmosphere__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.section-atmosphere__num {
  font-family: "Poppins", sans-serif;
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 60px rgba(255,255,255,0.2);
}

.section-atmosphere__label {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.section-atmosphere__divider {
  width: 1px;
  height: 88px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.22) 40%,
    rgba(255,255,255,0.22) 60%,
    transparent 100%
  );
}


/* ── Section 3 — Color Cards (complete overhaul) ───────── */

/* Red card — "Taken" */
.section3 .card {
  background: linear-gradient(150deg,
    rgba(255, 59, 59, 0.14) 0%,
    rgba(255, 59, 59, 0.05) 100%
  ) !important;
  border: 1px solid rgba(255, 59, 59, 0.35) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
  animation: none !important;
}
.section3 .card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(255, 59, 59, 0.7) !important;
  box-shadow:
    0 0 0 1px rgba(255,59,59,0.4),
    0 0 50px rgba(255,59,59,0.18),
    0 32px 56px rgba(0,0,0,0.35) !important;
}
.section3 .card .card-child {
  background: rgba(255, 59, 59, 0.18) !important;
  box-shadow: 0 0 24px rgba(255,59,59,0.4);
  transition: box-shadow 0.4s ease;
}
.section3 .card:hover .card-child {
  box-shadow: 0 0 40px rgba(255,59,59,0.65);
}

/* Green card — "Single & Open" */
.section3 .card4 {
  background: linear-gradient(150deg,
    rgba(0, 211, 35, 0.14) 0%,
    rgba(0, 211, 35, 0.05) 100%
  ) !important;
  border: 1px solid rgba(0, 211, 35, 0.35) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
  animation: none !important;
}
.section3 .card4:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(0, 211, 35, 0.7) !important;
  box-shadow:
    0 0 0 1px rgba(0,211,35,0.4),
    0 0 50px rgba(0,211,35,0.18),
    0 32px 56px rgba(0,0,0,0.35) !important;
}
.section3 .card4 .card-child {
  background: rgba(0, 211, 35, 0.18) !important;
  box-shadow: 0 0 24px rgba(0,211,35,0.4);
  transition: box-shadow 0.4s ease;
}
.section3 .card4:hover .card-child {
  box-shadow: 0 0 40px rgba(0,211,35,0.65);
}

/* Yellow card — "It's Complicated" */
.section3 .card6 {
  background: linear-gradient(150deg,
    rgba(255, 176, 32, 0.14) 0%,
    rgba(255, 176, 32, 0.05) 100%
  ) !important;
  border: 1px solid rgba(255, 176, 32, 0.35) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
  animation: none !important;
}
.section3 .card6:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(255, 176, 32, 0.7) !important;
  box-shadow:
    0 0 0 1px rgba(255,176,32,0.4),
    0 0 50px rgba(255,176,32,0.18),
    0 32px 56px rgba(0,0,0,0.35) !important;
}
.section3 .card6 .card-child {
  background: rgba(255, 176, 32, 0.18) !important;
  box-shadow: 0 0 24px rgba(255,176,32,0.4);
  transition: box-shadow 0.4s ease;
}
.section3 .card6:hover .card-child {
  box-shadow: 0 0 40px rgba(255,176,32,0.65);
}

/* Image cards hover */
.section3 .card2,
.section3 .card3,
.section3 .card5 {
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  cursor: default;
}
.section3 .card2:hover,
.section3 .card3:hover,
.section3 .card5:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3) !important;
}

/* Subtle ambient pulse on text cards */
@keyframes pulse-red-ambient {
  0%, 100% { box-shadow: 0px 11px 23px rgba(250,0,0,0.05); }
  50%       { box-shadow: 0px 11px 23px rgba(250,0,0,0.05), 0 0 30px rgba(255,59,59,0.10); }
}
@keyframes pulse-green-ambient {
  0%, 100% { box-shadow: 0px 11px 23px rgba(0,250,42,0.05); }
  50%       { box-shadow: 0px 11px 23px rgba(0,250,42,0.05), 0 0 30px rgba(0,211,35,0.10); }
}
@keyframes pulse-yellow-ambient {
  0%, 100% { box-shadow: 0px 11px 23px rgba(250,167,0,0.05); }
  50%       { box-shadow: 0px 11px 23px rgba(250,167,0,0.05), 0 0 30px rgba(255,176,32,0.10); }
}
.section3 .card  { animation: pulse-red-ambient    5s ease-in-out infinite 0s !important; }
.section3 .card4 { animation: pulse-green-ambient  5s ease-in-out infinite 1.6s !important; }
.section3 .card6 { animation: pulse-yellow-ambient 5s ease-in-out infinite 3.2s !important; }
.section3 .card:hover,
.section3 .card4:hover,
.section3 .card6:hover { animation-play-state: paused !important; }


/* ── Global card hover improvements ────────────────────── */
.section1 .card,
.section1 .card2,
.section1 .card3,
.section7 .card,
.section7 .card2,
.section7 .card3,
.section7 .card4 {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.section1 .card:hover,
.section1 .card2:hover,
.section1 .card3:hover,
.section7 .card:hover,
.section7 .card2:hover,
.section7 .card3:hover,
.section7 .card4:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.10) !important;
}

.section8 .card {
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease !important;
}
.section8 .card:hover {
  transform: translateX(4px) !important;
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
}


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-atmosphere         { height: 380px; }
  .section-atmosphere__stats  { gap: 32px; flex-wrap: wrap; }
  .section-atmosphere__num    { font-size: 56px; }
  .section-atmosphere__label  { font-size: 11px; letter-spacing: 3px; }
  .section-atmosphere__divider { height: 56px; }
}

@media (max-width: 480px) {
  .section-atmosphere { height: 320px; }
  .section-atmosphere__divider { display: none; }
  .section-atmosphere__stats  { gap: 28px; }
  .section-atmosphere__num    { font-size: 44px; }
}