/* ============================================================
   WORSHIP BEYOND WALLS — EPIC styles (shared across all pages)
   Load AFTER css/style.css on every page:
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/epic.css">
   The atmosphere layers (.fx-*) are injected by js/epic.js.
   ============================================================ */

:root{
  --green:#1a5c35; --green-light:#2a804e; --green-glow:#6ecf93;
  --gold:#b07d1a; --gold-light:#c89530;
  --bg-dark:#0a140d; --ink:#0f1a13; --cream:#f0ede6;
}

/* ── Scroll progress bar ── */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green-glow),var(--gold-light));
  z-index:9999; box-shadow:0 0 12px rgba(110,207,147,.6);
  transition:width .08s linear; pointer-events:none;
}

/* ════════════════ SHARED ATMOSPHERE (all heroes) ════════════════ */
.fx-host{ position:relative; overflow:hidden; isolation:isolate; }

.fx-mesh{
  position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 22% 30%, rgba(42,128,78,.55), transparent 60%),
    radial-gradient(45% 55% at 78% 25%, rgba(26,92,53,.50), transparent 62%),
    radial-gradient(50% 60% at 60% 80%, rgba(176,125,26,.22), transparent 60%),
    radial-gradient(55% 65% at 30% 75%, rgba(20,70,42,.55), transparent 60%);
  filter:blur(28px) saturate(1.1);
  animation:meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1.05) rotate(0deg);}
  50%{transform:translate3d(3%,2%,0) scale(1.12) rotate(2deg);}
  100%{transform:translate3d(-1%,3%,0) scale(1.06) rotate(-2deg);}
}

.fx-rays{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:160%; height:130%; z-index:0; pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,
    transparent 0deg, rgba(180,230,200,.10) 6deg, transparent 12deg,
    transparent 26deg, rgba(200,200,160,.08) 32deg, transparent 38deg,
    transparent 54deg, rgba(180,230,200,.12) 60deg, transparent 66deg,
    transparent 84deg, rgba(200,200,160,.07) 90deg, transparent 96deg,
    transparent 118deg, rgba(180,230,200,.10) 124deg, transparent 130deg,
    transparent 150deg);
  filter:blur(6px); mix-blend-mode:screen;
  animation:rayShimmer 9s ease-in-out infinite alternate;
}
@keyframes rayShimmer{ 0%{opacity:.55; transform:translateX(-50%) rotate(-2deg);} 100%{opacity:.9; transform:translateX(-50%) rotate(2deg);} }

.fx-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
}

.fx-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.fx-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* keep real hero content above the fx layers */
.fx-host > .container,
.fx-host > .hero-inner,
.inner-hero .container,
.about-hero .container,
.merch-hero .container{ position:relative; z-index:2; }

/* ════════════════ HOME — FULL CINEMATIC HERO ════════════════ */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-h,70px) + 4rem) 2rem 6rem;
  background:#06100a; isolation:isolate;
}
.hero .fx-mesh{ z-index:0; }
.hero .fx-photo{ z-index:1; }
.hero .fx-rays{ z-index:2; }
.hero .fx-grid{ z-index:2; }
.hero .fx-canvas{ z-index:2; }
.hero .fx-grain{ z-index:3; }

/* flyer photo — screen blend lets colours show subtly */
.hero .fx-photo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url('../assets/flyer.png') center 25%/cover no-repeat;
  opacity:.20; mix-blend-mode:screen;
  filter:saturate(1.1) brightness(1.0);
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 40%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 85% 80% at 50% 40%, #000 30%, transparent 75%);
}
/* Original vignette — dark edges, open centre so gradient text reads */
.hero::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse 90% 90% at 50% 45%, transparent 45%, rgba(4,10,7,.88) 100%);
}

.hero-inner{ position:relative; z-index:5; }

.hero-logo{ width:170px; height:170px; margin:0 auto 2.4rem; position:relative; }
.hero-logo::before{
  content:''; position:absolute; inset:-26%; border-radius:50%;
  background:radial-gradient(circle, rgba(110,207,147,.45), rgba(110,207,147,0) 65%);
  animation:halo 4s ease-in-out infinite; z-index:-1;
}
@keyframes halo{ 0%,100%{transform:scale(.9); opacity:.5;} 50%{transform:scale(1.15); opacity:1;} }
.hero-logo img{
  width:100%; height:100%; object-fit:contain; border-radius:30px;
  border:2px solid rgba(110,207,147,.35); background:rgba(10,20,13,.5);
  box-shadow:0 16px 50px rgba(0,0,0,.5), 0 0 60px rgba(26,92,53,.4);
}

.hero-eyebrow{
  font-family:var(--font-ui); font-size:.74rem; font-weight:700;
  letter-spacing:.46em; text-transform:uppercase; color:var(--gold-light); margin-bottom:1.1rem;
}
.hero-eyebrow .pip{ display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold-light); margin:0 .7em 2px; vertical-align:middle;
  box-shadow:0 0 10px var(--gold-light); animation:halo 4s ease-in-out infinite; }

/* Original text styles — cream, NO text-shadow, gradient on Beyond */
.hero-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(3.6rem,9.5vw,9rem); line-height:.9;
  color:var(--cream); margin-bottom:.3rem; letter-spacing:-.01em;
}
.hero-title em{ font-style:italic;
  background:linear-gradient(120deg,#6ecf93,#c89530);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* masked line-by-line reveal — padding/negative-margin keeps descenders
   (the 'y' in Beyond) from being clipped by overflow:hidden */
.reveal-line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.reveal-line > span{ display:block; transform:translateY(110%);
  animation:lineUp 1s cubic-bezier(.16,1,.3,1) forwards; }
.reveal-line:nth-child(1) > span{ animation-delay:.15s; }
.reveal-line:nth-child(2) > span{ animation-delay:.30s; }
.reveal-line:nth-child(3) > span{ animation-delay:.45s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero-sub{
  font-family:var(--font-body); font-size:1.08rem; font-weight:300; line-height:1.85;
  color:rgba(240,237,230,.72); max-width:520px; margin:1.6rem auto 2.6rem;
  opacity:0; animation:fadeIn 1s ease .7s forwards;
}
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fadeIn 1s ease .9s forwards; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }


.hero-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-ui); font-size:.86rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:1rem 2.1rem;
  border-radius:6px; transition:transform .18s, box-shadow .25s, background .25s; text-decoration:none;
}
.hero-btn.primary{ background:var(--green); color:#fff; box-shadow:0 6px 24px rgba(26,92,53,.45); }
.hero-btn.primary:hover{ transform:translateY(-3px); background:var(--green-light);
  box-shadow:0 12px 36px rgba(26,92,53,.6), 0 0 0 4px rgba(110,207,147,.18); }
.hero-btn.ghost{ color:var(--cream); border:1.5px solid rgba(240,237,230,.3); background:rgba(255,255,255,.02); }
.hero-btn.ghost:hover{ transform:translateY(-3px); border-color:var(--green-glow); color:#fff; }

.scroll-cue{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeIn 1s ease 1.3s forwards; }
.scroll-cue span{ font-family:var(--font-ui); font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(240,237,230,.5); }
.scroll-mouse{ width:22px; height:34px; border:1.5px solid rgba(240,237,230,.4); border-radius:12px; position:relative; }
.scroll-mouse::after{ content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:6px; border-radius:2px; background:var(--green-glow);
  animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{ 0%{opacity:0; top:6px;} 40%{opacity:1;} 80%{opacity:0; top:18px;} 100%{opacity:0;} }

.hero-stamp{ position:absolute; bottom:6rem; left:0; right:0; z-index:5; text-align:center;
  font-family:var(--font-ui); font-weight:900; letter-spacing:.06em;
  font-size:clamp(3rem,9vw,8rem); line-height:1; color:rgba(255,255,255,.05);
  pointer-events:none; text-transform:uppercase; }

/* ════════════════ INNER-PAGE HEROES — lighter atmosphere ════════════════ */
.inner-hero, .about-hero, .merch-hero{ position:relative; overflow:hidden; isolation:isolate; }
.inner-hero .fx-mesh, .about-hero .fx-mesh, .merch-hero .fx-mesh{ z-index:0; opacity:.85; }
.inner-hero .fx-rays, .about-hero .fx-rays, .merch-hero .fx-rays{ z-index:0; opacity:.7; }
.inner-hero .fx-grid, .about-hero .fx-grid, .merch-hero .fx-grid{ z-index:0; }
.inner-hero .fx-canvas, .about-hero .fx-canvas, .merch-hero .fx-canvas{ z-index:0; }
.inner-hero .fx-grain, .about-hero .fx-grain, .merch-hero .fx-grain{ z-index:1; }
.inner-hero::after, .about-hero::after, .merch-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 90% 90% at 50% 40%, transparent 55%, rgba(4,10,7,.55) 100%);
}

/* ════════════════ SCROLL REVEAL ════════════════ */
.js-loaded .reveal,
.js-loaded .reveal-left,
.js-loaded .reveal-right{ opacity:0; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js-loaded .reveal{ transform:translateY(30px); }
.js-loaded .reveal-left{ transform:translateX(-40px); }
.js-loaded .reveal-right{ transform:translateX(40px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible{ opacity:1; transform:none; }

/* ════════════════ HOME SECTION POLISH ════════════════ */
.pillars{ background:var(--cream); }
.pillars-inner{ max-width:var(--max-w,1200px); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:5rem; align-items:start; }
.pillar-list{ display:flex; flex-direction:column; gap:1rem; }
.pillar{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem; border-radius:14px;
  border:1px solid transparent; transition:background .25s, border-color .25s, transform .25s; }
.pillar:hover{ background:#fff; border-color:rgba(26,92,53,.12); transform:translateX(6px);
  box-shadow:0 10px 30px rgba(26,92,53,.08); }
.pillar-icon{ width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--green-ultra,#eaf4ed); border:1.5px solid rgba(26,92,53,.15);
  display:flex; align-items:center; justify-content:center; color:var(--green); transition:transform .25s; }
.pillar:hover .pillar-icon{ transform:scale(1.1) rotate(-6deg); }
.pillar-text strong{ font-family:var(--font-ui); font-size:.9rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); display:block; margin-bottom:.3rem; }
.pillar-text p{ font-size:.9rem; color:rgba(15,26,19,.6); line-height:1.65; }

.stats{ background:var(--bg-section,#fff); }
.stats-grid{ max-width:var(--max-w,1200px); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat-item{ position:relative; background:#0c2018; color:#fff; overflow:hidden;
  border-radius:18px; padding:2.4rem 1.5rem; text-align:center; border:1px solid rgba(110,207,147,.12); }
.stat-item::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 120%, rgba(110,207,147,.25), transparent 60%); }
.stat-num{ position:relative; font-family:var(--font-display); font-weight:900; font-style:italic;
  font-size:clamp(2.4rem,5vw,4rem); color:var(--green-glow); display:block; margin-bottom:.3rem;
  text-shadow:0 0 30px rgba(110,207,147,.4); }
.stat-label{ position:relative; font-family:var(--font-ui); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(240,237,230,.6); }

.promo{ background:var(--bg-alt,#f0ede6); }
.promo-grid{ max-width:var(--max-w,1200px); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.promo-card{ position:relative; overflow:hidden; background:#fff;
  border:1.5px solid rgba(0,0,0,.08); border-radius:14px; padding:2rem 1.5rem;
  text-decoration:none; color:inherit; display:block;
  transition:transform .25s, box-shadow .25s, border-color .25s; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.promo-card:hover{ transform:translateY(-6px); border-color:var(--green); box-shadow:0 16px 40px rgba(26,92,53,.14); }
.promo-card::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold)); transform:scaleX(0);
  transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.promo-card:hover::after{ transform:scaleX(1); }
.promo-icon{ width:46px; height:46px; border-radius:8px; background:var(--green-ultra,#eaf4ed);
  border:1.5px solid rgba(26,92,53,.14); display:flex; align-items:center; justify-content:center;
  color:var(--green); margin-bottom:1.2rem; transition:transform .25s; }
.promo-card:hover .promo-icon{ transform:scale(1.12) rotate(6deg); }
.promo-title{ font-family:var(--font-ui); font-size:1rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin-bottom:.5rem; }
.promo-desc{ font-size:.88rem; color:rgba(15,26,19,.6); line-height:1.65; margin-bottom:1.2rem; }
.promo-link{ font-family:var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); display:flex; align-items:center; gap:.4rem; }
.promo-card:hover .promo-link svg{ transform:translateX(4px); }
.promo-link svg{ transition:transform .25s; }

/* ════════════════ SPONSOR (footer Noble Trybe — restored) ════════════════ */
.sponsor-section{ background:var(--bg-dark); border-top:1px solid rgba(255,255,255,.06);
  padding:3rem 2rem; text-align:center; }
.sponsor-inner{ display:flex; align-items:center; gap:1.2rem; max-width:320px; margin:0 auto 1.6rem; }
.sponsor-rule{ flex:1; height:1px; background:rgba(255,255,255,.1); }
.sponsor-label{ font-family:var(--font-ui); font-size:.62rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(240,237,230,.3); white-space:nowrap; }
.sponsor-card{ display:inline-flex; flex-direction:column; align-items:center; gap:.7rem;
  text-decoration:none; transition:transform .25s; }
.sponsor-card:hover{ transform:translateY(-3px); }
.sponsor-logo{ height:70px; width:auto; max-width:240px; object-fit:contain;
  filter:drop-shadow(0 4px 20px rgba(176,143,60,.3)); }
.sponsor-name{ font-family:var(--font-ui); font-size:.9rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(240,237,230,.75); }
.sponsor-url{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.1em; color:var(--gold); }

/* ════════════════ MERCH — consistent category icons ════════════════ */
.cat-icon svg{ width:24px !important; height:24px !important; stroke-width:1.6 !important; }

/* ════════════════ BACK TO TOP ════════════════ */
#to-top{ position:fixed; bottom:1.6rem; left:1.6rem; z-index:300; border:none;
  width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(26,92,53,.4); opacity:0; transform:translateY(20px);
  transition:opacity .3s, transform .3s, background .2s; }
#to-top.show{ opacity:1; transform:none; }
#to-top:hover{ background:var(--green-light); }

@media(prefers-reduced-motion:reduce){
  .fx-mesh,.fx-rays,.hero-logo::before,.hero-eyebrow .pip,.reveal-line>span{ animation:none !important; }
  .reveal-line>span{ transform:none; }
}
@media(max-width:960px){
  .pillars-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .promo-grid{ grid-template-columns:1fr; }
  .hero-logo{ width:130px; height:130px; }
}
@media(max-width:480px){ .stats-grid{ grid-template-columns:1fr 1fr; } }