/* ==========================================================================
   TCC scroll effects + shared brand bar
   Loaded by: index, community, live, news, prophetic-room
   Motion values are set per element by tcc-fx.js through CSS variables:
     --fx-x / --fx-y   start offset      --fx-s  start scale
     --fx-r            start rotation    --fx-clip  clip-path start (photos)
     --fx-dur / --fx-ease / --fx-delay   timing
   Uses CSS animations (not transitions) with fill-mode "backwards", so:
     - nothing is left over after the animation, hover transforms keep working
     - it is not affected by other rules that set `transition`
   ========================================================================== */

/* Hidden until the script marks it visible. Only applies once JS has tagged
   the element, so with JS disabled everything simply shows. */
[data-fx]:not(.fx-in){opacity:0}

[data-fx].fx-in{
  opacity:1;
  animation:fx-slide var(--fx-dur,.9s) var(--fx-ease,cubic-bezier(.22,1,.36,1)) var(--fx-delay,0s) backwards;
  will-change:transform,opacity;
}
[data-fx-kind="photo"].fx-in{
  animation-name:fx-slide,fx-wipe;
  animation-duration:var(--fx-dur,.9s),calc(var(--fx-dur,.9s) * 1.15);
}

@keyframes fx-slide{
  from{
    opacity:0;
    transform:translate3d(var(--fx-x,0),var(--fx-y,40px),0) scale(var(--fx-s,1)) rotate(var(--fx-r,0deg));
  }
  to{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg)}
}
@keyframes fx-wipe{
  from{clip-path:var(--fx-clip,inset(0 100% 0 0))}
  to{clip-path:inset(0 0 0 0)}
}

/* images revealed inside a wiped frame also settle from a slight zoom */
[data-fx-kind="photo"].fx-in img{animation:fx-zoom 1.3s cubic-bezier(.22,1,.36,1) backwards}
@keyframes fx-zoom{from{transform:scale(1.18)}to{transform:scale(1)}}



@media (prefers-reduced-motion:reduce){
  [data-fx]:not(.fx-in){opacity:1}
  [data-fx].fx-in,[data-fx-kind="photo"].fx-in,[data-fx-kind="photo"].fx-in img{animation:none!important}
}

/* ==========================================================================
   Brand bar (logo + church name) used on the feature pages
   ========================================================================== */
.tcc-brandbar{
  position:sticky;top:0;z-index:10000;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:84px;padding:10px 32px;
  background:rgba(9,9,9,.94);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(var(--tcc-red-rgb,21,94,239),.35);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.tcc-brandbar::after{ /* thin blue → red line under the bar */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--tcc-red,#155EEF),var(--crimson,#C1121F));
}
.tcc-brandbar-brand{display:flex;align-items:center;gap:16px;min-width:0;color:#fff;text-decoration:none}
.tcc-brandbar-brand img{width:64px;height:64px;object-fit:contain;flex:0 0 64px}
.tcc-brandbar-brand strong{
  font:600 22px Georgia,"Playfair Display",serif;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcc-brandbar-title{
  font:700 11px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tcc-red2,#7AA7FF);white-space:nowrap;
}
@media (max-width:900px){
  .tcc-brandbar{min-height:72px;padding:8px 16px}
  .tcc-brandbar-brand{gap:11px}
  .tcc-brandbar-brand img{width:52px;height:52px;flex-basis:52px}
  .tcc-brandbar-brand strong{font-size:14px;letter-spacing:.04em}
  .tcc-brandbar-title{font-size:9px;letter-spacing:.14em}
}

[data-fx].fx-done{will-change:auto}

/* feature pages had the browser default 8px body margin (white edge around the page) */
body{margin:0}
.tcc-desktop-hub .hub-label,.tcc-desktop-hub .hub-live{color:var(--tcc-red2,#7AA7FF)}

/* ==========================================================================
   Brand name: "CHURCH" sits centred on its own line under "THE CHRISTOCENTRIC"
   ========================================================================== */
.brand span,.tcc-brandbar-brand strong{display:block;text-align:center;line-height:1.12}
.brand span b{white-space:nowrap}
.brand span em,.tcc-brandbar-brand strong em{
  display:block;font-style:normal;font-weight:500;
  font-size:.72em;letter-spacing:.46em;padding-left:.46em;  /* padding balances the trailing letter-space so it is truly centred */
  margin-top:3px;color:var(--tcc-red2,#7AA7FF);
}
.tcc-brandbar-brand strong{white-space:normal}

/* ==========================================================================
   Page heroes: TCC logo watermark + shadow instead of a flat black block
   Applies to: .hero (home), .page-hero (About, Programs, Partnership,
   College, Give, Contact) and .tcc-hero (Community, Live, News, Prophetic Room)
   ========================================================================== */
.page-hero,.tcc-hero,.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 70% 90% at 50% -10%,rgba(var(--tcc-red-rgb,21,94,239),.34),transparent 62%),
    radial-gradient(ellipse 60% 80% at 100% 110%,rgba(var(--crimson-rgb,193,18,31),.28),transparent 62%),
    linear-gradient(165deg,#0d1838 0%,#0a1024 48%,#16090f 100%);
}
/* the watermark itself: the emblem, large and faint, with a deep soft shadow */
.page-hero:before,.tcc-hero:before,.hero:before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(560px,78vw);height:auto;aspect-ratio:846/727;
  left:auto;bottom:auto;border-radius:0;
  right:7%;top:50%;transform:translateY(-50%);
  background:url(/assets/logo-emblem.png) center/contain no-repeat;
  opacity:.2;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.75)) drop-shadow(0 0 70px rgba(var(--tcc-red-rgb,21,94,239),.4));
}
/* centred heroes (feature pages): watermark sits behind the headline */
.tcc-hero:before{right:auto;left:50%;transform:translate(-50%,-50%);opacity:.14}
/* a soft shadow pooling under the logo, plus a gentle vignette at the edges */
.page-hero:after,.tcc-hero:after,.hero:after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  width:auto;height:auto;border-radius:0;left:0;top:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse 46% 40% at 78% 62%,rgba(0,0,0,.45),transparent 70%),
    radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.45) 100%);
}
.tcc-hero:after{
  background:
    radial-gradient(ellipse 42% 36% at 50% 66%,rgba(0,0,0,.42),transparent 70%),
    radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.45) 100%);
}
/* home hero keeps its photos/video; the watermark sits above them, under the text */
.hero:before{z-index:1;opacity:.16}
.hero:after{z-index:1}
.hero-bg{z-index:0}
.page-hero>*,.tcc-hero>*,.hero>.container,.hero-content{position:relative;z-index:2}
@media (max-width:760px){
  .page-hero:before,.hero:before{right:50%;transform:translate(50%,-50%);width:min(420px,80vw);opacity:.12}
  .tcc-hero:before{width:min(420px,80vw);opacity:.11}
}

/* the brand bar is sticky (not fixed), so no 72px black strip is needed above the hero */
.tcc-feature{padding-top:0}

/* ==========================================================================
   GLASS HEADER — frosted, see-through, instead of flat black
   (main site header + the brand bar / hub / nav strips on the feature pages)
   ========================================================================== */
:root{
  --glass-sheen:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.08) 100%);
  --glass-tint:rgba(10,17,40,.68);          /* navy tint keeps white text readable over light sections */
  --glass-tint-soft:rgba(12,20,46,.24);     /* lighter at the very top of the home page */
  --glass-edge:rgba(255,255,255,.2);
  --glass-blur:blur(22px) saturate(180%);
}
header,header.scrolled,.tcc-brandbar{
  background:var(--glass-sheen),var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 40px rgba(0,0,0,.28);
}
/* top of the home page: lighter glass so the hero shows through */
header:not(.scrolled){background:var(--glass-sheen),var(--glass-tint-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
header .brand,header .navlinks a,.tcc-brandbar-brand{text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* feature pages: the strips under the brand bar become glass too */
.tcc-desktop-hub,.tcc-feature-nav{
  background:var(--glass-sheen),rgba(12,20,46,.38);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* soft blue + red glow behind the top of feature pages, so the glass has something to frost */
body:has(.tcc-brandbar){position:relative}
body:has(.tcc-brandbar)::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:340px;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 120% at 16% 0,rgba(var(--tcc-red-rgb,21,94,239),.55),transparent 70%),
    radial-gradient(ellipse 42% 120% at 86% 0,rgba(var(--crimson-rgb,193,18,31),.45),transparent 70%),
    #090909;   /* dark base so the glass frosts a dark glow, not the page's light backdrop */
}
/* browsers without backdrop-filter: fall back to a solid-but-tinted bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header,header.scrolled,.tcc-brandbar{background:rgba(10,16,38,.95)}
  .tcc-desktop-hub,.tcc-feature-nav{background:rgba(10,16,38,.9)}
}

/* mobile dropdown menu: stays nearly solid so links are always readable, but in the navy of the glass bar rather than black */
.navlinks.open{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(10,17,40,.95);border-color:rgba(255,255,255,.16);box-shadow:0 18px 50px rgba(0,0,0,.45)}

/* ==========================================================================
   PROGRAMS PAGE — flyer cards, home thumbnails, full-size viewer
   ========================================================================== */
.flyer-grid{columns:2;column-gap:30px}
.flyer{break-inside:avoid;display:inline-block;width:100%;margin:0 0 30px;background:#fff;border:1px solid #ddd3c2;box-shadow:0 18px 44px -26px rgba(10,16,40,.45);overflow:hidden}
.flyer-img{position:relative;display:block;width:100%;padding:0;border:0;background:#0b1020;cursor:zoom-in;line-height:0}
.flyer-img img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.flyer-img:hover img,.flyer-img:focus-visible img{transform:scale(1.025)}
.flyer-img:focus-visible{outline:3px solid var(--red,#155EEF);outline-offset:-3px}
.flyer-zoom{position:absolute;right:14px;bottom:14px;line-height:1;padding:9px 13px;background:rgba(10,17,40,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 10px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:.3s}
.flyer-img:hover .flyer-zoom,.flyer-img:focus-visible .flyer-zoom{opacity:1;transform:none}
.flyer-body{padding:24px 26px 26px}
.flyer-when{font:700 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red,#155EEF);margin-bottom:10px}
.flyer h3{font:500 27px/1.2 "Playfair Display",serif;margin:0 0 8px}
.flyer p{color:#6d675c;font-size:14px;line-height:1.65;margin:6px 0 0}
.flyer .flyer-loc{color:#8a8374;font-size:13px}
.flyer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.flyer-actions .btn{padding:11px 16px;font-size:11px}
.programs-empty{padding:50px 0;color:#6d675c;font-size:15px}
.event.has-img{grid-template-columns:150px 1fr auto}
.ev-thumb{padding:0;border:0;background:#0b1020;cursor:zoom-in;line-height:0;overflow:hidden;box-shadow:0 10px 26px -14px rgba(10,16,40,.6)}
.ev-thumb img{display:block;width:100%;height:auto;max-height:110px;object-fit:cover}
/* viewer */
.lightbox{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:rgba(4,8,22,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.lightbox img{display:block;max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#000}
.lightbox figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;color:#fff;text-align:center}
.lightbox figcaption b{font:500 20px "Playfair Display",serif}
.lightbox figcaption span{font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9dbbff}
.lb-actions{display:flex;gap:10px;flex-basis:100%;justify-content:center}
.lb-actions .btn{color:#fff;border-color:rgba(255,255,255,.35);padding:10px 15px;font-size:11px;background:transparent}
.lb-close,.lb-nav{position:absolute;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;line-height:1;transition:background .2s}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-close{top:18px;right:18px;width:46px;height:46px;font-size:30px}
.lb-nav{top:50%;width:46px;height:62px;margin-top:-31px;font-size:34px}
.lb-prev{left:16px}.lb-next{right:16px}
.lightbox.single .lb-nav{display:none}
@media (max-width:860px){
  .flyer-grid{columns:1}
  .event.has-img{grid-template-columns:110px 1fr}
  .event.has-img .btn{grid-column:1/-1;justify-self:start}
  .lb-nav{top:auto;bottom:18px;margin:0;height:46px}
  .lightbox img{max-height:calc(100vh - 220px)}
}

/* ==========================================================================
   PASTOR'S LIBRARY band (Home) — links out to cyberbishop.org
   ========================================================================== */
.library-band{position:relative;overflow:hidden;
  background:radial-gradient(ellipse 60% 100% at 0 0,rgba(var(--tcc-red-rgb,21,94,239),.30),transparent 62%),
             radial-gradient(ellipse 55% 100% at 100% 100%,rgba(var(--crimson-rgb,193,18,31),.26),transparent 62%),
             linear-gradient(165deg,#0d1838,#0a1024 55%,#14090e)}
.library-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.library-copy h2{font-size:clamp(34px,4.4vw,56px);line-height:1.08;margin:14px 0 18px}
.library-copy p{color:#c8d3ee;font-size:16px;line-height:1.75;max-width:520px;margin-bottom:30px}
.lib-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lib-tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 12px 28px;color:#fff;
  border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 44px -24px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s,background .25s}
.lib-tile svg{width:42px;height:42px;color:var(--red2,#7AA7FF);margin-bottom:6px}
.lib-tile b{font:500 22px "Playfair Display",serif}
.lib-tile small{font:600 10px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9dbbff}
.lib-tile:hover,.lib-tile:focus-visible{transform:translateY(-8px);border-color:var(--red,#155EEF);background:linear-gradient(145deg,rgba(var(--tcc-red-rgb,21,94,239),.34),rgba(255,255,255,.04))}
@media (max-width:860px){.library-inner{grid-template-columns:1fr;gap:38px}.lib-tile{padding:26px 8px 22px}.lib-tile b{font-size:18px}.lib-tile svg{width:34px;height:34px}}