/* Magic page (Oct 2026): floating cards, a pocket of sparkle, and a trick you can do on the page. */

/* ---------- Hero ---------- */
.mt-hero{position:relative;padding:168px 0 120px;overflow:hidden;
  background:radial-gradient(ellipse 55% 70% at 74% 50%,rgba(140,36,48,.28),rgba(15,13,12,0) 70%),var(--ground)}
.mt-hero .pb-split{align-items:center}
.mt-hero h1{margin:0;font-size:clamp(3.2rem,6.6vw,6rem);line-height:.98}
.mt-hero h1 .mo-line{display:block;overflow:hidden;padding:0 .2em .26em .12em;margin:0 -.2em -.26em -.12em}
.mt-hero h1 .mo-line>*{display:inline-block}
.mt-lede{margin:30px 0 0;max-width:520px;font-size:19px;line-height:1.65;color:var(--bone-2)}
.mt-hero .pb-actions{margin-top:36px}
.mo-js .mt-hero h1 .mo-line>*{transform:translateY(108%);transition:transform 1.25s var(--mo-ease)}
.mo-js .mt-hero h1 .mo-line:nth-child(2)>*{transition-delay:.16s}
.mo-ready .mt-hero h1 .mo-line>*{transform:none}
.mo-js .mt-hero .pb-eyebrow,.mo-js .mt-lede,.mo-js .mt-hero .pb-actions{opacity:0;transform:translateY(18px);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.mo-js .mt-lede{transition-delay:.45s}.mo-js .mt-hero .pb-actions{transition-delay:.65s}
.mo-ready .mt-hero .pb-eyebrow,.mo-ready .mt-lede,.mo-ready .mt-hero .pb-actions{opacity:1;transform:none}
/* "A proper show." levitates, ever so slightly */
.mo-ready .mt-hero h1 .mt-float{animation:mt-levitate 6s ease-in-out 1.6s infinite}
@keyframes mt-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Photo with cards floating around it */
.mt-stage{position:relative;justify-self:end;width:100%;max-width:560px}
.mt-stage .sv-frame{z-index:1}
.mt-fly{position:absolute;z-index:2;width:96px;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6));opacity:0;
  transition:opacity 1s ease}
.mt-fly img{display:block;width:100%;height:auto;border-radius:6px}
.mo-ready .mt-fly{opacity:1}
.mt-fly.a{left:-58px;top:8%;--r:-14deg;animation:mt-drift 7s ease-in-out infinite}
.mt-fly.b{right:-40px;top:-34px;--r:12deg;width:84px;animation:mt-drift 8.5s ease-in-out .8s infinite}
.mt-fly.c{right:-28px;bottom:-44px;--r:-8deg;width:104px;animation:mt-drift 9.5s ease-in-out 1.6s infinite}
@keyframes mt-drift{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-16px) rotate(calc(var(--r) + 6deg))}}
.mt-fly.a{transition-delay:.9s}.mt-fly.b{transition-delay:1.2s}.mt-fly.c{transition-delay:1.5s}

/* Sparkles follow the cursor through the hero */
.mt-spark{position:absolute;z-index:3;width:5px;height:5px;border-radius:50%;pointer-events:none;background:#F1C98F;
  box-shadow:0 0 8px 2px rgba(241,201,143,.7);animation:mt-spark .9s ease-out forwards}
@keyframes mt-spark{to{transform:translate(var(--x),var(--y)) scale(.1);opacity:0}}

/* ---------- The show includes ---------- */
.mt-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.mt-part{display:flex;flex-direction:column;gap:12px;padding-top:28px;border-top:1px solid var(--rule)}
.mt-part svg{width:40px;height:40px;stroke:var(--brass);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mt-part strong{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1}
.mt-part p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.mo-js .mt-part svg *{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 2s var(--mo-ease);transition-delay:calc(var(--mo-d,0s) + .3s)}
.mo-js .mt-part.is-in svg *{stroke-dashoffset:0}

/* ---------- The trick ---------- */
.mt-trick{padding:112px 0 120px;background:var(--panel);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  background-image:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(140,36,48,.16),rgba(15,13,12,0) 70%)}
.mt-trick .pb-center{margin-bottom:40px}
.mt-say{min-height:3.2em;margin:0 auto 34px;max-width:640px;text-align:center;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;color:var(--bone)}
.mt-say em{color:var(--oxblood-text)}
.mt-say.is-swap{animation:mt-say .5s ease}
@keyframes mt-say{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mt-table{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;min-height:220px;max-width:900px;margin:0 auto;perspective:1200px}
.mt-card{position:relative;width:118px;aspect-ratio:5/7;transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .5s}
.mt-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.mt-card.is-down .mt-inner{transform:rotateY(180deg)}
.mt-card.is-gathered{transform:translate(var(--gx,0),var(--gy,0)) rotate(var(--gr,0deg))}
.mt-face,.mt-back{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 26px rgba(0,0,0,.5)}
.mt-face{background:linear-gradient(160deg,#FBF4E6,#F3EADB 60%,#E8DCC6);color:#1A1512;display:flex;flex-direction:column;justify-content:space-between;padding:9px 10px;box-sizing:border-box}
.mt-face.red{color:#A82434}
.mt-ix{font-family:var(--display);font-size:20px;line-height:.95;text-align:center;width:max-content}
.mt-ix i{display:block;font-style:normal;font-size:16px}
.mt-ix.flip{align-self:flex-end;transform:rotate(180deg)}
.mt-big{position:absolute;inset:22% 18%;border:1px solid currentColor;border-radius:4px;opacity:.9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mt-big b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1}
.mt-big span{font-size:26px;line-height:1}
.mt-back{transform:rotateY(180deg);background:
    radial-gradient(circle at 50% 50%,rgba(194,155,95,.55) 0 7px,rgba(0,0,0,0) 8px),
    repeating-linear-gradient(45deg,rgba(194,155,95,.18) 0 2px,rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(-45deg,rgba(194,155,95,.18) 0 2px,rgba(0,0,0,0) 2px 9px),#5A1520;
  outline:5px solid #F1E7D3;outline-offset:-10px}
.mt-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
.mt-controls[hidden]{display:none}
.mt-burst{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#F1C98F;box-shadow:0 0 10px 3px rgba(241,201,143,.7);pointer-events:none;
  animation:mt-spark 1s ease-out forwards}
.mt-hint{margin:22px auto 0;text-align:center;font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  .mt-hero{padding:128px 0 84px}
  .mt-stage{justify-self:stretch;max-width:none;margin:10px 18px 0 30px;width:auto}
  .mt-fly{width:70px}.mt-fly.b{width:62px;right:-16px;top:-26px}.mt-fly.c{width:74px;right:-12px}.mt-fly.a{left:-34px}
  .mt-parts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .mt-table{gap:12px;max-width:380px}
  .mt-card{width:96px}
  .mt-big b{font-size:32px}.mt-big span{font-size:20px}
}
@media (max-width:560px){.mt-parts{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .mt-fly{animation:none!important;opacity:1!important;transform:rotate(var(--r))}
  .mo-ready .mt-hero h1 .mt-float{animation:none}
  .mo-js .mt-hero h1 .mo-line>*,.mo-js .mt-hero .pb-eyebrow,.mo-js .mt-lede,.mo-js .mt-hero .pb-actions{opacity:1!important;transform:none!important;transition:none!important}
  .mo-js .mt-part svg *{stroke-dashoffset:0!important;transition:none!important}
  .mt-card,.mt-inner{transition-duration:.01s!important}
}
.mt-fly.c{right:auto;left:-34px;bottom:-56px;--r:9deg}
.mt-fly.a{top:2%}
@media (max-width:900px){.mt-fly.c{left:-22px;right:auto;bottom:-40px}}

/* ---------- Invitation to the one-time trick (disappears once it has been seen) ---------- */
.ty-invite{padding:0 0 80px}
.ty-invite[hidden]{display:none}
.ty-invite-box{display:flex;align-items:center;gap:30px;max-width:720px;margin:0 auto;padding:30px 32px;
  border:1px solid rgba(194,155,95,.35);background:linear-gradient(120deg,rgba(140,36,48,.24),rgba(23,20,18,.92))}
.ty-invite-box img{flex:none;width:96px;height:auto;border-radius:7px;transform:rotate(-7deg);box-shadow:0 14px 30px rgba(0,0,0,.55);animation:ty-wink 5s ease-in-out infinite}
@keyframes ty-wink{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(3deg) translateY(-6px)}}
.ty-invite-box h3{margin:8px 0 10px;font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,4vw,2.2rem);line-height:1.1;color:var(--bone)}
.ty-invite-box p:not(.pb-eyebrow){margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--bone-2)}
@media (max-width:600px){.ty-invite-box{flex-direction:column;text-align:center;padding:26px 22px;gap:18px}.ty-invite-box img{width:84px}}
@media (prefers-reduced-motion:reduce){.ty-invite-box img{animation:none}}