/* Subtle, user-led movement for Eva's paper collage.
   All scroll values are supplied by journal-motion-v1.js and stay at zero
   when motion is reduced or JavaScript is unavailable. */

.journal-scroll-note,
.journal-depth,
.journal-pinned-note {
  --journal-y:0px;
  --journal-rotate:0deg;
  --journal-shadow-alpha:.13;
  --journal-shadow-lift:3px;
  translate:0 var(--journal-y);
}

.journal-scroll-note {
  rotate:var(--journal-rotate);
  transform-origin:var(--journal-origin,50% 0%);
  filter:drop-shadow(0 var(--journal-shadow-lift) 8px rgb(32 15 25 / var(--journal-shadow-alpha)));
}

.journal-depth {
  translate:0 var(--journal-y);
}
.journal-pinned-note { translate:0 0; }

/* Song-story paper and live copy share one scroll transform. The separate
   tape stays attached to the desk instead of travelling with the sheet. */
.journal-pinned-note>.song-note-material,
.journal-pinned-note>.song-note-copy {
  translate:0 var(--journal-y);
  rotate:var(--journal-rotate);
}
.journal-pinned-note>.song-note-material {
  transform-origin:var(--journal-origin,38% 0%);
  filter:drop-shadow(0 var(--journal-shadow-lift) 8px rgb(32 15 25 / var(--journal-shadow-alpha)));
}
.journal-pinned-note>.song-note-copy { transform-origin:28% -52px; }
.journal-pinned-note.is-journal-active>.song-note-material,
.journal-pinned-note.is-journal-active>.song-note-copy {
  will-change:translate,rotate;
}

/* The two family prints already have different transform angles. Individual
   rotate/translate properties preserve those authored transforms. */
.journal-family-photo {
  --journal-family-lift:0px;
  --journal-family-upright:0deg;
  transition:transform 300ms ease,box-shadow 300ms ease;
}
.journal-family-photo.parents-print { transform:translateY(var(--journal-family-lift)) rotate(calc(-2.4deg + var(--journal-family-upright))); }
.journal-family-photo.childhood-print { transform:translateY(var(--journal-family-lift)) rotate(calc(2deg + var(--journal-family-upright))); }

@media (hover:hover) and (pointer:fine) {
  .journal-family-photo:hover {
    --journal-family-lift:-3px;
    box-shadow:0 8px 15px rgb(47 30 34 / .22);
  }
  .journal-family-photo.parents-print:hover { --journal-family-upright:.5deg; }
  .journal-family-photo.childhood-print:hover { --journal-family-upright:-.5deg; }
}

.journal-family-photo:focus-visible {
  --journal-family-lift:-3px;
  box-shadow:0 8px 15px rgb(47 30 34 / .22);
}
.journal-family-photo.parents-print:focus-visible { --journal-family-upright:.5deg; }
.journal-family-photo.childhood-print:focus-visible { --journal-family-upright:-.5deg; }

@media (hover:none), (pointer:coarse) {
  .journal-family-photo.photo-viewer-trigger:active {
    --journal-family-lift:-2px;
    box-shadow:0 6px 12px rgb(47 30 34 / .2);
  }
  .journal-family-photo.parents-print.photo-viewer-trigger:active { --journal-family-upright:.35deg; }
  .journal-family-photo.childhood-print.photo-viewer-trigger:active { --journal-family-upright:-.35deg; }
}

/* One quiet placement gesture for the wrapped sweet. */
html.journal-motion-ready .journal-candy:not(.is-journal-visible) {
  translate:3px -2px;
  rotate:1.4deg;
}
html.journal-motion-ready .journal-candy.is-journal-visible {
  animation:journal-candy-settle 760ms cubic-bezier(.2,.8,.22,1) both;
}
@keyframes journal-candy-settle {
  0% { translate:3px -2px; rotate:1.4deg; }
  58% { translate:-1px 1px; rotate:-.35deg; }
  100% { translate:0 0; rotate:0deg; }
}

/* A narrow reveal, restricted to the small part of each composite asset that
   contains metal. It runs once when the object is first observed. */
.journal-shine { position:relative; }
.journal-shine::after {
  content:"";
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(105deg,transparent 39%,rgb(255 250 238 / .06) 45%,rgb(255 250 238 / .42) 50%,rgb(255 250 238 / .08) 55%,transparent 61%);
  mix-blend-mode:screen;
}
.pink-note.journal-shine::after {
  left:1%; top:0; width:59%; height:39%;
  clip-path:polygon(1% 43%,88% 0,100% 26%,11% 72%);
}
.latest-note.journal-shine::after {
  right:1%; top:0; width:31%; height:23%;
  clip-path:polygon(31% 0,100% 0,100% 78%,65% 100%,16% 64%);
}
.key-tag-wrap.journal-shine::after {
  left:1%; top:12%; width:45%; height:73%;
  clip-path:polygon(17% 0,80% 4%,100% 39%,83% 100%,0 90%,2% 23%);
}
.journal-shine.is-journal-visible::after {
  animation:journal-metal-shine 860ms ease-out both;
}
@keyframes journal-metal-shine {
  0% { opacity:0; translate:-125% 0; }
  18% { opacity:.18; }
  52% { opacity:.42; }
  100% { opacity:0; translate:125% 0; }
}

/* Existing handwritten strokes draw once; their text is never hidden. */
html.journal-motion-ready .gel-underline::after {
  transform:rotate(-3deg) scaleX(0);
  transform-origin:left center;
}
html.journal-motion-ready .gel-underline.is-journal-visible::after {
  animation:journal-gel-line 620ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes journal-gel-line {
  from { transform:rotate(-3deg) scaleX(0); }
  to { transform:rotate(-3deg) scaleX(1); }
}
html.journal-motion-ready .ink-swoop path {
  stroke-dasharray:260;
  stroke-dashoffset:260;
}
html.journal-motion-ready .ink-swoop.is-journal-visible path {
  animation:journal-ink-line 700ms cubic-bezier(.25,.7,.25,1) both;
}
@keyframes journal-ink-line { to { stroke-dashoffset:0; } }

/* The My songs rows signal the full hit area without moving their copy. */
.song-list a {
  position:relative;
  transition:translate 120ms ease;
}
.song-list .song-copy strong {
  position:relative;
  width:max-content;
  max-width:100%;
}
.song-list .song-copy strong::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 220ms ease;
}
.song-list a .icon { transition:translate 220ms ease; }
.song-list a:is(:hover,:focus-visible) .song-copy strong::after { transform:scaleX(1); }
.song-list a:is(:hover,:focus-visible) .icon { translate:3px 0; }
.song-list a:active { translate:0 1px; }
.song-list a:focus-visible {
  outline:2px solid #6f4055;
  outline-offset:5px;
  border-radius:2px;
}

/* Sound remains opt-in. The audio files are requested only after activation. */
.journal-sound-toggle {
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  margin-top:14px;
  padding:9px 14px;
  border:1px solid currentColor;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font:500 12px/1 var(--sans,"DM Sans",Arial,sans-serif);
  letter-spacing:.02em;
  cursor:pointer;
}
.journal-sound-toggle::before { content:"♪"; font-size:16px; line-height:1; }
.journal-sound-toggle[aria-pressed="true"] { background:rgb(243 236 223 / .12); }
.journal-sound-toggle:hover { background:rgb(243 236 223 / .09); }
.journal-sound-toggle:focus-visible { outline:3px solid #e4b4c3; outline-offset:3px; }
.inner-footer .journal-sound-toggle { margin:0; color:#f3ecdf; }
.footer-v17 .journal-sound-toggle { color:#eadce3; }
.footer-sound-control { display:flex; align-items:center; justify-content:flex-end; flex:none; margin-left:auto; }
.studio-page .footer-sound-control { margin-top:16px; }

@media (hover:none), (pointer:coarse) {
  .photo-viewer-trigger:hover img { filter:none; }
}

@media (prefers-reduced-motion:reduce) {
  html:not(.journal-motion-preview) .journal-scroll-note,
  html:not(.journal-motion-preview) .journal-depth,
  html:not(.journal-motion-preview) .journal-pinned-note {
    --journal-y:0px!important;
    --journal-rotate:0deg!important;
    --journal-family-lift:0px!important;
    --journal-family-upright:0deg!important;
    translate:0 0!important;
    rotate:0deg!important;
    animation:none!important;
    transition:none!important;
    will-change:auto;
  }
  html:not(.journal-motion-preview) .journal-scroll-note { filter:none; }
  html:not(.journal-motion-preview) .journal-pinned-note>.song-note-material,
  html:not(.journal-motion-preview) .journal-pinned-note>.song-note-copy { translate:0 0!important; rotate:0deg!important; filter:none; will-change:auto!important; }
  html:not(.journal-motion-preview) .journal-candy { translate:0 0!important; rotate:0deg!important; animation:none!important; }
  html:not(.journal-motion-preview) .journal-shine::after { display:none!important; animation:none!important; }
  html:not(.journal-motion-preview).journal-motion-ready .gel-underline::after { transform:rotate(-3deg) scaleX(1)!important; animation:none!important; }
  html:not(.journal-motion-preview).journal-motion-ready .ink-swoop path { stroke-dashoffset:0!important; animation:none!important; }
  html:not(.journal-motion-preview) .song-list a,
  html:not(.journal-motion-preview) .song-list a .icon,
  html:not(.journal-motion-preview) .song-list .song-copy strong::after { transition-duration:0ms!important; }
}

@media (max-width:700px) {
  .inner-footer>.footer-sound-control { width:100%; justify-content:flex-start; margin-left:0; }
}