/* Original V9.7 geometry remains in styles.css. This layer only art-directs media. */
.scene-picture {position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none}
.scene-picture img {width:100%;height:100%;object-fit:cover;object-position:var(--scene-focus,50% 50%);display:block}
.scene-picture::after {content:"";position:absolute;inset:0;pointer-events:none;background:var(--scene-shade,none)}
html:not([data-artwork="original"]) .visual-frame__photography,
html:not([data-artwork="original"]) .cinema__photo,
html:not([data-artwork="original"]) #experiencePanel .showcase-panel__photo[data-scene] {background-image:none;filter:none}
.visual-frame__photography {--scene-focus:61% 48%;--scene-shade:linear-gradient(180deg,rgba(22,10,35,.08) 25%,rgba(18,8,30,.22) 50%,rgba(13,7,23,.78) 100%)}
.visual-frame__vignette {background:linear-gradient(0deg,rgba(12,6,22,.36),transparent 62%)}
.cinema__photo {--scene-focus:63% 47%}
html[data-theme="dark"] .cinema__overlay {background:linear-gradient(90deg,rgba(15,10,26,.94),rgba(20,12,33,.68) 43%,rgba(19,13,29,.12) 78%),linear-gradient(0deg,rgba(14,8,24,.7),transparent 40%)}
html[data-theme="light"] .cinema__overlay {background:linear-gradient(90deg,rgba(247,242,252,.97),rgba(246,238,252,.83) 40%,rgba(239,225,248,.13) 78%),linear-gradient(0deg,rgba(243,234,250,.75),transparent 38%)}
html[data-theme="light"] .cinema .circle-link {border-color:rgba(91,61,130,.5);color:#51336f}
#experiencePanel .showcase-panel__photo {--scene-shade:linear-gradient(0deg,rgba(13,8,25,.91),rgba(17,10,31,.34) 44%,rgba(15,9,29,.05) 78%);--scene-focus:58% 48%}
#experiencePanel .showcase-panel__photo[data-scene="1"] {--scene-focus:60% 47%}
#experiencePanel .showcase-panel__photo[data-scene="2"] {--scene-focus:73% 42%;--scene-shade:linear-gradient(0deg,rgba(13,8,25,.94),rgba(17,10,31,.24) 49%,rgba(15,9,29,.02) 78%)}
/* Full scenes carry their characters; avoid an unrelated cutout over concept art. */
html:not([data-artwork="original"]) .showcase-panel__visual {display:none}
.scene-art-label {font-size:7px;line-height:1.4;font-weight:700;letter-spacing:.12em;color:inherit}
.visual-frame__top {align-items:flex-start;flex-direction:column;gap:7px}
.visual-frame__top .scene-art-label {padding-left:11px;color:rgba(255,247,255,.86)}
.showcase-panel__art-label {position:absolute;right:24px;bottom:18px;z-index:5;color:#e2d6f3;max-width:35%;text-align:right}
.showcase-panel__disclaimer {max-width:60%;line-height:1.5}
html:not([data-artwork="original"]) .showcase-panel__disclaimer {left:26px;right:auto}
html:not([data-artwork="original"]) .showcase-panel__tint {background:linear-gradient(90deg,rgba(19,10,32,.3),transparent 75%)}
html[data-artwork="original"] .scene-picture,
html[data-artwork="original"] .scene-art-label,
.scene-art-label[hidden] {display:none!important}
html[data-artwork="original"] .visual-frame__vignette {background:linear-gradient(0deg,rgba(12,6,22,.36),transparent 62%)}
@media (max-width:960px) {
  .cinema__photo {--scene-focus:70% 47%}
  .showcase-panel__photo {--scene-focus:57% 48%}
}
@media (max-width:640px) {
  .visual-frame__photography {--scene-focus:63% 48%}
  .cinema__photo {--scene-focus:73% 48%}
  html[data-theme="dark"] .cinema__overlay {background:linear-gradient(90deg,rgba(15,10,26,.87),rgba(20,12,33,.45)),linear-gradient(0deg,rgba(14,8,24,.72),transparent 65%)}
  html[data-theme="light"] .cinema__overlay {background:linear-gradient(90deg,rgba(247,242,252,.93),rgba(246,238,252,.62)),linear-gradient(0deg,rgba(243,234,250,.83),transparent 65%)}
  #experiencePanel .showcase-panel__photo[data-scene="2"] {--scene-focus:74% 39%}
  .showcase-panel__art-label {right:20px;font-size:6px}
  .showcase-panel__disclaimer {font-size:6px}
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .cinema__photo {transform:scale(1.03)!important;will-change:auto}
}

/* Original San Andreas-inspired illustrated cast, lit in the Dream palette. */
.character-layer {position:absolute;display:block;pointer-events:none}
.character-layer img {display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.character-layer--hero {z-index:1;right:-3%;bottom:42px;width:49%;height:90%;transform:translate3d(var(--character-x,0px),var(--character-y,0px),0);mask-image:linear-gradient(#000 85%,transparent 100%)}
html:not([data-artwork="original"]) .visual-frame__photography {--scene-focus:78% 48%}
html:not([data-artwork="original"]) .visual-frame__headline {max-width:55%;right:auto}
html:not([data-artwork="original"]) .visual-frame__headline strong {font-size:clamp(32px,3vw,47px)}
html:not([data-artwork="original"]) .visual-frame__headline span {display:block;max-width:210px;line-height:1.6}
.vision__scene {--scene-focus:36% 50%;--scene-shade:linear-gradient(90deg,rgba(23,12,40,.88),rgba(31,15,48,.5) 50%,rgba(20,12,32,.16)),linear-gradient(0deg,#191122 1%,transparent 45%)}
.character-layer--vision {z-index:2;right:-3%;bottom:0;width:73%;height:96%;mask-image:linear-gradient(#000 87%,transparent 100%)}
html:not([data-artwork="original"]) .vision__art--characters .vision__logo {position:absolute;width:110px;left:30px;top:37px;z-index:3;animation:none;filter:drop-shadow(0 3px 15px #0c061e88)}
html:not([data-artwork="original"]) .vision__art--characters>span {z-index:3;color:#eadff5!important;text-shadow:0 2px 9px #100820}
.vision__art-label {position:absolute;z-index:3;right:24px;top:27px;color:#f2e9fb;padding:6px 8px;border-radius:6px;background:#21122eaa}
.vision__art--characters .vision__ambient {z-index:1;opacity:.35}
html[data-artwork="original"] .character-layer,
.character-layer[hidden] {display:none!important}
html[data-artwork="original"] .vision__art--characters .vision__ambient {opacity:1}
@media (max-width:960px) {
  html:not([data-artwork="original"]) .visual-frame__headline strong {font-size:clamp(32px,5vw,47px)}
}
@media (max-width:640px) {
  .character-layer--hero {width:51%;height:82%;right:-6%;bottom:48px}
  html:not([data-artwork="original"]) .visual-frame__headline {max-width:57%;bottom:76px}
  html:not([data-artwork="original"]) .visual-frame__headline strong {font-size:clamp(25px,7.4vw,36px)}
  html:not([data-artwork="original"]) .visual-frame__headline span {max-width:140px;font-size:8px}
  .character-layer--vision {width:82%;height:92%;right:-10%}
  html:not([data-artwork="original"]) .vision__art--characters .vision__logo {width:83px;left:23px;top:27px}
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .character-layer--hero {transform:none!important;will-change:auto}
}

/* DREAM RP — Cinema gradient edge alignment (22/10/2026)
   The color overlay and cinematic image share the exact same frame.
   Gradients end at 100%, avoiding a visibly unblended strip at the image edge. */
.cinema__photo,
.cinema__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cinema__photo {
  overflow: hidden;
}
.cinema__photo > .scene-picture,
.cinema__photo > picture.scene-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.cinema__photo > .scene-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--scene-focus, 63% 47%);
}
.cinema__overlay {
  z-index: -1;
  pointer-events: none;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image:
    linear-gradient(90deg,
      rgba(19, 12, 33, .93) 0%,
      rgba(22, 13, 42, .82) 38%,
      rgba(27, 17, 62, .48) 67%,
      rgba(27, 17, 62, .10) 100%),
    linear-gradient(0deg,
      rgba(19, 13, 40, .68) 0%,
      rgba(19, 13, 40, .20) 43%,
      rgba(19, 13, 40, .02) 100%);
}
html[data-theme="dark"] .cinema__overlay {
  background-image:
    linear-gradient(90deg,
      rgba(15, 10, 26, .94) 0%,
      rgba(20, 12, 33, .80) 38%,
      rgba(19, 13, 29, .45) 67%,
      rgba(19, 13, 29, .08) 100%),
    linear-gradient(0deg,
      rgba(14, 8, 24, .72) 0%,
      rgba(14, 8, 24, .18) 43%,
      rgba(14, 8, 24, .02) 100%);
}
html[data-theme="light"] .cinema__overlay {
  background-image:
    linear-gradient(90deg,
      rgba(247, 242, 252, .97) 0%,
      rgba(246, 238, 252, .83) 38%,
      rgba(239, 225, 248, .38) 67%,
      rgba(239, 225, 248, .06) 100%),
    linear-gradient(0deg,
      rgba(243, 234, 250, .78) 0%,
      rgba(243, 234, 250, .20) 43%,
      rgba(243, 234, 250, .02) 100%);
}



/* DREAM RP — Cinema-to-Experience seamless transition v2 (22/10/2026)
   The visual issue was at the vertical hand-off between the cinematic image and
   the next light/dark section, not in the horizontal colour stop. Fade the image
   into the exact background of the following section and remove excess top gap. */
body[data-site-page="experiencias"] #conteudo > .cinema {
  isolation: isolate;
  background: #f9f8fb;
}
/* Keep the media frame exactly inside the section: only the image is zoomed,
   clipped by its own picture wrapper. The section itself can still grow. */
body[data-site-page="experiencias"] #conteudo > .cinema .cinema__photo {
  transform: none !important;
  overflow: hidden !important;
}
body[data-site-page="experiencias"] #conteudo > .cinema .cinema__photo > .scene-picture {
  overflow: hidden;
}
body[data-site-page="experiencias"] #conteudo > .cinema .cinema__photo > .scene-picture img {
  transform: scale(1.03);
  transform-origin: center;
}
body[data-site-page="experiencias"] #conteudo > .cinema::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: clamp(112px, 15vh, 180px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(249, 248, 251, 0) 0%,
    rgba(249, 248, 251, .16) 30%,
    rgba(249, 248, 251, .62) 72%,
    #f9f8fb 100%
  );
}
body[data-site-page="experiencias"] #conteudo > .cinema .cinema__content,
body[data-site-page="experiencias"] #conteudo > .cinema .cinema__watermark {
  z-index: 2;
}
body[data-site-page="experiencias"] #conteudo > .cinema .cinema__content {
  padding-block: clamp(26px, 4vh, 54px) !important;
}
body[data-site-page="experiencias"] #conteudo > #experiencias {
  /* chapters.css centers direct section children vertically by default. On this
     route that created a large empty band before the title, so restore normal flow. */
  display: block !important;
  align-items: initial !important;
  padding-top: clamp(44px, 5.5vh, 76px) !important;
  margin-top: 0 !important;
}
html[data-theme="dark"] body[data-site-page="experiencias"] #conteudo > .cinema {
  background: #191622;
}
html[data-theme="dark"] body[data-site-page="experiencias"] #conteudo > .cinema::after {
  background: linear-gradient(
    to bottom,
    rgba(25, 22, 34, 0) 0%,
    rgba(25, 22, 34, .18) 30%,
    rgba(25, 22, 34, .68) 72%,
    #191622 100%
  );
}
html[data-theme="dark"] body[data-site-page="experiencias"] #conteudo > #experiencias {
  background: #191622;
}
@media (max-width: 960px) {
  body[data-site-page="experiencias"] #conteudo > .cinema .cinema__content {
    padding-block: clamp(24px, 5vh, 48px) !important;
  }
  body[data-site-page="experiencias"] #conteudo > #experiencias {
    padding-top: clamp(36px, 5vh, 58px) !important;
  }
  body[data-site-page="experiencias"] #conteudo > .cinema::after {
    height: clamp(86px, 13vh, 128px);
  }
}
@media (max-width: 640px) {
  body[data-site-page="experiencias"] #conteudo > .cinema .cinema__content {
    padding-block: 24px !important;
  }
  body[data-site-page="experiencias"] #conteudo > .cinema::after {
    height: 88px;
  }
  body[data-site-page="experiencias"] #conteudo > #experiencias {
    padding-top: 34px !important;
  }
  body[data-site-page="experiencias"] #conteudo > .cinema .cinema__watermark {
    bottom: 18px;
    z-index: 2;
  }
}