/* Mary Bible Study · motion & special effects layer
   Vanilla ports of Magic UI / React Bits patterns (Split Text, Shiny Text, Scroll Reveal, Magnet, Click Spark,
   Marquee, Tilted + Magic Card, Border Beam, Aurora, Scroll Progress) driven by GSAP + ScrollTrigger + Lenis. */

.ms .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms-type button{position:relative}

/* scroll progress */
.ms-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:90;pointer-events:none}
.ms-progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8C6A1F,#E2C06E 60%,#FFF1C8);box-shadow:0 0 12px rgba(226,192,110,.7)}

/* hero: 3D embers + cursor spotlight + split title + shiny subtitle */
.ms-hero .embers{position:absolute;inset:0;z-index:1;pointer-events:none}
.ms-hero .embers canvas{display:block;width:100%!important;height:100%!important}
.ms-hero .ms-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--sx,50%) var(--sy,40%),rgba(233,199,122,.16),transparent 60%)}
.ms-hero:hover .ms-spot{opacity:1}
.ms-hero .ms-wrap{z-index:2}
.ms-hero .ms-scroll{z-index:2}
.ms-hero h1 .w{display:inline-block;perspective:900px}
.ms-hero h1 .ch{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity,filter}
.ms-hero h1 .ch.glow{text-shadow:0 0 40px rgba(233,199,122,.35)}
.ms-shiny{background:linear-gradient(110deg,var(--ms-gold-hi) 35%,#FFF6DA 50%,var(--ms-gold-hi) 65%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:ms-shine 5.5s linear infinite}
@keyframes ms-shine{from{background-position:120% 0}to{background-position:-130% 0}}

/* magnet + click spark */
.ms [data-magnet]{will-change:transform}
.ms-sparks{position:fixed;inset:0;z-index:95;pointer-events:none}

/* split headings: words rise from a mask */
.ms .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.ms .sw>span{display:inline-block;will-change:transform}

/* story quote: scroll-scrubbed word reveal */
.ms-quote .qw{display:inline;transition:none}

/* marquee of Marian titles */
.ms-marquee{background:var(--ms-night);color:var(--ms-cream);padding-block:clamp(28px,4vw,48px);overflow:hidden;border-block:1px solid rgba(201,162,74,.22);position:relative}
.ms-marquee::before,.ms-marquee::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.ms-marquee::before{left:0;background:linear-gradient(90deg,var(--ms-night),transparent)}
.ms-marquee::after{right:0;background:linear-gradient(-90deg,var(--ms-night),transparent)}
.ms-row{display:flex;width:max-content;will-change:transform}
.ms-row+.ms-row{margin-top:10px}
.ms-row span{display:inline-flex;align-items:center;gap:clamp(18px,3vw,36px);padding-right:clamp(18px,3vw,36px);white-space:nowrap;font-family:var(--ms-serif);font-size:clamp(1.8rem,4.6vw,3.6rem);line-height:1.15;letter-spacing:-.01em}
.ms-row span::after{content:"✦";font-size:.42em;color:var(--ms-gold)}
.ms-row.b span{font-style:italic;font-weight:400;color:transparent;-webkit-text-stroke:1px rgba(226,192,110,.75)}
.ms-row.b span::after{-webkit-text-stroke:0;color:var(--ms-gold)}

/* tilted + magic spotlight cards */
.ms-type button,.ms-person,.ms-day,.ms-ticket{--mx:50%;--my:50%}
.ms-fx-tilt{transform-style:preserve-3d;will-change:transform}
.ms-type .face::after,.ms-person::after,.ms-day::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(233,199,122,.22),transparent 65%)}
.ms-type button:hover .face::after,.ms-person:hover::after,.ms-day:hover::after{opacity:1}
.ms-person{position:relative;overflow:hidden}
.ms-type .face h3,.ms-type .face p{transform:translateZ(30px)}
.ms-type .shine{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 48%,transparent 60%);background-size:250% 100%;background-position:var(--shine,100%) 0;z-index:3}

/* rosary thread above the four Saturdays */
.ms-thread{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;height:22px;margin:clamp(28px,4vw,44px) 0 -18px}
.ms-thread .line{position:absolute;left:12.5%;right:12.5%;top:50%;height:1.5px;background:linear-gradient(90deg,var(--ms-gold),var(--ms-gold-hi));transform-origin:0 50%;transform:scaleX(0)}
.ms-thread b{justify-self:center;align-self:center;width:13px;height:13px;border-radius:50%;background:var(--ms-cream);border:2px solid var(--ms-gold);position:relative;z-index:1;transform:scale(0)}
.ms-thread b.on{background:var(--ms-gold);box-shadow:0 0 0 5px rgba(201,162,74,.18)}
.ms-thread+.ms-days{margin-top:28px}
.ms-ep summary{position:relative}
.ms-ep summary::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;background:var(--ms-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ms-ep summary:hover::after,.ms-ep[open] summary::after{transform:scaleX(1)}
.ms-ep .body{overflow:hidden}

/* border beam around the price ticket */
.ms-ticket{isolation:isolate}
.ms-ticket .beam{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ba,0deg),transparent 0 70%,rgba(226,192,110,.0) 72%,#E2C06E 82%,#FFF1C8 86%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ms-beam 6s linear infinite}
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ms-beam{to{--ba:360deg}}
.ms-form{position:relative}
.ms-form::before{content:"";position:absolute;inset:-1px;border-radius:17px;z-index:-1;background:linear-gradient(140deg,rgba(226,192,110,.6),transparent 40%,transparent 60%,rgba(77,127,176,.6));filter:blur(14px);opacity:.55}

/* closing aurora */
.ms-end .ms-aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.75}
.ms-end .ms-aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.ms-end .ms-aurora i:nth-child(1){width:55%;height:60%;left:5%;top:20%;background:radial-gradient(circle,rgba(47,93,138,.85),transparent 65%);animation:ms-a1 16s ease-in-out infinite alternate}
.ms-end .ms-aurora i:nth-child(2){width:45%;height:55%;right:8%;top:10%;background:radial-gradient(circle,rgba(201,162,74,.55),transparent 65%);animation:ms-a2 19s ease-in-out infinite alternate}
.ms-end .ms-aurora i:nth-child(3){width:50%;height:50%;left:30%;bottom:0;background:radial-gradient(circle,rgba(110,80,160,.45),transparent 65%);animation:ms-a3 22s ease-in-out infinite alternate}
@keyframes ms-a1{to{transform:translate(18%,-10%) scale(1.15)}}
@keyframes ms-a2{to{transform:translate(-20%,12%) scale(.9)}}
@keyframes ms-a3{to{transform:translate(10%,-18%) scale(1.2)}}
.ms-end blockquote{will-change:transform}

/* FAQ height animation */
.ms-faq details p{overflow:hidden}

@media (max-width:760px){
  .ms-thread{display:none}
  .ms-thread+.ms-days{margin-top:clamp(28px,4vw,44px)}
  .ms-row span{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  .ms-shiny{animation:none;color:var(--ms-gold-hi)!important;background:none}
  .ms-ticket .beam,.ms-end .ms-aurora i{animation:none}
  .ms-thread .line{transform:none}.ms-thread b{transform:none}
}