/* Weekend Nutrition Program – Single Landing Page
   Plain HTML/CSS/JS with tasteful effects */
:root{
  --bg:#0c4da2;
  --bg-2:#0a3e84;
  --ink: #eaf1ff;
  --accent-1:#7e7bff;   /* header purple */
  --accent-2:#d26be3;   /* subtitle pink */
  --accent-3:#ffc24b;   /* mission gold */
  --muted:#9bb7ff;
  --line:#0b3a7a;
  --card:#0d3c82dd;
  --shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}

*{box-sizing:border-box}
html,
/* Static background pattern and vignette (no animations) */
body{
  margin:0;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',Ubuntu,'Cantarell',sans-serif;
  background: radial-gradient(120px 2px at 0% 50%, rgba(255,255,255,.5), transparent), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x:hidden;
}

/* subtle geometric pattern overlay */

.bg{
  position:fixed; inset:0; z-index:-2;
  /* subtle tiny-dot pattern */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><circle cx='1' cy='1' r='0.6' fill='%23ffffff18'/></svg>");
  background-size: 8px 8px;
  opacity:.12;
}


/* vignette */


body{
  margin:0;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',Ubuntu,'Cantarell',sans-serif;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x:hidden;
}

.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

.site-header{
  padding: clamp(24px, 4vw, 40px) 0 10px;
  text-align:center;
}

.title{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size: clamp(36px, 6vw, 68px);
  margin:0;
  color:var(--accent-1);
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.subtitle{
  font-family:'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.6vw, 34px);
  margin:.75rem 0 0;
  color:var(--accent-2);
}

.rule{
  height:2px;
  border:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  margin:14px auto;
  width:min(900px, 92vw);
  position:relative;
  overflow:hidden;
}
.rule::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120px 2px at 0% 50%, rgba(255,255,255,.5), transparent), transparent);
  animation: sweep 18s linear infinite;
}
@keyframes sweep{to{transform:translateX(100%)}}

.rule.thin{
  width:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

.content-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(20px, 4vw, 48px);
  align-items:start;
  padding: clamp(12px, 3vw, 28px) 0 clamp(40px, 6vw, 80px);
}

.mission{
  font-size: clamp(18px, 2.2vw, 26px);
  line-height:1.45;
  font-weight:500;
  color: var(--accent-3);
  margin: 12px 0;
  text-wrap:balance;
}

.card{
  background: var(--card);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(16px, 2.5vw, 28px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.donate h2{
  margin:0 0 .25rem 0;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing:.02em;
  color: var(--muted);
  font-weight:600;
}

address{
  font-style:normal;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height:1.5;
  margin:.25rem 0 1rem;
  color:#d1e0ff;
}

.buttons{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  appearance:none;
  border:0;
  padding:12px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  background: linear-gradient(180deg,#8aa7ff,#6b8dff);
  color:#071a43;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.30) }
.btn:active{ transform: translateY(1px); }
.btn.outline{
  background: transparent;
  color:#d2e2ff;
  border:1px solid rgba(255,255,255,.25);
}

.tiny{font-size:.9rem}
.muted{color:#c6d7ff99}

.right-col .mascot-wrap{
  margin: 0;
  padding: clamp(8px, 1.6vw, 14px);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.mascot{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  
}

  50%{ transform: translateY(-8px) }
}

.site-footer{
  text-align:center;
  padding: 0 0 48px;
}
.foot-note{
  color:#f0e7ffcc;
  font-family:'Cormorant Garamond',serif;
  font-size: clamp(18px, 1.8vw, 22px);
  margin:10px 0 0;
}
/* Scroll reveal */
.reveal{opacity:1;transform:none}


/* Responsive */
@media (max-width: 880px){
  .content-grid{ grid-template-columns: 1fr; }
  .right-col{ order:-1 }
  .mascot{  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  
}


/* Donate QR */
.qr-wrap{
  display:flex; align-items:center; gap:14px; margin-top:14px;
  padding:10px; border:1px dashed rgba(255,255,255,.25); border-radius:12px;
  background: rgba(0,0,0,.08);
}
.qr{ width:110px; height:110px; object-fit:contain; border-radius:8px; background:#fff }
.qr-caption{ line-height:1.3; color:#e9f1ff }
.qr-caption code{ background: rgba(255,255,255,.08); padding:.1rem .3rem; border-radius:6px; color:#e9f1ff }

/* Contact section */
.contact{ padding-bottom: clamp(40px, 7vw, 90px) }
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:26px; }
.contact h2{ margin:0 0 .4rem; color:#cfe0ff }
.contact p{ margin:.5rem 0 1rem }
.bullets{ margin:.25rem 0 0 1.1rem; }
.bullets li{ margin:.25rem 0; }

.contact-form{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.95rem }
.contact-form label span{ color:#cfe0ff }
.contact-form input, .contact-form textarea{
  background:#0b2f67; border:1px solid rgba(255,255,255,.18); color:#eaf3ff;
  border-radius:10px; padding:10px 12px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.contact-form textarea{ resize:vertical }
.contact-form .full{ grid-column: 1 / -1 }
.form-actions{ display:flex; gap:10px; align-items:center; margin-top:6px }

.toast{
  margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.2); color:#eaf3ff; font-weight:600;
}

@media (max-width: 880px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-form{ grid-template-columns: 1fr; }
}

/* Gentle parallax targets (no continuous animation; moved by small pointer shift) */
.site-header.parallax, .mascot-wrap.parallax {
  will-change: transform;
  transition: transform 600ms ease;
}
@media (prefers-reduced-motion: reduce){
  .site-header.parallax, .mascot-wrap.parallax { transform: none !important; transition: none !important; }
}
.partner a{ color:#ffd684; text-underline-offset:2px }
.partner a:hover{ text-decoration:underline }

/* Calm color-breathing overlay */
.bg::before{
  content:''; position:absolute; inset:-20% -10%;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(110,116,255,0.35), transparent 60%),
    radial-gradient(1000px 700px at 85% 15%, rgba(255,122,213,0.28), transparent 60%),
    radial-gradient(900px 600px at 50% 85%, rgba(255,194,75,0.20), transparent 60%);
  filter: saturate(105%);
  animation: breathe 120s linear infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50%  { background-position: 40% 10%, -30% 20%, 20% -15%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
}

/* Soft vignette above everything */
.bg::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(70% 60% at 50% 35%, transparent 60%, rgba(0,0,0,.26));
  pointer-events:none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg::before{ animation:none !important }
}


/* Bottom donations section spacing */
.donate-bottom{ padding-bottom: clamp(36px, 6vw, 72px); }



/* Soft shadow that squashes as the mascot 'steps' */
.mascot-shadow{
  position:absolute; left:12%; right:12%; bottom:-8px; height:16px;
  background: radial-gradient(60% 70% at 50% 50%, rgba(0,0,0,.35), transparent 65%);
  filter: blur(6px);
  transform-origin: 50% 50%;
  animation: mascot-shadow 3.8s ease-in-out infinite;
}

@keyframes mascot-walk{
  0%,100%{ transform: translateY(0) rotate(0deg) }
  25%{ transform: translateY(-3px) rotate(-.3deg) }
  50%{ transform: translateY(0) rotate(0deg) }
  75%{ transform: translateY(-3px) rotate(.3deg) }
}
/* Chew: tiny vertical squish to imply jaw movement */
@keyframes mascot-chew{
  0%,100%{ filter: none; }
  50%{ transform: translateY(-1px) scaleY(.995) rotate(0deg); }
}
@keyframes mascot-shadow{
  0%,100%{ transform: scaleX(1); opacity:.45 }
  25%,75%{ transform: scaleX(1.06); opacity:.40 }
  50%{ transform: scaleX(1.1); opacity:.38 }
}

/* Pause animation on hover/focus for users wanting stillness */
.mascot-wrap:hover .mascot, .mascot-wrap:focus-within .mascot,
.mascot-wrap:hover .mascot-shadow, .mascot-wrap:focus-within .mascot-shadow{
  animation-play-state: paused;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .mascot, .mascot-shadow{ animation: none !important }
}