/* Friendsgiving × Magic UI-style interactive layer. Uses the page's own color tokens (works in dark mode too). */

/* Scroll progress */
.mg-progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cranberry),var(--amber),var(--leaf));pointer-events:none}

/* Hero backdrop: dot pattern + animated squares + warm glows */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-40px -60px;z-index:-2;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--cranberry) 30%,transparent) 1.1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 30% 45%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 60% 70% at 30% 45%,#000 20%,transparent 75%)}
.mg-grid{position:absolute;inset:-40px -60px;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask:radial-gradient(ellipse 60% 70% at 30% 45%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 60% 70% at 30% 45%,#000 20%,transparent 75%)}
.mg-grid i{position:absolute;width:44px;height:44px;border-radius:6px;background:color-mix(in srgb,var(--amber) 22%,transparent);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);opacity:0;animation:mg-sq 5s ease-in-out infinite}
@keyframes mg-sq{50%{opacity:1}}
.mg-glow{position:fixed;z-index:-3;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none}
.mg-glow.a{width:460px;height:460px;left:-160px;top:-80px;background:var(--amber);animation:mg-drift 18s ease-in-out infinite alternate}
.mg-glow.b{width:380px;height:380px;right:-120px;top:40vh;background:var(--cranberry);opacity:.16;animation:mg-drift 22s ease-in-out -9s infinite alternate}
@keyframes mg-drift{to{transform:translate(70px,50px) scale(1.15)}}

/* Falling leaves */
.mg-leaves{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mg-leaves i{position:absolute;top:-40px;width:var(--s);height:var(--s);border-radius:0 80% 0 80%;background:var(--c);opacity:.5;animation:mg-fall var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes mg-fall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--x),55vh) rotate(220deg)}100%{transform:translate(calc(var(--x) * -.6),112vh) rotate(460deg)}}

/* Headline shine on "giving" */
.hero h1 em{background:linear-gradient(100deg,var(--cranberry) 0%,var(--cranberry) 35%,var(--amber) 50%,var(--cranberry) 65%,var(--cranberry) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mg-shine 5s linear infinite}
@keyframes mg-shine{from{background-position:100% 0}to{background-position:-150% 0}}

/* Hero photo: border beam around the arch + 3D tilt + glare */
.photo{perspective:1000px}
.mg-tilt{position:relative;transform-style:preserve-3d;transition:transform .4s ease;border-radius:200px 200px 24px 24px}
.mg-tilt.on{transition:transform .08s linear}
.mg-beam{position:absolute;inset:0;border-radius:200px 200px 24px 24px;padding:4px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--mg-a,0deg),transparent 0 68%,var(--amber) 80%,var(--cranberry) 88%,#F7C873 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mg-beam 5s linear infinite}
@property --mg-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes mg-beam{to{--mg-a:360deg}}
.mg-glare{position:absolute;inset:6px;border-radius:194px 194px 18px 18px;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.4),transparent 60%)}
.mg-tilt:hover .mg-glare{opacity:1}
.tag{z-index:3;animation:mg-wiggle 4s ease-in-out 1.5s infinite}
@keyframes mg-wiggle{0%,86%,100%{rotate:0deg}90%{rotate:-3deg}94%{rotate:3deg}}

/* Buttons: shimmer + pulse on the primary ones */
.btn:not(.ghost){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);animation:mg-sweep 3.2s ease-in-out infinite}
@keyframes mg-sweep{55%,100%{transform:translateX(130%)}}
.cta-row .btn:not(.ghost),.sticky .btn{animation:mg-pulse 2.6s ease-out infinite}
@keyframes mg-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cranberry) 45%,transparent)}80%,100%{box-shadow:0 0 0 14px transparent}}

/* Countdown tiles + ticking digits */
.count{border:0;padding:0;margin-top:8px;gap:12px}
.count .unit{flex-direction:column;align-items:center;gap:2px;min-width:78px;padding:12px 12px 10px;border-radius:16px;background:var(--ink);color:var(--ground);box-shadow:0 14px 28px -18px rgba(43,15,30,.7);position:relative;overflow:hidden}
.count .unit::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,var(--ground) 18%,transparent)}
.count .unit span{color:color-mix(in srgb,var(--ground) 70%,transparent);font-size:.66rem}
.count .unit b.tick{animation:mg-tick .45s ease}
@keyframes mg-tick{from{transform:translateY(-40%);opacity:0}to{transform:none;opacity:1}}
.count .lbl{align-self:center}

/* Marquee strip */
.mg-marquee{overflow:hidden;border-block:2px dashed var(--line);margin-top:clamp(40px,6vw,64px);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mg-marquee div{display:flex;gap:36px;width:max-content;padding:16px 0;animation:mg-marq 32s linear infinite;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--ink);white-space:nowrap}
.mg-marquee i{font-style:normal;color:var(--amber)}
.mg-marquee em{font-family:var(--hand);font-style:normal;font-weight:700;color:var(--cranberry)}
.mg-marquee:hover div{animation-play-state:paused}
@keyframes mg-marq{to{transform:translateX(-50%)}}

/* Evening: animated timeline beam + spotlight cards */
#evening .cards{position:relative}
.mg-line{position:absolute;left:4%;right:4%;top:-26px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.mg-line b{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--cranberry),var(--amber),var(--leaf))}
.mg-line i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--surface);border:3px solid var(--line);transition:border-color .3s,background .3s}
.mg-line i.lit{border-color:var(--cranberry);background:var(--amber)}
.mg-line{overflow:visible}
.card{transition:translate .3s ease,box-shadow .3s ease,border-color .3s ease;isolation:isolate}
.card:hover{translate:0 -6px;border-color:var(--amber);box-shadow:0 22px 40px -26px rgba(43,15,30,.55)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--amber) 22%,transparent),transparent 70%)}
.card:hover::before{opacity:1}
.card .fold{z-index:2}

/* Scripture text reveal */
.bigq .mg-w{opacity:.18;transition:opacity .35s ease}
.bigq .mg-w.on{opacity:1}

/* Calling chips: pick yours */
.calling{cursor:pointer;user-select:none;background:transparent;font:inherit;color:inherit}
.calling[aria-pressed="true"]{background:var(--cranberry);border-color:var(--cranberry);color:var(--on-accent);transform:translateY(-2px) rotate(-2deg)}
.mg-pick{margin-top:12px;min-height:1.6em;font-family:var(--hand);font-size:1.6rem;color:var(--leaf);line-height:1.15}
.mg-pick.pop{animation:mg-popin .5s ease}
@keyframes mg-popin{from{transform:translateY(8px) rotate(-2deg);opacity:0}to{transform:rotate(-1deg);opacity:1}}

/* Bishop: typing quote + sketch hover */
.quote .mg-caret{display:inline-block;width:2px;height:.9em;background:currentColor;margin-left:3px;vertical-align:-.05em;animation:mg-blink 1s steps(1) infinite}
@keyframes mg-blink{50%{opacity:0}}
.sketch{transition:transform .4s ease,box-shadow .4s ease}
.sketch:hover{transform:rotate(-1.5deg) scale(1.02);box-shadow:0 26px 50px -30px rgba(43,15,30,.6)}

/* Chairs: interactive */
.chair{cursor:pointer;transition:transform .25s ease,background .25s ease;border:0;padding:0;font:inherit}
.chair:hover{transform:translateY(-6px) rotate(-3deg);background:color-mix(in srgb,var(--amber) 55%,var(--chip))}
.chair.taken{background:var(--cranberry);animation:none}
.chair.taken::before{content:"yours!";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--hand);font-size:1.15rem;color:var(--on-accent)}
.chairs .mg-claim{flex-basis:100%;display:none;justify-content:center;margin-top:12px}
.chairs.claimed .mg-claim{display:flex}
.chairs.claimed p{color:var(--cranberry)}
.mg-confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

/* FAQ: smooth reveal */
details{transition:border-color .25s,box-shadow .25s}
details:hover{border-color:var(--amber)}
details[open]{box-shadow:0 14px 30px -24px rgba(43,15,30,.5)}
details[open] p{animation:mg-popin .35s ease}

/* Blur fade */
.mg-fade{opacity:0;filter:blur(6px);translate:0 14px;transition:opacity .7s ease,filter .7s ease,translate .7s ease}
.mg-fade.in{opacity:1;filter:none;translate:0 0}

@media (max-width:820px){
  .mg-line{display:none}
  .count .unit{min-width:64px;padding:10px 8px 8px}
  .mg-glow{opacity:.18}
}
@media (prefers-reduced-motion:reduce){
  .mg-leaves,.mg-grid{display:none}
  .bigq .mg-w,.mg-fade{opacity:1;filter:none;translate:0 0}
}