/* =============================================================
   SOULYFE R05 — LIVING WORLD PORTAL
   Selected visual target: immersive artwork blend + chapter rail.
   This file intentionally overrides only the #worlds renovation.
   ============================================================= */

.worlds-section{
  position:relative;
  overflow:hidden;
  padding-top:clamp(88px,9vw,132px)!important;
  padding-bottom:clamp(124px,12vw,174px)!important;
  background:#05070a!important;
  padding-left:0!important;
  padding-right:0!important;
}

.worlds-section::before{
  opacity:.18!important;
}

.worlds-section .inner{
  width:100%!important;
  max-width:none!important;
}

.world-portal{
  --portal-copy-width:min(520px,48%);
  --portal-gutter:clamp(40px,6.3vw,94px);
  position:relative;
  isolation:isolate;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(260px,1fr) auto;
  gap:0!important;
  height:clamp(760px,55vw,800px);
  min-height:0;
  padding:clamp(34px,3.2vw,50px) var(--portal-gutter) 0!important;
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.world-portal::before{
  display:none!important;
}

.world-portal::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,7,10,.99) 0%,rgba(5,7,10,.97) 24%,rgba(5,7,10,.72) 42%,rgba(5,7,10,.1) 66%,rgba(5,7,10,.18) 100%),
    linear-gradient(180deg,rgba(5,7,10,.34) 0%,transparent 38%,rgba(5,7,10,.92) 88%,rgba(5,7,10,.99) 100%);
}

.world-portal-head{
  position:relative;
  z-index:3;
  display:block!important;
  width:min(850px,74%);
  margin:0!important;
  padding:25px 0 0!important;
}

.world-portal-head .num{
  position:absolute;
  top:-22px;
  left:0;
  padding:0;
}

.world-portal-head h2{
  margin:0!important;
  font-size:clamp(58px,4.9vw,72px)!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
}

@media (min-width:701px){
  .world-portal-head h2{
    white-space:nowrap;
  }
}

.world-portal-head .lead{
  max-width:480px!important;
  margin-top:20px!important;
  color:rgba(235,226,210,.62)!important;
  font-size:clamp(14px,1.25vw,17px)!important;
  line-height:1.58!important;
}

.world-portal-backdrop{
  position:absolute;
  z-index:0;
  inset:0 0 0 34%;
  overflow:hidden;
  pointer-events:none;
}

.world-portal-backdrop::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#06080c 0%,rgba(6,8,12,.9) 9%,rgba(6,8,12,.24) 31%,transparent 58%),
    linear-gradient(180deg,rgba(6,8,12,.38),transparent 28%,transparent 64%,rgba(6,8,12,.88));
}

.world-portal-backdrop::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:rgba(var(--track-rgb),.07);
  mix-blend-mode:screen;
  opacity:calc(.3 + (var(--beat) * .28));
  transition:opacity .22s ease;
}

.world-portal-backdrop img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.12) contrast(1.08) brightness(1.05);
  transform:scale(1.018);
  transition:opacity .38s ease,filter .38s ease,transform 1.1s cubic-bezier(.2,.75,.25,1);
}

.world-portal.is-changing .world-portal-backdrop img{
  opacity:.35;
  filter:saturate(.72) contrast(1.02) brightness(.55);
  transform:scale(1.04);
}

.world-portal-light{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:145px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--track-rgb),.75) 42%,rgba(var(--track-rgb-b),.24) 72%,transparent);
  box-shadow:0 0 calc(12px + (var(--beat) * 22px)) rgba(var(--track-rgb),calc(.18 + (var(--beat) * .36)));
  opacity:calc(.44 + (var(--beat) * .36));
  transform:scaleX(calc(.7 + (var(--beat) * .3)));
  transform-origin:left center;
}

.world-portal .world-feature{
  position:relative;
  z-index:3;
  display:flex!important;
  align-items:end!important;
  width:var(--portal-copy-width);
  min-height:0!important;
  padding:20px 0 24px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:translateY(-24px);
}

.world-portal .world-copy{
  width:min(470px,100%);
}

.world-portal .world-copy h3{
  margin:15px 0 6px!important;
  max-width:470px;
  font-size:clamp(45px,4.5vw,68px)!important;
  line-height:.91!important;
  letter-spacing:-.052em!important;
  text-wrap:balance;
}

.world-portal .world-subtitle{
  margin-top:.13em!important;
  color:rgba(224,184,118,.85)!important;
  font-size:.53em!important;
  letter-spacing:-.018em!important;
}

.world-portal .world-copy p{
  max-width:440px;
  color:rgba(235,226,210,.67)!important;
  font-size:clamp(14px,1.05vw,15px);
  line-height:1.45!important;
}

.world-portal .world-actions{
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap!important;
  gap:26px!important;
  margin-top:14px!important;
}

.world-portal .world-actions .cta,
.world-portal .world-action-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px!important;
  margin:0!important;
  gap:10px;
  padding:0 5px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:rgba(255,244,226,.88)!important;
  font-family:var(--mono)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.18em!important;
  line-height:1!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.world-portal .world-actions .cta{
  min-width:240px!important;
  min-height:62px!important;
  padding:0 23px 0 9px!important;
  border:1px solid rgba(var(--track-rgb),.68)!important;
  border-radius:13px!important;
  background:linear-gradient(110deg,rgba(var(--track-rgb),.18),rgba(5,7,11,.68) 45%,rgba(5,7,11,.42))!important;
  box-shadow:0 0 24px rgba(var(--track-rgb),.12),inset 0 0 22px rgba(var(--track-rgb-b),.06)!important;
}

.world-portal .world-action-icon{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
}

.world-portal .world-action-icon img{
  display:block;
  width:24px;
  height:24px;
  opacity:.86;
  filter:drop-shadow(0 0 7px rgba(var(--track-rgb),.14));
  transition:opacity .2s ease,filter .2s ease,transform .2s ease;
}

.world-portal .world-enter-icon{
  position:relative;
  flex-basis:40px;
  width:40px;
  height:42px;
  margin-right:3px;
  border-right:1px solid rgba(var(--track-rgb),.2);
  background:radial-gradient(circle at 42% 58%,rgba(var(--track-rgb),.26),transparent 64%);
}

.world-portal .world-enter-icon img{
  width:26px;
  height:26px;
  opacity:1;
  filter:drop-shadow(0 0 7px rgba(var(--track-rgb),.48));
}

.world-portal .world-action-label{
  display:block;
}

.world-portal .world-actions .cta:hover,
.world-portal .world-actions .cta:focus-visible,
.world-portal .world-action-secondary:hover,
.world-portal .world-action-secondary:focus-visible{
  color:#fff6e7!important;
  transform:translateY(-2px);
}

.world-portal .world-actions .cta:hover,
.world-portal .world-actions .cta:focus-visible{
  border-color:rgba(var(--track-rgb),.9)!important;
  background:linear-gradient(110deg,rgba(var(--track-rgb),.27),rgba(5,7,11,.64) 48%,rgba(5,7,11,.38))!important;
  box-shadow:0 0 32px rgba(var(--track-rgb),.2),inset 0 0 24px rgba(var(--track-rgb-b),.09)!important;
}

.world-portal .world-action-secondary:hover,
.world-portal .world-action-secondary:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
}

.world-portal .world-actions a:hover .world-action-icon img,
.world-portal .world-actions a:focus-visible .world-action-icon img,
.world-portal .world-actions button:hover .world-action-icon img,
.world-portal .world-actions button:focus-visible .world-action-icon img{
  opacity:1;
  filter:drop-shadow(0 0 9px rgba(var(--track-rgb),.48));
  transform:scale(1.05);
}

.world-portal .world-actions .cta:focus-visible,
.world-portal .world-action-secondary:focus-visible,
.world-portal .world-card:focus-visible{
  outline:2px solid rgba(var(--track-rgb),.82);
  outline-offset:3px;
}

.world-rail-shell{
  position:relative;
  z-index:4;
  min-width:0;
  margin:0 calc(-1 * var(--portal-gutter));
  padding:0;
  border:0;
  transform:translateY(-40px);
}

.world-portal .world-grid{
  position:relative;
  display:flex!important;
  grid-template-columns:none!important;
  gap:0!important;
  width:100%;
  min-height:142px;
  max-height:none!important;
  margin:0!important;
  padding:2px 54px 12px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x proximity;
  scroll-padding-inline:12px;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  scrollbar-color:transparent transparent;
}

.world-portal .world-grid::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  bottom:25px;
  height:14px;
  border-top:1px solid rgba(224,180,109,.62);
  border-radius:50% 50% 0 0;
  background:transparent;
  box-shadow:0 -4px 12px rgba(var(--track-rgb),.06);
  pointer-events:none;
  transform:rotate(.55deg);
  transform-origin:left center;
}

.world-portal .world-grid::-webkit-scrollbar{
  display:none;
}

.world-portal .world-card{
  position:relative;
  z-index:1;
  flex:1 1 0!important;
  min-width:76px;
  min-height:138px!important;
  max-width:none;
  padding:8px 4px 34px!important;
  overflow:visible;
  scroll-snap-align:center;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(238,229,213,.64)!important;
  text-align:center!important;
  cursor:pointer;
  transform:none!important;
  box-shadow:none!important;
  transition:color .2s ease,transform .2s ease!important;
}

.world-portal .world-card::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:auto auto calc(20px + var(--rail-lift,0px) - var(--rail-drop,0px)) 50%!important;
  width:7px;
  height:7px;
  border:0;
  border-radius:50%;
  background:rgba(248,207,133,.98)!important;
  box-shadow:0 0 6px 1px rgba(var(--track-rgb),.54),0 0 16px rgba(var(--world-rgb),.18);
  opacity:1!important;
  transform:translateX(-50%)!important;
  transition:width .2s ease,height .2s ease,bottom .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}

.world-portal .world-card::after{
  content:"";
  position:absolute;
  z-index:2;
  left:50%!important;
  right:auto!important;
  bottom:calc(11.5px + var(--rail-lift,0px) - var(--rail-drop,0px))!important;
  width:24px!important;
  height:24px!important;
  border:2px solid rgba(var(--track-rgb),.9);
  border-radius:50%;
  background:rgba(var(--track-rgb),.16)!important;
  box-shadow:0 0 16px rgba(var(--track-rgb),.52),0 0 30px rgba(var(--track-rgb),.22)!important;
  opacity:0;
  transform:translateX(-50%) scale(.7)!important;
  transition:opacity .2s ease,transform .2s ease!important;
}

.world-portal .world-card:hover,
.world-portal .world-card.active{
  color:rgba(255,244,224,.96)!important;
  transform:translateY(-2px)!important;
}

.world-portal .world-card:hover::before,
.world-portal .world-card.active::before{
  bottom:calc(18px + var(--rail-lift,0px) - var(--rail-drop,0px));
  width:11px;
  height:11px;
  background:rgba(255,215,145,.98)!important;
  box-shadow:0 0 10px 2px rgba(var(--track-rgb),.78),0 0 28px rgba(var(--track-rgb),.32);
}

.world-portal .world-card.active::after{
  opacity:1;
  transform:translateX(-50%) scale(1)!important;
}

.world-portal .world-card > span,
.world-portal .world-card > strong,
.world-portal .world-card > small{
  position:relative!important;
  z-index:2!important;
  left:auto;
  right:auto;
  display:block!important;
  margin:0!important;
}

.world-portal .world-card > span{
  top:auto;
  margin-bottom:11px!important;
  font-size:10px!important;
  color:rgba(226,181,107,.72)!important;
}

.world-portal .world-card strong{
  bottom:auto;
  max-width:none!important;
  font-size:clamp(13px,1vw,16px)!important;
  font-weight:400!important;
  line-height:1.12!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.world-portal .world-card:not(.active) strong{
  color:rgba(238,229,213,.53)!important;
}

.world-portal .world-card.active > span{
  color:rgba(var(--track-rgb),.94)!important;
}

.world-portal .world-card.active strong{
  color:rgba(249,218,166,.98)!important;
  font-size:clamp(14px,1.08vw,17px)!important;
  text-shadow:0 0 18px rgba(var(--track-rgb),.24),0 2px 12px rgba(0,0,0,.78);
}

.world-portal .world-card > .world-identity{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:36px;
  margin-bottom:7px!important;
  font-size:inherit!important;
  letter-spacing:normal!important;
}
.world-portal .world-card > .world-identity .world-number-orb{
  width:34px;
  height:34px;
  flex-basis:34px;
}
.world-portal .world-card > .world-identity .world-identity-copy{
  max-width:56px;
  color:rgba(226,181,107,.62)!important;
  font-size:7px!important;
  letter-spacing:.12em!important;
}
.world-portal .world-card.active > .world-identity .world-identity-copy{
  color:rgba(var(--track-rgb),.92)!important;
}

.world-portal .world-card small{
  display:none!important;
}

.world-portal .world-card.has-subtitle small{
  display:block!important;
  margin-top:0!important;
  color:rgba(238,229,213,.53)!important;
  font-family:var(--serif)!important;
  font-size:clamp(13px,1vw,16px)!important;
  font-weight:400!important;
  line-height:1.12!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.world-portal .world-card.active.has-subtitle small{
  color:rgba(249,218,166,.98)!important;
  font-size:clamp(14px,1.08vw,17px)!important;
  text-shadow:0 0 18px rgba(var(--track-rgb),.24),0 2px 12px rgba(0,0,0,.78);
}

body.is-playing .world-portal{
  box-shadow:none!important;
}

body.is-playing #worldPlayBtn .world-action-icon img{
  opacity:1;
  filter:drop-shadow(0 0 9px rgba(var(--track-rgb),.62));
}

@media (max-width:980px){
  .world-portal{
    --portal-copy-width:min(540px,68%);
    height:700px;
  }

  .world-portal-head h2{
    font-size:clamp(50px,7vw,68px)!important;
  }

  .world-portal .world-copy h3{
    font-size:clamp(42px,6vw,58px)!important;
  }

  .world-portal .world-actions{
    gap:12px!important;
  }

  .world-portal .world-actions .cta,
  .world-portal .world-action-secondary{
    font-size:9px!important;
  }

  .world-portal .world-actions .cta{
    padding-right:18px!important;
  }
}

@media (max-width:700px){
  .worlds-section{
    padding-top:74px!important;
    padding-bottom:132px!important;
  }

  .worlds-section .inner{
    width:100%!important;
  }

  .world-portal{
    --portal-copy-width:100%;
    display:flex!important;
    flex-direction:column;
    height:auto;
    min-height:0;
    padding:28px 0 18px!important;
    border-radius:0!important;
  }

  .world-portal::after{
    background:linear-gradient(180deg,rgba(5,7,10,.96) 0 15%,rgba(5,7,10,.08) 38%,rgba(5,7,10,.55) 55%,rgba(5,7,10,.99) 72% 100%);
  }

  .world-portal-head{
    order:1;
    width:100%;
    padding:0 22px!important;
  }

  .world-portal-head .num{
    display:none;
  }

  .world-portal-head h2{
    font-size:clamp(48px,14vw,68px)!important;
  }

  .world-portal-head .lead{
    max-width:34rem!important;
    margin-top:14px!important;
    font-size:14px!important;
  }

  .world-portal-backdrop{
    position:relative;
    z-index:0;
    order:2;
    inset:auto;
    width:100%;
    height:clamp(410px,104vw,590px);
    margin-top:12px;
  }

  .world-portal-backdrop::before{
    background:
      linear-gradient(180deg,#06080c 0%,transparent 18%,transparent 72%,#06080c 100%),
      linear-gradient(90deg,rgba(6,8,12,.58),transparent 24%,transparent 78%,rgba(6,8,12,.52));
  }

  .world-portal-backdrop img{
    object-position:center;
    filter:saturate(1.03) contrast(1.05) brightness(.8);
  }

  .world-portal-light{
    bottom:26px;
  }

  .world-portal .world-feature{
    order:3;
    width:100%;
    margin-top:clamp(-112px,-18vw,-70px);
    padding:0 22px 38px!important;
    align-items:start!important;
    transform:none;
  }

  .world-portal .world-copy{
    width:100%;
    max-width:560px;
  }

  .world-portal .world-copy h3{
    max-width:500px;
    font-size:clamp(44px,13vw,66px)!important;
    text-shadow:0 4px 24px rgba(0,0,0,.78);
  }

  .world-portal .world-copy p{
    max-width:480px;
  }

  .world-portal .world-actions{
    display:grid!important;
    flex-wrap:initial!important;
    grid-template-columns:1fr 1fr;
    column-gap:12px!important;
    row-gap:6px!important;
    width:100%;
    margin-top:22px!important;
  }

  .world-portal .world-actions .cta{
    grid-column:1 / -1;
    width:100%;
    min-width:0!important;
  }

  .world-portal .world-action-secondary{
    width:100%;
    min-height:48px!important;
  }

  .world-rail-shell{
    order:4;
    margin:0!important;
    padding:12px 0 0!important;
    overflow:hidden;
    transform:none;
  }

  .world-rail-shell::before,
  .world-rail-shell::after{
    content:"";
    position:absolute;
    z-index:6;
    top:0;
    bottom:0;
    width:34px;
    pointer-events:none;
  }

  .world-rail-shell::before{
    left:0;
    background:linear-gradient(90deg,#06080c,transparent);
  }

  .world-rail-shell::after{
    right:0;
    background:linear-gradient(270deg,#06080c,transparent);
  }

  .world-portal .world-grid{
    gap:0!important;
    min-height:116px;
    padding:5px calc(50% - 66px) 12px!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:calc(50% - 66px);
  }

  .world-portal .world-grid::before{
    bottom:35px;
    height:1px;
    border-radius:0;
    transform:none;
  }

  .world-portal .world-card{
    --rail-lift:0px!important;
    --rail-drop:0px!important;
    flex:0 0 132px!important;
    min-width:132px;
    min-height:112px!important;
    max-width:132px;
    padding-inline:8px!important;
  }

  .world-portal .world-card strong{
    font-size:13px!important;
  }

  .world-portal .world-card.active strong{
    font-size:14px!important;
  }

  .world-portal .world-card > span{
    margin-bottom:7px!important;
    font-size:8px!important;
  }

  .world-portal .world-card > .world-identity{
    gap:5px!important;
    min-height:31px;
    margin-bottom:5px!important;
  }
  .world-portal .world-card > .world-identity .world-number-orb{
    width:29px;
    height:29px;
    flex-basis:29px;
  }
  .world-portal .world-card > .world-identity .world-identity-copy{
    display:none!important;
  }

  .world-portal .world-card.has-subtitle small,
  .world-portal .world-card.active.has-subtitle small{
    font-size:13px!important;
  }
}

@media (max-width:430px){
  .world-portal-head,
  .world-portal .world-feature{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .world-portal-head h2{
    font-size:clamp(44px,13vw,58px)!important;
  }

  .world-portal-backdrop{
    height:112vw;
    min-height:390px;
    max-height:510px;
  }

  .world-portal .world-feature{
    margin-top:-74px;
  }

  .world-portal .world-copy h3{
    font-size:clamp(42px,12.5vw,56px)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .world-portal-backdrop img,
  .world-portal .world-card,
  .world-card-art{
    transition:none!important;
  }
}