/* Motion is decorative: content stays visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  body.ui-preview { --motion-ease: cubic-bezier(.22,.8,.3,1); }
  @keyframes diary-rise {
    from { opacity: .35; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes diary-grow {
    from { transform: scaleX(.15); }
    to { transform: scaleX(1); }
  }
  body.ui-preview .page-head h1,
  body.ui-preview .calendar-heading h1,
  body.ui-preview .preview-hero-line > strong,
  body.ui-preview .preview-login-wrap .ln .t {
    animation: diary-rise 480ms var(--motion-ease) both;
  }
  body.ui-preview .preview-hero-line:nth-child(2) > strong { animation-delay: 60ms; }
  body.ui-preview .preview-hero-line:nth-child(3) > strong { animation-delay: 120ms; }
  body.ui-preview .diary-reveal {
    animation: diary-rise 380ms var(--motion-ease) backwards;
    animation-delay: var(--motion-delay, 0ms);
  }
  body.ui-preview meter.diary-reveal {
    transform-origin: left;
    animation-name: diary-grow;
    animation-duration: 550ms;
  }
  body.ui-preview :is(.btn,.preview-lane,.preview-sub a,.calendar-month,.go,.alt) {
    transition: background-color 160ms, color 160ms, border-color 160ms;
  }
  body.ui-preview :is(.btn,.go,.alt):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
  }
  body.ui-preview :is(.collection-card,.home-car) {
    transition: transform 180ms var(--motion-ease);
  }
  @media (hover: hover) and (pointer: fine) {
    body.ui-preview :is(.collection-card,.home-car):hover { transform: translateY(-3px); }
  }
  /* Focus never waits for an entrance effect. */
  body.ui-preview .diary-reveal:focus-within { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ui-preview *, body.ui-preview *::before, body.ui-preview *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Hero feedback also works without hover, using keyboard focus. */
body.ui-preview .preview-hero-line:is(:hover,:focus-visible) {
  background:var(--ink);color:var(--ground)!important;
}
body.ui-preview .preview-hero-line:is(:hover,:focus-visible) > span {color:var(--ground)}
body.ui-preview .preview-hero-line:is(:hover,:focus-visible) > span > b {color:var(--signal)}
@media (prefers-reduced-motion:no-preference) {
  body.ui-preview .preview-hero-line {transition:background-color 180ms,color 180ms}
  body.ui-preview .preview-hero-line > span > b {transition:color 180ms}
  /* Native same-origin navigation; no interception of links or forms. */
  @view-transition {navigation:auto}
  body.ui-preview .preview-head {view-transition-name:diary-header}
  ::view-transition-group(diary-header) {animation:none}
  ::view-transition-old(diary-header) {animation:none;opacity:0}
  ::view-transition-new(diary-header) {animation:none;opacity:1}
  ::view-transition-old(root) {animation:diary-page-out 100ms ease-out both}
  ::view-transition-new(root) {animation:diary-page-in 160ms ease-out both}
  @keyframes diary-page-out {to{opacity:0}}
  @keyframes diary-page-in {from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce) {
  @view-transition {navigation:none}
}

@media (prefers-reduced-motion:no-preference) {
  body.ui-preview [data-motion-results] {view-transition-name:diary-results}
  ::view-transition-group(diary-results) {animation-duration:0s}
  ::view-transition-old(diary-results) {animation:diary-page-out 100ms ease-out both}
  ::view-transition-new(diary-results) {animation:diary-page-in 140ms 80ms ease-out both}
  html.diary-filter-transition::view-transition-old(root),
  html.diary-filter-transition::view-transition-new(root) {animation:none;mix-blend-mode:normal}
}

body.ui-preview .diary-count-accessible {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.ui-preview .diary-count-visual {display:inline-block;font-variant-numeric:tabular-nums;font:inherit;color:inherit}
@media(prefers-reduced-motion:no-preference){
  body.ui-preview .flaunt-hero h1 {animation:diary-rise 600ms var(--motion-ease) both}
}
/* Login: short, one-shot entrances, with no looping distraction. */
@media(prefers-reduced-motion:no-preference){
  body.ui-preview .preview-login-wrap .brand{animation:diary-rise 450ms var(--motion-ease) both}
  body.ui-preview .preview-login-wrap .ln:nth-of-type(2) .t{animation-delay:60ms}
  body.ui-preview .preview-login-wrap .ln:nth-of-type(3) .t{animation-delay:120ms}
  body.ui-preview .preview-login-wrap .ln:nth-of-type(4) .t{animation-delay:180ms}
  body.ui-preview .preview-login-wrap .ln h2,
  body.ui-preview .preview-login-wrap .ln p{animation:diary-rise 400ms 180ms var(--motion-ease) both}
  body.ui-preview .preview-login-wrap .in{transition:border-color 160ms ease}
  body.ui-preview .preview-login-wrap .go{transition:background-color 160ms ease,color 160ms ease,transform 160ms ease}
  body.ui-preview .preview-login-wrap details[open]>.body,
  body.ui-preview .preview-login-wrap details[open]>p{animation:diary-rise 200ms var(--motion-ease) both}
  body.ui-preview .preview-login-wrap .brand:focus-within,
  body.ui-preview .preview-login-wrap details:focus-within>.body,
  body.ui-preview .preview-login-wrap details:focus-within>p{animation:none}
}
/* Login hero rows match the Home hero hover treatment. */
body.ui-preview .preview-login-wrap .ln:hover{background:var(--ink);color:var(--ground)}
body.ui-preview .preview-login-wrap .ln:hover h2,body.ui-preview .preview-login-wrap .ln:hover p{color:var(--ground)}
body.ui-preview .preview-login-wrap .ln:hover .t u{color:var(--signal)}
@media(prefers-reduced-motion:no-preference){body.ui-preview .preview-login-wrap .ln{transition:background-color 180ms ease,color 180ms ease}body.ui-preview .preview-login-wrap .ln h2,body.ui-preview .preview-login-wrap .ln p{transition:color 180ms ease}}