/* Satsuki Towa — the same quiet night, with room to breathe. */
:root {
  --ink: #283b55;
  --muted: #596a7e;
  --blue: #26789d;
  --sky: #c2eaf9;
  --pink: #f4d5e8;
  --line: #d8e5ed;
  --serif: 'Zen Old Mincho', serif;
  --sans: 'Manrope', 'Noto Sans JP', sans-serif;
  --gutter: clamp(1.5rem, 6vw, 6rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); background: #fff; font: 1rem/1.9 var(--sans); }
a { color: inherit; text-decoration: none; text-underline-offset: .3em; }
a:hover { color: var(--blue); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
p { overflow-wrap: anywhere; }
.skip { position: fixed; left: 1rem; top: -10rem; z-index: 50; padding: .75rem 1rem; background: #fff; }
.skip:focus { top: 1rem; }
.header {
  min-height: 6rem; padding: .6rem var(--gutter); display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--line); background: #fff;
}
.brand { width: 13.25rem; margin-left: -1.5rem; flex-shrink: 0; }
.header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1.75rem; font-size: .875rem; font-weight: 500; }
.header nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav-live { border: 1px solid #a4b8c7; border-radius: 3rem; padding: .5rem 1.4rem; gap: 1.5rem; }
.hero {
  max-width: 100rem; margin: auto; padding: 3.5rem var(--gutter) 5.5rem;
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr; column-gap: clamp(1.5rem, 4vw, 4rem);
  background: linear-gradient(115deg, #f3fbff, #fff 57%, #fff6fb);
  border-bottom: 1px solid #e8eef3;
}
.eyebrow { font-size: .8125rem; letter-spacing: .15em; font-weight: 600; }
.eyebrow > span { margin: 0 .75rem; color: #70899b; }
.hero-eyebrow { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 1.6rem; }
h1 { grid-column: 1; grid-row: 2; font-size: clamp(3rem, 5.25vw, 5.25rem); line-height: 1.52; letter-spacing: .015em; }
.hero-line { display: block; }
.slogan-fragment { display: inline-block; }
.pink-underline { background: linear-gradient(transparent 82%, var(--pink) 82%, var(--pink) 90%, transparent 90%); }
.hero-details { grid-column: 1; grid-row: 3; padding-top: 1.8rem; min-width: 0; }
.hero-intro { font-size: 1rem; line-height: 2.15; letter-spacing: .02em; }
.hero-intro > span { display: block; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 1.65rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; max-width: 100%; min-height: 3.5rem; padding: .8rem 1.6rem; border-radius: 3rem; font-weight: 600; font-size: 1rem; transition: background .2s, transform .2s; }
.primary { color: #fff; background: var(--ink); box-shadow: 0 5px 14px #283b5510; }
.primary:hover { color: #fff; background: #276d90; transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: .9rem; min-height: 2.75rem; padding: .4rem 0; border-bottom: 1px solid #9fafbd; font-size: .9375rem; }
.intro-link { display: flex; align-items: center; gap: .85rem; width: fit-content; max-width: 100%; margin-top: 1.8rem; padding: .5rem 0; font-size: .875rem; line-height: 1.7; }
.intro-link small { display: block; margin-bottom: .15rem; font-size: .75rem; color: var(--muted); }
.intro-link > span:last-child { margin-left: .5rem; }
.play { width: 2.75rem; height: 2.75rem; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #a8bdcb; border-radius: 50%; font-size: 1.5rem; }
.hero-art { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; width: 100%; max-width: 22rem; padding: 0 1.2rem; position: relative; }
.portrait {
  background: #fff; border: 1px solid #dbe8f0; border-radius: 12rem 12rem 1rem 1rem;
  padding: 1rem .75rem .75rem; box-shadow: 1rem .8rem 0 #e8f5fc, -.65rem -.55rem 0 #fbedf5;
}
/* Keep the original image and all clothing visible, including the shoes. */
.portrait img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; border-radius: inherit; }
.name-tag { margin: 1.65rem 0 0; padding-left: 1rem; border-left: 2px solid #dfb9d0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
.name-tag > div > span { font-size: .75rem; letter-spacing: .15em; }
.name-tag p { font: 1.85rem/1.6 var(--serif); letter-spacing: .12em; }
.fan-mark { font-size: .875rem; }
.vertical-note { position: absolute; top: 1rem; right: -.6rem; writing-mode: vertical-rl; font-size: .75rem; letter-spacing: .18em; color: var(--muted); }
.scroll-link { position: absolute; bottom: 1.5rem; left: var(--gutter); display: flex; align-items: center; gap: 1.5rem; min-height: 2.75rem; font-size: .75rem; letter-spacing: .12em; }
.scroll-link > span:last-child { font-size: 1.35rem; }
.section { position: relative; max-width: 80rem; margin: auto; padding: clamp(4rem, 7.5vw, 6.5rem) var(--gutter); }
.section-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; font-size: .8125rem; letter-spacing: .15em; }
.section-number { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 1px solid #b2cedb; border-radius: 50%; color: var(--blue); font-size: .75rem; letter-spacing: 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.875rem, 3.1vw, 2.9rem); line-height: 1.65; letter-spacing: .02em; text-wrap: balance; }
.about-copy h2 span { color: var(--blue); }
.about-copy > p { margin-top: 1.5rem; line-height: 2.1; }
.profile { min-width: 0; }
.profile dl { margin: 0; }
.profile dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.profile dt { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .8125rem; letter-spacing: .065em; color: var(--muted); }
.profile dt > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.profile-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.65rem; width: 1.65rem; height: 1.65rem; border: 1px solid #d6e9f1; border-radius: .55rem; color: #527f99; background: #eff9fe; pointer-events: none; }
.profile-glyph { display: block; flex-shrink: 0; width: 1.125rem; height: 1.125rem; }
.profile-icon.icon-birthday, .profile-icon.icon-fans { color: #996581; border-color: #eedee8; background: #fff3f8; }
.profile dd { margin: 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.profile dd small { display: inline-block; font-size: .8125rem; margin-left: .5rem; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; }
.tags a { padding: .5rem 0; color: var(--blue); font-size: .9375rem; }
.tags small { display: block; color: var(--muted); font-size: .8125rem; }
.night {
  --night-focal: 50%; background: #192745; color: #fff;
  padding: 4.5rem max(var(--gutter), calc((100vw - 67rem) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 31rem;
}
.night .eyebrow { color: #b3d4e6; font-size: .75rem; }
.night h2 { margin-top: 1.25rem; font-size: clamp(1.875rem, 3vw, 2.5rem); }
.night-content > p:not(.eyebrow) { margin-top: 1.4rem; color: #e3eaf5; font-size: 1rem; line-height: 2.15; }
.night-sign { margin-right: 13%; writing-mode: vertical-rl; font: 1.35rem var(--serif); letter-spacing: .25em; }
.connect-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.connect-heading > p { color: var(--muted); font-size: 1rem; }
.channels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2.25rem; }
.channel { display: block; padding: 1.75rem 2rem; border: 1px solid #c7e0ed; border-radius: .5rem; background: #edf8fe; overflow-wrap: anywhere; transition: transform .2s, box-shadow .2s; }
.youtube { background: #fff5fa; border-color: #eddae4; }
.channel:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #24485c0d; }
.channel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; letter-spacing: .12em; }
.channel-kind { display: flex; flex: 1 1 10rem; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; min-width: 0; line-height: 1.6; }
.channel-kind > span:last-child { flex: 1 1 6rem; min-width: 0; }
.channel-top > span:last-child { font-size: 1.5rem; }
.channel h3 { margin: .9rem 0; font-size: clamp(2.25rem, 3.6vw, 2.8rem); letter-spacing: -.04em; font-weight: 500; line-height: 1.4; }
.channel p { font-size: 1rem; }
.channel-bottom { display: block; margin-top: 1.65rem; padding-top: 1rem; border-top: 1px solid #bcd6e4; font-size: .875rem; }
.youtube .channel-bottom { border-color: #e9cfdc; }
.social-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; margin-top: 1.75rem; }
.social-links a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1rem; grid-template-rows: auto auto; align-items: center; column-gap: .9rem; row-gap: .15rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; overflow-wrap: anywhere; }
.social-name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.6; }
.social-description { grid-column: 2; grid-row: 2; min-width: 0; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.social-arrow { grid-column: 3; grid-row: 1 / 3; font-size: 1.2rem; }
.service-icon { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border: 1px solid #d3e5ee; border-radius: .9rem; color: #365e78; background: #edf7fc; pointer-events: none; }
.social-links .service-icon { grid-column: 1; grid-row: 1 / 3; }
.service-glyph { display: block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; }
.icon-x { color: var(--ink); background: #f0f5f9; border-color: #dce6ed; }
.icon-instagram { color: #815f85; background: linear-gradient(135deg, #e9f5fe, #fbe8f2); border-color: #e6d8ea; }
.icon-youtube, .icon-message { color: #a45d83; background: #fff0f7; border-color: #efd7e5; }
.icon-iriam { color: #327e9c; background: #eafbff; border-color: #cce7f1; }
.channel-kind .service-icon { background: #ffffffb3; }
.schedule-note { margin-top: 1.75rem; color: var(--muted); font-size: .9375rem; }
.schedule-note a { display: inline-block; padding: .3rem .15rem; text-decoration: underline; }
footer { padding: 3.5rem var(--gutter) 1.5rem; background: #f2f8fb; border-top: 1px solid var(--line); }
.footer-top { max-width: 67rem; margin: auto; display: flex; justify-content: space-between; gap: 2rem; }
.footer-message { font: 2rem/1.7 var(--serif); }
.footer-name { margin-top: .75rem; font-size: .75rem; letter-spacing: .18em; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; align-content: center; font-size: .875rem; }
.footer-links a { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem 0; }
.footer-bottom { max-width: 67rem; margin: 2.75rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .75rem; }
.footer-bottom small { font-size: .75rem; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .75rem; letter-spacing: .08em; }
@media (min-width: 100rem) { .hero { border-inline: 1px solid var(--line); } }
@media (max-width: 64rem) {
  :root { --gutter: 4.5vw; }
  .header nav { gap: 1.1rem; }
  .hero { padding-top: 2.75rem; column-gap: 2rem; }
  .hero-art { padding-inline: .65rem; }
  .portrait { padding: .75rem .5rem .5rem; }
  .vertical-note { right: -.75rem; font-size: .75rem; }
  .hero-actions { gap: .75rem 1.25rem; }
  .button { gap: 1.5rem; padding-inline: 1.25rem; }
  .hero-intro { letter-spacing: 0; }
  .name-tag { padding-left: .75rem; }
  .name-tag p { font-size: 1.65rem; }
  .connect-heading { display: block; }
  .connect-heading > p { margin-top: 1rem; }
  .social-links { column-gap: 1.75rem; }
  .footer-links { grid-template-columns: 1fr; }
}
@media (max-width: 47.5rem) {
  :root { --gutter: clamp(1.25rem, 6vw, 2.5rem); }
  .header { min-height: 4.75rem; padding-block: .5rem; gap: .5rem; flex-wrap: wrap; }
  .brand { width: 9rem; margin-left: -.75rem; }
  .header nav { gap: 1rem; font-size: .875rem; }
  .header nav .nav-live { display: none; }
  .hero { padding-top: 1.75rem; padding-bottom: 2.75rem; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto auto; column-gap: .75rem; row-gap: 1.35rem; align-items: center; }
  .hero-eyebrow { grid-column: 1 / -1; grid-row: 1; padding: 0; font-size: .75rem; letter-spacing: .12em; }
  h1 { grid-column: 1; grid-row: 2; align-self: center; font-size: clamp(1.75rem, .95rem + 3.5vw, 2.75rem); line-height: 1.62; letter-spacing: .015em; }
  h1 .pink-underline { display: block; width: fit-content; }
  h1 .slogan-fragment { display: block; }
  .hero-art { grid-column: 2; grid-row: 2; width: 100%; max-width: 19rem; padding: .2rem .3rem .2rem 0; }
  .portrait { padding: .55rem .35rem .35rem; box-shadow: .5rem .45rem 0 #e8f5fc, -.4rem -.35rem 0 #fbedf5; }
  .name-tag { flex-wrap: wrap; margin-top: 1rem; gap: .25rem .5rem; padding-left: .65rem; }
  .name-tag > div > span { font-size: .75rem; letter-spacing: .04em; }
  .name-tag p { font-size: clamp(1.25rem, 3.75vw, 1.65rem); letter-spacing: .075em; }
  .fan-mark { font-size: .8125rem; }
  .vertical-note { display: none; }
  .hero-details { grid-column: 1 / -1; grid-row: 3; padding: .4rem 0 0; }
  .hero-intro { font-size: 1rem; line-height: 2; }
  .hero-actions { margin-top: 1.25rem; gap: .75rem 1.5rem; }
  .button { min-height: 3.25rem; padding: .8rem 1.35rem; }
  .intro-link { margin-top: 1rem; }
  .scroll-link { display: none; }
  .section { padding-block: 3.75rem; }
  .section-heading { margin-bottom: 1.75rem; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  h2 { font-size: clamp(1.875rem, 5vw, 2.25rem); }
  .about-copy > p { margin-top: 1.25rem; }
  .profile dl > div { display: flex; flex-wrap: wrap; gap: .2rem .75rem; padding-block: .85rem; }
  .profile dt { flex: 0 0 7rem; max-width: 100%; }
  .profile dd { flex: 1 1 10rem; min-width: 0; }
  .night { min-height: 28rem; padding: 3.5rem var(--gutter); --night-focal: 58%; }
  .night h2 { font-size: 1.875rem; }
  .night-sign { display: none; }
  .channels { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.75rem; }
  .channel { padding: 1.5rem 1.65rem; }
  .channel h3 { font-size: 2.5rem; }
  .social-links { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .social-links a { column-gap: .75rem; }
  .footer-top { flex-direction: column; gap: 1.75rem; }
  .footer-message { font-size: 1.75rem; }
  .footer-bottom { margin-top: 1.75rem; }
  footer { padding-top: 2.5rem; }
}
@media (max-width: 22rem) {
  .header { column-gap: .25rem; }
  .header nav { gap: .75rem; }
  .brand { width: 8.4rem; }
  .hero { column-gap: .5rem; }
  h1 { font-size: 1.5rem; }
  .hero-actions { gap: .75rem 1rem; }
  .button { gap: 1rem; padding-inline: 1rem; font-size: .9375rem; }
  .name-tag > div > span { letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none !important; }
}

/* Quiet lights, floating ornaments, and progressive scroll reveals. */
.hero, .night { isolation: isolate; }
.night { position: relative; overflow: hidden; }
/* Overscan exceeds the 20px parallax limit, keeping the sky's edges covered. */
.night::before { content: ''; position: absolute; inset: -28px 0; z-index: -2; background: url('assets/night.png') var(--night-focal) center / cover no-repeat; transform: translate3d(0, var(--night-shift, 0px), 0); pointer-events: none; }
.ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.glow { position: absolute; width: clamp(18rem, 45vw, 38rem); aspect-ratio: 1; border-radius: 50%; opacity: .65; }
.glow-blue { right: -10%; top: -20%; background: radial-gradient(circle, #8ed7f347, #c2eaf914 50%, transparent 70%); }
.glow-pink { left: -12%; bottom: -30%; background: radial-gradient(circle, #ecc3df55, #f4d5e818 48%, transparent 70%); }
.halo { position: absolute; width: 38%; aspect-ratio: .85; right: 9%; top: 8%; border: 1px solid #abd3e449; border-radius: 50%; transform: rotate(-18deg); }
.halo-two { right: 7%; top: 11%; width: 42%; border-color: #dec3d641; transform: rotate(12deg); }
.mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #82bdd3; box-shadow: 0 0 9px #9adaf3; opacity: .5; --phase: 0s; }
.m1 { left: 6%; top: 13%; --phase: -1s; }
.m2 { left: 43%; top: 8%; width: 3px; height: 3px; --phase: -4s; }
.m3 { right: 5%; top: 42%; --phase: -6s; }
.m4 { left: 49%; bottom: 20%; width: 3px; height: 3px; --phase: -3s; }
.m5 { left: 9%; bottom: 14%; background: #d5a9c7; --phase: -8s; }
.m6 { right: 17%; bottom: 6%; --phase: -5s; }
.m7 { right: 32%; top: 24%; --phase: -2s; }
.m8 { right: 24%; bottom: 35%; --phase: -7s; }
.ambient-night .mote { background: #d8eeff; box-shadow: 0 0 12px #c3e9ff; opacity: .7; }
.ambient-night .glow-blue { right: -8%; top: auto; bottom: -45%; background: radial-gradient(circle, #71bade2b, transparent 68%); }
.ambient-night .glow-pink { left: auto; right: 4%; bottom: -55%; background: radial-gradient(circle, #e4a6ce30, transparent 65%); }
/* A few translucent rings drift behind the content, with quiet pauses between rises. */
.bubble { position: absolute; left: var(--bubble-x); bottom: var(--bubble-bottom); width: var(--bubble-size); height: var(--bubble-size); border: 1px solid #94cde4a3; border-radius: 50%; background: radial-gradient(circle at 29% 23%, #ffffffb3 0 3%, transparent 12%), linear-gradient(140deg, #abe0f21a, transparent 48%, #edc8e333); box-shadow: inset 2px 2px 6px #ffffff8a, inset -2px -2px 7px #c3d6f02b, 0 0 10px #addced1a; opacity: 0; pointer-events: none; }
.bubble::before { content: ''; position: absolute; left: 18%; top: 13%; width: 34%; height: 21%; border-top: 1px solid #ffffffcf; border-radius: 50%; transform: rotate(-28deg); }
.bubble-one { --bubble-x: 45%; --bubble-bottom: 15%; --bubble-size: 2.25rem; --bubble-cycle: 20s; --bubble-delay: 1s; --bubble-drift: 14px; }
.bubble-two { --bubble-x: 83%; --bubble-bottom: 30%; --bubble-size: 1.5rem; --bubble-cycle: 24s; --bubble-delay: 7s; --bubble-drift: -12px; }
.bubble-three { --bubble-x: 15%; --bubble-bottom: 6%; --bubble-size: 3rem; --bubble-cycle: 28s; --bubble-delay: 13s; --bubble-drift: 18px; }
.ambient-night .bubble { border-color: #c7e9ffa6; box-shadow: inset 2px 2px 6px #ffffff57, inset -2px -2px 7px #b7dbff38, 0 0 12px #a8deff26; }
.ambient-night .bubble-one { --bubble-x: 70%; --bubble-bottom: 8%; --bubble-size: 2.6rem; --bubble-delay: 2s; }
.ambient-night .bubble-two { --bubble-x: 88%; --bubble-bottom: 25%; --bubble-size: 1.75rem; --bubble-delay: 9s; }
.ambient-night .bubble-three { --bubble-x: 54%; --bubble-bottom: 6%; --bubble-size: 1.3rem; --bubble-delay: 15s; }
.motion-on .scene-active .bubble { animation: bubble-rise var(--bubble-cycle) var(--bubble-delay) ease-in-out infinite; }
.motion-toggle { position: absolute; bottom: 1.5rem; right: var(--gutter); display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem .85rem; border: 1px solid #cfdee7; border-radius: 3rem; color: var(--muted); background: #ffffffb3; font: .8125rem/1.5 var(--sans); cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { border-color: #86b6ca; color: var(--blue); background: #fff; }
.motion-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.motion-toggle:disabled { cursor: default; color: var(--muted); }
.motion-symbol { width: .85rem; text-align: center; }
.page-motion-controls { display: flex; justify-content: flex-end; margin: -.5rem 0 .75rem; }
.page-motion-controls .motion-toggle { position: static; margin: 0; }
.motion-on .scene-active .glow-blue { animation: light-drift 16s ease-in-out infinite alternate; }
.motion-on .scene-active .glow-pink { animation: light-drift 19s -6s ease-in-out infinite alternate-reverse; }
.motion-on .scene-active .mote { animation: light-mote 9s var(--phase) ease-in-out infinite; }
.motion-on .scene-active .halo-one { animation: halo-breathe 14s ease-in-out infinite alternate; }
.motion-on .scene-active .halo-two { animation: halo-breathe 17s -4s ease-in-out infinite alternate-reverse; }
.motion-on .hero-eyebrow { animation: arrive .7s both; }
.motion-on .hero h1 { animation: arrive .9s .08s both; }
.motion-on .hero-art { animation: arrive 1s .12s both; }
.motion-on .hero-details { animation: arrive 1s .2s both; }
.motion-on .reveal-pending { opacity: 0; transform: translateY(1.1rem); }
.motion-on .reveal-in { animation: arrive .85s cubic-bezier(.22,.7,.25,1) both; }
.motion-on .scene-active .scroll-link > span:last-child { animation: scroll-hint 2.5s ease-in-out infinite; }
.document-paused *, .document-paused *::before, .document-paused *::after { animation-play-state: paused !important; }
html:not(.motion-on) .primary:hover, html:not(.motion-on) .channel:hover { transform: none; }
html:not(.motion-on) a, html:not(.motion-on) a > span { transition: none; }
html:not(.motion-on) { scroll-behavior: auto; }
.motif { display: block; pointer-events: none; user-select: none; }
.motif img { width: 100%; height: auto; }
.title-ornament { position: relative; width: 6rem; margin: -.5rem 0 .25rem -.6rem; filter: drop-shadow(0 3px 8px #73aac331); }
.motion-on .scene-active .title-ornament { animation: moon-float 10s ease-in-out infinite; }
/* A masked highlight follows the existing moon; it adds no new moon artwork. */
.moon-shimmer { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; -webkit-mask: url('assets/crescent.png') center / contain no-repeat; mask: url('assets/crescent.png') center / contain no-repeat; }
.moon-shimmer::before { content: ''; position: absolute; inset: -35%; background: conic-gradient(from 0deg, transparent 0deg 285deg, #bcecff66 316deg, #ffffffdb 336deg, transparent 360deg); }
@supports (mask-image: url('assets/crescent.png')) or (-webkit-mask-image: url('assets/crescent.png')) {
  .motion-on .scene-active .moon-shimmer { opacity: .85; }
  .motion-on .scene-active .moon-shimmer::before { animation: moon-glimmer 12s linear infinite; }
}
/* Three butterflies on each side share the original transparent art. */
.butterfly-garden { --butterfly-size: clamp(2.6rem, 4.8vw, 5.25rem); position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; contain: strict; }
.edge-butterfly { position: absolute; display: block; top: var(--height); width: calc(var(--butterfly-size) * var(--size)); opacity: 1; transform: rotate(var(--bank)); filter: saturate(1.18) drop-shadow(0 2px 3px #529ab75c) drop-shadow(0 0 8px #96dcf059); }
.edge-left { left: max(-1.1rem, calc(var(--gutter) - var(--butterfly-size) * var(--size) * 1.1)); }
.edge-right { right: max(-1.1rem, calc(var(--gutter) - var(--butterfly-size) * var(--size) * 1.1)); }
.butterfly-one { --height: 23%; --size: 1; --bank: -35deg; --flap: 2.8s; --flight: 11s; --delay: -.7s; --lift: 24px; }
.butterfly-two { --height: 48%; --size: .76; --bank: -19deg; --flap: 3.3s; --flight: 14s; --delay: -2.1s; --lift: 18px; }
.butterfly-three { --height: 77%; --size: .9; --bank: -42deg; --flap: 2.5s; --flight: 12s; --delay: -1.4s; --lift: 28px; }
.butterfly-four { --height: 17%; --size: .8; --bank: -5deg; --flap: 3.1s; --flight: 13s; --delay: -1.9s; --lift: 20px; }
.butterfly-five { --height: 43%; --size: 1; --bank: -13deg; --flap: 2.6s; --flight: 15s; --delay: -.3s; --lift: 26px; }
.butterfly-six { --height: 72%; --size: .86; --bank: 2deg; --flap: 3.6s; --flight: 12.5s; --delay: -2.7s; --lift: 22px; }
.flying-butterfly { position: relative; display: block; width: 100%; aspect-ratio: 1369 / 1149; perspective: 20rem; }
.flying-butterfly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Clip around the diagonal body and antennae; hinge the wings at their roots. */
.flight-wing-left { clip-path: polygon(0 0, 44% 0, 44% 40%, 47% 52%, 46% 58%, 42% 72%, 35% 100%, 0 100%); transform-origin: 46% 58%; }
.flight-wing-right { clip-path: polygon(100% 0, 100% 100%, 37% 100%, 43% 72%, 47.8% 58%, 50.5% 54%, 60% 44%, 100% 34%); transform-origin: 47.8% 58%; }
.flying-butterfly .flight-body { position: relative; height: auto; clip-path: polygon(44% 0, 100% 0, 100% 34%, 60% 44%, 50.5% 54%, 47.8% 58%, 43% 72%, 42% 72%, 46% 58%, 47% 52%, 44% 40%); z-index: 1; }
.motion-on .edge-butterfly { animation: butterfly-drift var(--flight) var(--delay) ease-in-out infinite; }
.motion-on .flight-wing-left { animation: wing-left-fold var(--flap) var(--delay) ease-in-out infinite; }
.motion-on .flight-wing-right { animation: wing-right-fold var(--flap) var(--delay) ease-in-out infinite; }
.butterfly-trail { position: absolute; left: 43%; top: 67%; width: 0; height: 0; z-index: -1; transform: rotate(calc(0deg - var(--bank))); pointer-events: none; }
.trail-mote { --trail-phase: 0s; --spread: 2px; position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; background: #a6e4f5; box-shadow: 0 0 6px #81d9f0b3; opacity: 0; pointer-events: none; }
.trail-mote:nth-child(2) { --trail-phase: -1.2s; --spread: -7px; width: 2px; height: 2px; }
.trail-mote:nth-child(3) { --trail-phase: -2.4s; --spread: 7px; background: #e8d2ef; }
.motion-on .trail-mote { animation: butterfly-trace 3.6s calc(var(--delay) + var(--trail-phase)) ease-out infinite; }
.shooting-stars { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.shooting-star { position: absolute; width: clamp(4rem, 11vw, 9rem); height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, #bde9ff80 55%, #fff); box-shadow: 0 0 6px #c8ebff44; pointer-events: none; }
.star-one { left: 47%; top: 13%; --star-cycle: 18s; --star-delay: 2s; }
.star-two { left: 66%; top: 27%; width: 5.5rem; --star-cycle: 24s; --star-delay: 10s; }
.motion-on .night.scene-active .shooting-star { animation: shooting-star var(--star-cycle) var(--star-delay) linear infinite; }
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .flying-butterfly .flight-wing { display: none; }
  .flying-butterfly .flight-body { clip-path: none; }
}
.channel { position: relative; isolation: isolate; }
.channel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 25%, #ffffff8a 47%, transparent 70%); background-size: 250% 100%; background-position: 130% 0; opacity: 0; pointer-events: none; z-index: -1; }
.motion-on .channel:is(:hover, :focus-visible)::before { animation: card-light .75s ease-out both; }
.social-arrow, .text-link > span, .nav-live > span:not(.ripple-clip) { transition: transform .25s ease; }
.motion-on .social-links a:hover .social-arrow, .motion-on .text-link:hover > span, .motion-on .nav-live:hover > span:not(.ripple-clip) { transform: translate(2px, -2px); }
/* The observer watches a full-width wrapper; only the decorative beam scales. */
.light-divider { position: absolute; inset: 0 var(--gutter) auto; height: 1px; pointer-events: none; }
.divider-beam { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #a9d9eb 18%, #84c7df 40%, #ebc5dc 76%, transparent); box-shadow: 0 0 9px #a7d8ea45; transform-origin: left center; }
.motion-on .light-divider.reveal-pending { opacity: 1; transform: none; }
.motion-on .light-divider.reveal-pending .divider-beam { transform: scaleX(0); }
.motion-on .light-divider.reveal-in { animation: none; }
.motion-on .light-divider.reveal-in .divider-beam { animation: divider-grow 1.6s cubic-bezier(.22,.7,.25,1) both; }
/* Clip only the light, leaving the link's focus outline and tap area intact. */
.button, .nav-live { position: relative; isolation: isolate; }
.ripple-clip { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.button-ripple { position: absolute; display: block; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #95d9f016 25%, #85cfe63d 60%, #ffffff80 69%, transparent 72%); }
.primary .button-ripple { background: radial-gradient(circle, #c4edff0a 25%, #b2e6ff24 60%, #e7f7ff66 69%, transparent 72%); }
.motion-on .button-ripple { animation: button-ripple 1.1s cubic-bezier(.16,.65,.3,1) both; }
@keyframes divider-grow { from { transform: scaleX(0); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
@keyframes button-ripple { from { transform: scale(.03); opacity: .85; } 35% { opacity: .7; } to { transform: scale(1); opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes light-drift { from { transform: translate3d(-1%, 0, 0) scale(.97); opacity: .5; } to { transform: translate3d(5%, -4%, 0) scale(1.08); opacity: .85; } }
@keyframes light-mote { 0%, 100% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(-12px); opacity: .78; } }
@keyframes halo-breathe { from { opacity: .45; scale: .97; } to { opacity: .9; scale: 1.035; } }
@keyframes scroll-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes card-light { from { background-position: 130% 0; opacity: 0; } 25% { opacity: 1; } to { background-position: -40% 0; opacity: 0; } }
@keyframes moon-float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes butterfly-drift { 0%, 100% { transform: translateY(0) rotate(var(--bank)); } 50% { transform: translateY(calc(0px - var(--lift))) rotate(calc(var(--bank) + 7deg)); } }
@keyframes wing-left-fold { 0%, 100% { transform: rotate3d(.36, -.93, 0, -6deg); } 48% { transform: rotate3d(.36, -.93, 0, -64deg); } }
@keyframes wing-right-fold { 0%, 100% { transform: rotate3d(.36, -.93, 0, 6deg); } 48% { transform: rotate3d(.36, -.93, 0, 64deg); } }
@keyframes moon-glimmer { from { transform: rotate(-30deg); } to { transform: rotate(330deg); } }
@keyframes butterfly-trace { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .8; } 65% { opacity: .3; } 100% { transform: translate(var(--spread), 32px) scale(.25); opacity: 0; } }
@keyframes shooting-star { 0% { opacity: 0; transform: translate3d(-25px, -9px, 0) rotate(20deg); } 2% { opacity: .9; } 10%, 100% { opacity: 0; transform: translate3d(220px, 80px, 0) rotate(20deg); } }
@keyframes bubble-rise { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.86); } 10% { opacity: .6; } 40% { opacity: .45; } 55%, 100% { opacity: 0; transform: translate3d(var(--bubble-drift), -130px, 0) scale(1.03); } }
/* The letter's butterflies stay inside the reading margins. */
.message-page .butterfly-garden { --butterfly-size: clamp(1rem, 3vw, 3.25rem); }
.message-page .edge-left { left: calc((var(--gutter) - var(--butterfly-size) * var(--size)) / 2); }
.message-page .edge-right { right: calc((var(--gutter) - var(--butterfly-size) * var(--size)) / 2); }
/* Small typographic stars share the same slow rhythm as the butterflies. */
.edge-stars { --edge-star-size: clamp(.875rem, 2vw, 1.75rem); --edge-star-opacity: .82; position: fixed; inset: 0; z-index: 3; overflow: hidden; contain: strict; pointer-events: none; }
.edge-star { position: absolute; top: var(--star-height); width: var(--edge-star-size); height: var(--edge-star-size); color: #87bed6; opacity: var(--edge-star-opacity); }
.edge-star-left { left: calc((var(--gutter) - var(--edge-star-size)) / 2); }
.edge-star-right { right: calc((var(--gutter) - var(--edge-star-size)) / 2); }
.edge-star > span { display: block; font: var(--edge-star-size)/1 Georgia, serif; text-align: center; text-shadow: 0 0 .5rem #b2e4f078; }
.edge-star-1 { --star-height: 22%; --star-drift: 14s; --star-phase: -2s; --star-twinkle: 7s; }
.edge-star-2 { --star-height: 49%; --star-drift: 17s; --star-phase: -6s; --star-twinkle: 9s; }
.edge-star-3 { --star-height: 78%; --star-drift: 15s; --star-phase: -9s; --star-twinkle: 8s; }
.edge-star-4 { --star-height: 18%; --star-drift: 16s; --star-phase: -5s; --star-twinkle: 8s; }
.edge-star-5 { --star-height: 44%; --star-drift: 19s; --star-phase: -11s; --star-twinkle: 10s; }
.edge-star-6 { --star-height: 73%; --star-drift: 15s; --star-phase: -3s; --star-twinkle: 9s; }
.edge-star-2, .edge-star-4, .edge-star-6 { color: #d8a2c3; }
.edge-star-2 > span, .edge-star-4 > span, .edge-star-6 > span { text-shadow: 0 0 .5rem #f0d2e57a; }
.edge-stars-quiet { --edge-star-size: clamp(.65rem, 1.3vw, 1.05rem); --edge-star-opacity: .6; }
.motion-on .edge-star { animation: edge-star-drift var(--star-drift) var(--star-phase) ease-in-out infinite; }
.motion-on .edge-star > span { animation: edge-star-twinkle var(--star-twinkle) var(--star-phase) ease-in-out infinite; }
/* Embedded posts can reach the screen edges; keep their controls above the stars. */
.social-page .feed-grid { position: relative; z-index: 4; }
@keyframes edge-star-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8rem); } }
@keyframes edge-star-twinkle { 0%, 100% { opacity: .65; transform: scale(.85) rotate(-8deg); } 50% { opacity: 1; transform: scale(1.05) rotate(8deg); } }
@media (max-width: 47.5rem) {
  .title-ornament { width: 5rem; max-width: 75%; margin-bottom: .35rem; }
  .butterfly-garden { --butterfly-size: 2.2rem; }
  .edge-butterfly { opacity: .95; }
  .trail-mote:nth-child(3) { display: none; }
  .star-one { left: 35%; }
  .star-two { left: 48%; }
  .motion-toggle { position: static; grid-column: 1 / -1; grid-row: 4; justify-self: end; margin-top: -.35rem; }
  .halo { right: 2%; top: 8%; width: 55%; aspect-ratio: .6; }
  .halo-two { right: 0; top: 10%; width: 59%; }
  .ambient-hero .m4, .ambient-hero .m5 { display: none; }
  .ambient-night .glow { width: 24rem; }
  .bubble-three { display: none; }
  .ambient-hero .bubble-one { --bubble-x: 47%; --bubble-size: 1.75rem; }
  .ambient-night .bubble-one { --bubble-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-on .reveal-pending { opacity: 1; transform: none; }
  .motion-on .light-divider.reveal-pending .divider-beam { transform: none; }
  .ripple-clip { display: none; }
  .moon-shimmer, .shooting-stars, .butterfly-trail, .bubble { display: none !important; }
  .night::before { transform: none !important; }
  .primary:hover, .channel:hover { transform: none; }
}
@media print {
  .ambient, .motif, .motion-toggle, .ripple-clip { display: none !important; }
  *, *::before, *::after { animation: none !important; }
  .reveal-pending { opacity: 1 !important; transform: none !important; }
  .divider-beam { transform: none !important; }
  .moon-shimmer, .shooting-stars, .butterfly-trail, .bubble { display: none !important; }
  .night::before { transform: none !important; }
}