/* 2026-10-22: original Kogisawa motion language — editorial reveals, hearts and soft parallax. */
body.rose-site {
  --rose-pointer-x: 50vw;
  --rose-pointer-y: 32vh;
  --rose-scroll-shift: 0px;
}

body.rose-site::before {
  content: '';
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .54;
  background:
    radial-gradient(520px circle at var(--rose-pointer-x) var(--rose-pointer-y), color-mix(in srgb, var(--rose-pink) 20%, transparent), transparent 68%),
    radial-gradient(460px circle at 92% 30%, color-mix(in srgb, var(--editorial-gold) 9%, transparent), transparent 72%);
  transition: opacity .35s ease;
}

body.rose-site .rose-header {
  animation: roseHeaderDrop .82s cubic-bezier(.2, .82, .2, 1) both;
}

body.rose-site .rose-brand > span { animation: roseBrandSpark 3.8s ease-in-out infinite; }
body.rose-site .rose-progress { box-shadow: 0 0 16px color-mix(in srgb, var(--rose-accent) 42%, transparent); }

body.rose-site .rose-nav a::after {
  transform-origin: center;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

body.rose-site .rose-menu-button span {
  transition: width .3s cubic-bezier(.16, 1, .3, 1), transform .3s ease;
}

body.rose-site .rose-menu-button:hover span:first-child { transform: translateX(4px); }
body.rose-site .rose-menu-button:hover span:last-child { transform: translateX(-4px); }

/* Home hero: the name is the visual identity, not a generic slogan. */
body.rose-site .rose-cover {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

body.rose-site .rose-cover::before {
  content: 'KOKORO';
  position: absolute;
  z-index: -2;
  top: calc(8% + var(--rose-scroll-shift));
  left: -2vw;
  color: color-mix(in srgb, var(--rose-accent) 5%, transparent);
  font: 700 clamp(120px, 18vw, 270px)/.8 var(--font-editorial);
  letter-spacing: -.08em;
  pointer-events: none;
  animation: roseWatermarkIn 1.6s cubic-bezier(.16, 1, .3, 1) .15s both;
  transition: top .12s linear;
}

body.rose-site .rose-cover::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -8%;
  top: 4%;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--rose-pink) 26%, transparent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 30px color-mix(in srgb, var(--rose-tint) 22%, transparent),
    0 0 90px color-mix(in srgb, var(--rose-pink) 12%, transparent);
  pointer-events: none;
  animation: roseOrbitDrift 9s ease-in-out infinite;
}

body.rose-site .rose-cover-copy > .rose-eyebrow {
  animation: roseEyebrowIn .8s cubic-bezier(.16, 1, .3, 1) .12s both;
}

body.rose-site .rose-spin {
  animation: roseSpinPulse 5.5s cubic-bezier(.4, 0, .2, 1) infinite;
  transform-origin: center;
}

body.rose-site .rose-name-title {
  display: grid;
  width: fit-content;
  margin-block: 22px 28px;
  animation: none;
}

body.rose-site .rose-name-title > .rose-title-line {
  display: block;
  margin: 0;
  color: var(--rose-ink);
  font: inherit;
  line-height: .95;
  transform: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: roseTitleWipe 1.05s cubic-bezier(.16, 1, .3, 1) .24s forwards;
}

body.rose-site .rose-name-title > .rose-title-line-accent {
  margin-left: .42em;
  color: var(--rose-accent);
  animation-delay: .48s;
}

body.rose-site .rose-name-title i {
  display: inline-block;
  margin-left: .08em;
  color: var(--editorial-gold);
  font-family: var(--font-editorial);
  font-size: .48em;
  font-style: normal;
  vertical-align: .5em;
  transform-origin: 50% 70%;
  animation: roseHeartBeat 2.8s ease-in-out 1.35s infinite;
}

body.rose-site .rose-cover-description {
  animation: roseHeroCopyIn .85s cubic-bezier(.16, 1, .3, 1) .68s both;
}

body.rose-site .rose-cover-actions {
  animation: roseHeroCopyIn .85s cubic-bezier(.16, 1, .3, 1) .82s both;
}

body.rose-site .rose-profile-cta {
  animation: roseHeroCopyIn .85s cubic-bezier(.16, 1, .3, 1) .96s both;
}

body.rose-site .rose-profile-cta i {
  transform-origin: left;
  animation: roseLineGrow 1.1s cubic-bezier(.16, 1, .3, 1) 1.15s both;
}

body.rose-site .rose-portrait-area.rose-intro {
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 48% 48% 12px 12px);
  animation: rosePortraitReveal 1.25s cubic-bezier(.16, 1, .3, 1) .36s forwards;
}

body.rose-site .rose-portrait-area::before {
  transform: translateY(calc(var(--rose-scroll-shift) * -.7));
  animation: roseNumberFade 1.3s cubic-bezier(.16, 1, .3, 1) .72s both;
  transition: transform .12s linear;
}

body.rose-site .rose-portrait {
  will-change: transform;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease, border-radius .5s ease;
}

body.rose-site .rose-portrait::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.36) 48%, transparent 65%);
  transform: translateX(-130%);
  animation: rosePortraitSheen 7s ease-in-out 1.8s infinite;
}

body.rose-site .rose-portrait::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: inherit;
  opacity: .55;
  pointer-events: none;
}

body.rose-site .rose-portrait-area:hover .rose-portrait {
  border-radius: 45% 45% 16px 16px;
  box-shadow: 0 34px 90px rgba(66, 37, 48, .2);
}

body.rose-site .rose-today {
  position: relative;
  overflow: hidden;
  animation: roseTodayIn .85s cubic-bezier(.16, 1, .3, 1) .8s both;
}

body.rose-site .rose-today::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45), transparent 64%);
  transform: translateX(-120%);
  animation: roseStatusSweep 8s ease-in-out 2.4s infinite;
}

body.rose-site .rose-today h2 i,
body.rose-site .kokoro-status-dot {
  animation: roseLivePulse 2s ease-out infinite;
}

/* Scroll-based reveals are broader than the previous one-step fade. */
html.rose-motion body.rose-site .rose-reveal {
  opacity: 0;
  filter: blur(7px);
  clip-path: inset(0 0 12% 0);
  transform: translateY(62px) scale(.985);
  transition:
    opacity .95s ease,
    filter .95s ease,
    clip-path 1.05s cubic-bezier(.16, 1, .3, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1);
}

html.rose-motion body.rose-site .rose-reveal.is-visible {
  opacity: 1;
  filter: none;
  clip-path: inset(0);
  transform: none;
}

html.rose-motion body.rose-site .rose-motion-item {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(42px) scale(.975);
  transition:
    opacity .72s ease calc(var(--rose-order, 0) * 70ms),
    filter .72s ease calc(var(--rose-order, 0) * 70ms),
    transform .8s cubic-bezier(.16, 1, .3, 1) calc(var(--rose-order, 0) * 70ms);
}

html.rose-motion body.rose-site .rose-motion-item.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

body.rose-site .rose-section-head h2 {
  position: relative;
  width: fit-content;
}

body.rose-site .rose-section-head h2::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -.19em;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--rose-accent), var(--editorial-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) .3s;
}

body.rose-site .rose-reveal.is-visible .rose-section-head h2::after { transform: scaleX(1); }

/* Hover feedback: each interaction has a clear response without mimicking the reference cards. */
body.rose-site :is(.rose-button, .primary-btn, .music-request-submit) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.rose-site :is(.rose-button, .primary-btn, .music-request-submit)::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.24), transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

body.rose-site :is(.rose-button, .primary-btn, .music-request-submit):hover::before { transform: translateX(130%); }
body.rose-site :is(.rose-button, .rose-text-link, .link-hub-card):hover :is(.rose-link-arrow, span:last-child, .link-hub-arrow) { animation: roseArrowHop .62s ease; }

body.rose-site :is(.kokoro-guide-card, .kokoro-info-card, .link-hub-card, .sb-card, .entry-card) {
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .42s ease, background-color .35s ease;
}

body.rose-site :is(.kokoro-guide-card, .kokoro-info-card, .link-hub-card, .sb-card, .entry-card):hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--rose-accent) 48%, var(--rose-line));
  box-shadow: 0 20px 46px rgba(63, 37, 47, .11);
}

body.rose-site .kokoro-guide-card::after {
  content: '♡';
  position: absolute;
  right: 20px;
  bottom: 12px;
  color: color-mix(in srgb, var(--rose-accent) 14%, transparent);
  font: 400 50px/1 var(--font-editorial);
  transform: rotate(-12deg) scale(.7);
  opacity: 0;
  transition: opacity .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

body.rose-site .kokoro-guide-card:hover::after { opacity: 1; transform: rotate(7deg) scale(1); }
body.rose-site .kokoro-guide-card:hover i { transform: translateX(6px); }
body.rose-site .kokoro-guide-card i { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }

body.rose-site .game-archive-card { transition: transform .38s cubic-bezier(.16, 1, .3, 1), background .3s ease; }
body.rose-site .game-archive-card:hover { transform: translateX(10px); }
body.rose-site .video-item.active::after { animation: roseArrowNudge 1.3s ease-in-out infinite; }

body.rose-site .rose-audio-bars i { animation: roseAudio 1.25s ease-in-out infinite; }
body.rose-site .rose-footer-heart { animation: roseHeartFloat 3.2s ease-in-out infinite; }

/* Page-specific entrances. */
body.rose-profile-page .rose-profile-heading,
body.rose-calendar-page .rose-calendar-intro > header,
body.rose-songbook .sb-hero-card,
body.music-request-page .music-request-intro,
body.anniversary-archive-page .anniversary-hero-copy {
  animation: rosePageTitleIn 1.05s cubic-bezier(.16, 1, .3, 1) .12s both;
}

body.rose-profile-page .rose-profile-photo,
body.rose-calendar-page .rose-calendar-today,
body.music-request-page .music-request-form,
body.anniversary-archive-page .anniversary-hero-mark {
  animation: roseSidePanelIn 1.08s cubic-bezier(.16, 1, .3, 1) .32s both;
}

body.rose-calendar-page .day-cell:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 12px 28px rgba(64, 38, 47, .1);
}

body.rose-calendar-page .day-cell.today {
  animation: roseCalendarGlow 2.6s ease-in-out infinite;
}

body.notice-journal .notice-cover-number,
body.notice-journal .notice-section-index {
  animation: roseIndexDrift 6s ease-in-out infinite;
}

body.notice-journal [data-notice-reveal] {
  filter: blur(6px);
  clip-path: inset(0 0 14% 0);
  transform: translateY(45px) scale(.985);
  transition:
    opacity .82s ease var(--reveal-delay, 0ms),
    filter .82s ease var(--reveal-delay, 0ms),
    clip-path .9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform .9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}

body.notice-journal [data-notice-reveal].is-visible { filter: none; clip-path: inset(0); }
body.notice-journal .rule-heart { transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .3s ease; }
body.notice-journal .pretty-rule:hover .rule-heart { transform: rotate(10deg) scale(1.14); }

body.rose-songbook .sb-card { overflow: hidden; }
body.rose-songbook .sb-cover img { transition: transform .75s cubic-bezier(.16, 1, .3, 1), filter .5s ease; }
body.rose-songbook .sb-card:hover .sb-cover img { transform: scale(1.07); filter: saturate(1.08); }
body.rose-songbook .sb-fav { transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s ease; }
body.rose-songbook .sb-fav:hover { transform: rotate(10deg) scale(1.12); }

body.music-request-page .music-request-gate-note { animation: roseGateGlow 3.5s ease-in-out infinite; }
body.music-request-page .music-request-open-badge::before { animation: roseLivePulse 2s ease-out infinite; }

body.anniversary-archive-page .anniversary-hero-copy h1 span { animation: roseHeartFloat 3s ease-in-out infinite; }
body.anniversary-archive-page .anniversary-hero-mark { animation: roseSidePanelIn 1.08s cubic-bezier(.16, 1, .3, 1) .32s both, roseMarkFloat 6s ease-in-out 1.5s infinite; }
body.anniversary-archive-page .anniversary-event-number { transition: transform .42s cubic-bezier(.16, 1, .3, 1), border-radius .42s ease; }
body.anniversary-archive-page .anniversary-event-card:hover .anniversary-event-number { transform: rotate(-7deg) scale(1.1); border-radius: 50%; }
body.anniversary-archive-page .anniversary-postit { animation: roseNoteLand .68s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc((var(--rose-order, 0) + 1) * 70ms); }
body.anniversary-archive-page .anniversary-postit:hover,
body.anniversary-archive-page .anniversary-postit.is-open { transform: rotate(0) translateY(-9px) scale(1.02); }

@keyframes roseHeaderDrop {
  from { opacity: 0; transform: translateY(-28px); }
  to { opacity: 1; transform: none; }
}

@keyframes roseBrandSpark {
  0%, 72%, 100% { transform: rotate(-15deg) scale(1); color: var(--editorial-gold); }
  82% { transform: rotate(8deg) scale(1.22); color: var(--rose-accent); }
}

@keyframes roseWatermarkIn {
  from { opacity: 0; letter-spacing: .04em; transform: translateX(-70px); }
  to { opacity: 1; letter-spacing: -.08em; transform: none; }
}

@keyframes roseOrbitDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  50% { transform: translate3d(-22px, 18px, 0) rotate(8deg) scale(1.045); }
}

@keyframes roseEyebrowIn {
  from { opacity: 0; letter-spacing: .35em; transform: translateX(-20px); }
  to { opacity: 1; letter-spacing: .16em; transform: none; }
}

@keyframes roseSpinPulse {
  0%, 100% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(150deg) scale(.82); }
  70% { transform: rotate(300deg) scale(1.18); }
}

@keyframes roseTitleWipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-24px); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes roseHeartBeat {
  0%, 68%, 100% { transform: rotate(-8deg) scale(1); }
  76% { transform: rotate(7deg) scale(1.2); }
  84% { transform: rotate(-4deg) scale(.94); }
  91% { transform: rotate(4deg) scale(1.1); }
}

@keyframes roseHeroCopyIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes roseLineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes rosePortraitReveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0 round 48% 48% 12px 12px); transform: translateY(35px); }
  to { opacity: 1; clip-path: inset(0 round 0); transform: none; }
}

@keyframes roseNumberFade {
  from { opacity: 0; transform: translateY(50px) scale(.88); }
  to { opacity: 1; transform: translateY(calc(var(--rose-scroll-shift) * -.7)) scale(1); }
}

@keyframes rosePortraitSheen {
  0%, 66% { transform: translateX(-130%); opacity: 0; }
  72% { opacity: .72; }
  90%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes roseTodayIn {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}

@keyframes roseStatusSweep {
  0%, 72% { transform: translateX(-120%); }
  95%, 100% { transform: translateX(120%); }
}

@keyframes roseLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose-accent) 32%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes roseArrowHop {
  0%, 100% { transform: translate(0); }
  45% { transform: translate(6px, -5px); }
}

@keyframes roseArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@keyframes roseHeartFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-9px) rotate(5deg); }
}

@keyframes rosePageTitleIn {
  from { opacity: 0; filter: blur(9px); clip-path: inset(0 100% 0 0); transform: translateX(-42px); }
  to { opacity: 1; filter: none; clip-path: inset(0); transform: none; }
}

@keyframes roseSidePanelIn {
  from { opacity: 0; filter: blur(6px); transform: translateX(48px) scale(.96); }
  to { opacity: 1; filter: none; transform: none; }
}

@keyframes roseCalendarGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--rose-accent), 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 0 1px var(--rose-accent), 0 0 0 6px color-mix(in srgb, var(--rose-accent) 9%, transparent); }
}

@keyframes roseIndexDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes roseGateGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: -8px 0 26px color-mix(in srgb, var(--rose-accent) 13%, transparent); }
}

@keyframes roseMarkFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes roseNoteLand {
  from { opacity: 0; filter: blur(6px); transform: translateY(55px) rotate(calc(var(--note-tilt) * -1.8)) scale(.93); }
  to { opacity: 1; filter: none; transform: translateY(0) rotate(var(--note-tilt)) scale(1); }
}

@media (max-width: 900px) {
  body.rose-site .rose-cover::before { top: 8%; left: -9vw; font-size: clamp(100px, 26vw, 190px); }
  body.rose-site .rose-cover::after { right: -25%; top: 42%; width: min(76vw, 480px); }
}

@media (max-width: 700px) {
  body.rose-site::before { opacity: .38; }
  body.rose-site .rose-cover::before { top: 10%; left: -20px; font-size: 92px; }
  body.rose-site .rose-cover::after { right: -45%; top: 49%; width: 340px; }
  body.rose-site .rose-name-title > .rose-title-line-accent { margin-left: .18em; }
  body.rose-site .rose-name-title i { font-size: .42em; }
  html.rose-motion body.rose-site .rose-reveal { transform: translateY(42px) scale(.99); }
  body.rose-site :is(.kokoro-guide-card, .kokoro-info-card, .link-hub-card, .sb-card, .entry-card):hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  body.rose-site::before { display: none; }
  body.rose-site .rose-cover::before,
  body.rose-site .rose-cover::after { animation: none !important; }
  body.rose-site .rose-name-title > .rose-title-line,
  body.rose-site .rose-portrait-area.rose-intro,
  html.rose-motion body.rose-site .rose-motion-item {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
  }
}