/* =========================================================
   HOLYCHILD HOMEPAGE VISUAL ENHANCEMENTS
   ========================================================= */
:root {
    --hc-green: #174b32;
    --hc-deep-green: #0b3021;
    --hc-gold: #c5a04b;
    --hc-cream: #f8f7f1;
    --hc-ink: #203329;
    --hc-muted: #68776d;
}

html { scroll-behavior: smooth; }
body { color: var(--hc-ink); }
main { overflow: hidden; }
.section { padding-top: 88px; padding-bottom: 88px; }
.section-heading { margin-bottom: 36px; }
.section-heading h2,
.welcome-copy h2 { letter-spacing: -.035em; }
.section-heading h2 span,
.welcome-copy h2 span { color: var(--hc-gold); }
.eyebrow { letter-spacing: .16em; font-size: 11px; font-weight: 800; }

/* Hero banner */
.hero { position: relative; isolation: isolate; background: var(--hc-deep-green); }
.hero-slide { min-height: 590px; background-position: center; background-size: cover; }
.hero-content { max-width: 1240px; padding-top: 110px; padding-bottom: 100px; }
.hero-content .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.32); border-radius: 30px; background: rgba(255,255,255,.08); backdrop-filter: blur(5px); }
.hero-content h1 { max-width: 780px; margin: 22px 0 18px; font-size: clamp(42px, 5.1vw, 70px); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.hero-content h1 span { color: #e5c66e; }
.hero-content p { max-width: 590px; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.button { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.button-gold { box-shadow: 0 7px 20px rgba(197,160,75,.22); }
.hero-text-link { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); padding: 8px 0; }
.hero-text-link:hover { color: #e5c66e; border-color: #e5c66e; }
.hero-bottom { border-top: 1px solid rgba(255,255,255,.16); background: rgba(5,35,24,.82); }
.hero-dot { transition: transform .2s ease, background .2s ease; }
.hero-dot:hover { transform: scale(1.25); }
.hero-arrows button { transition: background .2s ease, color .2s ease; }
.hero-arrows button:hover { background: var(--hc-gold); color: var(--hc-deep-green); }

/* Welcome section */
.welcome-section { position: relative; background: #fff; }
.welcome-grid { align-items: center; gap: clamp(40px, 7vw, 90px); }
.welcome-visual { filter: drop-shadow(0 18px 26px rgba(19,57,38,.08)); }
.welcome-photo { border-radius: 10px 70px 10px 10px; background-position: center; }
.welcome-crest { border: 1px solid rgba(197,160,75,.4); box-shadow: 0 12px 28px rgba(20,54,36,.12); }
.welcome-label { box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.welcome-copy .lead { color: #3e5547; font-size: 19px; line-height: 1.8; }
.welcome-copy p:not(.lead) { color: var(--hc-muted); line-height: 1.9; }

/* Section headings and leadership */
.leadership-section { background: linear-gradient(180deg, #f8f7f1 0%, #fff 100%); }
.leadership-heading { max-width: 700px; margin-left: auto; margin-right: auto; }
.leadership-grid { gap: 24px; }
.leader-card { overflow: hidden; border: 1px solid #e8e9df; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(19,57,38,.055); transition: transform .3s ease, box-shadow .3s ease; }
.leader-card:hover { transform: translateY(-7px); box-shadow: 0 20px 38px rgba(19,57,38,.13); }
.leader-photo { overflow: hidden; background: #e7ece7; }
.leader-photo img { transition: transform .5s ease; }
.leader-card:hover .leader-photo img { transform: scale(1.045); }
.leader-number { border: 2px solid rgba(255,255,255,.8); }
.leader-info { padding: 24px; }
.leader-info h3 { margin-top: 8px; color: var(--hc-green); }
.leader-info p { color: var(--hc-muted); line-height: 1.75; }

/* Values section */
.values-section { position: relative; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(197,160,75,.16), transparent 28%), linear-gradient(135deg, #0b3021, #174b32 65%, #205c3d); }
.values-section .section-heading p { color: rgba(255,255,255,.75); }
.value-grid { gap: 22px; }
.value-card { position: relative; padding: 32px 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.07); backdrop-filter: blur(5px); transition: transform .28s ease, background .28s ease, border-color .28s ease; }
.value-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.12); border-color: rgba(229,198,110,.65); }
.value-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 14px; color: #f0d98f; background: rgba(197,160,75,.16); font-size: 25px; }
.value-card h3 { color: #fff; }
.value-card p { color: rgba(255,255,255,.76); line-height: 1.8; }
.value-card a { display: inline-flex; gap: 8px; margin-top: 10px; color: #f0d98f; font-weight: 800; text-decoration: none; }
.value-card a:hover { color: #fff; }

/* News cards */
.news-section { background: #fff; }
.heading-row { align-items: end; }
.section-link { color: var(--hc-green); font-weight: 800; text-decoration: none; border-bottom: 1px solid var(--hc-gold); padding-bottom: 7px; }
.section-link:hover { color: #9b7526; }
.news-grid { gap: 24px; }
.news-card { overflow: hidden; border: 1px solid #e9ece7; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(20,54,36,.055); transition: transform .3s ease, box-shadow .3s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(20,54,36,.12); }
.news-image { overflow: hidden; background-position: center; }
.news-image:before { transition: opacity .3s ease; }
.news-card:hover .news-image { background-size: 108%; }
.news-content { padding: 24px; }
.news-content small { color: #9b792f; letter-spacing: .12em; font-weight: 800; }
.news-content h3 { line-height: 1.45; }
.news-content h3 a { color: var(--hc-green); text-decoration: none; }
.news-content h3 a:hover { color: #9b792f; }
.news-content p { color: var(--hc-muted); line-height: 1.75; }
.read-more { display: inline-flex; gap: 8px; align-items: center; color: var(--hc-green); font-weight: 800; text-decoration: none; }
.read-more:hover { color: #9b792f; }

/* Gallery */
.gallery-section { background: var(--hc-cream); }
.gallery-grid { gap: 14px; }
.gallery-tile { overflow: hidden; border-radius: 10px; background-position: center; box-shadow: 0 8px 24px rgba(10,35,22,.09); transition: transform .3s ease, box-shadow .3s ease; }
.gallery-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(10,35,22,.16); }
.gallery-tile:before { transition: opacity .3s ease; }
.gallery-tile span { padding: 20px; font-weight: 800; }

/* Birthday belt */
.birthday-section { position: relative; overflow: hidden; padding: 65px 0 28px; background: #fff; }
.birthday-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.birthday-icon { display: grid; place-items: center; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18px; background: #f7efd9; font-size: 29px; }
.birthday-heading h2 { margin: 7px 0; color: var(--hc-green); }
.birthday-heading p { margin: 0; color: var(--hc-muted); }
.birthday-date { margin-left: auto; padding: 12px 17px; border: 1px solid #eadcb7; border-radius: 30px; color: #775a1c; background: #fbf7eb; font-size: 13px; font-weight: 800; white-space: nowrap; }
.birthday-person { transition: transform .25s ease; }
.birthday-person:hover { transform: translateY(-5px); }
.birthday-photo-wrap { padding: 4px; border: 2px solid #d6b65d; }
.birthday-person strong { color: var(--hc-green); }
.birthday-person small { color: var(--hc-muted); }
.birthday-note { display: flex; align-items: center; gap: 10px; justify-content: center; padding-top: 24px; color: var(--hc-muted); font-size: 13px; }
.birthday-note span { width: 24px; height: 2px; background: var(--hc-gold); }
/* Continuous, faster birthday belt: duplicate groups make the loop seamless. */
.birthday-window { width: 100%; overflow: hidden; position: relative; padding: 8px 0 14px; }
.birthday-track { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; width: max-content; max-width: none !important; gap: 0 !important; animation: hcBirthdayScroll 16s linear infinite; will-change: transform; }
.birthday-track:hover { animation-play-state: paused; }
.birthday-group { display: flex; flex: 0 0 auto; align-items: stretch; justify-content: flex-end; gap: 24px; padding-right: 24px; box-sizing: border-box; }
.birthday-person { display: flex !important; flex: 0 0 170px; width: 170px; flex-direction: column; align-items: center; text-align: center; padding: 14px 12px; border: 1px solid #edf0e9; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(20,54,36,.07); }
.birthday-photo-wrap { width: 96px; height: 96px; margin-bottom: 12px; padding: 4px; border: 2px solid #d6b65d; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
.birthday-photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.birthday-person strong { display: block; margin: 2px 0 5px; font-size: 14px; line-height: 1.4; }
.birthday-person small { display: block; font-size: 12px; }
@keyframes hcBirthdayScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
    .birthday-track { animation-duration: 13s; }
    .birthday-group { gap: 16px; padding-right: 16px; }
    .birthday-person { flex-basis: 145px; width: 145px; padding: 12px 9px; }
    .birthday-photo-wrap { width: 82px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
    .birthday-track { animation: none; transform: none; width: 100%; overflow-x: auto; }
    .birthday-group[aria-hidden="true"] { display: none; }
    .birthday-window { overflow-x: auto; }
}

/* Call-to-action */
.cta-section { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 0%, rgba(229,198,110,.2), transparent 30%), linear-gradient(120deg, #0b3021, #1d5639); }
.cta-section:after { content: ''; position: absolute; right: -70px; bottom: -170px; width: 350px; height: 350px; border: 1px solid rgba(229,198,110,.22); border-radius: 50%; box-shadow: 0 0 0 35px rgba(229,198,110,.035), 0 0 0 70px rgba(229,198,110,.025); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; gap: 28px; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: rgba(255,255,255,.78); }

/* Footer polish */
.site-footer { border-top: 4px solid var(--hc-gold); }
.footer-grid { gap: 34px; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: #e5c66e; }


/* Infinite flash and breaking-news ticker */
.news-ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background: #103c29;
    border-bottom: 3px solid #c5a04b;
    box-shadow: 0 8px 22px rgba(12, 45, 29, .10);
    isolation: isolate;
}
.news-ticker-label {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 15px 22px;
    color: #173a27;
    background: #e5c66e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    white-space: nowrap;
}
.news-ticker-label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b52d25;
    box-shadow: 0 0 0 4px rgba(181, 45, 37, .14);
    animation: hcTickerPulse 1.4s infinite;
}
.news-ticker-window {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.news-ticker-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: max-content;
    animation: hcNewsTickerScroll 42s linear infinite;
    will-change: transform;
}
.news-ticker:hover .news-ticker-track,
.news-ticker:focus-within .news-ticker-track {
    animation-play-state: paused;
}
.news-ticker-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}
.news-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 17px 28px;
    color: rgba(255,255,255,.93);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.news-ticker-item:hover,
.news-ticker-item:focus {
    color: #f2d987;
}
.news-ticker-item strong {
    color: #f2d987;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}
.news-ticker-item .ticker-separator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c5a04b;
}
@keyframes hcNewsTickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes hcTickerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.82); }
}
@media (max-width: 600px) {
    .news-ticker-label { padding: 14px 13px; font-size: 9px; letter-spacing: .08em; }
    .news-ticker-item { padding: 15px 20px; font-size: 12px; }
    .news-ticker-track { animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) {
    .news-ticker-label:before { animation: none; }
    .news-ticker-track { animation: none; width: 100%; overflow-x: auto; }
    .news-ticker-group[aria-hidden="true"] { display: none; }
    .news-ticker-window { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* Responsive refinements */
@media (max-width: 900px) {
    .section { padding-top: 68px; padding-bottom: 68px; }
    .hero-slide { min-height: 530px; }
    .hero-content { padding-top: 85px; padding-bottom: 85px; }
    .birthday-heading { align-items: flex-start; flex-wrap: wrap; }
    .birthday-date { margin-left: 80px; }
}
@media (max-width: 600px) {
    .section { padding-top: 54px; padding-bottom: 54px; }
    .hero-slide { min-height: 500px; }
    .hero-content { padding-top: 70px; padding-bottom: 70px; }
    .hero-content h1 { font-size: clamp(36px, 10vw, 48px); }
    .hero-content p { font-size: 15px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
    .hero-bottom-inner { gap: 12px; }
    .hero-motto { font-size: 10px; letter-spacing: .1em; }
    .welcome-photo { border-top-right-radius: 42px; }
    .leader-info { padding: 20px; }
    .value-card { padding: 25px 22px; }
    .news-content { padding: 20px; }
    .birthday-heading { gap: 14px; }
    .birthday-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 23px; }
    .birthday-heading > div:nth-child(2) { flex: 1; min-width: 190px; }
    .birthday-date { margin-left: 62px; }
    .cta-inner { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}