/* ──────────────────────────────────────────────────────────────
   BISPO HENRIQUE SANTINI — style.css
   Light Theme: White, Royal Blue & Gold — © 2026
   ────────────────────────────────────────────────────────────── */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Colors */
  --gold-100: #fffbeb;
  --gold-200: #fef3c7;
  --gold-300: #fde047;
  --gold-400: #d97706;
  --gold-500: #b45309;
  --gold-600: #78350f;

  --blue-900: #0f172a;
  --blue-800: #1e293b;
  --blue-700: #1e3a8a;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #eff6ff;
  --blue-50:  #f8fafc;

  --bg-main: #f8fafc;

  /* Glass Cards */
  --card-bg: rgba(255, 255, 255, 0.88);
  --card-border: rgba(226, 232, 240, 0.8);
  --card-border-hover: rgba(217, 119, 6, 0.35);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-full: 999px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-card: 0 4px 25px rgba(30, 58, 138, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 12px 35px rgba(30, 58, 138, 0.14);
  --shadow-gold: 0 0 25px rgba(217, 119, 6, 0.25);
  --shadow-blue: 0 4px 20px rgba(37, 99, 235, 0.25);
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg-main);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.65;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,textarea{font:inherit}
::selection{background:rgba(217,119,6,0.2);color:var(--blue-900)}

/* ── ANIMATED LIGHT BG ───────────────────────────────────────── */
.bg-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.bg-canvas::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(239, 246, 255, 1) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 90%, rgba(254, 243, 199, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 40%, rgba(224, 231, 255, 0.5) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #f1f5f9 100%);
}
.bg-canvas::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 35% 25% at 50% 15%, rgba(217, 119, 6, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 30% 20% at 80% 70%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);
  animation:shimmer-bg 8s ease-in-out infinite alternate;
}
@keyframes shimmer-bg{0%{opacity:.6}100%{opacity:1}}

.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orb-drift linear infinite}
.orb-1{width:320px;height:320px;background:radial-gradient(circle,rgba(217,119,6,0.12) 0%,transparent 70%);top:-6%;left:-10%;animation-duration:22s}
.orb-2{width:280px;height:280px;background:radial-gradient(circle,rgba(37,99,235,0.1) 0%,transparent 70%);top:30%;right:-8%;animation-duration:26s;animation-delay:-8s}
.orb-3{width:200px;height:200px;background:radial-gradient(circle,rgba(217,119,6,0.09) 0%,transparent 70%);bottom:10%;left:15%;animation-duration:20s;animation-delay:-5s}
@keyframes orb-drift{
  0%{transform:translate(0,0) scale(1);opacity:.5}
  33%{transform:translate(20px,-15px) scale(1.03);opacity:.8}
  66%{transform:translate(-10px,25px) scale(0.97);opacity:.6}
  100%{transform:translate(0,0) scale(1);opacity:.5}
}

.particle{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);border-radius:50%;
  background:var(--gold-400);opacity:0;
  animation:ptl-float var(--d) ease-in-out infinite;
  box-shadow:0 0 6px 1px rgba(217,119,6,0.3);
}
@keyframes ptl-float{
  0%{transform:translateY(0) scale(.8);opacity:0}
  20%{opacity:var(--o)}
  50%{transform:translateY(-20px) scale(1);opacity:var(--o)}
  80%{opacity:var(--o)}
  100%{transform:translateY(0) scale(.8);opacity:0}
}
.particle:nth-child(1){animation-delay:0s}
.particle:nth-child(2){animation-delay:-1.2s}
.particle:nth-child(3){animation-delay:-2.4s}
.particle:nth-child(4){animation-delay:-3.2s}
.particle:nth-child(5){animation-delay:-1.8s}
.particle:nth-child(6){animation-delay:-2.8s}
.particle:nth-child(7){animation-delay:-.6s}
.particle:nth-child(8){animation-delay:-3.8s}

@media(prefers-reduced-motion:reduce){
  .particle,.orb,.bg-canvas::after{animation:none;opacity:.25}
  .avatar-ring{animation:none}
}

/* ── PAGE WRAPPER ────────────────────────────────────────────── */
.page-wrapper{
  position:relative;z-index:1;
  width:100%;max-width:480px;margin:0 auto;
  padding:2.5rem 1.1rem 2rem;
  display:flex;flex-direction:column;gap:1.2rem;
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero{
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  padding-bottom:.3rem;
  animation:fade-up .65s var(--ease-out) both;
}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Clean elegant gold/blue ring around photo */
.avatar-ring{
  position:relative;width:122px;height:122px;padding:3.5px;border-radius:50%;
  background:linear-gradient(135deg, var(--gold-400), var(--blue-700), var(--gold-300));
  box-shadow:0 8px 25px rgba(30, 58, 138, 0.15), 0 0 15px rgba(217, 119, 6, 0.2);
  transition:transform .35s var(--ease-spring);
}
.avatar-ring:hover{
  transform:scale(1.04);
}
.avatar-inner{
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#ffffff;border:2.5px solid #ffffff;
}
.avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-initials{
  display:none;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-family:var(--font-display);font-size:2.2rem;font-weight:600;
  color:var(--blue-700);
  background:linear-gradient(135deg, var(--blue-100), #ffffff);
}

.hero-text{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.hero-eyebrow{
  font-family:var(--font-body);font-weight:500;font-size:.72rem;
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold-400);
}
.hero-name{
  font-family:var(--font-display);font-size:clamp(2rem,8vw,2.65rem);font-weight:700;
  line-height:1.1;letter-spacing:-.01em;
  background:linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--gold-400) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(30, 58, 138, 0.1));
}
.hero-tagline{
  font-size:.86rem;font-weight:400;color:var(--text-secondary);
  letter-spacing:.01em;max-width:28ch;line-height:1.55;margin-top:2px;
}
.hero-social{
  margin-top:.85rem;
  margin-bottom:.2rem;
}
.hero-rule{
  margin-top:.4rem;display:flex;align-items:center;gap:1rem;color:var(--gold-400);opacity:.5;
}
.hero-rule::before,.hero-rule::after{
  content:'';display:block;width:44px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent);
}
.cross-icon{font-size:.6rem}

/* ── SHARED CARD BASE ────────────────────────────────────────── */
.card{
  border-radius:var(--r-lg);
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card);
  padding:1.6rem 1.4rem;
  animation:fade-up .6s var(--ease-out) both;
  position:relative;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease-spring);
}
.card:hover{
  border-color:var(--card-border-hover);
  box-shadow:var(--shadow-card-hover);
}
/* Top subtle gold accent line */
.card::before{
  content:'';position:absolute;top:0;left:15%;right:15%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(217, 119, 6, 0.4),rgba(37, 99, 235, 0.4),transparent);
}

/* ── REFLECTION CARD ─────────────────────────────────────────── */
.reflection-card{animation-delay:.08s}
.card-label{
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:.9rem;
}
.reflection-quote{
  font-family:var(--font-serif);font-style:italic;
  font-size:1.18rem;font-weight:400;line-height:1.65;
  color:var(--blue-900);border:none;padding:0;
  min-height:3.5em;
  transition:opacity .4s ease,transform .4s ease;
}
.reflection-quote.fade-out{opacity:0;transform:translateY(-6px)}
.reflection-meta{
  display:flex;align-items:center;gap:.75rem;margin-top:.9rem;
}
.ref-today-badge{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;
  padding:3px 10px;border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--gold-100), #fef3c7);
  border:1px solid rgba(217, 119, 6, 0.3);color:var(--gold-500);
}
.ref-verse{
  font-size:.75rem;font-weight:400;color:var(--text-muted);letter-spacing:.02em;font-style:italic;
}
.refresh-btn{
  position:absolute;top:1.2rem;right:1.2rem;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(241, 245, 249, 0.8);border:1px solid rgba(226, 232, 240, 1);
  color:var(--blue-700);
  transition:color .2s ease,background .2s ease,transform .4s var(--ease-spring);
}
.refresh-btn svg{width:14px;height:14px}
.refresh-btn:hover{color:var(--gold-400);background:var(--gold-100);transform:rotate(180deg)}
.refresh-btn:active{transform:rotate(180deg) scale(.9)}

/* ── TIMER CARD ──────────────────────────────────────────────── */
.timer-card{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  animation-delay:.16s;
}
.card-title-serif{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  color:var(--blue-900);letter-spacing:.01em;
}
.timer-display{
  display:flex;align-items:center;gap:.1rem;
  font-family:var(--font-body);font-size:clamp(2.6rem,10vw,3.4rem);
  font-weight:300;letter-spacing:.04em;
  color:var(--blue-700);
  filter:drop-shadow(0 2px 8px rgba(30, 58, 138, 0.15));
  line-height:1;
}
.timer-digit{
  font-variant-numeric:tabular-nums;
  min-width:2.5ch;text-align:center;
}
.timer-colon{
  animation:blink-colon 1s step-end infinite;
  color:var(--gold-400);padding:0 .05em;margin-bottom:.15em;
}
@keyframes blink-colon{0%,100%{opacity:1}50%{opacity:.2}}
.timer-sub{
  font-size:.62rem;font-weight:600;letter-spacing:.22em;
  color:var(--text-muted);text-transform:uppercase;
  margin-top:-.35rem;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;padding:.88rem 1.2rem;border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--blue-700), var(--blue-600));
  color:#ffffff;font-size:.82rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--shadow-blue);
  transition:background .35s ease,transform .3s var(--ease-spring),box-shadow .3s ease;
  cursor:pointer;
}
.btn-primary:hover{
  background:linear-gradient(135deg, var(--blue-800), var(--blue-700));
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(30, 58, 138, 0.35);
}
.btn-primary:active{transform:translateY(0);transition-duration:80ms}
.btn-full{width:100%}
.btn-icon{font-size:.65rem;color:var(--gold-300)}

.timer-row-btns{
  display:flex;gap:.65rem;width:100%;
}
.btn-ghost{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:.75rem .8rem;border-radius:var(--r-full);
  background:#ffffff;border:1px solid var(--card-border);
  color:var(--blue-700);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .3s var(--ease-spring);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.03);
}
.btn-ghost:hover{
  background:var(--blue-100);border-color:rgba(37, 99, 235, 0.3);
  color:var(--blue-800);transform:translateY(-1px);
}
.btn-ghost:active{transform:translateY(0)}

/* ── COMMUNITY CARD ──────────────────────────────────────────── */
.community-card{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  animation-delay:.24s;
}
.community-icon{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--gold-100), #fef3c7);
  border:1px solid rgba(217, 119, 6, 0.25);
  color:var(--gold-500);
  transition:transform .35s var(--ease-spring),background .3s ease;
  box-shadow:0 4px 12px rgba(217, 119, 6, 0.12);
}
.community-card:hover .community-icon{transform:scale(1.08);background:var(--gold-200)}
.community-icon svg{width:26px;height:26px}
.community-title{
  font-family:var(--font-display);font-size:1.45rem;font-weight:600;
  color:var(--blue-900);
}
.community-text{
  font-size:.85rem;font-weight:400;color:var(--text-secondary);
  max-width:26ch;line-height:1.6;
}
.btn-community{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.72rem 2.4rem;border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:#ffffff;font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s ease,transform .3s var(--ease-spring),box-shadow .3s ease;
  box-shadow:0 4px 15px rgba(217, 119, 6, 0.25);
}
.btn-community:hover{
  background:linear-gradient(135deg, var(--gold-500), var(--gold-600));
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(217, 119, 6, 0.35);
}

/* ── SOCIAL ICONS ROW ────────────────────────────────────────── */
.social-row{
  display:flex;justify-content:center;gap:.9rem;
  padding:.4rem 0;
  animation:fade-up .6s var(--ease-out) .32s both;
}
.social-icon{
  width:54px;height:54px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;border:1px solid var(--card-border);
  color:var(--blue-700);
  transition:
    color .25s ease,background .25s ease,
    border-color .25s ease,transform .35s var(--ease-spring),
    box-shadow .3s ease;
  box-shadow:0 4px 15px rgba(30, 58, 138, 0.06);
}
.social-icon svg{width:22px;height:22px}
.social-icon:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 8px 22px rgba(30, 58, 138, 0.12);
}
/* Themed hover colors */
.social-icon--yt:hover{color:#ff0000;border-color:rgba(255,0,0,.3);background:rgba(255,0,0,.05)}
.social-icon--fb:hover{color:#1877f2;border-color:rgba(24,119,242,.3);background:rgba(24,119,242,.05)}
.social-icon--ig:hover{color:#e1306c;border-color:rgba(225,48,108,.3);background:rgba(225,48,108,.05)}
.social-icon--wa:hover{color:#25D366;border-color:rgba(37,211,102,.3);background:rgba(37,211,102,.05)}

/* ── PRAYER FORM ─────────────────────────────────────────────── */
.prayer-card{animation-delay:.4s}
.prayer-header{text-align:center;margin-bottom:1.4rem}
.prayer-emoji{display:block;font-size:1.9rem;margin-bottom:.5rem}
.prayer-title{
  font-family:var(--font-display);font-size:1.45rem;font-weight:600;
  color:var(--blue-900);
  margin-bottom:.3rem;
}
.prayer-subtitle{font-size:.82rem;font-weight:400;color:var(--text-secondary);line-height:1.65;max-width:30ch;margin:0 auto}

.prayer-form{display:flex;flex-direction:column;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-700);
}
.form-input,.form-textarea{
  width:100%;padding:.78rem 1rem;border-radius:var(--r-sm);
  background:#ffffff;border:1px solid rgba(203, 213, 225, 0.8);
  color:var(--blue-900);font-size:.88rem;font-weight:400;line-height:1.55;outline:none;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.02);
}
.form-textarea{resize:vertical;min-height:96px}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted);font-style:italic}
.form-input:focus,.form-textarea:focus{
  border-color:var(--blue-600);
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Success state */
.prayer-success{text-align:center;padding:2rem 0;animation:fade-up .6s var(--ease-out) both}
.success-star{font-size:2.4rem;color:var(--gold-400);margin-bottom:1rem;animation:pulse-star 2s ease-in-out infinite}
@keyframes pulse-star{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.success-title{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--blue-900);margin-bottom:.3rem}
.success-msg{font-size:.84rem;font-weight:400;color:var(--text-secondary);line-height:1.7;max-width:28ch;margin:0 auto}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer{
  text-align:center;padding:1rem 0 1.5rem;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  animation:fade-up .6s var(--ease-out) .5s both;
}
.footer-cross{font-size:.6rem;color:var(--gold-400);opacity:.7;margin-bottom:.25rem}
.footer-name{font-family:var(--font-display);font-size:.92rem;font-weight:600;color:var(--blue-900);letter-spacing:.04em}
.footer-copy{font-size:.68rem;font-weight:400;color:var(--text-muted);letter-spacing:.06em}
.footer-verse{
  font-family:var(--font-serif);font-style:italic;font-size:.78rem;font-weight:400;
  color:var(--text-secondary);max-width:32ch;line-height:1.7;margin-top:.2rem;opacity:.85;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:360px){
  .page-wrapper{padding:2rem .85rem 1.5rem}
  .hero-name{font-size:1.8rem}
  .card{padding:1.3rem 1.1rem}
  .timer-display{font-size:2.4rem}
}
@media(min-width:520px){
  .page-wrapper{padding:3rem 1.5rem 2.5rem}
}