/* ============================================
   God Bless You - Holy Bible Landing Page
   Cinematic, Sacred, Heavenly Design
   ============================================ */

/* === RESET & BASE === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #0a0a12;
  color: #f5f0e8;
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

/* === SURVEY MODAL === */
.survey-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #1a0a0a 0%, #0a0a12 40%, #050508 100%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: surveyFadeIn 1s ease-out;
}

@keyframes surveyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.survey-overlay.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.survey-container {
  background: linear-gradient(135deg, rgba(20, 10, 8, 0.95), rgba(10, 8, 20, 0.95));
  border: 1px solid rgba(218, 181, 95, 0.3);
  border-radius: 24px;
  padding: 50px 45px;
  max-width: 580px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 0 80px rgba(218, 181, 95, 0.08), 0 0 160px rgba(218, 181, 95, 0.05);
  backdrop-filter: blur(20px);
}

.survey-header {
  margin-bottom: 35px;
}

.survey-cross {
  font-size: 42px;
  color: #dab55f;
  text-shadow: 0 0 30px rgba(218, 181, 95, 0.4);
  margin-bottom: 15px;
  animation: crossGlow 3s ease-in-out infinite;
}

@keyframes crossGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(218, 181, 95, 0.3); }
  50% { text-shadow: 0 0 40px rgba(218, 181, 95, 0.6), 0 0 60px rgba(218, 181, 95, 0.2); }
}

.survey-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 700;
  color: #f5e6b8;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.survey-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: rgba(245, 230, 184, 0.7);
  font-style: italic;
}

.survey-step {
  animation: stepFadeIn 0.5s ease-out;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dab55f, #c4a04a);
  color: #0a0a12;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.step-question {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #f5e6b8;
  margin-bottom: 22px;
  letter-spacing: 1px;
}

.step-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.step-option {
  background: rgba(218, 181, 95, 0.08);
  border: 1px solid rgba(218, 181, 95, 0.25);
  border-radius: 12px;
  padding: 12px 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #f5e6b8;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
}

.step-option:hover {
  background: rgba(218, 181, 95, 0.18);
  border-color: #dab55f;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(218, 181, 95, 0.15);
}

.step-option.selected {
  background: rgba(218, 181, 95, 0.25);
  border-color: #dab55f;
  box-shadow: 0 0 20px rgba(218, 181, 95, 0.2);
}

.survey-complete {
  animation: stepFadeIn 0.8s ease-out;
}

.complete-icon {
  font-size: 56px;
  margin-bottom: 15px;
  animation: floatIcon 3s ease-in-out infinite;
}

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

.complete-text {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #f5e6b8;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.complete-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: rgba(245, 230, 184, 0.7);
  font-style: italic;
  margin-bottom: 30px;
}

.survey-enter-btn {
  background: linear-gradient(135deg, #dab55f, #c4a04a);
  border: none;
  border-radius: 50px;
  padding: 16px 40px;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: #0a0a12;
  cursor: pointer;
  transition: all 0.4s ease;
  letter-spacing: 2px;
  box-shadow: 0 4px 30px rgba(218, 181, 95, 0.3);
}

.survey-enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(218, 181, 95, 0.5);
}

.survey-progress {
  margin-top: 30px;
  height: 3px;
  background: rgba(218, 181, 95, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.survey-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dab55f, #f5e6b8);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* === HERO SECTION === */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0a12;
}

/* Full-screen background image */
.hero-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: heroBreathe 6s ease-in-out infinite;
}

.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(10, 10, 18, 0.25) 0%, rgba(10, 10, 18, 0.55) 50%, rgba(10, 10, 18, 0.85) 100%);
  z-index: 1;
}

.cross-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(218, 175, 95, 0.2) 0%,
    rgba(218, 175, 95, 0.08) 30%,
    transparent 60%
  );
  animation: glowPulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes heroBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Cloud layers */
.cloud-layer {
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
  z-index: 3;
}

.cloud-layer-1 {
  background:
    radial-gradient(ellipse 600px 200px at 20% 20%, rgba(218, 175, 95, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 800px 250px at 70% 35%, rgba(200, 160, 80, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 500px 180px at 50% 60%, rgba(180, 140, 70, 0.08) 0%, transparent 70%);
  animation: cloudDrift1 30s ease-in-out infinite;
}

.cloud-layer-2 {
  background:
    radial-gradient(ellipse 700px 220px at 30% 40%, rgba(255, 215, 120, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 900px 300px at 80% 25%, rgba(220, 180, 100, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 150px at 10% 70%, rgba(200, 160, 80, 0.07) 0%, transparent 70%);
  animation: cloudDrift2 40s ease-in-out infinite;
}

.cloud-layer-3 {
  background:
    radial-gradient(ellipse 500px 180px at 60% 15%, rgba(255, 230, 150, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 600px 200px at 40% 50%, rgba(240, 200, 120, 0.05) 0%, transparent 70%);
  animation: cloudDrift3 50s ease-in-out infinite;
}

@keyframes cloudDrift1 {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(30px) translateY(-10px); }
  50% { transform: translateX(-20px) translateY(5px); }
  75% { transform: translateX(15px) translateY(-5px); }
}

@keyframes cloudDrift2 {
  0%, 100% { transform: translateX(0) translateY(0); }
  33% { transform: translateX(-40px) translateY(8px); }
  66% { transform: translateX(25px) translateY(-12px); }
}

@keyframes cloudDrift3 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(20px) translateY(-8px); }
}

/* Light rays */
.light-rays {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  background:
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg,
      rgba(218, 175, 95, 0.03) 10deg,
      transparent 20deg,
      rgba(218, 175, 95, 0.04) 35deg,
      transparent 45deg,
      rgba(218, 175, 95, 0.03) 60deg,
      transparent 75deg,
      rgba(218, 175, 95, 0.05) 90deg,
      transparent 105deg,
      rgba(218, 175, 95, 0.03) 120deg,
      transparent 135deg,
      rgba(218, 175, 95, 0.04) 150deg,
      transparent 165deg,
      rgba(218, 175, 95, 0.03) 180deg,
      transparent 360deg
    );
  animation: raysRotate 60s linear infinite;
  pointer-events: none;
}

@keyframes raysRotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  max-width: 900px;
  margin-top: auto;
  margin-bottom: 5rem;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Hero text */
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #f5e6b8;
  text-shadow:
    0 0 20px rgba(218, 175, 95, 0.5),
    0 0 40px rgba(218, 175, 95, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  color: rgba(245, 230, 200, 0.85);
  text-shadow: 0 0 15px rgba(218, 175, 95, 0.3);
  margin-bottom: 2.5rem;
  line-height: 1.8;
  font-style: italic;
}

/* Countdown */
.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.countdown-ring {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.countdown-track {
  fill: none;
  stroke: rgba(218, 175, 95, 0.15);
  stroke-width: 4;
}

.countdown-progress {
  fill: none;
  stroke: #dab55f;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 8px rgba(218, 175, 95, 0.6));
}

.countdown-number {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 900;
  color: #f5e6b8;
  text-shadow: 0 0 20px rgba(218, 175, 95, 0.6);
}

.countdown-number.pulse {
  animation: numberPulse 0.4s ease-out;
}

@keyframes numberPulse {
  0% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Blessing button */
.blessing-btn {
  padding: 1rem 3rem;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 50px;
  background: rgba(100, 90, 70, 0.4);
  color: rgba(200, 190, 170, 0.6);
  border: 1px solid rgba(200, 190, 170, 0.2);
  transition: all 0.6s ease;
  backdrop-filter: blur(10px);
}

.blessing-btn:disabled {
  cursor: not-allowed;
}

.blessing-btn.active {
  background: linear-gradient(135deg, #dab55f 0%, #f5d98a 50%, #dab55f 100%);
  color: #1a1428;
  border-color: #f5d98a;
  box-shadow:
    0 0 30px rgba(218, 175, 95, 0.4),
    0 0 60px rgba(218, 175, 95, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  animation: btnGlow 2s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(218, 175, 95, 0.4), 0 0 60px rgba(218, 175, 95, 0.2); }
  50% { box-shadow: 0 0 40px rgba(218, 175, 95, 0.6), 0 0 80px rgba(218, 175, 95, 0.3); }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.6s ease;
  z-index: 5;
}

.scroll-arrow {
  width: 30px;
  height: 30px;
  border-right: 2px solid rgba(218, 175, 95, 0.6);
  border-bottom: 2px solid rgba(218, 175, 95, 0.6);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.6; }
  50% { transform: rotate(45deg) translateY(10px); opacity: 1; }
}

/* === VERSES SECTION === */
.verses-section {
  position: relative;
  padding: 6rem 2rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(218, 175, 95, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a12 0%, #0f0d1a 50%, #0a0a12 100%);
}

.verses-header {
  text-align: center;
  margin-bottom: 5rem;
}

.verses-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  color: #f5e6b8;
  text-shadow: 0 0 20px rgba(218, 175, 95, 0.4);
  letter-spacing: 0.08em;
}

.verses-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}

.verses-divider::before,
.verses-divider::after {
  content: '';
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 175, 95, 0.5), transparent);
}

.divider-cross {
  margin: 0 1.5rem;
  font-size: 1.5rem;
  color: #dab55f;
  text-shadow: 0 0 10px rgba(218, 175, 95, 0.5);
}

/* Daily Bible Reading Invitation */
.daily-invitation {
  position: relative;
  max-width: 800px;
  margin: -2rem auto 4rem;
  padding: 3rem 3rem;
  text-align: center;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(218, 175, 95, 0.06) 0%, transparent 60%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(218, 175, 95, 0.12);
  overflow: hidden;
}

.invitation-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(218, 175, 95, 0.06) 0%,
    transparent 50%
  );
  animation: glowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

.invitation-content {
  position: relative;
  z-index: 2;
}

.invitation-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 15px rgba(218, 175, 95, 0.4));
}

.invitation-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #f5e6b8;
  text-shadow: 0 0 20px rgba(218, 175, 95, 0.3);
  margin-bottom: 1.5rem;
  letter-spacing: 0.08em;
}

.invitation-text {
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(245, 240, 232, 0.8);
  line-height: 1.9;
  margin-bottom: 1rem;
  font-style: italic;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.invitation-text:last-of-type {
  margin-bottom: 1.5rem;
}

.invitation-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
}

.invitation-divider::before,
.invitation-divider::after {
  content: '';
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 175, 95, 0.3), transparent);
}

.invitation-cross {
  margin: 0 1rem;
  font-size: 1.2rem;
  color: rgba(218, 175, 95, 0.5);
}

.invitation-blessing {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #dab55f;
  line-height: 1.7;
  text-shadow: 0 0 10px rgba(218, 175, 95, 0.2);
  margin-bottom: 0.5rem;
}

.invitation-ref {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(218, 175, 95, 0.6);
  letter-spacing: 0.1em;
}

.invitation-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.85rem 2.2rem;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1a0f0a;
  background: linear-gradient(135deg, #dab55f 0%, #f5e6b8 50%, #dab55f 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 25px rgba(218, 175, 95, 0.3);
  position: relative;
  overflow: hidden;
}

.invitation-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s;
}

.invitation-btn:hover::before {
  left: 100%;
}

.invitation-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 40px rgba(218, 175, 95, 0.5);
  background: linear-gradient(135deg, #e8c870 0%, #fff0d0 50%, #e8c870 100%);
}

.invitation-btn-icon {
  font-size: 1.2rem;
}

/* ===== Bible Loader Modal ===== */
.bible-loader-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 5, 3, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  animation: overlayFadeIn 0.4s ease;
}

.bible-loader-overlay.active {
  display: flex;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bible-loader-modal {
  text-align: center;
  padding: 3rem 4rem;
  max-width: 480px;
  width: 90%;
  animation: loaderScaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes loaderScaleIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.bible-loader-icon {
  font-size: 3.5rem;
  color: #dab55f;
  margin-bottom: 1.2rem;
  animation: crossGlow 1.5s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(218, 175, 95, 0.5);
}

@keyframes crossGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(218, 175, 95, 0.3); transform: scale(1); }
  50% { text-shadow: 0 0 50px rgba(218, 175, 95, 0.8); transform: scale(1.08); }
}

.bible-loader-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #f5e6b8;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
}

.bible-loader-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: rgba(218, 175, 95, 0.7);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.bible-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(218, 175, 95, 0.15);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.bible-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #dab55f, #f5e6b8, #dab55f);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: progressShimmer 1s linear infinite;
  transition: width 0.3s ease;
}

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.bible-loader-status {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: rgba(218, 175, 95, 0.5);
  font-style: italic;
  letter-spacing: 0.05em;
}

/* Verses container */
.verses-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Verse card */
.verse-card {
  display: flex;
  align-items: center;
  gap: 3rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.verse-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.verse-card[data-direction="left"] {
  transform: translateX(-40px) translateY(20px);
}

.verse-card[data-direction="right"] {
  flex-direction: row-reverse;
  transform: translateX(40px) translateY(20px);
}

.verse-card[data-direction="left"].visible,
.verse-card[data-direction="right"].visible {
  transform: translateX(0) translateY(0);
}

/* Verse image */
.verse-image-wrapper {
  flex: 0 0 45%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(218, 175, 95, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.verse-image-wrapper:hover {
  transform: scale(1.03);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(218, 175, 95, 0.2);
}

.verse-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.verse-image-wrapper:hover .verse-image {
  transform: scale(1.08);
}

/* Glass card */
.glass-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(218, 175, 95, 0.15);
  border-radius: 16px;
  padding: 2.5rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(218, 175, 95, 0.1);
  border-color: rgba(218, 175, 95, 0.3);
}

.verse-ref {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #dab55f;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 10px rgba(218, 175, 95, 0.3);
  letter-spacing: 0.05em;
}

.verse-text {
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(245, 240, 232, 0.85);
  line-height: 1.9;
  font-style: italic;
}

.verse-preview {
  display: inline;
}

.verse-full {
  display: none;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(218, 175, 95, 0.15);
}

.verse-card.expanded .verse-preview {
  display: none;
}

.verse-card.expanded .verse-full {
  display: inline;
}

.verse-expand-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #dab55f;
  background: transparent;
  border: 1px solid rgba(218, 175, 95, 0.3);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.verse-expand-btn:hover {
  background: rgba(218, 175, 95, 0.1);
  border-color: rgba(218, 175, 95, 0.5);
  box-shadow: 0 0 15px rgba(218, 175, 95, 0.2);
}

.verse-card.expanded .verse-expand-btn {
  background: rgba(218, 175, 95, 0.15);
  border-color: #dab55f;
  color: #f5e6b8;
}

/* === BLESSING FOOTER === */
.blessing-footer {
  position: relative;
  padding: 8rem 2rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(218, 175, 95, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a12 0%, #1a1428 50%, #0a0a12 100%);
  overflow: hidden;
}

.footer-light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(218, 175, 95, 0.04) 15deg,
      transparent 30deg,
      rgba(218, 175, 95, 0.05) 50deg,
      transparent 65deg,
      rgba(218, 175, 95, 0.04) 80deg,
      transparent 95deg,
      rgba(218, 175, 95, 0.06) 115deg,
      transparent 130deg,
      rgba(218, 175, 95, 0.04) 150deg,
      transparent 165deg,
      rgba(218, 175, 95, 0.05) 185deg,
      transparent 200deg,
      rgba(218, 175, 95, 0.04) 220deg,
      transparent 235deg,
      rgba(218, 175, 95, 0.06) 260deg,
      transparent 275deg,
      rgba(218, 175, 95, 0.04) 300deg,
      transparent 315deg,
      rgba(218, 175, 95, 0.05) 340deg,
      transparent 360deg
    );
  animation: footerRaysSpin 45s linear infinite;
  pointer-events: none;
}

@keyframes footerRaysSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.footer-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.footer-cross {
  font-size: 3rem;
  color: #dab55f;
  text-shadow: 0 0 30px rgba(218, 175, 95, 0.6);
  margin-bottom: 2rem;
  animation: glowPulse 3s ease-in-out infinite;
}

.footer-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #f5e6b8;
  text-shadow:
    0 0 30px rgba(218, 175, 95, 0.5),
    0 0 60px rgba(218, 175, 95, 0.25);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.footer-text {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  color: rgba(245, 230, 200, 0.8);
  font-style: italic;
  line-height: 2;
  margin-bottom: 3rem;
  text-shadow: 0 0 10px rgba(218, 175, 95, 0.2);
}

/* Amen button */
.amen-btn {
  padding: 1.2rem 4rem;
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #1a1428;
  background: linear-gradient(135deg, #dab55f 0%, #f5d98a 50%, #dab55f 100%);
  border-radius: 50px;
  box-shadow:
    0 0 30px rgba(218, 175, 95, 0.4),
    0 0 60px rgba(218, 175, 95, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.amen-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 50px rgba(218, 175, 95, 0.6),
    0 0 100px rgba(218, 175, 95, 0.3),
    0 6px 30px rgba(0, 0, 0, 0.4);
}

.amen-btn.glowing {
  animation: amenGlow 1.5s ease-in-out infinite;
}

@keyframes amenGlow {
  0%, 100% {
    box-shadow: 0 0 30px rgba(218, 175, 95, 0.4), 0 0 60px rgba(218, 175, 95, 0.2);
  }
  50% {
    box-shadow: 0 0 60px rgba(218, 175, 95, 0.8), 0 0 120px rgba(218, 175, 95, 0.4), 0 0 200px rgba(218, 175, 95, 0.2);
  }
}

/* Amen light effect */
.amen-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.amen-light.active {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 235, 180, 0.25) 0%,
    rgba(218, 175, 95, 0.1) 30%,
    transparent 60%
  );
  animation: amenLightFade 3s ease-out forwards;
}

@keyframes amenLightFade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) !important;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .verse-card {
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .verse-card[data-direction="right"] {
    flex-direction: column !important;
  }

  .verse-image-wrapper {
    flex: none;
    width: 100%;
  }

  .verse-image {
    height: 250px;
  }

  .glass-card {
    padding: 2rem;
  }
}

@media (max-width: 600px) {
  .hero-section {
    padding: 1rem;
  }

  .hero-content {
    padding: 1rem;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .countdown-ring {
    width: 110px;
    height: 110px;
  }

  .countdown-number {
    font-size: 2.4rem;
  }

  .verses-section {
    padding: 4rem 1rem;
  }

  .verse-image {
    height: 200px;
  }

  .glass-card {
    padding: 1.5rem;
  }

  .verse-text {
    font-size: 1rem;
  }

  .blessing-footer {
    padding: 5rem 1.5rem;
  }

  .amen-btn {
    padding: 1rem 3rem;
    font-size: 1.1rem;
  }
}

@media (min-width: 1600px) {
  .verses-container {
    max-width: 1300px;
  }

  .verse-image {
    height: 380px;
  }
}

/* === BLESSING MODAL === */
.blessing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.blessing-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.blessing-modal {
  position: relative;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(30, 25, 55, 0.95) 0%, rgba(10, 10, 18, 0.98) 100%);
  border: 1px solid rgba(218, 175, 95, 0.25);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  text-align: center;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 0 60px rgba(218, 175, 95, 0.15),
    0 0 120px rgba(218, 175, 95, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.5);
}

.blessing-modal-overlay.active .blessing-modal {
  transform: scale(1) translateY(0);
}

.modal-light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(218, 175, 95, 0.03) 20deg,
    transparent 40deg,
    rgba(218, 175, 95, 0.04) 70deg,
    transparent 90deg,
    rgba(218, 175, 95, 0.03) 120deg,
    transparent 140deg,
    rgba(218, 175, 95, 0.05) 170deg,
    transparent 190deg,
    rgba(218, 175, 95, 0.03) 220deg,
    transparent 240deg,
    rgba(218, 175, 95, 0.04) 270deg,
    transparent 290deg,
    rgba(218, 175, 95, 0.03) 320deg,
    transparent 360deg
  );
  animation: modalRaysSpin 30s linear infinite;
  pointer-events: none;
}

@keyframes modalRaysSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.modal-cross {
  position: relative;
  z-index: 2;
  font-size: 2.5rem;
  color: #dab55f;
  text-shadow: 0 0 40px rgba(218, 175, 95, 0.6);
  margin-bottom: 1rem;
  animation: glowPulse 3s ease-in-out infinite;
}

/* Modal Jesus image */
.modal-image-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(218, 175, 95, 0.2),
    0 10px 40px rgba(0, 0, 0, 0.4);
}

.modal-jesus-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  transition: transform 0.5s ease;
}

.modal-jesus-image:hover {
  transform: scale(1.03);
}

.modal-title {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #f5e6b8;
  text-shadow: 0 0 20px rgba(218, 175, 95, 0.4);
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.modal-blessing {
  position: relative;
  z-index: 2;
  text-align: left;
  margin-bottom: 1.5rem;
}

.modal-blessing-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(245, 240, 232, 0.85);
  line-height: 1.9;
  margin-bottom: 1rem;
  font-style: italic;
}

.modal-blessing-text:last-child {
  margin-bottom: 0;
}

.modal-verse {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #dab55f;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px rgba(218, 175, 95, 0.3);
}

.modal-close-btn {
  position: relative;
  z-index: 2;
  padding: 1rem 3rem;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #1a1428;
  background: linear-gradient(135deg, #dab55f 0%, #f5d98a 50%, #dab55f 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow:
    0 0 30px rgba(218, 175, 95, 0.4),
    0 0 60px rgba(218, 175, 95, 0.2);
  transition: all 0.4s ease;
}

.modal-close-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 50px rgba(218, 175, 95, 0.6),
    0 0 100px rgba(218, 175, 95, 0.3);
}

/* Modal scrollbar */
.blessing-modal::-webkit-scrollbar {
  width: 4px;
}

.blessing-modal::-webkit-scrollbar-track {
  background: transparent;
}

.blessing-modal::-webkit-scrollbar-thumb {
  background: rgba(218, 175, 95, 0.3);
  border-radius: 2px;
}

/* Modal responsive */
@media (max-width: 600px) {
  .blessing-modal {
    padding: 2rem 1.5rem;
    max-height: 90vh;
  }

  .modal-blessing-text {
    font-size: 1rem;
    line-height: 1.8;
  }

  .modal-close-btn {
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }
}

/* === SELECTION === */
::selection {
  background: rgba(218, 175, 95, 0.3);
  color: #f5e6b8;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a12;
}

::-webkit-scrollbar-thumb {
  background: rgba(218, 175, 95, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(218, 175, 95, 0.5);
}