@layer theme,base,reset;@layer components{::view-transition-group(.blog-forward){--blog-motion-duration:.32s;--blog-motion-ease:cubic-bezier(.22, 1, .36, 1);--blog-motion-distance:clamp(16px, 3vw, 40px);animation-duration:var(--blog-motion-duration);animation-timing-function:var(--blog-motion-ease)}::view-transition-group(.blog-back){--blog-motion-duration:.32s;--blog-motion-ease:cubic-bezier(.22, 1, .36, 1);--blog-motion-distance:clamp(16px, 3vw, 40px);animation-duration:var(--blog-motion-duration);animation-timing-function:var(--blog-motion-ease)}::view-transition-group(.blog-title){--blog-motion-duration:.32s;--blog-motion-ease:cubic-bezier(.22, 1, .36, 1);--blog-motion-distance:clamp(16px, 3vw, 40px);animation-duration:var(--blog-motion-duration);animation-timing-function:var(--blog-motion-ease)}::view-transition-old(.blog-forward){--blog-motion-offset:calc(-1 * var(--blog-motion-distance))}::view-transition-new(.blog-back){--blog-motion-offset:calc(-1 * var(--blog-motion-distance))}::view-transition-new(.blog-forward){--blog-motion-offset:var(--blog-motion-distance)}::view-transition-old(.blog-back){--blog-motion-offset:var(--blog-motion-distance)}::view-transition-old(.blog-forward){animation:blog-depart var(--blog-motion-duration) var(--blog-motion-ease) both;mix-blend-mode:normal}::view-transition-old(.blog-back){animation:blog-depart var(--blog-motion-duration) var(--blog-motion-ease) both;mix-blend-mode:normal}::view-transition-new(.blog-forward){animation:blog-arrive var(--blog-motion-duration) var(--blog-motion-ease) both;mix-blend-mode:normal}::view-transition-new(.blog-back){animation:blog-arrive var(--blog-motion-duration) var(--blog-motion-ease) both;mix-blend-mode:normal}@keyframes blog-arrive{0%{opacity:0;transform:translateX(var(--blog-motion-offset))}to{opacity:1;transform:translate(0)}}@keyframes blog-depart{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateX(var(--blog-motion-offset))}}::view-transition-group(.blog-title){z-index:4;animation-duration:.42s;overflow:visible}::view-transition-old(.blog-title){display:none}::view-transition-new(.blog-title){object-fit:none;object-position:left top;animation:none}::view-transition-group(.blog-surface){--blog-expansion-duration:.42s;--blog-expansion-ease:cubic-bezier(.22, 1, .36, 1);animation-duration:var(--blog-expansion-duration);animation-timing-function:var(--blog-expansion-ease)}::view-transition-group(.blog-surface-open){--blog-expansion-duration:.42s;--blog-expansion-ease:cubic-bezier(.22, 1, .36, 1);animation-duration:var(--blog-expansion-duration);animation-timing-function:var(--blog-expansion-ease)}::view-transition-group(.blog-surface-close){--blog-expansion-duration:.42s;--blog-expansion-ease:cubic-bezier(.22, 1, .36, 1);animation-duration:var(--blog-expansion-duration);animation-timing-function:var(--blog-expansion-ease)}::view-transition-group(.blog-underlay){--blog-expansion-duration:.42s;--blog-expansion-ease:cubic-bezier(.22, 1, .36, 1);animation-duration:var(--blog-expansion-duration);animation-timing-function:var(--blog-expansion-ease)}::view-transition-group(.blog-content){--blog-expansion-duration:.42s;--blog-expansion-ease:cubic-bezier(.22, 1, .36, 1);animation-duration:var(--blog-expansion-duration);animation-timing-function:var(--blog-expansion-ease)}::view-transition-group(.blog-surface){z-index:2}::view-transition-group(.blog-surface-open){z-index:2}::view-transition-group(.blog-surface-close){z-index:2}::view-transition-image-pair(.blog-surface){background:var(--color-paper);height:100%;overflow:clip}::view-transition-image-pair(.blog-surface-open){background:var(--color-paper);height:100%;overflow:clip}::view-transition-image-pair(.blog-surface-close){background:var(--color-paper);height:100%;overflow:clip}::view-transition-image-pair(.blog-surface-open){animation:blog-surface-expand var(--blog-expansion-duration) var(--blog-expansion-ease) both}::view-transition-image-pair(.blog-surface-close){animation:blog-surface-collapse var(--blog-expansion-duration) var(--blog-expansion-ease) both}::view-transition-old(.blog-surface){display:none}::view-transition-old(.blog-surface-open){display:none}::view-transition-old(.blog-surface-close){display:none}::view-transition-new(.blog-surface){height:100%;animation:none}::view-transition-new(.blog-surface-open){height:100%;animation:none}::view-transition-new(.blog-surface-close){height:100%;animation:none}::view-transition-group(.blog-underlay){z-index:1}::view-transition-old(.blog-underlay){transform-origin:50% 25%;animation:blog-recede var(--blog-expansion-duration) var(--blog-expansion-ease) both}::view-transition-new(.blog-underlay){transform-origin:50% 25%;animation:blog-restore var(--blog-expansion-duration) var(--blog-expansion-ease) both}::view-transition-group(.blog-content){z-index:3}::view-transition-new(.blog-content){animation:.26s ease-out .1s both blog-content-in}::view-transition-old(.blog-content){animation:.14s ease-out both blog-content-out}@keyframes blog-surface-expand{0%{border-radius:20px;box-shadow:0 16px 64px #1e191229}to{border-radius:0;box-shadow:0 0 #1e191200}}@keyframes blog-surface-collapse{0%{border-radius:0}60%{box-shadow:0 16px 64px #1e19121f}to{border-radius:20px;box-shadow:0 0 #1e191200}}@keyframes blog-recede{to{opacity:.5;transform:scale(.985)}}@keyframes blog-restore{0%{opacity:.5;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes blog-content-in{0%{opacity:0}to{opacity:1}}@keyframes blog-content-out{to{opacity:0}}@media (prefers-reduced-motion:reduce){::view-transition-image-pair(.blog-surface-open){animation:none}::view-transition-image-pair(.blog-surface-close){animation:none}::view-transition-group(.blog-forward){--blog-motion-distance:0px}::view-transition-group(.blog-back){--blog-motion-distance:0px}}}@layer utilities;