
/* Pierced Society v10.3.2 — dedicated flashy storefront intro */
.psj-intro{
  --psji-bg:#fbf9ff;
  --psji-accent:#7a43f0;
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
  overflow:hidden;
  isolation:isolate;
  background:var(--psji-bg);
  color:#12152a;
  opacity:1;
  visibility:visible;
}
.psj-intro.is-playing{display:block}
.psj-intro.is-exiting{pointer-events:none;animation:psji-exit .58s cubic-bezier(.7,0,.2,1) forwards}
.psj-intro__wash{
  position:absolute;inset:-25%;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.98) 0 7%,rgba(236,225,255,.78) 24%,transparent 47%),
    conic-gradient(from 220deg at 50% 50%,transparent 0 10%,rgba(255,255,255,.9) 14%,transparent 19% 35%,rgba(188,155,255,.26) 41%,transparent 49% 67%,rgba(255,255,255,.95) 73%,transparent 79%);
  transform:scale(.4) rotate(-20deg);
  opacity:0;
  animation:psji-wash 1.8s cubic-bezier(.2,.7,.2,1) forwards;
}
.psj-intro__flare{position:absolute;left:-35%;width:170%;height:2px;opacity:0;transform:rotate(-12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),#fff,rgba(178,135,255,.8),#fff,transparent);box-shadow:0 0 24px 7px rgba(181,144,255,.28)}
.psj-intro__flare--one{top:42%;animation:psji-flare 1.1s .25s ease-out forwards}
.psj-intro__flare--two{top:57%;transform:rotate(8deg);animation:psji-flare 1.05s .55s ease-out forwards}
.psj-intro__orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:0;mix-blend-mode:screen}
.psj-intro__orb--one{width:42vw;height:42vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#fff 0,rgba(191,161,255,.32) 24%,transparent 66%);animation:psji-orb 1.6s .1s ease-out forwards}
.psj-intro__orb--two{width:38vw;height:38vw;right:-10vw;bottom:-13vw;background:radial-gradient(circle,#fff 0,rgba(133,92,241,.25) 25%,transparent 67%);animation:psji-orb 1.7s .3s ease-out forwards}
.psj-intro__center{position:absolute;inset:0;display:grid;place-items:center;perspective:1000px}
.psj-intro__stone{
  position:absolute;
  width:118px;height:118px;
  display:grid;place-items:center;
  opacity:0;
  transform:scale(.1) rotate(-40deg);
  animation:psji-stone-in .72s .12s cubic-bezier(.16,1.4,.35,1) forwards,psji-stone-out .5s 1.05s ease-in forwards;
}
.psj-intro__stone:before,.psj-intro__stone:after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,92% 26%,100% 67%,71% 100%,29% 100%,0 67%,8% 26%);background:linear-gradient(135deg,#fff 0,#d8c7ff 20%,#fff 40%,#b68cff 61%,#fff 78%,#e9e0ff 100%);filter:drop-shadow(0 0 22px rgba(128,76,240,.38))}
.psj-intro__stone:after{inset:12px;background:conic-gradient(from 30deg,#fff,#c4a9ff,#fff,#8f5bf4,#fff,#d7c7ff,#fff);transform:rotate(18deg)}
.psj-intro__stone-core{position:relative;z-index:2;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 26px 14px rgba(255,255,255,.9)}
.psj-intro__title-wrap{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:min(900px,90vw);
  opacity:0;
  transform:translateY(24px) scale(.94);
  animation:psji-title .75s .78s cubic-bezier(.16,1,.3,1) forwards;
}
.psj-intro__eyebrow{margin-bottom:13px;color:var(--psji-accent);font-size:9px;font-weight:850;letter-spacing:.48em;text-indent:.48em}
.psj-intro__title{
  position:relative;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,7.4vw,116px);
  font-weight:500;
  line-height:.9;
  letter-spacing:-.055em;
  color:#11152b;
  text-align:center;
  text-shadow:0 8px 35px rgba(92,60,157,.08);
}
.psj-intro__subtitle{margin-top:22px;color:#575d76;font-size:clamp(8px,1vw,12px);font-weight:700;letter-spacing:.42em;text-indent:.42em;text-align:center}
.psj-intro__title-glint{position:absolute;top:22%;left:-15%;width:14%;height:70%;opacity:0;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);filter:blur(1px);animation:psji-glint .72s 1.25s ease-in-out forwards}
.psj-intro__ring{position:absolute;border:1px solid rgba(123,72,235,.24);border-radius:50%;opacity:0}
.psj-intro__ring i{position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(125,71,239,.7)}
.psj-intro__ring--one{width:330px;height:330px;left:calc(50% - 165px);top:calc(50% - 165px);animation:psji-ring1 1.45s .15s ease-out forwards}
.psj-intro__ring--two{width:520px;height:210px;left:calc(50% - 260px);top:calc(50% - 105px);transform:rotate(28deg);animation:psji-ring2 1.5s .28s ease-out forwards}
.psj-intro__ring--three{width:690px;height:290px;left:calc(50% - 345px);top:calc(50% - 145px);transform:rotate(-19deg);animation:psji-ring3 1.5s .38s ease-out forwards}
.psj-intro__gems i{position:absolute;color:var(--psji-accent);font-style:normal;opacity:0;text-shadow:0 0 15px rgba(126,77,241,.45)}
.psj-intro__gems .g1{left:9%;top:18%;font-size:18px;animation:psji-gem 1.4s .18s ease-out forwards}
.psj-intro__gems .g2{left:22%;top:72%;font-size:25px;animation:psji-gem 1.5s .38s ease-out forwards}
.psj-intro__gems .g3{left:31%;top:13%;font-size:12px;animation:psji-gem 1.35s .55s ease-out forwards}
.psj-intro__gems .g4{left:42%;top:82%;font-size:14px;animation:psji-gem 1.25s .22s ease-out forwards}
.psj-intro__gems .g5{left:57%;top:9%;font-size:18px;animation:psji-gem 1.5s .42s ease-out forwards}
.psj-intro__gems .g6{left:67%;top:76%;font-size:23px;animation:psji-gem 1.4s .12s ease-out forwards}
.psj-intro__gems .g7{left:78%;top:24%;font-size:14px;animation:psji-gem 1.3s .32s ease-out forwards}
.psj-intro__gems .g8{left:89%;top:66%;font-size:19px;animation:psji-gem 1.55s .5s ease-out forwards}
.psj-intro__gems .g9{left:14%;top:52%;font-size:10px;animation:psji-gem 1.2s .61s ease-out forwards}
.psj-intro__gems .g10{left:73%;top:48%;font-size:13px;animation:psji-gem 1.4s .66s ease-out forwards}
.psj-intro__gems .g11{left:48%;top:20%;font-size:9px;animation:psji-gem 1.25s .72s ease-out forwards}
.psj-intro__gems .g12{left:92%;top:35%;font-size:11px;animation:psji-gem 1.3s .27s ease-out forwards}
.psj-intro__flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;animation:psji-final-flash .42s 1.72s ease-out forwards}
.psj-intro__skip{position:absolute;right:24px;bottom:max(22px,env(safe-area-inset-bottom));z-index:5;padding:9px 13px;border:1px solid rgba(92,61,153,.14);border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);color:#615a73;font-size:9px;font-weight:750;letter-spacing:.08em;cursor:pointer;opacity:0;animation:psji-skip .4s .6s ease forwards}
.psj-intro--opal .psj-intro__wash{filter:hue-rotate(18deg) saturate(.78)}
.psj-intro--opal .psj-intro__stone:before{background:conic-gradient(from 20deg,#fff,#d8f7ff,#f5d9ff,#fff1d6,#d8e4ff,#fff)}
.psj-intro--diamond .psj-intro__stone{width:136px;height:136px}
.psj-intro--diamond .psj-intro__ring{border-color:rgba(104,63,219,.34)}
body.psj-intro-lock{overflow:hidden!important}
@keyframes psji-wash{0%{opacity:0;transform:scale(.4) rotate(-20deg)}45%{opacity:1}100%{opacity:.9;transform:scale(1.2) rotate(10deg)}}
@keyframes psji-flare{0%{opacity:0;transform:translateX(-20%) rotate(-12deg) scaleX(.2)}25%{opacity:1}100%{opacity:0;transform:translateX(24%) rotate(-12deg) scaleX(1)}}
@keyframes psji-orb{0%{opacity:0;transform:scale(.5)}60%{opacity:.8}100%{opacity:.28;transform:scale(1.18)}}
@keyframes psji-stone-in{0%{opacity:0;transform:scale(.1) rotate(-40deg)}70%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes psji-stone-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3.2) rotate(25deg);filter:blur(8px)}}
@keyframes psji-title{0%{opacity:0;transform:translateY(24px) scale(.94);filter:blur(9px)}100%{opacity:1;transform:none;filter:none}}
@keyframes psji-glint{0%{left:-15%;opacity:0}30%{opacity:.95}100%{left:105%;opacity:0}}
@keyframes psji-ring1{0%{opacity:0;transform:scale(.2) rotate(-70deg)}35%{opacity:.9}100%{opacity:0;transform:scale(1.8) rotate(70deg)}}
@keyframes psji-ring2{0%{opacity:0;transform:scale(.3) rotate(-35deg)}40%{opacity:.75}100%{opacity:0;transform:scale(1.7) rotate(60deg)}}
@keyframes psji-ring3{0%{opacity:0;transform:scale(.25) rotate(45deg)}45%{opacity:.55}100%{opacity:0;transform:scale(1.55) rotate(-70deg)}}
@keyframes psji-gem{0%{opacity:0;transform:translateY(25px) scale(.2) rotate(0)}35%{opacity:.9}100%{opacity:0;transform:translateY(-45px) scale(1.8) rotate(130deg)}}
@keyframes psji-final-flash{0%,100%{opacity:0}45%{opacity:.68}}
@keyframes psji-skip{to{opacity:1}}
@keyframes psji-exit{0%{opacity:1;filter:blur(0)}55%{opacity:.82}100%{opacity:0;visibility:hidden;filter:blur(7px);transform:scale(1.025)}}
@media(max-width:700px){
  .psj-intro__ring--three{width:480px;height:220px;left:calc(50% - 240px);top:calc(50% - 110px)}
  .psj-intro__ring--two{width:390px;height:180px;left:calc(50% - 195px);top:calc(50% - 90px)}
  .psj-intro__title{font-size:clamp(40px,13vw,70px)}
  .psj-intro__eyebrow{font-size:7px;letter-spacing:.36em;text-indent:.36em}
  .psj-intro__subtitle{max-width:88vw;font-size:7px;line-height:1.6;letter-spacing:.28em;text-indent:.28em}
  .psj-intro__skip{right:14px}
}
@media(prefers-reduced-motion:reduce){
  .psj-intro{display:none!important}
  body.psj-intro-lock{overflow:auto!important}
}
