/* ============================================================
   Kathirvel's Memory Lane — custom styles
   (Layout/spacing/colors are handled by Tailwind utility classes
   in index.html. This file only covers effects Tailwind can't
   express cleanly: fonts, gradients, timeline rail, masonry,
   reveal animation, and a couple of hover/focus refinements.)
   ============================================================ */

:root {
  --bg: #F6F1E6;
  --bg-alt: #EFE7D8;
  --ink: #23302B;
  --ink-soft: #4B5B54;
  --teal: #3F6659;
  --teal-deep: #223A33;
  --gold: #C49A44;
  --gold-light: #D9C285;
  --rose: #B4816F;
  --line: rgba(35, 48, 43, 0.14);
  --card: #FFFDF8;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
}

.font-display {
  font-family: 'Fraunces', serif;
}

/* Hero background */
.hero-bg {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(196, 154, 68, 0.14), transparent 55%),
    linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 100%);
}

.closing-bg {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(196, 154, 68, 0.14), transparent 55%),
    linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
}

/* Portrait ring around hero photo */
.portrait-ring {
  border: 1px solid rgba(217, 194, 133, 0.45);
  box-shadow: 0 0 0 8px rgba(217, 194, 133, 0.06), 0 20px 60px rgba(0,0,0,0.25);
}

/* Section eyebrow */
.eyebrow {
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Divider */
.divider-gold {
  width: 36px;
  height: 2px;
  background: var(--gold);
}

/* Timeline vertical rail */
.tl-track {
  position: relative;
}
.tl-track::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: rgba(217, 194, 133, 0.35);
}
.tl-dot {
  box-shadow: 0 0 0 1px rgba(217, 194, 133, 0.4);
}

/* Gallery masonry */
.masonry {
  column-count: 1;
  column-gap: 14px;
}
@media (min-width: 640px) {
  .masonry { column-count: 2; }
}
@media (min-width: 900px) {
  .masonry { column-count: 3; }
}
.masonry .m-item {
  break-inside: avoid;
  margin-bottom: 14px;
}
.masonry .m-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Tributes horizontal scroll */
.tributes-track {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.tributes-track::-webkit-scrollbar {
  height: 6px;
}
.tributes-track::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

/* Reveal-on-scroll (subtle, respects reduced motion via rule above) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav link underline on hover */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* Gallery filter tab active state handled via JS toggling Tailwind classes,
   but keep a transition here */
.gallery-tab {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Video play button */
.play-button {
  transition: transform 0.25s ease;
}
.video-frame:hover .play-button {
  transform: scale(1.08);
}

.signature-logo {
  filter: brightness(0) invert(1);
}

/* Candle flame animation */
#candle-visual svg {
  filter: drop-shadow(0 0 10px rgba(242, 169, 59, 0.55));
}
.flame-group {
  transform-origin: 30px 40px;
  animation: flame-sway 2.2s ease-in-out infinite;
}
.flame-outer {
  transform-origin: 30px 40px;
  animation: flame-outer 1.8s ease-in-out infinite;
}
.flame-inner {
  transform-origin: 30px 36px;
  animation: flame-inner 1.4s ease-in-out infinite;
}
@keyframes flame-sway {
  0%, 100% { transform: rotate(-2deg) scaleY(1); }
  25%      { transform: rotate(1deg)  scaleY(1.04); }
  50%      { transform: rotate(-1deg) scaleY(0.97); }
  75%      { transform: rotate(2deg)  scaleY(1.02); }
}
@keyframes flame-outer {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.05); }
}
@keyframes flame-inner {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(0.92); }
}
.candle-just-lit {
  animation: candle-pulse 1.1s ease-out;
}
@keyframes candle-pulse {
  0%   { filter: drop-shadow(0 0 10px rgba(242, 169, 59, 0.55)); }
  40%  { filter: drop-shadow(0 0 26px rgba(242, 169, 59, 0.9)); }
  100% { filter: drop-shadow(0 0 10px rgba(242, 169, 59, 0.55)); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }