/* ============================================================
   Cinematic hero — treatment "B · Black & Blue" + Spirit flame.
   Markup comes from patterns/hero-cinematic.php.
   Set the image via inline --hero-img on .slhero.
   ============================================================ */

.slhero { position:relative; overflow:hidden; min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center; }

.slhero .bg {
	position:absolute; inset:-4%;
	background-color:#070d1c;
	background-position:center 38%;
	background-size:cover;
	background-repeat:no-repeat;
	animation:slkb 26s ease-in-out infinite alternate;
}
.slhero .ov {
	position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(6,10,22,.5) 0%, rgba(8,14,30,.82) 55%, rgba(5,9,20,.94) 100%);
}

/* drifting blue god-rays */
.slhero .ray { position:absolute; top:-40%; height:200%; filter:blur(22px); mix-blend-mode:screen; opacity:0; }
.slhero .ray.r1 { left:18%; width:140px; background:linear-gradient(180deg, rgba(79,143,255,.85), transparent 72%); transform:rotate(10deg); animation:slray 11s ease-in-out infinite; }
.slhero .ray.r2 { left:46%; width:90px;  background:linear-gradient(180deg, rgba(150,195,255,.8), transparent 72%); transform:rotate(-6deg); animation:slray 14s ease-in-out infinite 2s; }
.slhero .ray.r3 { left:72%; width:140px; background:linear-gradient(180deg, rgba(79,143,255,.75), transparent 72%); transform:rotate(8deg); animation:slray 13s ease-in-out infinite 1s; }

/* rising light motes */
.slhero .mote { position:absolute; bottom:8%; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, rgba(160,200,255,.95), transparent 70%); opacity:0; animation:slfloat 9s linear infinite; }

/* content */
.slhero .inner { position:relative; z-index:4; color:#fff; max-width:680px; padding:4.4rem 1.6rem 3.4rem; }
.slhero .inner .wp-block-heading { color:#fff; font-size:2.8rem; line-height:1.08; font-weight:700; margin:.6rem auto .8rem; text-shadow:0 2px 26px rgba(0,0,0,.5); opacity:0; animation:slfade .9s ease .4s forwards; }
.slhero .kicker { font-size:.76rem; letter-spacing:3px; text-transform:uppercase; color:#9fc0ff; font-weight:600; margin:0; opacity:0; animation:slfade .8s ease .2s forwards; }
.slhero .sub { font-size:1.08rem; color:rgba(255,255,255,.92); max-width:500px; margin:0 auto 1.4rem; line-height:1.55; opacity:0; animation:slfade .9s ease .6s forwards; }
.slhero .verse { font-style:italic; color:rgba(190,212,255,.85); margin-top:1.6rem; font-size:.95rem; opacity:0; animation:slfade 1s ease 1.05s forwards; }
.slhero .wp-block-buttons { justify-content:center; opacity:0; animation:slfade .9s ease .8s forwards; }
.slhero .wp-block-button.is-style-fill .wp-block-button__link { background:#2f6fff; color:#fff; border-radius:9px; font-weight:600; padding:.78rem 1.4rem; box-shadow:0 0 22px rgba(47,111,255,.6); }
.slhero .wp-block-button.is-style-outline .wp-block-button__link { background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.45); border-radius:9px; padding:.78rem 1.3rem; backdrop-filter:blur(3px); }

/* ---- animated Spirit flame (Acts 2) ---- */
.flamewrap { width:44px; height:60px; margin:0 auto .6rem; position:relative; opacity:0; transform-origin:50% 100%; animation:slfade .8s ease .05s forwards, slsway 3s ease-in-out 1s infinite; filter:drop-shadow(0 0 10px rgba(255,140,40,.7)); }
.flamewrap svg { display:block; width:100%; height:100%; overflow:visible; }
.fl-outer { transform-origin:50% 100%; animation:flick-o 1.5s ease-in-out infinite alternate; }
.fl-inner { transform-origin:50% 100%; animation:flick-i .95s ease-in-out infinite alternate; }
.fl-core  { transform-origin:50% 100%; animation:flick-i .8s ease-in-out infinite alternate-reverse; }
.spark { position:absolute; left:50%; top:4px; width:3px; height:3px; border-radius:50%; background:#ffd27a; opacity:0; }
.spark.s1 { animation:slspark 1.9s ease-in infinite; }
.spark.s2 { animation:slspark 2.4s ease-in .7s infinite; }
.spark.s3 { animation:slspark 2.1s ease-in 1.3s infinite; }

.scrollcue { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:4; color:rgba(255,255,255,.7); font-size:1.2rem; animation:slbob 1.8s ease-in-out infinite; }

@keyframes slkb { from{transform:scale(1)} to{transform:scale(1.14) translateY(-1.5%)} }
@keyframes slray { 0%,100%{opacity:.08; transform:translateX(-14px) rotate(8deg)} 50%{opacity:.55; transform:translateX(14px) rotate(8deg)} }
@keyframes slfloat { 0%{transform:translateY(0); opacity:0} 15%{opacity:.9} 100%{transform:translateY(-280px); opacity:0} }
@keyframes slfade { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
@keyframes slbob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }
@keyframes slsway { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
@keyframes flick-o { 0%{transform:scaleY(1) scaleX(1) skewX(0)} 100%{transform:scaleY(1.12) scaleX(.92) skewX(-3deg)} }
@keyframes flick-i { 0%{transform:scaleY(1) translateY(0)} 100%{transform:scaleY(1.2) translateY(-2px)} }
@keyframes slspark { 0%{transform:translate(-50%,8px) scale(1); opacity:0} 25%{opacity:.95} 100%{transform:translate(calc(-50% + 6px),-26px) scale(.3); opacity:0} }

@media (max-width:720px){
	.slhero { min-height:480px; }
	.slhero .inner { padding-top:3.8rem; }
	.slhero .inner .wp-block-heading { font-size:2rem; }
}

/* honour reduced motion — static image + static flame, all text shown */
@media (prefers-reduced-motion: reduce){
	.slhero .bg { animation:none; }
	.slhero .ray, .slhero .mote, .spark, .scrollcue { display:none; }
	.flamewrap { opacity:1; animation:none; }
	.fl-outer, .fl-inner, .fl-core { animation:none; }
	.slhero .inner .wp-block-heading, .slhero .kicker, .slhero .sub, .slhero .wp-block-buttons, .slhero .verse { animation:none; opacity:1; transform:none; }
}