/* ════════════════════════════════════════════════════════════
 *  ARISE & SHINE — light-themed motion layer, wired directly
 *  into the OogerDaboris theme.
 *  "Arise, shine, for your light has come" — Isaiah 60:1
 *
 *  This file only ADDS to what main.js / style.css already do
 *  (embers, fade-up reveals, button sheens, card lifts). Four
 *  new effects, each targeting the theme's real markup:
 *
 *    1. Dawn rays  — .ooger-dawn-rays inside .hero (front-page.php)
 *    2. Verse light — .ooger-verse-word spans (front-page.php)
 *    3. Golden bloom — card-like .fade-up elements on reveal
 *    4. Candle glow — .prayer-card + .verse-banner ambient breathe
 * ════════════════════════════════════════════════════════════ */

/* ── 1. DAWN RAYS ──────────────────────────────────────────────
 * A faint wheel of golden light turning once every 90 seconds
 * behind the hero. Sits at z-index -1 inside .hero's stacking
 * context (hero is position:relative + overflow:hidden already),
 * so it stays behind the name, verse, and the breathing cross. */
.ooger-dawn-rays {
	position: absolute;
	top: 50%; left: 50%;
	width: 165vmax; height: 165vmax;
	margin: -82.5vmax 0 0 -82.5vmax;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	animation:
		ooger-rays-in 3s ease 0.6s forwards,
		ooger-rays-turn 90s linear infinite;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,   rgba(201,168,76,0.10)  8deg, transparent  16deg,
		transparent 44deg,  rgba(201,168,76,0.08) 52deg, transparent  60deg,
		transparent 92deg,  rgba(201,168,76,0.10) 100deg, transparent 108deg,
		transparent 140deg, rgba(201,168,76,0.08) 148deg, transparent 156deg,
		transparent 188deg, rgba(201,168,76,0.10) 196deg, transparent 204deg,
		transparent 236deg, rgba(201,168,76,0.08) 244deg, transparent 252deg,
		transparent 284deg, rgba(201,168,76,0.10) 292deg, transparent 300deg,
		transparent 332deg, rgba(201,168,76,0.08) 340deg, transparent 348deg,
		transparent 360deg
	);
	-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 60%);
	mask-image: radial-gradient(circle at center, #000 0%, transparent 60%);
}
@keyframes ooger-rays-in   { to { opacity: 0.55; } }
@keyframes ooger-rays-turn { to { transform: rotate(360deg); } }

/* ── 2. VERSE ILLUMINATION ─────────────────────────────────────
 * front-page.php wraps every word of Isaiah 60:22 in a span with
 * a --w index. Words rise out of blur into golden light one after
 * another, starting at 0.9s to keep the hero's original entrance
 * rhythm (eyebrow 0.3s → name 0.5s → tagline 0.7s → verse 0.9s). */
.hero-verse.verse-illuminated {
	/* the container no longer fades as one block — its words do */
	animation: none;
	opacity: 1;
}
.ooger-verse-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.55em);
	filter: blur(4px);
	animation: ooger-word-arise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(0.9s + var(--w, 0) * 95ms);
}
@keyframes ooger-word-arise {
	60% { filter: blur(0); }
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
		text-shadow: 0 0 16px rgba(201, 168, 76, 0.55);
	}
}

/* ── 3. GOLDEN BLOOM on reveal ─────────────────────────────────
 * Card-like elements already fade-up via main.js's observer; now
 * they also bloom with a brief golden glow that fades — "arise,
 * shine." Limited to elements with real card backgrounds so the
 * glow always has a box to belong to. Runs once, then hands
 * box-shadow back to the theme's hover-lift transitions. */
.fade-up.visible:is(
	.expect-card,
	.testimonial,
	.streamer-card,
	.clip-card,
	.merch-card,
	.prayer-form,
	.prayer-counter,
	.prayer-ticker
) {
	animation: ooger-bloom 1.7s ease-out;
}
@keyframes ooger-bloom {
	0%   { box-shadow: 0 0 0 rgba(201, 168, 76, 0); }
	35%  { box-shadow: 0 10px 46px rgba(201, 168, 76, 0.35); }
	100% { box-shadow: 0 0 0 rgba(201, 168, 76, 0); }
}

/* ── 4. CANDLE GLOW ────────────────────────────────────────────
 * Prayer cards breathe with a faint warm glow like votive candles,
 * each on its own offset so the wall flickers naturally. The verse
 * banner shares the treatment. Hover clears the animation so the
 * theme's existing lift + glow takes over cleanly. */
.prayer-card,
.verse-banner {
	animation: ooger-candle-breathe 4.5s ease-in-out infinite;
}
.prayer-card:nth-child(2n) { animation-delay: -1.3s; }
.prayer-card:nth-child(3n) { animation-delay: -2.7s; }
.prayer-card:nth-child(5n) { animation-delay: -3.6s; }
.prayer-card:hover,
.verse-banner:hover {
	animation: none; /* hand off to the theme's card-lift shadow */
}
@keyframes ooger-candle-breathe {
	0%, 100% { box-shadow: 0 0 10px rgba(201, 168, 76, 0.08); }
	50%      { box-shadow: 0 0 26px rgba(201, 168, 76, 0.24); }
}
/* "Prayed for" cards burn a little steadier and brighter */
.prayer-card.prayed {
	animation-duration: 6.5s;
}

/* ── REDUCED MOTION ────────────────────────────────────────────
 * style.css already collapses all animation durations globally.
 * These make the intent explicit for the new effects: everything
 * lands visible and still. (Verse words use `forwards`, so their
 * final lit state applies instantly.) */
@media (prefers-reduced-motion: reduce) {
	.ooger-dawn-rays { animation: none; opacity: 0.35; }
	.ooger-verse-word {
		animation: none;
		opacity: 1;
		transform: none;
		filter: none;
	}
	.fade-up.visible,
	.prayer-card,
	.verse-banner { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
 *  ARISE & SHINE — EXPANDED MOTION (round 2)
 *  A lot more life, still under the one dawn/light idea. Every
 *  rule below targets the theme's real markup and layers ON TOP
 *  of the hovers already in style.css (never duplicating them).
 * ════════════════════════════════════════════════════════════ */

/* ── DAWN WIPE — a soft bloom of first light on page load ───────
 * Injected + removed by arise.js. Pointer-events none from birth,
 * so it never delays a tap. Light rises from the horizon (bottom)
 * and dissolves. */
#ooger-dawn-wipe {
	position: fixed; inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 1;
	background:
		radial-gradient(120% 80% at 50% 118%,
			rgba(240,216,144,0.55) 0%,
			rgba(201,168,76,0.28) 30%,
			rgba(201,168,76,0.0) 62%);
	animation: ooger-dawn-wipe 1.5s ease-out forwards;
}
@keyframes ooger-dawn-wipe {
	0%   { opacity: 0;   }
	22%  { opacity: 1;   }
	100% { opacity: 0;   }
}

/* ── RISING LIGHT MOTES — burst particles (prayer moments) ──────
 * Spawned by arise.js when a prayer is submitted or lifted up.
 * "Prayers rising like incense." */
.ooger-light-mote {
	position: fixed;
	z-index: 9998;
	width: 8px; height: 8px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, #fff6dc 0%, #f0d890 40%, rgba(201,168,76,0) 70%);
	box-shadow: 0 0 10px 2px rgba(201,168,76,0.6);
	opacity: 0;
	will-change: transform, opacity;
	animation: ooger-mote-rise var(--life, 1600ms) cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes ooger-mote-rise {
	0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
	15%  { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-140px)) scale(1); }
}

/* ── SECTION LABELS — the eyebrow expands into the light ────────
 * When its .fade-up wrapper reveals, the little all-caps label
 * spreads its letters and a lead-in glow passes through. */
.fade-up.visible .section-label,
.section-label.visible {
	animation: ooger-label-spread 1.1s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes ooger-label-spread {
	0%   { opacity: 0; letter-spacing: 0.05em; filter: blur(2px); }
	100% { opacity: 1; letter-spacing: 0.35em; filter: blur(0); }
}

/* ── PILLAR ICONS — gentle idle float (hover spin already exists) */
.pillar-icon {
	animation: ooger-icon-float 4.5s ease-in-out infinite;
}
.pillar:nth-child(2n) .pillar-icon { animation-delay: -1.5s; }
.pillar:nth-child(3n) .pillar-icon { animation-delay: -3s;   }
@keyframes ooger-icon-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* ── EXPECT NUMBERS — quietly lit, always breathing ────────────
 * The 01–04 markers get a soft gold gradient that drifts, so the
 * "steps" feel alive even at rest. Hover state in style.css still
 * wins on interaction. */
.expect-num {
	background: linear-gradient(120deg,
		var(--gold) 0%, #f0d890 45%, var(--gold-bright) 55%, var(--gold) 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: ooger-num-drift 6s ease-in-out infinite;
}
@keyframes ooger-num-drift {
	0%, 100% { background-position: 0% 0; }
	50%      { background-position: 100% 0; }
}

/* ── TESTIMONIAL STARS — twinkle in one by one on reveal ────────
 * arise.js splits ★★★★★ into .ooger-star spans. */
.ooger-star {
	display: inline-block;
	opacity: 0.25;
	transform: scale(0.6);
}
.testimonial.visible .ooger-star {
	animation: ooger-star-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.testimonial.visible .ooger-star:nth-child(1) { animation-delay: 0.15s; }
.testimonial.visible .ooger-star:nth-child(2) { animation-delay: 0.28s; }
.testimonial.visible .ooger-star:nth-child(3) { animation-delay: 0.41s; }
.testimonial.visible .ooger-star:nth-child(4) { animation-delay: 0.54s; }
.testimonial.visible .ooger-star:nth-child(5) { animation-delay: 0.67s; }
@keyframes ooger-star-pop {
	0%   { opacity: 0.25; transform: scale(0.6); }
	60%  { opacity: 1;    transform: scale(1.3); text-shadow: 0 0 12px rgba(201,168,76,0.8); }
	100% { opacity: 1;    transform: scale(1);   text-shadow: 0 0 6px rgba(201,168,76,0.4); }
}

/* ── CLIP PLAY BUTTON — a patient pulse ring at rest ────────────
 * (style.css already reveals it on card hover; this gives it a
 * heartbeat so highlights feel clickable.) */
.clip-play {
	animation: ooger-play-pulse 2.4s ease-in-out infinite;
}
@keyframes ooger-play-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.5); }
	50%      { box-shadow: 0 0 0 10px rgba(201,168,76,0); }
}

/* ── PRAYER COUNTER ICON 🙏 — breathes like folded hands ───────*/
.prayer-counter-icon {
	display: inline-block;
	animation: ooger-hands-breathe 3.6s ease-in-out infinite;
}
@keyframes ooger-hands-breathe {
	0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(201,168,76,0)); }
	50%      { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(201,168,76,0.5)); }
}

/* ── STREAMER AVATARS — a slow golden halo turns behind each ───*/
.streamer-avatar { position: relative; z-index: 1; }
.streamer-avatar::before {
	content: '';
	position: absolute; inset: -5px;
	border-radius: inherit;
	z-index: -1;
	background: conic-gradient(from 0deg,
		rgba(201,168,76,0) 0deg,
		rgba(201,168,76,0.55) 90deg,
		rgba(201,168,76,0) 200deg,
		rgba(201,168,76,0.35) 300deg,
		rgba(201,168,76,0) 360deg);
	opacity: 0;
	transition: opacity 0.5s ease;
	animation: ooger-halo-turn 6s linear infinite;
}
.streamer-card:hover .streamer-avatar::before { opacity: 1; }
@keyframes ooger-halo-turn { to { transform: rotate(360deg); } }

/* ── SCHEDULE ROWS — stagger up on reveal + "next stream" glow ─*/
.schedule-table tbody tr.ooger-row {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.schedule-table tbody tr.ooger-row.is-in {
	opacity: 1;
	transform: translateY(0);
}
.schedule-table tbody tr.ooger-next-stream td {
	position: relative;
	animation: ooger-next-glow 3s ease-in-out infinite;
}
.schedule-table tbody tr.ooger-next-stream td:first-child::before {
	content: '▶';
	color: var(--gold-bright);
	font-size: 0.7em;
	margin-right: 0.5em;
	display: inline-block;
	animation: ooger-next-nudge 1.6s ease-in-out infinite;
}
@keyframes ooger-next-glow {
	0%, 100% { background: rgba(201,168,76,0.05); }
	50%      { background: rgba(201,168,76,0.13); }
}
@keyframes ooger-next-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(3px); }
}

/* ── VERSE BANNER — label pulse + text arrives softly ──────────*/
.verse-banner-label {
	display: inline-block;
	animation: ooger-vlabel 4s ease-in-out infinite;
}
@keyframes ooger-vlabel {
	0%, 100% { text-shadow: 0 0 4px rgba(201,168,76,0.2); }
	50%      { text-shadow: 0 0 16px rgba(201,168,76,0.7); }
}
.verse-banner-text {
	animation: ooger-vtext-in 1.2s ease 0.2s both;
}
@keyframes ooger-vtext-in {
	0%   { opacity: 0; transform: translateY(10px); filter: blur(3px); }
	100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── PRAYER CARD TAG — a slow sheen crosses the category chip ──*/
.prayer-card-tag {
	position: relative;
	overflow: hidden;
}
.prayer-card-tag::after {
	content: '';
	position: absolute; top: 0; left: -130%;
	width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg);
	animation: ooger-tag-sheen 6s ease-in-out infinite;
}
@keyframes ooger-tag-sheen {
	0%, 70% { left: -130%; }
	100%    { left: 150%; }
}

/* ── FORM FIELDS — glow gold on focus ─────────────────────────*/
.prayer-form input,
.prayer-form textarea,
.prayer-form select,
.verse-sub-form input {
	transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.prayer-form input:focus,
.prayer-form textarea:focus,
.prayer-form select:focus,
.verse-sub-form input:focus {
	box-shadow: 0 0 0 3px rgba(201,168,76,0.18), 0 0 20px rgba(201,168,76,0.15);
	outline: none;
}

/* ── DIVIDER CROSS — add a slow turn to its existing glow ──────*/
.divider-cross {
	animation: crossGlow 3.5s ease-in-out infinite, ooger-cross-turn 24s linear infinite;
}
@keyframes ooger-cross-turn { to { transform: rotate(360deg); } }

/* ── NAV LOGO — a barely-there idle float ─────────────────────*/
.nav-logo img {
	animation: ooger-navlogo-float 5s ease-in-out infinite;
}
@keyframes ooger-navlogo-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* ── NAV — the whole bar warms up while live ──────────────────*/
#liveBanner.show ~ nav {
	box-shadow: 0 2px 30px rgba(214,40,40,0.18);
}

/* ── BACK-TO-TOP — gentle bob once it appears ─────────────────*/
#backToTop.visible {
	animation: ooger-bob 2.2s ease-in-out infinite;
}
@keyframes ooger-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

/* ── ANNOUNCEMENT BAR — a slow light passes along it ──────────*/
#announcementBar.show {
	position: relative;
	overflow: hidden;
}
#announcementBar.show::after {
	content: '';
	position: absolute; top: 0; left: -60%;
	width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(240,216,144,0.18), transparent);
	animation: ooger-annc-sheen 7s ease-in-out infinite;
}
@keyframes ooger-annc-sheen {
	0%, 80% { left: -60%; }
	100%    { left: 160%; }
}

/* ── MAGNETIC BUTTONS — arise.js nudges these toward the cursor;
 *    this just makes the return smooth. ───────────────────────*/
.btn-primary, .btn-secondary, .nav-cta {
	transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
	            background 0.3s ease, box-shadow 0.3s ease;
}

/* ── REDUCED MOTION — silence the whole round-2 layer ─────────*/
@media (prefers-reduced-motion: reduce) {
	#ooger-dawn-wipe { display: none; }
	.ooger-light-mote { display: none; }
	.pillar-icon, .expect-num, .clip-play, .prayer-counter-icon,
	.streamer-avatar::before, .verse-banner-label, .verse-banner-text,
	.prayer-card-tag::after, .divider-cross, .nav-logo img,
	.section-label, .ooger-star, #backToTop.visible,
	#announcementBar.show::after,
	.schedule-table tbody tr.ooger-next-stream td,
	.schedule-table tbody tr.ooger-next-stream td:first-child::before {
		animation: none !important;
	}
	.schedule-table tbody tr.ooger-row { opacity: 1 !important; transform: none !important; }
	.ooger-star { opacity: 1 !important; transform: none !important; }
	.expect-num { -webkit-text-fill-color: var(--gold); }
}

/* ── HERO-INNER — the parallax wrapper (keeps the hero's centered
 *    flex layout intact; .hero is still the flex parent). ──────*/
.hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	will-change: transform, opacity;
}


/* ════════════════════════════════════════════════════════════
 *  ARISE & SHINE — ROUND 3 flourishes
 *  A few more "cool-looking" touches, still on-theme and safe.
 * ════════════════════════════════════════════════════════════ */

/* ── SECTION-TITLE ACCENT WORDS — a slow gold sheen drifts ─────
 * Your <em> words are already gold; now the gold itself moves. */
.section-title em {
	background: linear-gradient(100deg,
		var(--gold) 0%, #f4e0a0 44%, var(--gold-bright) 56%, var(--gold) 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: ooger-title-sheen 7s ease-in-out infinite;
}
@keyframes ooger-title-sheen {
	0%, 100% { background-position: 0% 0; }
	50%      { background-position: 100% 0; }
}

/* ── SCROLL PROGRESS — a glowing bead rides the leading edge ───
 * #scrollProgress is injected by main.js (a fixed bar). */
#scrollProgress { position: fixed; }
#scrollProgress::after {
	content: '';
	position: absolute;
	right: -2px; top: 50%;
	width: 9px; height: 9px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fff6dc;
	box-shadow: 0 0 10px 3px var(--gold-bright), 0 0 18px 4px rgba(201,168,76,0.5);
}

/* ── SMOOTH ANCHOR SCROLLING + sticky-nav offset ──────────────
 * Turns every in-page nav/footer jump into an eased glide, and
 * stops sections from hiding under the sticky nav. */
html { scroll-behavior: smooth; }
:where(section[id], [id^="prayer"], #about, #expect, #schedule,
       #watch, #clips, #community, #friends) {
	scroll-margin-top: 84px;
}

/* ── CARD 3D TILT — arise.js sets the transform; this keeps the
 *    return glide smooth and gives depth to children. ─────────*/
.streamer-card, .clip-card, .expect-card, .testimonial {
	transform-style: preserve-3d;
}

/* ── REDUCED MOTION — silence round 3 ─────────────────────────*/
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.section-title em {
		animation: none;
		-webkit-text-fill-color: var(--gold);
	}
	#scrollProgress::after { box-shadow: none; }
}