/* Visible by default. Independent translate preserves each frame's rotation. */
[data-reveal], [data-timeline-item] { translate: 0 0; transition: opacity .75s ease, translate .75s cubic-bezier(.2,.7,.3,1); transition-delay: var(--reveal-delay, 0s); }
.reveal-pending { opacity: 0; translate: 0 var(--reveal-distance, 12px); transition-delay: 0s; }
.photo-main { --reveal-distance: 10px; }
.photo-portrait, .photo-small { --reveal-delay: .07s; --reveal-distance: 14px; }
.learning-copy, .interlude { --reveal-distance: 6px; }
.letter-reserved { --reveal-distance: 8px; --reveal-delay: .08s; }

.flame { animation: flame-arrive 1.1s ease-out both; }
.flame-shape { animation: flame-breathe 5.5s ease-in-out infinite; }
.flame-core { animation: core-breathe 4.4s ease-in-out infinite; }
.flame::before { animation: glow-breathe 4.8s ease-in-out infinite; }
.start-link { position: relative; transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .12s ease; }
.start-link::after, .start-link::before { content: ""; position: absolute; left: 1rem; bottom: 5px; pointer-events: none; }
.start-link::after { right: 1rem; height: 1px; background: #c5916845; }
.start-link::before { z-index: 1; width: calc(100% - 2rem); height: 2px; background: linear-gradient(90deg, var(--amber), #dca36c); opacity: .78; transform: scaleX(.28); transform-origin: left; transition: transform .32s ease, opacity .25s ease; }
.start-link-arrow { transition: transform .25s ease; }
.start-link:focus-visible { color: #f6e8dc; border-color: var(--amber); background-color: #f6d9a40e; }
.start-link:focus-visible::before { opacity: 1; transform: scaleX(1); }
.start-link:focus-visible .start-link-arrow { transform: translateY(4px); }
.start-link:active { transform: translateY(1px); }
.start-link:active::before { opacity: .65; }
.music-control { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.music-note, .music-paused { transition: opacity .2s ease; }
.music-control:active { transform: translateY(1px); }
@media (hover: hover) {
  .start-link:hover { color: #f6e8dc; border-color: var(--amber); background-color: #f6d9a40e; }
  .start-link:hover::before { opacity: 1; transform: scaleX(1); }
  .start-link:hover .start-link-arrow { transform: translateY(4px); }
  .music-control:hover { border-color: #dca36cab; background-color: #2d1b22f2; box-shadow: 0 12px 30px #130b0f52, 0 0 18px #dca36c10; }
}
@keyframes flame-arrive {
  from { opacity: .35; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes flame-breathe {
  0%, 100% { transform: rotate(-4deg) scale(.98, 1.02); }
  38% { transform: rotate(5deg) scale(1.05, .97); }
  72% { transform: rotate(-7deg) scale(.97, 1.04); }
}
@keyframes core-breathe {
  0%, 100% { transform: rotate(2deg) scale(.96, 1); opacity: .9; }
  50% { transform: rotate(-4deg) scale(1.03, .96); opacity: 1; }
}
@keyframes glow-breathe {
  0%, 100% { opacity: .55; transform: scale(.9); }
  45% { opacity: 1; transform: scale(1.14); }
}

/* Each segment is completed once; there is no continuous scroll handler. */
.timeline-enhanced li::before { transform: scaleY(0); transition: transform .85s cubic-bezier(.2,.7,.3,1); }
.timeline-enhanced li.is-reached::before { transform: scaleY(1); }
.timeline-point { transition: background-color .5s ease; }
.is-reached .timeline-point { background: var(--amber); }
.light-pending::before { opacity: 0; }
[data-light]::before { transition: opacity 1.4s ease; }

/* ETAPA 04.1: apertura breve del sobre y despliegue de la hoja. */
.envelope-glow { transition: opacity .3s ease, transform .3s ease; }
.envelope-button:focus-visible .envelope-glow, .envelope-button:active .envelope-glow { opacity: .9; transform: scale(1.04); }
.envelope { transition: transform .55s ease .75s, opacity .45s ease .85s, filter .45s ease .85s; }
.envelope-flap { transition: transform .48s cubic-bezier(.3,.7,.2,1) .12s; }
.envelope-seal { transition: opacity .3s ease .1s, transform .35s ease .1s; }
.letter-preview { transition: opacity .25s ease .4s, transform .72s cubic-bezier(.2,.75,.2,1) .4s; }
.letter-panel { transition: grid-template-rows 1.05s cubic-bezier(.2,.7,.2,1) .42s, opacity .35s ease .6s, margin-top .8s ease .42s; }
.letter-sheet { transition: transform .9s cubic-bezier(.2,.7,.2,1) .48s; }
.letter-close { transition: color .2s ease, border-color .2s ease; }
.is-open .envelope-flap { transform: perspective(500px) rotateX(178deg); }
.is-open .envelope-seal { opacity: 0; transform: translateY(8px) scale(.72); }
.is-open .letter-preview { z-index: 2; opacity: 1; transform: translateY(-48%) scale(1); }
.is-open .envelope { opacity: .68; transform: translateY(28px) rotate(-3deg) scale(.94); filter: drop-shadow(0 10px 9px #6b424115); }
.is-open .letter-panel { grid-template-rows: 1fr; margin-top: -4.5rem; opacity: 1; }
.is-open .letter-sheet { transform: translateY(0) scale(1); }
@media (hover: hover) {
  .envelope-button:hover .envelope-glow { opacity: .72; transform: scale(1.025); }
  .letter-close:hover { color: var(--wine); border-color: var(--wine); }
}
@media (min-width: 768px) {
  .timeline-enhanced li::before { transform: scaleX(0); }
  .timeline-enhanced li.is-reached::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; translate: none; }
  .timeline-enhanced li::before { transform: none; }
  .light-pending::before { opacity: 1; }
  .start-link-arrow, .music-control { transform: none; }
  .start-link:hover .start-link-arrow, .start-link:focus-visible .start-link-arrow { transform: none; }
  .start-link::before { transform: scaleX(.28); }
  .start-link:hover::before, .start-link:focus-visible::before { transform: scaleX(1); }
}
@media print {
  .reveal-pending { opacity: 1; translate: none; }
  .timeline-enhanced li::before { transform: none; }
  .light-pending::before { opacity: 1; }
}