/*
Theme Name: Akin Memorial
Theme URI: https://houseofblazed.com
Author: Sol
Description: In loving memory of William Akinwale Akinfolarin (Akin). A plugin-free memorial and condolence theme with a moderated tribute wall, server-side candle counter, rotating portrait hero, and looping tribute song.
Version: 1.0.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: akin-memorial
*/

:root{
  --ivory:#F7F2E6;
  --paper:#FFFDF7;
  --gold:#C39A45;
  --gold-bright:#E4BE6A;
  --charcoal:#2A241C;
  --ink:#332C22;
  --muted:#8A8172;
  --line:#E7DEC8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Karla',sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  min-height:96vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:64px 20px 40px;
  overflow:hidden;
  background:var(--ivory);
}
.slideshow{position:absolute;inset:0;z-index:0}
.slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 18%;
  opacity:0;
  transition:opacity 1s ease;
  filter:sepia(.18) saturate(.88) brightness(1.03);
  transform:scale(1.02);
}
.slide.on{opacity:1}
.slide-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(247,242,230,.62) 0%, rgba(247,242,230,.78) 55%, rgba(247,242,230,.95) 100%),
    linear-gradient(180deg, rgba(247,242,230,.55) 0%, rgba(247,242,230,.35) 40%, var(--ivory) 98%);
}

.hero-text{
  position:relative;z-index:2;
  text-align:center;
  max-width:720px;
  opacity:0;
  animation:heroIn 1.6s ease .2s forwards;
}
@keyframes heroIn{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:translateY(0)}
}
.hx-in{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--charcoal);text-indent:.5em;
}
.hx-loving{
  font-family:'Great Vibes',cursive;
  font-size:clamp(58px,10vw,88px);
  line-height:.9;
  color:var(--gold);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  margin-top:2px;
}
.hx-memory{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:clamp(34px,6vw,54px);
  letter-spacing:.22em;text-transform:uppercase;text-indent:.22em;
  color:var(--charcoal);
  margin-top:-6px;
}
.hx-orn{color:var(--gold);font-size:22px;margin:10px 0 14px}
.hx-name{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:clamp(24px,4.2vw,34px);
  letter-spacing:.04em;
  color:var(--charcoal);
  text-transform:uppercase;
}
.hx-name span{white-space:nowrap}
.hx-dates{
  display:flex;align-items:stretch;justify-content:center;gap:34px;
  margin:26px 0 24px;
}
.hx-date{display:flex;flex-direction:column;align-items:center;gap:2px}
.hx-sun{font-size:20px;color:var(--gold)}
.hx-label{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--charcoal);font-weight:700;margin-top:4px;
}
.hx-val{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--ink)}
.hx-sep{width:1px;background:linear-gradient(180deg,transparent,var(--gold),transparent)}
.hx-verse{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:20px;
  color:var(--charcoal);line-height:1.5;
}
.hx-ref{
  margin:8px 0 22px;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.hx-services{
  margin-top:26px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  border-top:1px solid rgba(195,154,69,.45);
  padding-top:18px;
}
@media(max-width:640px){.hx-services{grid-template-columns:1fr;gap:18px}}
.hx-service{display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--ink)}
.hx-service-label{
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.hx-service-when{font-weight:700;color:var(--charcoal)}
.hx-service-where{font-size:13.5px;color:var(--muted);line-height:1.5}

.candle-count{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,253,247,.75);
  border:1px solid rgba(195,154,69,.55);
  border-radius:999px;
  padding:10px 24px;
  font-size:14px;letter-spacing:.04em;
  color:var(--charcoal);
  cursor:pointer;
  transition:background .25s, transform .15s;
  user-select:none;
  font-family:'Karla',sans-serif;
  backdrop-filter:blur(3px);
}
.candle-count:hover{background:rgba(195,154,69,.18)}
.candle-count:active{transform:scale(.97)}
.candle-count strong{color:var(--gold)}

/* music toggle */
.music-wrap{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:10px}
.music-hint{
  background:var(--charcoal);color:var(--ivory);
  font-size:12.5px;letter-spacing:.03em;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(195,154,69,.5);
  box-shadow:0 4px 14px rgba(42,36,28,.3);
  white-space:nowrap;
}
.music-btn{
  position:relative;z-index:50;
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--gold);
  background:var(--charcoal);
  color:var(--gold-bright);
  font-size:21px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(42,36,28,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, background .25s;
}
.music-btn:hover{transform:scale(1.06)}
.music-btn.playing .music-icon{animation:noteBob 1.2s ease-in-out infinite}
@keyframes noteBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
.music-btn.paused{background:#4A4032}
.music-btn.paused::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(228,190,106,.7);
  animation:pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.9);opacity:.9}
  100%{transform:scale(1.35);opacity:0}
}

/* candle flame */
.flame{
  width:10px;height:14px;flex:none;
  background:radial-gradient(circle at 50% 80%, #E4BE6A 0%, #C67B22 60%, transparent 75%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  animation:flicker 1.6s ease-in-out infinite alternate;
  transform-origin:50% 100%;
}
@keyframes flicker{
  0%{transform:scaleY(1) rotate(-1.5deg);opacity:.92}
  50%{transform:scaleY(1.12) rotate(1deg);opacity:1}
  100%{transform:scaleY(.95) rotate(-.5deg);opacity:.88}
}

/* candle with flame (tribute markers) */
.candle{
  position:relative;
  width:16px;height:34px;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.candle .flame{width:8px;height:12px}
.candle .glow{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle, rgba(228,190,106,.45) 0%, rgba(228,190,106,0) 70%);
  animation:glowPulse 1.6s ease-in-out infinite alternate;
}
@keyframes glowPulse{from{opacity:.7;transform:translateX(-50%) scale(.9)}to{opacity:1;transform:translateX(-50%) scale(1.08)}}
.candle .wax{
  width:9px;height:17px;margin-top:1px;
  background:linear-gradient(180deg,#F6EDD7 0%,#E8D9B4 55%,#D9C494 100%);
  border-radius:3px 3px 2px 2px;
  box-shadow:inset -2px 0 3px rgba(163,133,72,.35);
  position:relative;
}
.candle .wax::before{
  content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:1.5px;height:4px;background:#4A3B22;border-radius:1px;
}
.candle .wax::after{
  content:"";position:absolute;top:-1px;left:1px;right:1px;height:3px;
  background:radial-gradient(ellipse at 50% 0%, #FBF5E4 40%, transparent 75%);
  border-radius:50%;
}

/* gold ornamental divider */
.divider{
  display:flex;align-items:center;gap:14px;
  max-width:420px;margin:44px auto 0;
  position:relative;z-index:2;width:100%;
}
.divider::before,.divider::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.divider::after{background:linear-gradient(90deg, var(--gold), transparent)}
.divider span{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:20px;line-height:1}

/* ---------------- SECTIONS ---------------- */
.section{max-width:960px;margin:0 auto;padding:60px 24px}
/* Sections are visible by default; the fade-in only applies once JS
   confirms it is running (html.akin-js) so content can never be stuck hidden. */
.akin-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s ease}
.akin-js .reveal.in{opacity:1;transform:none}
.section-label{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:10px;text-align:center;
}
.section h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;font-size:36px;color:var(--charcoal);
  text-align:center;margin-bottom:12px;
}
.section-sub{
  text-align:center;color:var(--muted);
  max-width:480px;margin:0 auto 42px;font-size:15px;
}

/* ---------------- FORM ---------------- */
.form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:12px;
  padding:36px 32px;
  max-width:560px;margin:0 auto;
  box-shadow:0 8px 28px rgba(42,36,28,.07);
}
.form-card label{
  display:block;font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--charcoal);margin:0 0 7px;
}
.form-card input[type=text], .form-card textarea{
  width:100%;
  font-family:'Karla',sans-serif;
  font-size:16px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--ivory);
  color:var(--ink);
  margin-bottom:20px;
  transition:border-color .2s;
}
.form-card input:focus, .form-card textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  border-color:var(--gold);
}
.form-card textarea{min-height:120px;resize:vertical}
.hp-field{position:absolute !important;left:-9999px !important;opacity:0;height:0;overflow:hidden}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  background:var(--charcoal);
  color:var(--ivory);
  border:none;border-radius:8px;
  font-family:'Karla',sans-serif;
  font-size:16px;font-weight:700;letter-spacing:.03em;
  padding:15px 20px;cursor:pointer;
  transition:background .25s, opacity .25s;
}
.btn:hover{background:#453B2C}
.btn:disabled{opacity:.55;cursor:wait}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.form-note{font-size:13px;color:var(--muted);text-align:center;margin-top:16px}
.thanks{
  display:none;
  text-align:center;
  background:rgba(195,154,69,.1);
  border:1px solid var(--gold);
  border-radius:8px;
  padding:16px;margin-top:18px;
  font-size:15px;color:var(--charcoal);
}
.thanks.error{border-color:#B0553C;background:rgba(176,85,60,.08)}

/* ---------------- WALL ---------------- */
.wall{columns:2;column-gap:22px;max-width:820px;margin:0 auto}
@media(max-width:680px){.wall{columns:1}}
.tribute{
  break-inside:avoid;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px 26px 22px;
  margin-bottom:22px;
  box-shadow:0 4px 16px rgba(42,36,28,.05);
}
.tribute-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tribute-name{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;font-weight:600;color:var(--charcoal);
  line-height:1.2;
}
.tribute-rel{font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.tribute-msg{font-size:15.5px;line-height:1.65}
.tribute-date{
  margin-top:14px;font-size:11.5px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.wall-empty{
  text-align:center;color:var(--muted);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;
}

/* ---------------- FOOTER ---------------- */
.site-footer{
  background:var(--charcoal);color:rgba(247,242,230,.7);
  text-align:center;padding:44px 24px;
  font-size:13.5px;letter-spacing:.04em;
}
.site-footer .flame{margin:0 auto 14px}
.site-footer .fname{
  font-family:'Cormorant Garamond',serif;
  font-size:19px;color:var(--gold-bright);
  letter-spacing:.02em;margin-bottom:4px;
}
.site-footer .f-label{
  color:var(--gold-bright);letter-spacing:.2em;text-transform:uppercase;
  font-size:11.5px;font-weight:700;
}

@media (prefers-reduced-motion: reduce){
  .flame,.dust i,.candle .glow,.music-btn.playing .music-icon,.music-btn.paused::after{animation:none}
  .hero-text{animation:none;opacity:1}
  .slide{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* floating gold dust */
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.dust i{
  position:absolute;bottom:-12px;
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle, var(--gold-bright) 0%, rgba(228,190,106,0) 72%);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.85}
  85%{opacity:.35}
  100%{transform:translateY(-108vh) translateX(26px);opacity:0}
}
.dust i:nth-child(1){left:8%;  animation-duration:13s; animation-delay:0s}
.dust i:nth-child(2){left:18%; animation-duration:17s; animation-delay:3s; width:4px;height:4px}
.dust i:nth-child(3){left:31%; animation-duration:15s; animation-delay:6s}
.dust i:nth-child(4){left:47%; animation-duration:19s; animation-delay:1.5s; width:6px;height:6px}
.dust i:nth-child(5){left:61%; animation-duration:14s; animation-delay:4.5s}
.dust i:nth-child(6){left:73%; animation-duration:18s; animation-delay:8s; width:4px;height:4px}
.dust i:nth-child(7){left:86%; animation-duration:16s; animation-delay:2.5s}
.dust i:nth-child(8){left:94%; animation-duration:20s; animation-delay:7s; width:6px;height:6px}