/* V23.4 — papel Vidro coerente + leitura progressiva por scroll */

/* --------------------------------------------------------------------------
   1. LEITURA PROGRESSIVA
   O conteúdo continua ocupando seu espaço na página, mas só fica visível
   quando realmente entra na área de leitura. Isso evita o efeito de ver
   todos os cards antes de o texto começar a ser escrito.
   -------------------------------------------------------------------------- */
.opened-message .reveal-item.reader-pending{
  opacity:0!important;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(30px) scale(.985)!important;
  filter:blur(8px)!important;
}
.opened-message .reveal-item.reader-revealed,
.opened-message .reveal-item.is-visible{
  opacity:1!important;
  visibility:visible;
  pointer-events:auto;
}
.opened-message .story-result > .reveal-item,
.opened-message .paper > .reveal-item,
.opened-message .letter-extras > .reveal-item{
  transition-property:opacity,transform,filter,visibility!important;
  transition-duration:1.08s,1.14s,1.1s,0s!important;
  transition-timing-function:cubic-bezier(.2,.72,.22,1)!important;
}
.opened-message [data-reader-typewriter].reader-pending{
  color:transparent!important;
  text-shadow:none!important;
}
.opened-message [data-reader-typewriter].reader-revealed,
.opened-message [data-reader-typewriter].is-visible{
  color:inherit!important;
}

/* Um pouco mais de distância entre capítulos para a leitura ter ritmo. */
.opened-message .story-result{
  gap:clamp(34px,5vw,62px)!important;
}
.opened-message .story-heading-result + .story-result-text,
.opened-message .story-result-text + .story-result-text{
  margin-top:-12px!important;
}
.opened-message .story-result > section,
.opened-message .story-result > div:not(.story-result-text){
  scroll-margin-top:110px;
}

/* --------------------------------------------------------------------------
   2. PAPEL VIDRO
   O vidro deixa de parecer uma folha branca lavada. Ele passa a ser uma
   lâmina translúcida escura que recebe a cor do tema ao fundo, com textos
   de alto contraste e cards internos também translúcidos.
   -------------------------------------------------------------------------- */
.opened-message .paper.paper-glass,
.gift-experience.theme-minimal .opened-message .paper.paper-glass,
.gift-experience.theme-rose .opened-message .paper.paper-glass,
.gift-experience.theme-lilac .opened-message .paper.paper-glass,
.gift-experience.theme-moon .opened-message .paper.paper-glass,
.gift-experience.theme-gold .opened-message .paper.paper-glass,
.gift-experience.theme-forest .opened-message .paper.paper-glass,
.gift-experience.theme-vintage .opened-message .paper.paper-glass{
  --paper-text:#fff5fa;
  --paper-muted:#d8bdca;
  --paper-accent:#ffb6d2;
  --paper-soft:rgba(255,255,255,.055);
  --paper-soft-strong:rgba(255,255,255,.085);
  --paper-line:rgba(255,228,240,.14);
  --paper-field:rgba(255,255,255,.92);
  --paper-field-text:#3f2935;
  color:#fff5fa!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(255,128,185,.15),transparent 31%),
    radial-gradient(circle at 88% 8%,rgba(166,125,255,.13),transparent 28%),
    linear-gradient(145deg,rgba(42,22,36,.78),rgba(24,14,25,.67))!important;
  border:1px solid rgba(255,225,239,.17)!important;
  box-shadow:
    0 36px 90px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.025)!important;
  backdrop-filter:blur(28px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.18)!important;
}
.opened-message .paper.paper-glass:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(115deg,rgba(255,255,255,.075),transparent 20%,transparent 72%,rgba(255,255,255,.035)),
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.08),transparent 34%);
  mix-blend-mode:screen;
  opacity:.72;
}
.opened-message .paper.paper-glass > *{
  position:relative;
  z-index:1;
}

/* Tipografia do vidro */
.opened-message .paper.paper-glass h3,
.opened-message .paper.paper-glass h4,
.opened-message .paper.paper-glass .story-heading-result h4,
.opened-message .paper.paper-glass .reader-section-heading h4,
.opened-message .paper.paper-glass .letter-album-head h4,
.opened-message .paper.paper-glass .ending-lead,
.opened-message .paper.paper-glass .final-secret strong{
  color:#ffd0e2!important;
  text-shadow:0 1px 18px rgba(255,105,168,.08);
}
.opened-message .paper.paper-glass p,
.opened-message .paper.paper-glass .reader-copy,
.opened-message .paper.paper-glass #letterText,
.opened-message .paper.paper-glass .story-result-text,
.opened-message .paper.paper-glass .story-heading-result p,
.opened-message .paper.paper-glass .letter-signature,
.opened-message .paper.paper-glass .letter-reason,
.opened-message .paper.paper-glass .journey-copy p,
.opened-message .paper.paper-glass li,
.opened-message .paper.paper-glass blockquote{
  color:#f8eaf1!important;
  opacity:1!important;
}
.opened-message .paper.paper-glass small,
.opened-message .paper.paper-glass .muted,
.opened-message .paper.paper-glass .media-caption,
.opened-message .paper.paper-glass .letter-scroll-whisper,
.opened-message .paper.paper-glass .story-date-pretty,
.opened-message .paper.paper-glass .ending-kicker{
  color:#d3afc0!important;
  opacity:1!important;
}
.opened-message .paper.paper-glass .letter-scroll-whisper:before,
.opened-message .paper.paper-glass .letter-scroll-whisper:after,
.opened-message .paper.paper-glass .heading-divider i{
  background:linear-gradient(90deg,transparent,rgba(255,184,214,.34),transparent)!important;
}

/* Ícone inicial vira uma cápsula de vidro, e não um disco branco. */
.opened-message .paper.paper-glass .letter-intro-icon{
  background:
    radial-gradient(circle at 42% 28%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,220,236,.15)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.opened-message .paper.paper-glass .letter-intro-icon .dpv-moment-icon-hero{
  color:#ff7eb4!important;
}

/* Cards internos seguem o mesmo material */
.opened-message .paper.paper-glass .story-unlock,
.opened-message .paper.paper-glass .reader-guestbook,
.opened-message .paper.paper-glass .story-date-result,
.opened-message .paper.paper-glass .reader-minigame,
.opened-message .paper.paper-glass .reader-puzzle,
.opened-message .paper.paper-glass .reader-reasons,
.opened-message .paper.paper-glass .reader-storymap,
.opened-message .paper.paper-glass .reader-timeline,
.opened-message .paper.paper-glass .storymap-result,
.opened-message .paper.paper-glass .memory-story,
.opened-message .paper.paper-glass .recipient-response,
.opened-message .paper.paper-glass .reaction-box,
.opened-message .paper.paper-glass .emotional-ending,
.opened-message .paper.paper-glass .reader-media-block,
.opened-message .paper.paper-glass .recipient-music,
.opened-message .paper.paper-glass .hidden-music-card,
.opened-message .paper.paper-glass .letter-extra-section{
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,226,239,.12)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.07)!important;
  color:#f9edf3!important;
}

.opened-message .paper.paper-glass .reader-reason-card,
.opened-message .paper.paper-glass .letter-timeline-row,
.opened-message .paper.paper-glass .story-row,
.opened-message .paper.paper-glass .journey-card,
.opened-message .paper.paper-glass .photo-timeline-card,
.opened-message .paper.paper-glass .guestbook-list article,
.opened-message .paper.paper-glass .post-letter-actions button{
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,225,238,.11)!important;
  color:#faedf4!important;
  box-shadow:none!important;
}
.opened-message .paper.paper-glass .reader-reason-card p,
.opened-message .paper.paper-glass .reader-reasons h4,
.opened-message .paper.paper-glass .guestbook-list article p,
.opened-message .paper.paper-glass .guestbook-list article strong{
  color:#fceef5!important;
}

/* Música escondida também deve parecer parte do vidro. */
.opened-message .paper.paper-glass .hidden-music-cover{
  min-height:150px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,115,175,.12),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,219,235,.14)!important;
  color:#f9eaf2!important;
  box-shadow:0 18px 38px rgba(0,0,0,.14)!important;
}
.opened-message .paper.paper-glass .hidden-music-cover>span{
  background:linear-gradient(145deg,#bc4778,#e85f9a)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16);
}
.opened-message .paper.paper-glass .hidden-music-cover strong{color:#ffe0ec!important}
.opened-message .paper.paper-glass .hidden-music-cover small{color:#d5afbf!important}

/* Player / áudio */
.opened-message .paper.paper-glass .themed-audio-player,
.opened-message .paper.paper-glass .story-result-media .media-shell{
  background:rgba(9,7,11,.5)!important;
  border:1px solid rgba(255,224,238,.11)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.2)!important;
}
.opened-message .paper.paper-glass .themed-audio-player strong,
.opened-message .paper.paper-glass .themed-audio-player small,
.opened-message .paper.paper-glass .themed-audio-time{
  color:#f8e8f0!important;
}

/* Inputs dos blocos interativos */
.opened-message .paper.paper-glass input,
.opened-message .paper.paper-glass textarea,
.opened-message .paper.paper-glass select{
  background:rgba(255,255,255,.91)!important;
  color:#412a35!important;
  border-color:rgba(255,255,255,.28)!important;
  caret-color:#b43f72!important;
}
.opened-message .paper.paper-glass input::placeholder,
.opened-message .paper.paper-glass textarea::placeholder{
  color:#987584!important;
  opacity:1!important;
}

/* Botões de ação no vidro */
.opened-message .paper.paper-glass .btn-primary,
.opened-message .paper.paper-glass .unlock-submit-btn,
.opened-message .paper.paper-glass .recipient-response-btn,
.opened-message .paper.paper-glass .guestbook-send,
.opened-message .paper.paper-glass .ending-reveal-btn,
.opened-message .paper.paper-glass .reader-reason-next{
  background:linear-gradient(135deg,#f04f97,#bb5cff)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 14px 30px rgba(220,73,150,.22)!important;
}
.opened-message .paper.paper-glass .ending-reveal-btn{
  border:1px solid rgba(255,222,237,.12)!important;
}

/* Álbum/foto: polaroids podem continuar claras, mas com contorno compatível. */
.opened-message .paper.paper-glass .story-result-photo figure,
.opened-message .paper.paper-glass .album-card{
  background:linear-gradient(180deg,#fffafc,#f5edf1)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.23)!important;
}
.opened-message .paper.paper-glass .story-result-photo strong,
.opened-message .paper.paper-glass .album-card strong{color:#74445a!important}
.opened-message .paper.paper-glass .story-result-photo small,
.opened-message .paper.paper-glass .album-card small{color:#8a6978!important}

/* Raspagem é uma foto física dentro do vidro; preserva o efeito polaroid. */
.opened-message .paper.paper-glass .scratch-card{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,226,239,.10);
}
.opened-message .paper.paper-glass .scratch-card h4{color:#ffd0e1!important}
.opened-message .paper.paper-glass .scratch-card>p{color:#d9b9c7!important}

/* Preview de aparência: o usuário enxerga o vidro como ele realmente ficará. */
.letter-look-paper.paper-glass{
  color:#fff3f9!important;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,127,185,.16),transparent 32%),
    linear-gradient(145deg,rgba(45,23,38,.8),rgba(25,15,27,.7))!important;
  border:1px solid rgba(255,225,239,.16)!important;
  box-shadow:0 24px 55px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.1)!important;
  backdrop-filter:blur(18px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
}
.letter-look-paper.paper-glass h4{color:#ffc8de!important}
.letter-look-paper.paper-glass p{color:#f4e4ec!important}

/* Em telas pequenas, blur e sombras são mais leves para manter fluidez. */
@media(max-width:760px){
  .opened-message .paper.paper-glass{
    backdrop-filter:blur(18px) saturate(1.1)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.1)!important;
    box-shadow:0 22px 56px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)!important;
  }
  .opened-message .story-result{gap:34px!important}
  .opened-message .reveal-item.reader-pending{transform:translateY(22px) scale(.99)!important;filter:blur(5px)!important}
}

@media(prefers-reduced-motion:reduce){
  .opened-message .reveal-item.reader-pending{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    pointer-events:auto!important;
  }
}

/* V23.5 emergency hardening: Spotify controller/fallback */
.dpv-spotify-auto-wrap[data-dpv-spotify-controller="1"]{
  position:relative;
  width:100%;
  min-height:152px;
  overflow:hidden;
}
.dpv-spotify-auto-wrap[data-dpv-spotify-controller="1"] > iframe,
.dpv-spotify-auto-wrap[data-dpv-spotify-controller="1"] > .dpv-spotify-api-mount{
  width:100%!important;
}
.dpv-spotify-auto-wrap[data-dpv-spotify-controller="1"] > [hidden]{display:none!important}
.dpv-spotify-auto-wrap[data-dpv-spotify-fallback="1"] > iframe{
  display:block!important;
  border:0!important;
  width:100%!important;
  min-height:152px!important;
}