/* ============================================================
   HOPE — styles.css (FULL REPLACEMENT)
   Design intent:
   - ONE illumination source: sunrise rays + sky brighten the site
   - Candle = humble prayer flame (NO halo, no glow disc)
   - Whole-sky gradients (avoid fishbowl dome)
   - Horizon silhouette + haze band
   - Jesus presence subtle, formed by light/cloud (requires ./assets/jesus-face.png)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Cormorant+Garamond:wght@500;700&display=swap");

:root{
  --serif: "Cormorant Garamond", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --max: 980px;

  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.56);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font: 19px/1.8 var(--serif);
  letter-spacing: .08px;
  background: #071032;
}

/* ============================================================
   BACKGROUND — WHOLE SKY (no dome) + HORIZON
   ============================================================ */

.bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;

  /* Mostly linear sky layers to avoid “fishbowl” dome */
  background:
    /* cool dawn-to-day from above */
    linear-gradient(180deg,
      rgba(210,235,255,.18) 0%,
      rgba(130,170,255,.10) 25%,
      rgba(60,90,180,.06) 55%,
      rgba(15,18,55,.00) 100%),

    /* warm sunrise wash rising upward */
    linear-gradient(180deg,
      rgba(255,240,215,.00) 0%,
      rgba(255,210,160,.00) 40%,
      rgba(255,190,130,.12) 62%,
      rgba(255,175,110,.22) 78%,
      rgba(255,160,95,.18) 100%),

    /* deep base */
    linear-gradient(180deg, #05103a 0%, #0e1b55 48%, #11153f 100%);
}

/* Whole-sky lift (makes the entire site feel like it brightens) */
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    /* general brightening everywhere */
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.18) 38%,
      rgba(255,255,255,.14) 70%,
      rgba(255,255,255,.10) 100%),

    /* warm brightening from horizon up */
    linear-gradient(180deg,
      rgba(255,220,170,.00) 0%,
      rgba(255,220,170,.00) 46%,
      rgba(255,220,170,.18) 74%,
      rgba(255,220,170,.22) 100%);

  opacity: .36;
  animation: skyLift 12s infinite ease-in-out;
}

/* Horizon haze + warm band */
.bg::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: 46%;
  pointer-events:none;

  background:
    /* haze above horizon */
    linear-gradient(180deg,
      rgba(255,235,205,.00) 0%,
      rgba(255,215,175,.10) 32%,
      rgba(255,195,150,.18) 56%,
      rgba(0,0,0,.14) 100%),

    /* warm band at horizon */
    linear-gradient(180deg,
      rgba(255,220,170,.00) 0%,
      rgba(255,220,170,.00) 58%,
      rgba(255,220,170,.34) 70%,
      rgba(255,170,110,.26) 86%,
      rgba(0,0,0,.06) 100%);

  opacity: .58;
  animation: horizon 12s infinite ease-in-out;
}

/* Vignette container (light, not scary) */
.bg__vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 15%, transparent 70%, rgba(0,0,0,.12) 94%);
}

/* Horizon silhouette (rolling hills) */
.bg__vignette::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom: 13%;
  height: 18%;

  background: linear-gradient(180deg, rgba(5,8,22,.0), rgba(5,8,22,.78));

  clip-path: polygon(
    0% 70%,
    8% 62%,
    16% 66%,
    24% 58%,
    32% 64%,
    40% 56%,
    48% 62%,
    56% 54%,
    64% 60%,
    72% 52%,
    80% 58%,
    88% 50%,
    96% 56%,
    100% 52%,
    100% 100%,
    0% 100%
  );

  opacity: .56;
  filter: blur(.2px);
}

/* Jesus presence (requires ./assets/jesus-face.png) — subtle cloud-light */
.bg__vignette::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image: url("./assets/jesus-face.png");
  background-repeat:no-repeat;
  background-position: 50% 32%;
  background-size: min(1200px, 130vw);

  opacity: 0;
  filter: blur(46px) brightness(1.22) contrast(.72) saturate(.86);
  mix-blend-mode: screen;

  animation: jesusPresence 12s infinite ease-in-out;
}

/* Grain */
.bg__grain{
  position:absolute;
  inset:-35%;
  opacity: .020;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  transform: rotate(7deg);
}

/* ============================================================
   SUNRISE RAYS — the ONLY main illumination
   ============================================================ */

.sunrise{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* Wide horizon wash (very subtle foundation, not a disc) */
.sun{
  position:absolute;
  left:50%;
  bottom: 10%;
  transform: translateX(-50%);
  width: 3600px;
  height: 1100px;
  border-radius: 999px;

  background: radial-gradient(ellipse at 50% 92%,
    rgba(255,245,225,.44) 0%,
    rgba(255,205,150,.24) 45%,
    rgba(255,140,80,.10) 72%,
    transparent 86%);

  filter: blur(1px);
  opacity: .46;
  animation: wash 12s infinite ease-in-out;
}

/* Rays: immediate bright -> brighter */
.rays{
  position:absolute;
  left:50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 3900px;
  height: 2100px;

  background:
    repeating-conic-gradient(from 205deg,
      rgba(255,245,225,0.00) 0deg,
      rgba(255,245,225,0.00) 10deg,
      rgba(255,245,225,0.60) 15deg,
      rgba(255,245,225,0.00) 22deg);

  filter: blur(1.6px);

  -webkit-mask-image: radial-gradient(circle at 50% 92%, rgba(0,0,0,1) 0%, transparent 52%);
  mask-image: radial-gradient(circle at 50% 92%, rgba(0,0,0,1) 0%, transparent 52%);

  opacity: .94;
  animation: rays 12s infinite ease-in-out;
}

/* Veil that makes rays “light the whole page” */
.sunrise::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.18) 38%,
      rgba(255,255,255,.14) 70%,
      rgba(255,255,255,.10) 100%),

    linear-gradient(180deg,
      rgba(255,220,170,.00) 0%,
      rgba(255,220,170,.00) 46%,
      rgba(255,220,170,.16) 74%,
      rgba(255,220,170,.20) 100%);

  opacity: .20;
  animation: veil 12s infinite ease-in-out;
}

/* ============================================================
   PAGE — flowing (no boxes)
   ============================================================ */

.header{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(8,10,26,.20);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.brand{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 18px 16px;
}

.brand__title{
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin: 0;
}

.brand__subtitle{
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.72);
  margin-top: 6px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 18px 80px;
}

/* Sections as flowing blocks */
.panel{
  padding: 10px 0 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  position: relative;
}

.panel + .panel{
  margin-top: 18px;
  padding-top: 22px;
}

.panel + .panel::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

.panel__top{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

h1,h2{
  margin:0;
  font-family: var(--serif);
  letter-spacing: .2px;
  font-weight: 700;
}
h1{ font-size: 28px; }
h2{ font-size: 24px; }

.meta{
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
}

.lead{
  color: rgba(255,255,255,.86);
  margin: 8px 0 12px;
}

/* Reading as flow */
.reading{
  border: none;
  background: transparent;
  padding: 0;
}

.reading__source{
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255,255,255,.66);
  margin: 6px 0 4px;
}

.reading__title{
  font-size: 20px;
  margin: 4px 0 8px;
}

.reading__snippet{
  font-size: 18px;
  color: rgba(255,255,255,.90);
  margin: 0 0 10px;
}

.link{
  display:inline-block;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.94);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.26);
  padding-bottom: 2px;
}
.link:hover{
  border-bottom-color: rgba(255,245,225,.90);
}

/* Inputs */
.label{
  display:block;
  margin: 12px 0 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

.field{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field:focus{
  border-color: rgba(255,245,225,.72);
  box-shadow: 0 0 0 4px rgba(255,245,225,.14);
  background: rgba(255,255,255,.08);
}

.area{ min-height: 170px; resize: vertical; }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){
  .grid{ grid-template-columns: 1fr; }
}

.btn{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,245,225,.70);
  background: linear-gradient(180deg, rgba(255,245,220,.18), rgba(255,175,110,.10));
  color: rgba(255,255,255,.96);
  font-family: var(--sans);
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease;
}
.btn:hover{ filter: brightness(1.10); }
.btn:active{ transform: translateY(1px); }

.note{
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(255,255,255,.56);
}

.softline{
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 14px 0;
}

.footer{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.56);
}
.footer__small{ opacity: .95; }

/* ============================================================
   CANDLE — SIMPLE PRAYER FLAME (NO HALO)
   ============================================================ */

.candle{
  position:absolute;
  left:50%;
  top: 80%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 420px;
  opacity: .95;
  pointer-events:none;
}

/* No glow/halo */
.candle__glow{ display:none; }

/* Big, clean flame */
.candle__flame{
  position:absolute;
  left:50%;
  bottom: 260px;
  transform: translateX(-50%);
  width: 38px;
  height: 140px;
  border-radius: 999px;

  background: radial-gradient(circle at 50% 20%,
    rgba(255,255,255,1),
    rgba(255,250,235,.95) 22%,
    rgba(255,220,170,.80) 46%,
    rgba(255,175,110,.55) 70%,
    rgba(255,140,80,.30) 85%,
    transparent 95%);

  animation: flicker 1.15s infinite ease-in-out;

  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.85))
    drop-shadow(0 0 26px rgba(255,210,150,.65));
}

.candle__wick{
  position:absolute;
  left:50%;
  bottom: 248px;
  transform: translateX(-50%);
  width:5px;
  height:22px;
  background:#222;
  border-radius:6px;
}

.candle__body{
  position:absolute;
  left:50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 80px;
  height: 200px;
  border-radius: 26px;

  background: linear-gradient(180deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.12));

  border:1px solid rgba(255,255,255,.18);
}

.candle__base{
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%);
  width:200px;
  height:46px;
  border-radius:50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.25), transparent 70%);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes skyLift{
  0%   { opacity: .28; filter: brightness(1.02) saturate(1.08); }
  12%  { opacity: .54; filter: brightness(1.14) saturate(1.22); }
  32%  { opacity: .92; filter: brightness(1.30) saturate(1.36); }
  55%  { opacity: .70; filter: brightness(1.22) saturate(1.28); }
  100% { opacity: .28; filter: brightness(1.02) saturate(1.08); }
}

@keyframes horizon{
  0%   { opacity: .30; }
  10%  { opacity: .48; }
  32%  { opacity: .86; }
  55%  { opacity: .58; }
  100% { opacity: .30; }
}

@keyframes wash{
  0%   { opacity: .34; }
  20%  { opacity: .46; }
  32%  { opacity: .62; }
  55%  { opacity: .50; }
  100% { opacity: .34; }
}

@keyframes rays{
  0%   { opacity: .94; transform: translateX(-50%) rotate(-1deg) scale(1.03); }
  12%  { opacity: .97; }
  32%  { opacity: 1.00; transform: translateX(-50%) rotate(1deg) scale(1.08); }
  55%  { opacity: .98; }
  100% { opacity: .94; transform: translateX(-50%) rotate(-1deg) scale(1.03); }
}

@keyframes veil{
  0%   { opacity: .12; }
  20%  { opacity: .22; }
  32%  { opacity: .44; }
  55%  { opacity: .30; }
  100% { opacity: .12; }
}

@keyframes jesusPresence{
  0%   { opacity: 0; transform: scale(1.02); }
  18%  { opacity: .03; }
  32%  { opacity: .13; transform: scale(1.00); }
  55%  { opacity: .09; }
  100% { opacity: 0; transform: scale(1.02); }
}

@keyframes flicker{
  0%   { transform: translateX(-50%) rotate(-2deg) scale(1); }
  40%  { transform: translateX(-50%) rotate(2deg) scale(1.08); }
  70%  { transform: translateX(-50%) rotate(-1deg) scale(.98); }
  100% { transform: translateX(-50%) rotate(-2deg) scale(1); }
}

/* Mobile */
@media (max-width: 520px){
  body{ font-size: 18px; }
  .brand__title{ font-size: 40px; }

  .rays{ width: 2500px; height: 1450px; bottom: 8%; }
  .sun{ width: 2500px; height: 900px; bottom: 10%; }

  .candle{ top: 82%; width: 180px; height: 400px; }
  .candle__flame{ width: 34px; height: 125px; bottom: 245px; }

  .bg__vignette::before{
    background-size: min(900px, 140vw);
    background-position: 50% 32%;
  }
}