/* =====================================================================
 *  birthday.css — the home page's birthday CARD SLIDESHOW
 *
 *  A NEW file, loaded only by index.html, so nothing here can touch the
 *  look of any section that already exists.  One section, three SKINS
 *  (classic / festive / minimal) chosen from the admin panel — same
 *  layout, different background and frame.
 *
 *  THE CARD is a proper birthday greeting card, not a list row:
 *    · the "Happy Birthday" heading across the top;
 *    · the member's PHOTOGRAPH at exactly 3.5 cm × 4.5 cm — the card
 *      photo size — in a white mount inside a rainbow ring;
 *    · NAME, then the details a card prints: MEMBER ID, DISTRICT and
 *      DATE OF BIRTH, each on its own labelled line;
 *    · the wishing message, and the association's name at the foot.
 *
 *  THE STAGE shows ONE card in the middle with the neighbours peeking
 *  in at the sides, and JS slides to the next every five seconds.  No
 *  keyframe marquee lives here any more: the movement is a single
 *  transform the script rewrites, so hover, focus and the OS motion
 *  preference can all stop it.  Dots, arrows and a thin progress line
 *  sit under the stage; balloons drift behind everything.
 * ===================================================================== */

.bday-strip {
  --bday-bg: #142850;
  --bday-card: #ffffff;
  --bday-accent: #f5b301;
  --bday-ink: #142850;
  --bday-soft: #6b7280;
  --bday-rainbow: linear-gradient(135deg, #ff4d8d 0%, #f5b301 30%, #22c55e 62%, #3b82f6 100%);
  position: relative;
  display: block;
  padding: 54px 0 58px;
  background: linear-gradient(180deg, #0f1f3d 0%, #142850 55%, #1a3162 100%);
  color: #fff;
  overflow: hidden;
}

/* `hidden` on the section is what keeps it off the page on an ordinary
 * day — and an AUTHOR `display` would outrank the browser's own
 * `[hidden]` rule and show the empty shell anyway, so the attribute is
 * honoured here explicitly. */
.bday-strip[hidden] { display: none; }

/* ---- confetti behind everything -------------------------------- */
.bday-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 18px 26px, rgba(255, 77, 141, 0.85) 5px, transparent 6px),
    radial-gradient(circle at 78px 86px, rgba(245, 179, 1, 0.8) 4px, transparent 5px),
    radial-gradient(circle at 136px 44px, rgba(34, 197, 94, 0.75) 5px, transparent 6px),
    radial-gradient(circle at 56px 148px, rgba(59, 130, 246, 0.8) 4px, transparent 5px),
    radial-gradient(circle at 150px 130px, rgba(168, 85, 247, 0.7) 4px, transparent 5px);
  background-size: 190px 185px;
}

/* ---- skins: only the palette changes, the layout is shared ---- */
.bday-strip[data-style="festive"] {
  --bday-bg: #3b0a45;
  --bday-accent: #ff4d8d;
  --bday-ink: #3b0a45;
  background: linear-gradient(180deg, #2a0731 0%, #3b0a45 55%, #551063 100%);
}

.bday-strip[data-style="minimal"] {
  --bday-bg: #f6f7f9;
  --bday-card: #ffffff;
  --bday-accent: #142850;
  --bday-ink: #142850;
  --bday-soft: #6b7280;
  background: #f6f7f9;
  color: #142850;
}

.bday-strip[data-style="minimal"]::before { opacity: 0.28; }

/* ---- balloons drifting behind the stage ------------------------- */

.bday-balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bday-balloon {
  position: absolute;
  top: -70px;
  width: 34px;
  height: 42px;
  border-radius: 50% 50% 48% 48%;
  opacity: 0.5;
  animation: bday-float linear infinite;
}

.bday-balloon::after {               /* the knot */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid currentColor;
}

.bday-balloon:nth-child(1) { left: 6%;  color: #ff4d8d; background: #ff4d8d; animation-duration: 17s; animation-delay: -3s; }
.bday-balloon:nth-child(2) { left: 22%; color: #f5b301; background: #f5b301; animation-duration: 21s; animation-delay: -11s; transform: scale(0.8); }
.bday-balloon:nth-child(3) { left: 74%; color: #22c55e; background: #22c55e; animation-duration: 19s; animation-delay: -7s; transform: scale(1.15); }
.bday-balloon:nth-child(4) { left: 90%; color: #a855f7; background: #a855f7; animation-duration: 24s; animation-delay: -15s; transform: scale(0.9); }

@keyframes bday-float {
  from { transform: translateY(-60px) rotate(-8deg); }
  to   { transform: translateY(140vh) rotate(10deg); }
}

.bday-strip[data-style="minimal"] .bday-balloon { opacity: 0.3; }

.bday-inner {
  position: relative;          /* above the confetti and balloons */
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.bday-head {
  text-align: center;
  margin-bottom: 26px;
}

.bday-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bday-accent);
  margin-bottom: 8px;
}

.bday-title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  margin: 0;
  color: #fff;                  /* fallback if background-clip: text is not */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bday-title {
    background: linear-gradient(90deg, #ffd166 0%, #ff8fab 45%, #80ffdb 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

/* =====================================================================
 *  THE STAGE — one card in the middle, neighbours peeking at the sides
 * ===================================================================== */

.bday-stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

/* The mask lives HERE, not on the stage: it belongs to the cards, and
   an ancestor's mask would fade the arrows at the edges as well. */
.bday-viewport {
  overflow: hidden;
  /* fade the edges so the peeking cards dissolve rather than clip */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.bday-track {
  display: flex;
  gap: 22px;
  padding: 10px 0 14px;
  /* the script rewrites this one value — everything else is static */
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* =====================================================================
 *  ONE GREETING CARD
 * ===================================================================== */

.bday-card {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 8.6cm;
  max-width: 84vw;
  padding: 18px 18px 16px;
  text-align: center;
  border-radius: 18px;
  position: relative;
  color: var(--bday-ink);
  /* white card body inside a RAINBOW frame: the first background is the
     padding-box (the card itself), the second shows through the border. */
  background-image: linear-gradient(var(--bday-card), var(--bday-card)), var(--bday-rainbow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid transparent;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
  opacity: 0.72;                /* the side cards read as "not now" */
}

/* The card in the middle is the one being celebrated. */
.bday-card.is-active {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

.bday-card:hover {
  opacity: 1;
  transform: translateY(-8px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.36);
}

.bday-strip[data-style="minimal"] .bday-card {
  box-shadow: 0 8px 20px rgba(20, 40, 80, 0.10);
  opacity: 0.85;
}

.bday-strip[data-style="minimal"] .bday-card.is-active { box-shadow: 0 16px 34px rgba(20, 40, 80, 0.16); }

.bday-cake {
  position: absolute;
  top: -14px;
  right: -8px;
  font-size: 1.45rem;
  transform: rotate(14deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
  z-index: 2;
}

/* ---- the "Happy Birthday" heading on the card ------------------- */

.bday-hb {
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 26%, #16a34a 52%, #2563eb 76%, #9333ea 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
}

/* A slow light-sweep across the heading — the one moving part on a
   card the eye should land on.  Driven by CSS only, paused with the
   rest of the motion under prefers-reduced-motion. */
.bday-hb::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: bday-sheen 3.8s ease-in-out infinite;
}

@keyframes bday-sheen {
  0%, 55% { left: -60%; }
  100%    { left: 130%; }
}

/* ---- the photograph: exactly 3.5 cm × 4.5 cm (card photo size) ---- */

.bday-photo {
  box-sizing: border-box;
  width: 3.5cm;
  height: 4.5cm;
  margin: 0 auto 12px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* white photo mount + the same rainbow ring as the card frame */
  background-image: linear-gradient(#ffffff, #ffffff), var(--bday-rainbow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 3px solid transparent;
  box-shadow: 0 10px 22px rgba(20, 40, 80, 0.35);
}

.bday-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* a portrait picture fills the card slot */
  display: block;
}

/* No photograph on file: initials, same as the directory cards. */
.bday-initials {
  font-size: 2.3rem;
  font-weight: 700;
  color: #9aa4b5;
}

/* ---- name, age, the printed details, the wish, the signature ---- */

.bday-name {
  display: block;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
  /* a long name must not stretch the card the stage is measured by */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bday-age {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--bday-accent);
  margin-bottom: 10px;
}

.bday-fields {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f5f7fc;
  border: 1px solid #e8edf7;
  text-align: left;
}

.bday-strip[data-style="minimal"] .bday-fields { background: #f6f7f9; }

.bday-field {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}

.bday-field + .bday-field { border-top: 1px dashed #e2e8f4; }

.bday-field dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b94a7;
  white-space: nowrap;
}

.bday-field dd {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bday-ink);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bday-wish {
  display: block;
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--bday-soft);
}

.bday-strip[data-style="classic"] .bday-wish,
.bday-strip[data-style="festive"] .bday-wish {
  color: #6b7280;
}

.bday-org {
  display: block;
  padding-top: 9px;
  border-top: 1px solid #eef1f8;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bday-accent);
}

/* =====================================================================
 *  THE CONTROLS — arrows, dots, the five-second progress line
 * ===================================================================== */

.bday-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.bday-nav:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.08); }
.bday-nav:focus-visible { outline: 3px solid var(--bday-accent); outline-offset: 2px; }

.bday-prev { left: max(4px, calc(50% - 470px)); }
.bday-next { right: max(4px, calc(50% - 470px)); }

.bday-strip[data-style="minimal"] .bday-nav {
  background: #ffffff;
  border-color: #d8dee9;
  color: #142850;
}

.bday-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.bday-dots {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
}

.bday-dots[hidden] { display: none; }

.bday-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background 0.2s ease, width 0.25s ease, border-radius 0.25s ease;
}

.bday-dot.is-on {
  width: 26px;
  border-radius: 999px;
  background: var(--bday-accent);
}

.bday-dot:focus-visible { outline: 3px solid var(--bday-accent); outline-offset: 3px; }

.bday-strip[data-style="minimal"] .bday-dot { background: #d3d9e4; }

/* Five seconds, drawn: the line fills while the card is on screen and
   stops the moment the reader takes over. */
.bday-progress {
  width: min(320px, 70%);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.bday-strip[data-style="minimal"] .bday-progress { background: #e6e9f0; }

.bday-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bday-accent), #ff8fab);
  transform: translateX(-100%);
}

.bday-progress.bday-run i { animation: bday-progress 5s linear forwards; }

@keyframes bday-progress {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  .bday-strip { padding: 38px 0 42px; }
  .bday-card { width: 7.6cm; padding: 15px 14px 14px; }
  /* the photograph keeps its 3.5 cm × 4.5 cm size on every screen —
     that is the card's picture slot, not a responsive decoration */
  .bday-track { gap: 14px; }
  .bday-nav { width: 36px; height: 36px; font-size: 1.05rem; }
  .bday-prev { left: 2px; }
  .bday-next { right: 2px; }
  .bday-fields { padding: 7px 10px; }
}

/* Respect the OS setting: the card does not move on its own — the
   arrows and the dots still walk through the birthdays by hand. */
@media (prefers-reduced-motion: reduce) {
  .bday-track { transition: none; }
  .bday-hb::after { animation: none; display: none; }
  .bday-balloon { animation: none; top: 8%; opacity: 0.35; }
  .bday-card { transition: none; transform: none; }
  .bday-progress { display: none; }
}