/* Mysteries page (Oct 2026): fog, gaslight, spirit photography, case files. */

/* ---------- Hero ---------- */
.my-hero{position:relative;padding:168px 0 104px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 60% 70% at 20% 30%,rgba(60,78,92,.22),rgba(15,13,12,0) 70%),
             radial-gradient(ellipse 50% 60% at 80% 60%,rgba(140,36,48,.2),rgba(15,13,12,0) 70%),var(--ground)}
.my-hero .pb-split{position:relative;z-index:2;align-items:center}
.my-hero h1{margin:0;font-size:clamp(3.2rem,6.4vw,5.8rem);line-height:.98}
.my-hero h1 .mo-line{display:block;overflow:hidden;padding:0 .2em .26em .12em;margin:0 -.2em -.26em -.12em}
.my-hero h1 .mo-line>*{display:inline-block}
.my-lede{margin:30px 0 0;max-width:540px;font-size:19px;line-height:1.65;color:var(--bone-2)}
.my-hero .pb-actions{margin-top:36px}
.mo-js .my-hero h1 .mo-line:first-child>*{transform:translateY(108%);transition:transform 1.25s var(--mo-ease)}
.mo-ready .my-hero h1 .mo-line:first-child>*{transform:none}
/* "the mystery." materialises like a spirit: blurred, faint, then solid */
.mo-js .my-hero h1 .my-apparition{opacity:0;filter:blur(14px);transform:translateY(10px) scale(1.04);letter-spacing:.06em;
  transition:opacity 2.2s ease .5s,filter 2.4s ease .5s,transform 2.4s var(--mo-ease) .5s,letter-spacing 2.4s var(--mo-ease) .5s}
.mo-ready .my-hero h1 .my-apparition{opacity:1;filter:blur(0);transform:none;letter-spacing:0}
.mo-js .my-hero .pb-eyebrow,.mo-js .my-lede,.mo-js .my-hero .pb-actions{opacity:0;transform:translateY(18px);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.mo-js .my-lede{transition-delay:1.2s}
.mo-js .my-hero .pb-actions{transition-delay:1.4s}
.mo-ready .my-hero .pb-eyebrow,.mo-ready .my-lede,.mo-ready .my-hero .pb-actions{opacity:1;transform:none}

/* Fog banks rolling through */
.my-fog{position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;opacity:.55;filter:blur(30px)}
.my-fog i{position:absolute;inset:0;display:block;
  background:
    radial-gradient(ellipse 22% 14% at 18% 70%,rgba(200,210,220,.10),rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 28% 16% at 48% 82%,rgba(200,210,220,.09),rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 20% 12% at 78% 66%,rgba(200,210,220,.10),rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 26% 18% at 92% 88%,rgba(200,210,220,.08),rgba(0,0,0,0) 70%);
  animation:my-drift 38s linear infinite}
.my-fog i:nth-child(2){animation-duration:56s;animation-direction:reverse;opacity:.8;transform:translateY(-12%)}
@keyframes my-drift{from{transform:translateX(-12%)}to{transform:translateX(12%)}}

/* Wisps: something passes behind the text now and then */
.my-wisp{position:absolute;z-index:1;pointer-events:none;width:180px;height:420px;left:-220px;top:18%;opacity:0;
  background:radial-gradient(ellipse 40% 50% at 50% 35%,rgba(214,226,236,.22),rgba(214,226,236,0) 70%),
             radial-gradient(ellipse 22% 60% at 50% 70%,rgba(214,226,236,.12),rgba(214,226,236,0) 70%);
  filter:blur(10px);animation:my-wisp 19s ease-in-out infinite 3s}
.my-wisp.two{top:34%;width:130px;height:320px;animation-duration:27s;animation-delay:12s}
@keyframes my-wisp{
  0%{transform:translate(0,0) rotate(-4deg);opacity:0}
  12%{opacity:.9}
  50%{transform:translate(70vw,-30px) rotate(5deg);opacity:.7}
  85%{opacity:.5}
  100%{transform:translate(130vw,10px) rotate(-3deg);opacity:0}}

/* Gas-lamp flicker over the whole scene, gentle and slow */
.my-hero:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#0F0D0C;opacity:0;animation:my-gaslight 9s infinite}
@keyframes my-gaslight{0%,86%,100%{opacity:0}88%{opacity:.18}89%{opacity:.04}91%{opacity:.22}93%{opacity:.02}}

/* Spirit photograph: a faint double exposure drifts over the photo */
.my-photo{position:relative}
.my-photo .my-double{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;border-radius:2px;
  opacity:0;mix-blend-mode:screen;filter:grayscale(1) contrast(1.2) brightness(1.1) blur(.6px);animation:my-spirit 11s ease-in-out infinite 2.5s}
@keyframes my-spirit{
  0%,100%{opacity:0;transform:translate(0,0) scale(1)}
  30%{opacity:.26;transform:translate(14px,-10px) scale(1.035)}
  60%{opacity:.14;transform:translate(-8px,6px) scale(1.02)}}
.my-photo .sv-tag{background:#1b1715;border:1px solid var(--oxblood-text);color:var(--bone)}

/* ---------- Crime scene tape ---------- */
.my-tapes{position:relative;height:210px;overflow:hidden;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);background:var(--ground)}
.my-tape{position:absolute;left:-10%;right:-10%;top:50%;height:52px;display:flex;align-items:center;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.my-tape.a{background:var(--brass);color:#16110d;transform:translateY(-70%) rotate(-4deg)}
.my-tape.b{background:var(--oxblood);color:#FFF4E2;transform:translateY(-10%) rotate(3deg)}
.my-tape .my-run{display:flex;width:max-content;animation:sv-marquee 34s linear infinite}
.my-tape.b .my-run{animation-direction:reverse;animation-duration:42s}
.my-tape span{font:600 15px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;padding:0 26px}
.my-tape i{font-style:normal;align-self:center}
.mo-js .my-tape{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--mo-ease-io)}
.mo-js .my-tape.b{transition-delay:.35s}
.mo-js .my-tapes.is-in .my-tape{clip-path:inset(0 0 0 0)}

/* ---------- Case files ---------- */
.my-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.my-case{position:relative;display:flex;flex-direction:column;gap:14px;padding:38px 38px 40px;background:var(--panel);border:1px solid var(--rule);overflow:hidden}
.my-case .my-no{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.my-case small{color:var(--muted)!important;letter-spacing:.16em!important}
.my-case strong{padding-right:120px}
.my-case p{margin:0;font-size:16px;line-height:1.65;color:var(--muted)}
.my-case .sv-more{margin-top:auto;padding-top:10px}
.my-case:before{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;pointer-events:none;opacity:.05;
  background:repeating-radial-gradient(ellipse 60% 70% at 50% 50%,var(--bone) 0 2px,rgba(0,0,0,0) 2px 7px)}
/* The stamp lands with a thump */
.my-stamp{position:absolute;top:30px;right:26px;z-index:2;padding:8px 12px 7px;border:2px solid var(--oxblood-text);color:var(--oxblood-text);
  font:700 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-align:center;transform:rotate(-11deg);border-radius:3px;
  mix-blend-mode:screen;opacity:.92;max-width:130px}
.my-stamp small{display:block;font:600 10px/1.2 var(--sans)!important;letter-spacing:.14em!important;color:inherit!important;margin-top:4px}
.my-stamp.brass{border-color:var(--brass);color:var(--brass)}
.mo-js .my-case .my-stamp{opacity:0;transform:rotate(-24deg) scale(2.6)}
.mo-js .my-case.is-in .my-stamp{animation:my-stamp .5s cubic-bezier(.3,1.6,.6,1) forwards;animation-delay:calc(var(--mo-d,0s) + .55s)}
.mo-js .my-case.is-in{animation:my-thump .35s ease-out;animation-delay:calc(var(--mo-d,0s) + .85s)}
@keyframes my-stamp{to{opacity:.92;transform:rotate(-11deg) scale(1)}}
@keyframes my-thump{0%,100%{translate:0 0}30%{translate:0 3px}60%{translate:0 -1px}}

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

@media (max-width:900px){
  .my-hero{padding:128px 0 76px}
  .my-cases{grid-template-columns:minmax(0,1fr)}
  .my-roles{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .my-case{padding:32px 26px 34px}
  .my-case strong{padding-right:0;margin-top:44px}
  .my-stamp{top:24px;right:20px}
  .my-tapes{height:170px}
}
@media (max-width:560px){.my-roles{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .my-fog i,.my-wisp,.my-hero:after,.my-photo .my-double,.my-tape .my-run{animation:none!important}
  .my-wisp,.my-photo .my-double{display:none}
  .mo-js .my-hero h1 .my-apparition,.mo-js .my-hero h1 .mo-line>*,.mo-js .my-hero .pb-eyebrow,.mo-js .my-lede,.mo-js .my-hero .pb-actions,.mo-js .my-tape{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important;transition:none!important;letter-spacing:0!important}
  .mo-js .my-tape.a{transform:translateY(-70%) rotate(-4deg)!important}
  .mo-js .my-tape.b{transform:translateY(-10%) rotate(3deg)!important}
  .mo-js .my-case .my-stamp{opacity:.92!important;transform:rotate(-11deg)!important;animation:none!important}
  .mo-js .my-case.is-in{animation:none!important}
  .mo-js .my-role svg *{stroke-dashoffset:0!important;transition:none!important}
}
.my-hero h1 .my-line2{display:block}.my-hero h1 .my-apparition{display:inline-block}
.my-case .my-no{margin:0}