/* ===========================================================
   UNIVERSE PAGES — shared styling for Novels / Comics /
   AudioStories / VideoStories. Builds on styles.css tokens.
   =========================================================== */

/* ---------- Section-scoped cinematic atmosphere (lives INSIDE each universe section on the single-page site) ---------- */
.universe-section{
  position:relative;
  overflow:hidden;
  color:var(--paper);
  padding-bottom:100px;
}
.universe-atmosphere{
  /* z:0, one below #universeCanvas's z:1 (styles.css) and two below
     this section's own content at z:2 — so the shared canvas's
     particles paint on top of this gradient, under the readable
     content. (Negative z-index here would place it behind the page's
     own body background instead — a real trap at the root stacking
     context, not just "further back.") */
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#151020 0%,#1B1430 45%,#20132A 100%);
}
.universe-atmosphere .field{
  position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;
}
.universe-atmosphere .star{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;opacity:.5;
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.85;}}

/* everything inside a universe section EXCEPT its background atmosphere layer
   must sit above that layer */
.universe-section > *:not(.universe-atmosphere){position:relative;z-index:2;}

/* theme accent variables, applied per section */
.theme-novels .universe-atmosphere{background:linear-gradient(180deg,#151020 0%,#1B1430 45%,#20132A 100%);}
.theme-novels .universe-atmosphere .field-a{background:radial-gradient(circle,#B7A0DA,transparent 70%);top:-10%;left:-10%;width:60vw;height:60vw;}
.theme-novels .universe-atmosphere .field-b{background:radial-gradient(circle,#C9A24B,transparent 70%);bottom:-15%;right:-5%;width:55vw;height:55vw;opacity:.25;}

.theme-comics .universe-atmosphere{background:linear-gradient(180deg,#1A0E14 0%,#2A1220 45%,#180B12 100%);}
.theme-comics .universe-atmosphere .field-a{background:radial-gradient(circle,#E0536B,transparent 70%);top:-10%;right:-10%;width:60vw;height:60vw;opacity:.3;}
.theme-comics .universe-atmosphere .field-b{background:radial-gradient(circle,#C9A24B,transparent 70%);bottom:-15%;left:-8%;width:55vw;height:55vw;opacity:.22;}

.theme-audio .universe-atmosphere{background:linear-gradient(180deg,#0E1420 0%,#10182A 50%,#0B1018 100%);}
.theme-audio .universe-atmosphere .field-a{background:radial-gradient(circle,#6FA9C9,transparent 70%);top:10%;left:-15%;width:60vw;height:60vw;opacity:.3;}
.theme-audio .universe-atmosphere .field-b{background:radial-gradient(circle,#B7A0DA,transparent 70%);bottom:-10%;right:-10%;width:55vw;height:55vw;opacity:.25;}

.theme-video .universe-atmosphere{background:linear-gradient(180deg,#0A0A0E 0%,#141018 55%,#0A0A0E 100%);}
.theme-video .universe-atmosphere .field-a{background:radial-gradient(circle,#C9A24B,transparent 70%);top:-15%;left:20%;width:65vw;height:65vw;opacity:.22;}
.theme-video .universe-atmosphere .field-b{background:radial-gradient(circle,#8C79B8,transparent 70%);bottom:-15%;right:-5%;width:55vw;height:55vw;opacity:.2;}

.theme-members .universe-atmosphere{background:linear-gradient(180deg,#120A1E 0%,#1B1030 50%,#0E0818 100%);}
.theme-members .universe-atmosphere .field-a{background:radial-gradient(circle,#B7A0DA,transparent 70%);top:-10%;left:10%;width:60vw;height:60vw;opacity:.28;}
.theme-members .universe-atmosphere .field-b{background:radial-gradient(circle,#6FA9C9,transparent 70%);bottom:-15%;right:5%;width:55vw;height:55vw;opacity:.2;}

.theme-social .universe-atmosphere{background:linear-gradient(180deg,#0E1A1C 0%,#122224 50%,#0B1416 100%);}
.theme-social .universe-atmosphere .field-a{background:radial-gradient(circle,#C9A24B,transparent 70%);top:-10%;right:10%;width:55vw;height:55vw;opacity:.22;}
.theme-social .universe-atmosphere .field-b{background:radial-gradient(circle,#6FC9B8,transparent 70%);bottom:-10%;left:0;width:55vw;height:55vw;opacity:.22;}

.theme-contact .universe-atmosphere{background:linear-gradient(180deg,#1A140E 0%,#241A12 50%,#140F0A 100%);}
.theme-contact .universe-atmosphere .field-a{background:radial-gradient(circle,#C9A24B,transparent 70%);top:0;left:20%;width:60vw;height:60vw;opacity:.25;}
.theme-contact .universe-atmosphere .field-b{background:radial-gradient(circle,#8C6A2F,transparent 70%);bottom:-15%;right:-5%;width:50vw;height:50vw;opacity:.18;}

/* seam: soft fade at the top of each dark section so it meets the light homepage atmosphere gracefully */
.universe-section::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(180deg,rgba(251,248,244,.5),transparent);
  z-index:2;
  pointer-events:none;
}
.universe-section::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:140px;
  background:linear-gradient(0deg,rgba(251,248,244,.35),transparent);
  z-index:2;
  pointer-events:none;
}

/* ---------- Universe hero ---------- */
.universe-hero{
  min-height:64vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 40px) 24px 60px;
  position:relative;
}
.universe-hero__kicker{
  font-family:var(--font-display);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
}
.universe-hero__title{
  font-size:clamp(48px,9vw,110px);
  font-style:italic;
  letter-spacing:-0.02em;
  margin-top:10px;
}
.universe-hero__sub{
  margin-top:18px;
  font-size:clamp(16px,1.6vw,20px);
  color:rgba(251,248,244,.72);
  font-style:italic;
}

/* scroll-triggered fade-up, used by the universe hero labels and reused elsewhere */
[data-reveal="fade-up"]{
  opacity:0;
  transform:translateY(22px);
  filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
[data-reveal="fade-up"].in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Compact hero used for single-screen "coming soon" style sections
   (Members, Contact) and the Social Media intro — no long catalogue
   follows, so no need for the full universe-hero height. */
.universe-hero--tight{
  min-height:56vh;
  padding-bottom:20px;
}

.coming-soon-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  padding:10px 28px;
  border:1px solid rgba(201,162,75,.5);
  border-radius:40px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--gold);
  background:rgba(201,162,75,.06);
}

.universe-hero__footnote{
  margin-top:22px;
  font-size:14px;
  font-style:italic;
  color:rgba(251,248,244,.55);
  max-width:46ch;
}

/* ---------- Members: restrained "locked portal" motif ---------- */
.portal-ring{
  position:absolute;
  top:50%;left:50%;
  width:min(64vw,540px);
  height:min(64vw,540px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(183,160,218,.32);
  box-shadow:0 0 90px rgba(183,160,218,.22), inset 0 0 70px rgba(183,160,218,.10);
  animation:portalPulse 6s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.portal-ring::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:50%;
  border:1px solid rgba(201,162,75,.22);
  transform:scale(1.14);
}
@keyframes portalPulse{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.035);}
}

/* ---------- Social media portals ---------- */
.social-grid{
  max-width:1100px;
  margin:0 auto;
  padding:20px 20px 120px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
}
.social-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:56px 32px;
  border-radius:22px;
  border:1px solid rgba(251,248,244,.16);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  overflow:hidden;
  isolation:isolate;
  opacity:0;
  transition:opacity .9s var(--ease),transform .5s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.social-card.card-left{transform:translateX(-36px);}
.social-card.card-right{transform:translateX(36px);}
.social-card.in{opacity:1;transform:translateX(0);}
.social-card:hover,.social-card.in:hover{
  transform:translateY(-6px);
  border-color:rgba(201,162,75,.55);
  box-shadow:0 26px 54px -22px rgba(201,162,75,.4);
}

.social-card__icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(251,248,244,.25);
  color:var(--paper);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.social-card:hover .social-card__icon{transform:scale(1.08);border-color:var(--gold);}
.social-card__icon svg{width:26px;height:26px;}

.social-card__platform{font-family:var(--font-display);font-style:italic;font-size:26px;}
.social-card__handle{font-size:13px;letter-spacing:.04em;color:rgba(251,248,244,.55);}
.social-card__cta{
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.social-card:hover .social-card__cta{border-color:var(--gold);}

.social-card__shine{
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  transform:translateX(-130%);
  transition:transform .9s ease;
}
.social-card:hover .social-card__shine{transform:translateX(130%);}

@media (max-width:800px){
  .social-grid{grid-template-columns:1fr;}
  .social-card.card-left,.social-card.card-right{transform:translateY(24px);}
  .social-card.in{transform:translateY(0);}
}

/* ---------- Catalogue: alternating image/description rows ---------- */
.catalogue{
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px 140px;
  display:flex;
  flex-direction:column;
  gap:110px;
  perspective:var(--perspective,1400px);
}
.work-row{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
  opacity:0;
  transform:translateY(50px) translateZ(-140px) rotateX(4deg);
  transition:opacity 1.05s var(--spring-settle,var(--ease)),transform 1.05s var(--spring-settle,var(--ease));
  transform-style:preserve-3d;
}
.work-row.in{opacity:1;transform:translateY(0) translateZ(0) rotateX(0);}

.work-row__media{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.work-figure{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:2/3;
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.work-row:hover .work-figure{transform:translateY(-6px) scale(1.015);}
.work-figure img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.work-row:hover .work-figure img{transform:scale(1.06);}

.work-figure__placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  padding:22px;
  text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,0)),var(--placeholder-bg,radial-gradient(circle at 30% 20%,#B7A0DA,transparent 60%));
}
.work-figure__placeholder-icon{
  width:34px;height:34px;
  opacity:.65;
}
.work-figure__placeholder-title{
  font-family:var(--font-display);
  font-style:italic;
  font-size:17px;
  color:var(--paper);
  line-height:1.3;
}
.work-figure__placeholder-tag{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(251,248,244,.55);
}
.work-figure__particles span{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(255,255,255,.7);
  animation:floatDust 6s ease-in-out infinite;
}

/* ---------- Ink-pool glow (motion.js) ----------
   A soft gold highlight that follows the pointer, blended so it warms
   the surface rather than sitting as an opaque layer over text. */
.ink-glow{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:5;
  mix-blend-mode:soft-light;
  opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,214,140,.9), transparent 55%);
  transition:opacity .35s ease;
}
.work-figure:hover > .ink-glow,
.award-card:hover > .ink-glow,
.press-card:hover > .ink-glow,
.social-card:hover > .ink-glow{
  opacity:.9;
}
.work-figure,.award-card,.press-card,.social-card{
  transform-style:preserve-3d;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce), (hover: none){
  .ink-glow{display:none;}
}

.work-figure__glow{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,rgba(201,162,75,.7),rgba(183,160,218,.35),rgba(201,162,75,.7));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
  transition:opacity .4s var(--ease);
  pointer-events:none;
  z-index:4;
}
.work-row:hover .work-figure__glow{opacity:1;}

/* cinematic curtain-wipe reveal: covers the cover art until its row
   scrolls into view, then wipes away left-to-right */
.work-figure__curtain{
  position:absolute;inset:0;
  z-index:2;
  background:linear-gradient(120deg,var(--ink) 0%,#2E2440 60%,var(--gold) 150%);
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform 1.15s cubic-bezier(.65,0,.15,1) .1s;
  pointer-events:none;
}
.work-row.in .work-figure__curtain{transform:scaleX(0);}

/* subtle diagonal light sweep on hover — premium cinematic polish */
.work-figure__shine{
  position:absolute;inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);
  transform:translateX(-130%);
  transition:transform .9s ease;
}
.work-row:hover .work-figure__shine{transform:translateX(130%);}

@media (prefers-reduced-motion: reduce){
  .work-figure__curtain{transition:none;transform:scaleX(0);}
  .work-figure__shine{display:none;}
  .portal-ring{animation:none;}
  .social-card__shine{display:none;}
  .work-row{transition:opacity .3s ease !important;transform:none !important;opacity:1 !important;}
  .social-card{transition:opacity .3s ease !important;transform:none !important;}
}

.work-figure__caption{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(18px,1.6vw,22px);
  text-align:center;
}

.work-row__body{
  display:flex;flex-direction:column;gap:14px;
}
.work-row__eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.work-row__title{
  font-size:clamp(26px,3.2vw,40px);
  font-style:italic;
}
.work-row__meta{
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(251,248,244,.6);
}
.work-row__meta span{
  padding:5px 12px;
  border:1px solid rgba(251,248,244,.18);
  border-radius:30px;
}
.work-row__desc{
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.8;
  color:rgba(251,248,244,.82);
  max-width:60ch;
}
.work-row__links{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:8px;
}
.buy-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.03em;
  padding:11px 22px;
  border:1px solid rgba(251,248,244,.28);
  border-radius:40px;
  color:var(--paper);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
  cursor:default;
}
.buy-link:hover{border-color:var(--gold);background:rgba(201,162,75,.08);transform:translateY(-2px);}
.buy-link__badge{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(251,248,244,.5);
}
.buy-link--live{
  cursor:pointer;
  border-color:rgba(201,162,75,.55);
}
.buy-link--live:hover{
  border-color:var(--gold);
  background:rgba(201,162,75,.14);
  box-shadow:0 10px 26px -12px rgba(201,162,75,.55);
}
.buy-link__badge--live{
  color:var(--gold);
}

/* alternate every other row on desktop for rhythm, still image-first on mobile */
@media (min-width:901px){
  .work-row:nth-child(even){grid-template-columns:1.15fr .85fr;}
  .work-row:nth-child(even) .work-row__media{order:2;}
  .work-row:nth-child(even) .work-row__body{order:1;}
}
@media (max-width:900px){
  .work-row{grid-template-columns:1fr;}
}

/* ---------- Audio player card ---------- */
.audio-player{
  margin-top:8px;
  display:flex;align-items:center;gap:16px;
  padding:14px 18px;
  border:1px solid rgba(251,248,244,.18);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.audio-player__btn{
  width:42px;height:42px;flex:none;
  border-radius:50%;
  border:1px solid rgba(251,248,244,.3);
  background:transparent;
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  cursor:not-allowed;
  opacity:.55;
}
.audio-player__wave{
  flex:1;
  display:flex;align-items:center;gap:3px;
  height:28px;
  overflow:hidden;
}
.audio-player__wave span{
  width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(201,162,75,.3));
  animation:waveIdle 2.6s ease-in-out infinite;
}
.audio-player__meta{
  flex:none;
  font-size:12px;
  color:rgba(251,248,244,.55);
  white-space:nowrap;
}
@keyframes waveIdle{0%,100%{height:6px;}50%{height:100%;}}

/* ---------- Video thumbnail play affordance ---------- */
.work-figure--video::after{
  content:'';
  position:absolute;inset:0;margin:auto;
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(20,15,25,.55);
  border:1px solid rgba(251,248,244,.4);
  opacity:0;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  transform:scale(.85);
}
.work-figure--video:hover::after{opacity:1;transform:scale(1);}
.work-figure--video::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:15px solid var(--paper);
  transform:translate(-40%,-50%);
  z-index:1;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.work-figure--video:hover::before{opacity:1;}

/* ---------- Series banner (novels) ---------- */
.series-banner{
  max-width:1200px;margin:0 auto;padding:0 20px;
  text-align:center;
}
.series-banner__label{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.series-banner__title{
  font-size:clamp(24px,3vw,34px);font-style:italic;margin-top:8px;
}
.series-banner__line{
  width:60px;height:1px;background:rgba(251,248,244,.3);margin:26px auto 0;
}

/* ---------- Coming soon notice ---------- */
.coming-note{
  text-align:center;
  max-width:640px;
  margin:0 auto 20px;
  font-size:13.5px;
  letter-spacing:.03em;
  color:rgba(251,248,244,.55);
  padding:0 20px;
}