/* ══════════════════════════════════════════════
   TCF MODERN — Design System
   Palette: Primary #0F4C81 · Secondary #1E88E5 · Accent #FFD54F
   Type: Sora (display) · Inter (body) · Fraunces italic (scripture accent)
   ══════════════════════════════════════════════ */

:root{
  --primary:#0F4C81;
  --primary-light:#1a5f9e;
  --secondary:#1E88E5;
  --accent:#FFD54F;
  --accent-deep:#F5B816;
  --white:#FFFFFF;
  --lightgray:#F8FAFC;
  --dark:#0F172A;
  --dark2:#16213a;
  --radius:20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;} /* Lenis handles smooth scroll */
body{
  font-family:'Inter',sans-serif;
  background:var(--lightgray);
  color:var(--dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html.dark body{ background:var(--dark); color:#e8edf5; }

::selection{ background:var(--accent); color:var(--dark); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ── Focus visibility ── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--secondary); outline-offset:3px; border-radius:4px;
}

/* ── Scroll progress bar ── */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; z-index:9999;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  width:0%; transition:width .1s linear;
}

/* ── Nav ── */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:padding .4s cubic-bezier(.16,1,.3,1), background .4s, box-shadow .4s;
  padding:28px 5vw;
}
#site-nav.scrolled{
  padding:14px 5vw;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 8px 32px rgba(15,76,129,0.08);
}
html.dark #site-nav.scrolled{ background:rgba(15,23,42,0.75); }

.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--accent); transition:width .35s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after{ width:100%; }

/* Hamburger */
.ham-line{ transition: transform .35s ease, opacity .25s ease; transform-origin: center; }
.ham-open .ham-line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.ham-open .ham-line:nth-child(2){ opacity:0; }
.ham-open .ham-line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ── */
#hero{ position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center; }
#hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.08);
  filter:brightness(0.55) saturate(1.05);
}
#hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,23,42,0.75) 0%, rgba(15,76,129,0.55) 45%, rgba(15,23,42,0.85) 100%);
}
/* Signature: drifting sunrise glow orb */
.sunrise-orb{
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,213,79,0.35) 0%, rgba(30,136,229,0.18) 45%, transparent 75%);
  filter:blur(30px);
  animation:orbDrift 16s ease-in-out infinite;
}
@keyframes orbDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.15); }
  66%{ transform:translate(-30px,20px) scale(0.95); }
}
/* Light rays */
.light-ray{
  position:absolute; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,213,79,0.14) 0%, transparent 70%);
  transform-origin:top center;
  animation:rayGlow 8s ease-in-out infinite;
}
@media (max-width:640px){ .light-ray{ display:none; } }
@keyframes rayGlow{ 0%,100%{ opacity:0.4; } 50%{ opacity:0.85; } }

/* Floating particles */
.particle{
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,213,79,0.9) 0%, rgba(255,213,79,0) 70%);
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  from{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  to{ transform:translateY(-100vh) translateX(20px); opacity:0; }
}

.hero-word{ display:inline-block; }

/* ── Buttons ── */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; border-radius:100px; font-weight:600; font-size:0.92rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; cursor:pointer;
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  color:var(--dark); box-shadow:0 8px 30px rgba(255,213,79,0.35);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(255,213,79,0.5); }
.btn-outline{
  border:1.5px solid rgba(255,255,255,0.5); color:#fff; backdrop-filter:blur(6px);
}
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
.btn-dark{ background:var(--primary); color:#fff; box-shadow:0 8px 30px rgba(15,76,129,0.3); }
.btn-dark:hover{ transform:translateY(-3px); background:var(--primary-light); }

/* Ripple */
.ripple-span{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
  transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* ── Cards ── */
.glass-card{
  background:rgba(255,255,255,0.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.5); border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(15,76,129,0.1);
}
html.dark .glass-card{ background:rgba(30,41,59,0.55); border-color:rgba(255,255,255,0.08); }

.lift-card{ transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
.lift-card:hover{ transform:translateY(-10px); box-shadow:0 24px 60px rgba(15,76,129,0.18); }

.img-zoom{ overflow:hidden; border-radius:var(--radius); }
.img-zoom img{ transition:transform .8s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img{ transform:scale(1.08); }

/* Event date badge */
.date-badge{
  background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;
  border-radius:16px; text-align:center; padding:14px 18px; box-shadow:0 8px 24px rgba(15,76,129,0.3);
}

/* ── Section reveal (GSAP handles the actual animation via JS, this is fallback) ── */
.reveal{ opacity:0; transform:translateY(50px); }
.reveal.blur{ filter:blur(12px); }

/* ── Scripture accent ── */
.scripture{ font-family:'Fraunces',serif; font-style:italic; }

/* ── Footer gradient ── */
.footer-gradient{
  background:linear-gradient(160deg, var(--dark) 0%, #122043 50%, var(--primary) 150%);
}

/* Back to top */
#back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:900; width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--dark); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(255,213,79,0.4); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
#back-to-top.show{ opacity:1; pointer-events:all; }
#back-to-top:hover{ transform:translateY(-4px); }

/* Countdown */
.countdown-unit{
  background:rgba(15,76,129,0.06); border-radius:12px; padding:10px 14px; text-align:center; min-width:64px;
}
html.dark .countdown-unit{ background:rgba(255,255,255,0.06); }

/* Floating label form */
.field-wrap{ position:relative; }
.field-wrap input, .field-wrap textarea, .field-wrap select{
  width:100%; padding:20px 16px 8px; border-radius:14px;
  background:rgba(255,255,255,0.7); border:1.5px solid rgba(15,76,129,0.12);
  font-family:'Inter',sans-serif; transition:border-color .3s, box-shadow .3s;
}
html.dark .field-wrap input, html.dark .field-wrap textarea, html.dark .field-wrap select{
  background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.12);
}
.field-wrap input:focus, .field-wrap textarea:focus, .field-wrap select:focus{
  outline:none; border-color:var(--secondary); box-shadow:0 0 0 4px rgba(30,136,229,0.12);
}
.field-wrap label{
  position:absolute; left:16px; top:18px; font-size:0.95rem; color:#7d8aa3;
  transition:all .25s cubic-bezier(.16,1,.3,1); pointer-events:none;
}
.field-wrap input:focus + label, .field-wrap input:not(:placeholder-shown) + label,
.field-wrap textarea:focus + label, .field-wrap textarea:not(:placeholder-shown) + label{
  top:6px; font-size:0.68rem; color:var(--secondary); font-weight:600; letter-spacing:0.04em;
}

/* Success check animation */
.success-check{
  width:64px; height:64px; border-radius:50%; background:#22c55e; display:flex; align-items:center; justify-content:center;
}
.success-check svg{ stroke-dasharray:24; stroke-dashoffset:24; animation:drawCheck .5s ease forwards .2s; }
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }

/* Swiper pagination custom */
.swiper-pagination-bullet{ background:var(--primary) !important; opacity:0.3 !important; }
.swiper-pagination-bullet-active{ opacity:1 !important; background:var(--accent) !important; }
.swiper-button-next, .swiper-button-prev{ color:var(--primary) !important; }
html.dark .swiper-button-next, html.dark .swiper-button-prev{ color:var(--accent) !important; }

/* Dark mode toggle */
#theme-toggle{
  width:52px; height:28px; border-radius:100px; background:rgba(15,76,129,0.15); position:relative; cursor:pointer;
  transition:background .3s;
}
html.dark #theme-toggle{ background:rgba(255,213,79,0.2); }
#theme-toggle .knob{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--primary); transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
html.dark #theme-toggle .knob{ transform:translateX(24px); background:var(--accent); }

/* Mega menu */
#mega-menu{
  position:fixed; inset:0; z-index:1100; background:var(--dark);
  display:flex; opacity:0; pointer-events:none; transition:opacity .4s ease;
}
#mega-menu.open{ opacity:1; pointer-events:all; }
.mega-link{ opacity:0; transform:translateY(30px); }

/* Sticky sub-nav on inner pages */
.subnav{ position:sticky; top:0; z-index:50; }

/* Utility fade for lazy images */
img[data-lazy]{ opacity:0; transition:opacity .6s ease; }
img.loaded{ opacity:1; }