
/* =========================================================
   SONOFPOLLUX Portal v3.0 — CHROMA / Visual System
   Pink + blue contamination, art-led surfaces, unified motion.
   ========================================================= */

:root{
  --sop-pink-hot:#ff4fa9;
  --sop-pink-soft:#f09ac9;
  --sop-blue-hot:#4da0ff;
  --sop-blue-soft:#92b9ff;
  --sop-violet:#a66dff;
  --sop-ink:#06070d;
  --sop-paper:#f7f4fb;
  --sop-chroma-line:rgba(255,255,255,.12);
  --sop-chroma-glow:0 24px 90px rgba(0,0,0,.46);
  --sop-chroma-pink:255,79,169;
  --sop-chroma-blue:77,160,255;
}

html{background:var(--sop-ink)}
body.portalV30{
  min-height:100%;
  background:
    radial-gradient(1200px 680px at -8% 8%,rgba(var(--sop-chroma-pink),.12),transparent 58%),
    radial-gradient(1050px 720px at 108% 0%,rgba(var(--sop-chroma-blue),.12),transparent 60%),
    radial-gradient(900px 660px at 48% 46%,rgba(133,86,194,.05),transparent 70%),
    linear-gradient(180deg,#07080e 0%,#090a12 48%,#06070c 100%);
}
body.portalV30::before{
  content:"";
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 86%);
}
body.portalV30::after{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1px 1px at 11% 14%,rgba(255,255,255,.45),transparent 70%),
    radial-gradient(1px 1px at 79% 21%,rgba(255,255,255,.28),transparent 70%),
    radial-gradient(1px 1px at 63% 71%,rgba(255,255,255,.22),transparent 70%),
    radial-gradient(1px 1px at 27% 62%,rgba(255,255,255,.18),transparent 70%);
  background-size:420px 420px,510px 510px,560px 560px,620px 620px;
  opacity:.45;
}

/* ---------- global chrome ---------- */
.portalV30 .topbar,
.portalV30 .projectsTop,
.portalV30 .atlasTop,
.portalV30 .creatorTop,
.portalV30 .toolTop,
.portalV30 .toolsTop{
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  background:rgba(5,6,11,.80)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.22);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
}
.portalV30 .brand__mark,
.portalV30 .atlasBrand::first-letter{
  color:var(--sop-pink-hot);
  text-shadow:0 0 24px rgba(var(--sop-chroma-pink),.48);
}
.portalV30 .brand__sub{
  border-color:rgba(var(--sop-chroma-blue),.28);
  color:rgba(223,233,255,.68);
}
.portalV30 .nav__link,
.portalV30 .atlasTop nav a{
  position:relative;
}
.portalV30 .nav__link:hover,
.portalV30 .atlasTop nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.045);
}
.portalV30 .nav__link::after,
.portalV30 .atlasTop nav a::after{
  content:"";
  position:absolute;
  left:18%; right:18%; bottom:4px;
  height:1px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s ease;
  background:linear-gradient(90deg,var(--sop-pink-hot),var(--sop-blue-hot));
}
.portalV30 .nav__link:hover::after,
.portalV30 .atlasTop nav a:hover::after{transform:scaleX(1)}
.portalV30 .btn--primary,
.portalV30 .topbar__cta{
  border-color:rgba(var(--sop-chroma-pink),.28)!important;
  background:
    linear-gradient(120deg,rgba(var(--sop-chroma-pink),.22),rgba(var(--sop-chroma-blue),.12))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 10px 34px rgba(var(--sop-chroma-pink),.08);
}
.portalV30 .btn--primary:hover,
.portalV30 .topbar__cta:hover{
  border-color:rgba(var(--sop-chroma-blue),.40)!important;
  box-shadow:0 14px 42px rgba(var(--sop-chroma-pink),.12),0 4px 24px rgba(var(--sop-chroma-blue),.10);
}

/* never float utility buttons into screen corners */
.portalV30 .portalCommandTrigger:not(.portalCommandTrigger--header),
.portalV30 .portalAdvertiseFab,
.portalV30 .adsFab,
.portalV30 [data-ad-fab]{display:none!important}
.portalV30 .portalCommandTrigger--header{
  position:static!important; inset:auto!important;
  transform:none!important;
}

/* ---------- CHROMA typography ---------- */
.portalV30 h1,.portalV30 h2,.portalV30 h3{
  text-wrap:balance;
}
.portalV30 h1{
  letter-spacing:-.055em;
}
.portalV30 .sopGradientText,
.portalV30 .creatorHero h1 em,
.portalV30 .afterHero h1 em{
  color:transparent;
  background:linear-gradient(105deg,#fff 0%,#f7b5d7 34%,#ff56ad 48%,#a88cf6 64%,#6ea9ff 84%,#dbe9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.portalV30 .sectionHead::before{
  content:"";
  display:block;
  width:46px;height:2px;margin:0 0 12px;
  background:linear-gradient(90deg,var(--sop-pink-hot),var(--sop-blue-hot));
  box-shadow:0 0 16px rgba(var(--sop-chroma-pink),.25);
}

/* ---------- art frames ---------- */
.sopArtFrame{
  --mx:50%;--my:50%;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  min-height:280px;
  background:#07080f;
  box-shadow:var(--sop-chroma-glow);
  isolation:isolate;
}
.sopArtFrame::before{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(420px 300px at var(--mx) var(--my),rgba(255,255,255,.08),transparent 65%),
    linear-gradient(135deg,rgba(var(--sop-chroma-pink),.10),transparent 42%,rgba(var(--sop-chroma-blue),.10));
  mix-blend-mode:screen;
}
.sopArtFrame::after{
  content:"";
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,5,10,.72) 100%);
}
.sopArtFrame img{
  position:absolute; inset:0;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.018);
  transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s ease;
  filter:saturate(.96) contrast(1.03);
}
.sopArtFrame:hover img{transform:scale(1.045)}
.sopArtFrame__label{
  position:absolute; z-index:5;
  left:18px; bottom:16px; right:18px;
  display:flex;justify-content:space-between;gap:14px;align-items:end;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.sopArtFrame__label strong{font-size:12px;color:#fff;letter-spacing:.08em}

.sopChromaRule{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--sop-chroma-pink),.65),rgba(var(--sop-chroma-blue),.65),transparent);
  box-shadow:0 0 24px rgba(var(--sop-chroma-pink),.14);
}

/* ---------- portal home ---------- */
.portalV30 .afterHero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:clamp(22px,4vw,52px);
  align-items:stretch;
}
.portalV30 .afterHero > .reveal:first-child{
  align-self:center;
  padding:clamp(24px,4vw,54px) 0;
}
.portalV30 .afterHero h1{
  font-size:clamp(58px,8vw,118px);
  line-height:.82;
  max-width:8.7ch;
}
.portalV30 .afterHero h1 em{
  display:block;
  margin-top:.12em;
  font-style:normal;
  line-height:.98;
  font-size:.42em;
  letter-spacing:-.035em;
}
.portalV30 .afterHero__lead{max-width:62ch}
.portalV30 .afterHero__side{
  position:relative;
  min-height:570px;
  padding:0!important;
  overflow:hidden;
  border-radius:28px!important;
  background:#07080e!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.portalV30 .afterHero__side .portalHeroArt{
  position:absolute; inset:0; z-index:0;
}
.portalV30 .afterHero__side .portalHeroArt img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:saturate(1.08) contrast(1.03);
}
.portalV30 .afterHero__side .portalHeroArt::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,8,14,.06) 0%,rgba(7,8,14,.35) 42%,rgba(7,8,14,.96) 88%),
    linear-gradient(90deg,rgba(var(--sop-chroma-pink),.10),transparent 44%,rgba(var(--sop-chroma-blue),.10));
}
.portalV30 .afterHero__side > :not(.portalHeroArt){
  position:relative; z-index:2;
}
.portalV30 .afterHero__sideTop{padding:20px 22px 0}
.portalV30 .afterHero__side h2,
.portalV30 .afterHero__side > p,
.portalV30 .afterHero__steps{margin-left:22px;margin-right:22px}
.portalV30 .afterHero__side h2{margin-top:auto;padding-top:245px}
.portalV30 .afterHero__steps{padding-bottom:20px}
.portalV30 .afterHero__step{
  background:rgba(4,5,9,.56)!important;
  backdrop-filter:blur(10px);
}
.portalV30 .portalRail__card,
.portalV30 a.featureCard,
.portalV30 .portalUtility a,
.portalV30 .portalPulse,
.portalV30 .portalRoomBand{
  background:
    radial-gradient(480px 260px at 0% 0%,rgba(var(--sop-chroma-pink),.055),transparent 70%),
    radial-gradient(480px 260px at 100% 100%,rgba(var(--sop-chroma-blue),.055),transparent 70%),
    rgba(255,255,255,.028)!important;
  border-color:rgba(255,255,255,.085)!important;
}
.portalV30 .portalRail__card:hover,
.portalV30 a.featureCard:hover,
.portalV30 .portalUtility a:hover{
  border-color:rgba(var(--sop-chroma-pink),.24)!important;
  transform:translateY(-3px);
}
.portalV30 .portalRail__card--radio{
  background:
    linear-gradient(145deg,rgba(var(--sop-chroma-pink),.10),rgba(10,11,20,.86) 42%,rgba(var(--sop-chroma-blue),.09))!important;
}

/* visual band */
.sopVisualBand{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:12px;
}
.sopVisualBand .sopArtFrame{min-height:340px}
.sopVisualBand .sopArtFrame:first-child{min-height:450px}
.sopVisualBand__copy{
  grid-column:1/-1;
  display:flex;justify-content:space-between;align-items:end;gap:22px;
  padding:12px 2px 0;
}
.sopVisualBand__copy h2{font-size:clamp(34px,5vw,72px);margin:0;line-height:.92}
.sopVisualBand__copy p{max-width:52ch;color:var(--sop-muted);margin:0 0 6px}

/* ---------- Creator Archive ---------- */
.portalV30.creatorBiblePage .creatorHero{
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.portalV30.creatorBiblePage .creatorHero__grid{
  grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr)!important;
  align-items:stretch!important;
}
.creatorHeroArt{
  position:relative;
  min-height:650px;
  border-left:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  background:#07080f;
}
.creatorHeroArt img{
  position:absolute; inset:0;
  width:100%;height:100%;object-fit:cover;
}
.creatorHeroArt::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(7,8,14,.94) 0%,rgba(7,8,14,.20) 36%,transparent 58%),
    linear-gradient(180deg,transparent 54%,rgba(7,8,14,.84));
}
.creatorHeroArt__stamp{
  position:absolute;z-index:4;right:24px;bottom:22px;
  display:grid;gap:3px;text-align:right;
  letter-spacing:.13em;text-transform:uppercase;font-size:10px;color:rgba(255,255,255,.56);
}
.creatorHeroArt__stamp b{font-size:12px;color:#fff}
.portalV30.creatorBiblePage .creatorHero h1{
  position:relative;z-index:5;
  font-size:clamp(64px,8.2vw,128px)!important;
  line-height:.78!important;
}
.portalV30.creatorBiblePage .creatorHero h1::after{
  content:"ARCHIVE";
  display:block;
  color:transparent;
  background:linear-gradient(100deg,var(--sop-pink-hot),#b675ed 52%,var(--sop-blue-hot));
  -webkit-background-clip:text;background-clip:text;
}
.portalV30 .creatorArchiveNav{
  border-color:rgba(255,255,255,.09)!important;
  background:rgba(8,9,15,.74)!important;
  backdrop-filter:blur(16px);
}
.portalV30 .creatorArchiveNav a[aria-current="page"],
.portalV30 .creatorArchiveNav a:hover{
  color:#fff;
  background:linear-gradient(110deg,rgba(var(--sop-chroma-pink),.11),rgba(var(--sop-chroma-blue),.07));
}
.portalV30 .creatorChapter{
  border-top:1px solid rgba(255,255,255,.07);
}
.portalV30 .creatorChapter__head h2{
  font-size:clamp(48px,7vw,94px)!important;
  line-height:.84;
}
.portalV30 .creatorEvidence,
.portalV30 .creatorProse,
.portalV30 .creatorThesis,
.portalV30 .creatorDualRecord,
.portalV30 .creatorUnknowns{
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.025)!important;
}
.creatorVisualTease{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:12px;
  margin:16px 0 36px;
}
.creatorVisualTease .sopArtFrame:first-child{min-height:520px}
.creatorVisualTease .sopArtFrame:last-child{min-height:520px}
.creatorVisualTease__footer{
  grid-column:1/-1;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:20px 0 0;
}
.creatorVisualTease__footer h2{margin:0;font-size:clamp(32px,4vw,54px)}
.creatorVisualTease__footer p{margin:0;max-width:58ch;color:var(--sop-muted)}

/* ---------- Visual Archive page ---------- */
.visualArchivePage .visualHero{
  padding:clamp(46px,7vw,100px) 0 34px;
}
.visualHero__grid{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,70px);align-items:center;
}
.visualHero h1{
  margin:0;font-size:clamp(64px,9vw,138px);line-height:.78;letter-spacing:-.065em;
}
.visualHero h1 span{
  display:block;color:transparent;
  background:linear-gradient(100deg,var(--sop-pink-hot),#b878ee,var(--sop-blue-hot));
  -webkit-background-clip:text;background-clip:text;
}
.visualHero p{max-width:56ch;color:var(--sop-muted);font-size:18px;line-height:1.65}
.visualHero .sopArtFrame{min-height:680px}
.visualGallery{
  display:grid;grid-template-columns:repeat(12,1fr);gap:12px;
}
.visualGallery .sopArtFrame:nth-child(1){grid-column:span 7;min-height:520px}
.visualGallery .sopArtFrame:nth-child(2){grid-column:span 5;min-height:520px}
.visualGallery .sopArtFrame:nth-child(3){grid-column:span 4;min-height:430px}
.visualGallery .sopArtFrame:nth-child(4){grid-column:span 4;min-height:430px}
.visualGallery .sopArtFrame:nth-child(5){grid-column:span 4;min-height:430px}
.visualManifesto{
  display:grid;grid-template-columns:.65fr 1.35fr;gap:30px;
  padding:50px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.visualManifesto h2{margin:0;font-size:clamp(44px,6vw,84px);line-height:.86}
.visualManifesto__body{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.visualManifesto__body article{
  padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  background:rgba(255,255,255,.025);
}
.visualManifesto__body b{display:block;color:#fff;margin-bottom:8px}
.visualManifesto__body p{margin:0;color:var(--sop-muted);line-height:1.55}
.roomPalette{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  margin-top:18px;
}
.roomPalette div{
  min-height:150px;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,var(--c1),var(--c2));
}
.roomPalette b{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.roomPalette span{font-size:11px;color:rgba(255,255,255,.62);margin-top:4px}

/* ---------- Radio ---------- */
.portalV30.radioPage .hero__grid{
  grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr)!important;
  align-items:stretch!important;
}
.portalV30.radioPage .hero__sigil{
  min-height:430px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  overflow:hidden;
  position:relative;
  background:#07080e;
}
.portalV30.radioPage .hero__sigil .sigil{display:none!important}
.radioHeroArt{position:absolute;inset:0}
.radioHeroArt img{width:100%;height:100%;object-fit:cover}
.radioHeroArt::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,14,.45),transparent 50%),
    linear-gradient(180deg,transparent 45%,rgba(7,8,14,.78));
}
.radioHeroArt span{
  position:absolute;z-index:2;bottom:18px;right:18px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.portalV30.radioPage .hero__title{
  font-size:clamp(58px,7.2vw,108px)!important;
  line-height:.82!important;
}
.portalV30.radioPage .hero__accent{
  color:transparent!important;
  background:linear-gradient(100deg,var(--sop-pink-hot),#b47ae8,var(--sop-blue-hot));
  -webkit-background-clip:text;background-clip:text;
}
.portalV30.radioPage .card--player,
.portalV30.radioPage .radioContext,
.portalV30.radioPage .radioWitness{
  border-color:rgba(255,255,255,.09)!important;
  background:
    radial-gradient(700px 420px at 0% 0%,rgba(var(--sop-chroma-pink),.055),transparent 68%),
    radial-gradient(700px 420px at 100% 100%,rgba(var(--sop-chroma-blue),.05),transparent 70%),
    rgba(10,11,18,.76)!important;
}
.portalV30.radioPage .radioArtworkWrap{
  border-color:rgba(var(--sop-chroma-pink),.16)!important;
}

/* ---------- Projects / account / Signals / tools ---------- */
.portalV30.projectsPage .projectCard,
.portalV30 .accountCard,
.portalV30 .signals-card,
.portalV30 .toolCard,
.portalV30 .creatorToolCard,
.portalV30 .card{
  border-color:rgba(255,255,255,.085);
}
.portalV30.projectsPage .projectCard:hover,
.portalV30 .signals-card:hover,
.portalV30 .toolCard:hover{
  border-color:rgba(var(--sop-chroma-blue),.22);
  box-shadow:0 20px 70px rgba(0,0,0,.30),0 0 0 1px rgba(var(--sop-chroma-pink),.04);
}
.portalV30.projectsPage .projectCard::before,
.portalV30 .signals-card::before,
.portalV30 .toolCard::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--sop-chroma-pink),.35),rgba(var(--sop-chroma-blue),.35),transparent);
  opacity:.5;
}

/* ---------- Rooms ---------- */
.portalV30.roomAtlasPage .atlasCard{
  overflow:hidden;
}
.portalV30.roomAtlasPage .atlasCard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(360px 240px at 0% 0%,rgba(var(--sop-chroma-pink),.035),transparent 70%),
    radial-gradient(360px 240px at 100% 100%,rgba(var(--sop-chroma-blue),.035),transparent 70%);
}
.portalV30.roomAtlasPage .atlasHero h1{
  font-size:clamp(62px,8vw,124px)!important;
  line-height:.8;
}

/* ---------- page footer ---------- */
.portalV30 .footer{
  position:relative;
  margin-top:64px;
  border-top:1px solid rgba(255,255,255,.08);
}
.portalV30 .footer::before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(var(--sop-chroma-pink),.42),rgba(var(--sop-chroma-blue),.42),transparent 95%);
}

/* ---------- motion ---------- */
.portalV30 [data-chroma-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.portalV30 [data-chroma-reveal].is-visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .portalV30 .afterHero,
  .visualHero__grid,
  .portalV30.creatorBiblePage .creatorHero__grid,
  .portalV30.radioPage .hero__grid,
  .visualManifesto{
    grid-template-columns:1fr!important;
  }
  .portalV30 .afterHero__side{min-height:530px}
  .creatorHeroArt{min-height:560px;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .visualHero .sopArtFrame{min-height:560px}
  .visualGallery .sopArtFrame:nth-child(n){grid-column:span 6}
  .visualManifesto__body{grid-template-columns:1fr 1fr}
  .roomPalette{grid-template-columns:repeat(3,1fr)}
  .sopVisualBand{grid-template-columns:1fr 1fr}
  .sopVisualBand .sopArtFrame:first-child{grid-column:1/-1}
}
@media(max-width:700px){
  body.portalV30{background:linear-gradient(180deg,#07080e,#090a12 55%,#06070c)}
  .portalV30 .afterHero h1{font-size:clamp(52px,15vw,76px)}
  .portalV30 .afterHero__side{min-height:500px}
  .portalV30 .afterHero__side h2{padding-top:205px}
  .sopVisualBand,
  .creatorVisualTease{grid-template-columns:1fr}
  .sopVisualBand .sopArtFrame,
  .sopVisualBand .sopArtFrame:first-child,
  .creatorVisualTease .sopArtFrame:first-child,
  .creatorVisualTease .sopArtFrame:last-child{min-height:380px}
  .sopVisualBand__copy,
  .creatorVisualTease__footer{display:block}
  .sopVisualBand__copy p,
  .creatorVisualTease__footer p{margin-top:12px}
  .visualHero h1{font-size:clamp(58px,18vw,92px)}
  .visualHero .sopArtFrame{min-height:500px}
  .visualGallery .sopArtFrame:nth-child(n){grid-column:1/-1;min-height:420px}
  .visualManifesto__body{grid-template-columns:1fr}
  .roomPalette{grid-template-columns:1fr 1fr}
  .creatorHeroArt{min-height:480px}
  .portalV30.creatorBiblePage .creatorHero h1{font-size:clamp(58px,17vw,88px)!important}
  .portalV30.radioPage .hero__sigil{min-height:330px!important}
  .portalV30.radioPage .hero__title{font-size:clamp(52px,16vw,78px)!important}
}
@media(prefers-reduced-motion:reduce){
  .sopArtFrame img,.portalV30 [data-chroma-reveal]{transition:none!important}
  .portalV30 [data-chroma-reveal]{opacity:1;transform:none}
}

.visualLightbox{
  width:min(94vw,1320px);height:min(92vh,900px);padding:0;border:1px solid rgba(255,255,255,.14);
  border-radius:22px;background:#05060b;box-shadow:0 30px 120px rgba(0,0,0,.72);overflow:hidden;
}
.visualLightbox::backdrop{background:rgba(2,3,7,.88);backdrop-filter:blur(10px)}
.visualLightbox img{width:100%;height:100%;object-fit:contain;background:#05060b}
.visualLightbox__close{
  position:absolute;right:14px;top:14px;z-index:2;width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(4,5,9,.72);color:#fff;font-size:24px;cursor:pointer;
}
.visualLightbox__caption{
  position:absolute;left:16px;bottom:14px;right:70px;padding:10px 12px;border-radius:12px;
  background:rgba(4,5,9,.72);backdrop-filter:blur(8px);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
button.sopArtFrame{display:block;width:100%;padding:0;text-align:left;color:inherit;cursor:zoom-in}

.creatorHeroStack{display:grid;gap:12px;min-width:0}
.creatorHeroStack .creatorIdentityCard{margin:0}

.portalV30 .loreHeroArt{min-height:460px}
.portalV30 .loreHeroArt img{object-position:55% 50%}
@media(min-width:900px){
  .portalV30 body.lorePage .hero__grid,
  .portalV30 .hero.wrap .hero__grid:has(.loreHeroArt){
    grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
    align-items:center;
  }
}

.sopPageArt{
  display:grid;grid-template-columns:1.2fr .8fr;gap:12px;
  margin:14px 0 28px;
}
.sopPageArt .sopArtFrame{min-height:320px}
.sopPageArt__copy{
  min-height:320px;padding:clamp(22px,3vw,34px);
  border:1px solid rgba(255,255,255,.085);border-radius:24px;
  background:
    radial-gradient(480px 300px at 0% 0%,rgba(var(--sop-chroma-pink),.09),transparent 72%),
    radial-gradient(480px 300px at 100% 100%,rgba(var(--sop-chroma-blue),.08),transparent 72%),
    rgba(255,255,255,.024);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.sopPageArt__copy small{letter-spacing:.14em;text-transform:uppercase;color:var(--sop-pink-soft)}
.sopPageArt__copy h2{font-size:clamp(34px,4.6vw,62px);line-height:.9;margin:10px 0}
.sopPageArt__copy p{margin:0;color:var(--sop-muted);max-width:52ch;line-height:1.55}
@media(max-width:760px){
  .sopPageArt{grid-template-columns:1fr}
  .sopPageArt .sopArtFrame,.sopPageArt__copy{min-height:300px}
}

.portalV30 .roadmapHeroArt{min-height:430px}
@media(min-width:900px){
 .portalV30 .hero__grid:has(.roadmapHeroArt){grid-template-columns:minmax(0,.9fr) minmax(380px,.8fr);align-items:center}
}
.portalV30 .lostArt{width:min(760px,100%);min-height:300px;margin:24px auto}

.portalV30 .exploreHeroArt{min-height:430px}
@media(min-width:900px){.portalV30 .hero__grid:has(.exploreHeroArt){grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);align-items:center}}
