/* V23.8 — leitura sequencial + excelência mobile + padronização da carta */

/* --------------------------------------------------------------------------
   1) FLUXO NARRATIVO REAL
   Próximos blocos não participam do layout até o bloco anterior terminar.
   -------------------------------------------------------------------------- */
.opened-message .reveal-item.reader-flow-locked{
  display:none!important;
}
.opened-message .reveal-item.reader-pending{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,28px,0) scale(.985)!important;
  filter:blur(8px)!important;
}
.opened-message .reveal-item.reader-child-pending{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.opened-message .reveal-item.is-visible,
.opened-message .reveal-item.reader-revealed{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  filter:none!important;
}
.opened-message .reveal-photo.reader-pending{
  transform:translate3d(0,38px,0) rotate(.7deg) scale(.96)!important;
}
.opened-message .reveal-music.reader-pending{
  transform:translate3d(0,24px,0) scale(.95)!important;
}
.opened-message .reader-timeline-item.reader-pending,
.opened-message .journey-stop.reader-pending,
.opened-message .photo-timeline-card.reader-pending{
  transform:translate3d(18px,14px,0) scale(.985)!important;
}
.opened-message .reveal-item{
  transition:
    opacity .82s cubic-bezier(.22,.72,.22,1),
    transform .92s cubic-bezier(.22,.72,.22,1),
    filter .86s ease,
    visibility 0s linear!important;
  will-change:opacity,transform;
}
.opened-message [data-reader-typewriter].is-typing::after{
  content:"";
  display:inline-block;
  width:1px;
  height:1.08em;
  margin-left:4px;
  vertical-align:-.08em;
  background:currentColor;
  opacity:.72;
  animation:dpvCaretBlink .72s steps(1,end) infinite;
}
@keyframes dpvCaretBlink{0%,46%{opacity:.78}47%,100%{opacity:.08}}

/* --------------------------------------------------------------------------
   2) ESTRUTURA BASE DA CARTA
   -------------------------------------------------------------------------- */
.opened-message{
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin-inline:auto!important;
  padding:clamp(18px,3vw,34px)!important;
}
.opened-message .paper{
  width:100%!important;
  max-width:900px!important;
  margin-inline:auto!important;
  padding:clamp(34px,5vw,64px)!important;
  border-radius:34px!important;
  overflow:clip;
}
.opened-message .story-result{
  gap:clamp(38px,5vw,68px)!important;
}
.opened-message .story-result-text,
.opened-message .reader-copy{
  width:min(100%,68ch)!important;
  margin-inline:auto!important;
  font-size:clamp(17px,1.05vw + 12px,21px)!important;
  line-height:1.88!important;
  text-wrap:pretty;
}
.opened-message .letter-intro-title{
  max-width:17ch!important;
  margin-inline:auto!important;
  text-align:center!important;
  text-wrap:balance;
}
.opened-message .letter-scroll-whisper{
  max-width:480px;
  margin-inline:auto!important;
}

/* Mesmo ritmo visual para todos os capítulos/blocos. */
.opened-message .reader-timeline,
.opened-message .reader-storymap,
.opened-message .reader-reasons,
.opened-message .story-date-result,
.opened-message .reader-guestbook,
.opened-message .story-unlock,
.opened-message .reader-minigame,
.opened-message .reader-puzzle,
.opened-message .reader-media-block,
.opened-message .letter-album,
.opened-message .letter-extra-section,
.opened-message .emotional-ending{
  width:min(100%,760px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:30px!important;
}
.opened-message .reader-section-heading{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  text-align:left!important;
  margin:0 0 28px!important;
}
.opened-message .reader-section-heading .reader-icon{
  width:52px!important;
  height:52px!important;
  margin:0!important;
  border-radius:17px!important;
}
.opened-message .reader-heading-copy{
  min-width:0;
}
.opened-message .reader-section-kicker{
  display:block;
  margin-bottom:5px;
  font-family:"DM Sans",sans-serif!important;
  font-size:10px!important;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--paper-muted,#9a7083);
}
.opened-message .reader-section-heading h4{
  max-width:none!important;
  margin:0!important;
  font-size:clamp(28px,2.6vw,40px)!important;
  line-height:1.08!important;
  text-align:left!important;
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   3) LINHA DO TEMPO — novo padrão
   -------------------------------------------------------------------------- */
.opened-message .reader-timeline{
  position:relative;
  padding:clamp(28px,4vw,42px)!important;
  background:
    radial-gradient(circle at 12% 0,rgba(230,96,155,.08),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,250,252,.58))!important;
  border:1px solid rgba(126,74,97,.12)!important;
  box-shadow:0 24px 54px rgba(68,31,48,.08)!important;
}
.opened-message .reader-timeline-list{
  position:relative;
  display:grid!important;
  gap:18px!important;
  padding:4px 0 4px 0!important;
}
.opened-message .reader-timeline-list::before{
  content:"";
  position:absolute;
  left:22px!important;
  top:22px!important;
  bottom:22px!important;
  width:2px!important;
  border-radius:999px;
  background:linear-gradient(180deg,#de6699 0%,#df8eb1 55%,rgba(222,102,153,.14) 100%)!important;
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1.2s cubic-bezier(.22,.72,.22,1);
}
.opened-message .reader-timeline.is-visible .reader-timeline-list::before{
  transform:scaleY(1);
}
.opened-message .reader-timeline-item{
  position:relative;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:15px!important;
  padding:0!important;
}
.opened-message .reader-timeline-dot{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff9fc,#f5dce7)!important;
  border:1px solid rgba(207,89,140,.17)!important;
  box-shadow:0 12px 26px rgba(155,59,104,.11)!important;
  z-index:2;
}
.opened-message .reader-timeline-dot span{
  font-family:"DM Sans",sans-serif!important;
  font-size:10px!important;
  line-height:1;
  letter-spacing:.04em;
  font-weight:800;
  color:#b7507d!important;
}
.opened-message .reader-timeline-copy{
  min-width:0;
  padding:17px 18px 18px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.62)!important;
  border:1px solid rgba(123,71,95,.10)!important;
  box-shadow:0 12px 28px rgba(74,34,52,.055)!important;
}
.opened-message .reader-timeline-copy b{
  display:block!important;
  width:max-content;
  max-width:100%;
  margin:0 0 8px!important;
  padding:6px 9px!important;
  border-radius:999px;
  background:rgba(211,87,142,.08);
  font-family:"DM Sans",sans-serif!important;
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
  color:#a84f77!important;
}
.opened-message .reader-timeline-copy strong{
  display:block!important;
  margin:0 0 6px!important;
  font-size:clamp(18px,1.5vw,22px)!important;
  line-height:1.42!important;
  color:var(--paper-text,#503743)!important;
  text-wrap:pretty;
}
.opened-message .reader-timeline-copy p{
  margin:0!important;
  font-size:15px!important;
  line-height:1.72!important;
  color:var(--paper-muted,#765a67)!important;
}

/* Timeline fotográfica */
.opened-message .photo-timeline-list{display:grid;gap:18px!important}
.opened-message .photo-timeline-card{
  grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr)!important;
  gap:18px!important;
  padding:14px!important;
  border-radius:24px!important;
}
.opened-message .photo-timeline-card img{border-radius:18px!important;min-height:170px!important}

/* --------------------------------------------------------------------------
   4) MAPA, MOTIVOS, MÍDIA, PERGUNTA E FIM — mesma linguagem
   -------------------------------------------------------------------------- */
.opened-message .reader-storymap,
.opened-message .reader-reasons,
.opened-message .story-date-result,
.opened-message .reader-guestbook,
.opened-message .story-unlock,
.opened-message .reader-minigame,
.opened-message .reader-puzzle,
.opened-message .emotional-ending{
  padding:clamp(26px,3.8vw,40px)!important;
}
.opened-message .reader-reason-card{
  min-height:132px!important;
  display:grid!important;
  place-items:center!important;
  gap:10px!important;
  padding:26px 22px!important;
  border-radius:22px!important;
}
.opened-message .reader-reason-card p{
  max-width:28ch;
  margin:0 auto!important;
  text-align:center;
  font-size:clamp(20px,2vw,27px)!important;
  line-height:1.45!important;
}
.opened-message .reader-reason-next{
  min-height:50px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  margin:16px auto 0!important;
  padding:0 18px!important;
  border-radius:999px!important;
}
.opened-message .reader-reason-count{
  display:block!important;
  margin-top:10px!important;
  text-align:center!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:11px!important;
}
.opened-message .reader-media-block{
  padding:12px!important;
  overflow:hidden;
}
.opened-message .media-shell{
  border-radius:22px!important;
  overflow:hidden!important;
}
.opened-message .story-unlock-form{
  gap:12px!important;
}
.opened-message .story-unlock .unlock-answer,
.opened-message .story-unlock .unlock-submit-btn{
  min-height:58px!important;
  border-radius:18px!important;
}
.opened-message .emotional-ending{
  text-align:center;
}

/* Vidro: todos os novos elementos seguem o material do papel. */
.opened-message .paper.paper-glass .reader-timeline{
  background:
    radial-gradient(circle at 15% 0,rgba(255,120,181,.09),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.028))!important;
  border-color:rgba(255,226,239,.12)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.opened-message .paper.paper-glass .reader-timeline-copy{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,226,239,.09)!important;
  box-shadow:none!important;
}
.opened-message .paper.paper-glass .reader-timeline-dot{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;
  border-color:rgba(255,220,236,.13)!important;
  box-shadow:none!important;
}
.opened-message .paper.paper-glass .reader-timeline-dot span{color:#ffacd0!important}
.opened-message .paper.paper-glass .reader-timeline-copy b{
  color:#ef9fc0!important;
  background:rgba(255,131,183,.08)!important;
}
.opened-message .paper.paper-glass .reader-timeline-copy strong{color:#fff2f8!important}
.opened-message .paper.paper-glass .reader-timeline-copy p{color:#dcc3cf!important}
.opened-message .paper.paper-glass .reader-section-kicker{color:#d2a6b9!important}

/* Night */
.opened-message .paper.paper-night .reader-timeline{
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border-color:rgba(255,220,236,.09)!important;
}
.opened-message .paper.paper-night .reader-timeline-copy{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,220,236,.08)!important;
  box-shadow:none!important;
}
.opened-message .paper.paper-night .reader-timeline-copy strong{color:#fff2f8!important}
.opened-message .paper.paper-night .reader-timeline-copy p{color:#d8c1cd!important}

/* --------------------------------------------------------------------------
   5) MOBILE-FIRST REAL
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  body.deixei-public-mode .gift-experience,
  #previewDeviceBox.preview-device-mobile .gift-experience{
    padding-left:0!important;
    padding-right:0!important;
  }
  .opened-message{
    width:100%!important;
    max-width:none!important;
    padding:10px max(7px,env(safe-area-inset-left)) calc(34px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-right))!important;
  }
  .opened-message .paper{
    max-width:none!important;
    padding:28px 17px 34px!important;
    border-radius:25px!important;
    box-shadow:0 20px 52px rgba(0,0,0,.22)!important;
  }
  .opened-message .letter-intro-icon{
    width:72px!important;
    height:72px!important;
    margin-bottom:14px!important;
  }
  .opened-message .letter-intro-title{
    max-width:13ch!important;
    font-size:clamp(34px,10.5vw,48px)!important;
    line-height:1.02!important;
  }
  .opened-message .letter-scroll-whisper{
    margin-top:14px!important;
    font-size:9px!important;
    letter-spacing:.12em!important;
  }
  .opened-message .story-result{
    gap:34px!important;
  }
  .opened-message .story-result-text,
  .opened-message .reader-copy{
    width:100%!important;
    font-size:clamp(17px,4.65vw,19px)!important;
    line-height:1.82!important;
  }
  .opened-message .reader-timeline,
  .opened-message .reader-storymap,
  .opened-message .reader-reasons,
  .opened-message .story-date-result,
  .opened-message .reader-guestbook,
  .opened-message .story-unlock,
  .opened-message .reader-minigame,
  .opened-message .reader-puzzle,
  .opened-message .reader-media-block,
  .opened-message .letter-album,
  .opened-message .letter-extra-section,
  .opened-message .emotional-ending{
    width:100%!important;
    border-radius:22px!important;
  }
  .opened-message .reader-timeline,
  .opened-message .reader-storymap,
  .opened-message .reader-reasons,
  .opened-message .story-date-result,
  .opened-message .reader-guestbook,
  .opened-message .story-unlock,
  .opened-message .reader-minigame,
  .opened-message .reader-puzzle,
  .opened-message .emotional-ending{
    padding:22px 14px!important;
  }
  .opened-message .reader-section-heading{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:12px!important;
    margin-bottom:20px!important;
  }
  .opened-message .reader-section-heading .reader-icon{
    width:44px!important;
    height:44px!important;
    border-radius:14px!important;
  }
  .opened-message .reader-section-heading h4{
    font-size:clamp(25px,7vw,32px)!important;
    line-height:1.08!important;
  }
  .opened-message .reader-section-kicker{
    font-size:9px!important;
    letter-spacing:.13em!important;
  }

  /* Linha do tempo mobile: cards compactos, sem texto gigante. */
  .opened-message .reader-timeline-list{
    gap:14px!important;
  }
  .opened-message .reader-timeline-list::before{
    left:18px!important;
    top:18px!important;
    bottom:18px!important;
  }
  .opened-message .reader-timeline-item{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .opened-message .reader-timeline-dot{
    width:38px!important;
    height:38px!important;
    border-radius:13px!important;
  }
  .opened-message .reader-timeline-dot span{
    font-size:9px!important;
  }
  .opened-message .reader-timeline-copy{
    padding:14px 14px 15px!important;
    border-radius:17px!important;
  }
  .opened-message .reader-timeline-copy b{
    margin-bottom:7px!important;
    font-size:8.5px!important;
  }
  .opened-message .reader-timeline-copy strong{
    font-size:18px!important;
    line-height:1.38!important;
  }
  .opened-message .reader-timeline-copy p{
    font-size:14px!important;
    line-height:1.65!important;
  }
  .opened-message .photo-timeline-card{
    grid-template-columns:1fr!important;
    padding:10px!important;
    border-radius:20px!important;
  }
  .opened-message .photo-timeline-card img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3;
    min-height:0!important;
    object-fit:cover;
  }

  /* Mapa: uma coluna no celular para evitar zigue-zague apertado. */
  .opened-message .storymap-path::before{
    left:18px!important;
    transform:none!important;
  }
  .opened-message .storymap-node,
  .opened-message .storymap-node.left,
  .opened-message .storymap-node.right{
    width:100%!important;
    justify-self:stretch!important;
    padding:0 0 0 44px!important;
  }
  .opened-message .storymap-node.left .storymap-pin,
  .opened-message .storymap-node.right .storymap-pin{
    left:2px!important;
    right:auto!important;
    width:32px!important;
    height:32px!important;
  }
  .opened-message .storymap-card{
    border-radius:17px!important;
    padding:14px!important;
  }

  .opened-message .reader-reason-card{
    min-height:112px!important;
    padding:21px 16px!important;
  }
  .opened-message .reader-reason-card p{
    font-size:clamp(18px,5.5vw,23px)!important;
    line-height:1.42!important;
  }
  .opened-message .reader-reason-next{
    width:100%!important;
    min-height:50px!important;
  }
  .opened-message .story-unlock-question{
    font-size:clamp(27px,8vw,34px)!important;
    max-width:12ch!important;
  }
  .opened-message .story-unlock-form{
    grid-template-columns:1fr!important;
  }
  .opened-message .story-unlock .unlock-answer,
  .opened-message .story-unlock .unlock-submit-btn,
  .opened-message .recipient-response-btn,
  .opened-message .guestbook-send,
  .opened-message .ending-reveal-btn{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
  }
  .opened-message .reader-media-block{
    padding:8px!important;
    border-radius:20px!important;
  }
  .opened-message .media-shell{
    border-radius:17px!important;
  }
  .opened-message .emotional-ending{
    padding:24px 15px!important;
  }
  .opened-message .ending-lead{
    font-size:clamp(25px,7.4vw,34px)!important;
    line-height:1.13!important;
  }
  .opened-message .post-letter-actions{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:420px){
  .opened-message .paper{padding-inline:14px!important}
  .opened-message .reader-timeline,
  .opened-message .reader-storymap,
  .opened-message .reader-reasons,
  .opened-message .story-unlock,
  .opened-message .reader-guestbook,
  .opened-message .emotional-ending{padding-inline:12px!important}
  .opened-message .reader-section-heading{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important}
  .opened-message .reader-section-heading .reader-icon{width:40px!important;height:40px!important}
  .opened-message .reader-timeline-item{grid-template-columns:34px minmax(0,1fr)!important;gap:8px!important}
  .opened-message .reader-timeline-dot{width:34px!important;height:34px!important;border-radius:11px!important}
  .opened-message .reader-timeline-list::before{left:16px!important}
}

@media(orientation:landscape) and (max-height:600px) and (max-width:960px){
  .opened-message .paper{padding-top:24px!important;padding-bottom:28px!important}
  .opened-message .letter-intro-icon{width:58px!important;height:58px!important}
  .opened-message .letter-intro-title{font-size:clamp(30px,6vw,42px)!important}
}

@media(prefers-reduced-motion:reduce){
  .opened-message .reveal-item.reader-flow-locked{display:block!important}
  .opened-message .reveal-item.reader-pending,
  .opened-message .reveal-item.reader-child-pending{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important}
  .opened-message [data-reader-typewriter].is-typing::after{display:none!important}
  .opened-message .reader-timeline-list::before{transform:none!important}
}

/* --------------------------------------------------------------------------
   6) MICROANIMAÇÕES DE CONTEÚDO
   -------------------------------------------------------------------------- */
@keyframes dpvReaderIconArrival{
  0%{opacity:0;transform:translateY(8px) scale(.78) rotate(-6deg)}
  58%{opacity:1;transform:translateY(-2px) scale(1.06) rotate(1deg)}
  100%{opacity:1;transform:none}
}
@keyframes dpvTimelineDotArrival{
  0%{opacity:0;transform:scale(.55)}
  62%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes dpvMediaArrival{
  0%{opacity:.15;transform:scale(.955);filter:saturate(.75)}
  100%{opacity:1;transform:scale(1);filter:saturate(1)}
}
@keyframes dpvPhotoArrival{
  0%{opacity:.1;transform:translateY(18px) rotate(-1.4deg) scale(.96)}
  70%{opacity:1;transform:translateY(-2px) rotate(.25deg) scale(1.008)}
  100%{opacity:1;transform:none}
}
@keyframes dpvReasonGlow{
  0%{box-shadow:0 10px 26px rgba(177,77,122,.04)}
  45%{box-shadow:0 16px 36px rgba(210,83,142,.12)}
  100%{box-shadow:0 10px 26px rgba(177,77,122,.05)}
}
.opened-message .reveal-item.is-visible .reader-section-heading .reader-icon{
  animation:dpvReaderIconArrival .78s cubic-bezier(.2,.8,.2,1) both;
}
.opened-message .reader-timeline-item.is-visible .reader-timeline-dot{
  animation:dpvTimelineDotArrival .68s cubic-bezier(.2,.8,.2,1) both;
}
.opened-message .reader-media-block.is-visible .media-shell{
  animation:dpvMediaArrival .9s cubic-bezier(.2,.75,.2,1) both;
}
.opened-message .story-result-photo.is-visible figure,
.opened-message .photo-timeline-card.is-visible img{
  animation:dpvPhotoArrival .94s cubic-bezier(.2,.75,.2,1) both;
}
.opened-message .reader-reasons.is-visible .reader-reason-card{
  animation:dpvReasonGlow 1.25s ease both;
}
.opened-message .emotional-ending.is-visible{
  box-shadow:0 24px 58px rgba(149,61,103,.10)!important;
}
@media(prefers-reduced-motion:reduce){
  .opened-message .reveal-item.is-visible .reader-section-heading .reader-icon,
  .opened-message .reader-timeline-item.is-visible .reader-timeline-dot,
  .opened-message .reader-media-block.is-visible .media-shell,
  .opened-message .story-result-photo.is-visible figure,
  .opened-message .photo-timeline-card.is-visible img,
  .opened-message .reader-reasons.is-visible .reader-reason-card{
    animation:none!important;
  }
}