/* 静かな波紋、光、触れたときの小さな反応を共通のモチーフにする。 */
body.top-experience { isolation: isolate; }
.depth-water { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 100% 40%, #e4f5f7aa, transparent 65%); }
.depth-water canvas { display: block; width: 100%; height: 100%; }
.top-experience .plan, .top-experience .example, .top-experience .points li { position: relative; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s; }
.top-experience .plan::after, .top-experience .example::after, .top-experience .points li::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--light-x,50%) var(--light-y,50%), #15b0c71b, transparent 75%); transition: opacity .4s; }
@media (hover:hover) and (pointer:fine) {
  .top-experience .plan:hover, .top-experience .example:hover, .top-experience .points li:hover { transform: translateY(-5px); border-color: #15b0c7; box-shadow: 0 18px 35px -24px #087f9155; }
  .top-experience .plan:hover::after, .top-experience .example:hover::after, .top-experience .points li:hover::after { opacity: 1; }
  .top-experience .post:hover .arrow, .top-experience .side-link:hover > svg { transform: translateX(5px); }
  .top-experience .profile__photo:hover img { filter: saturate(1.08); }
}
.top-experience .post .arrow, .top-experience .side-link > svg { transition: transform .35s; }
.top-experience .profile__photo { perspective: 900px; }
.top-experience .profile__photo.photo-ready img { clip-path: inset(0 0 100% 0 round 2px); transform: translateY(25px) scale(1.08); filter: saturate(.25); transition: clip-path 1.3s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1), filter 1.5s; }
.top-experience .profile__photo.photo-entered img { clip-path: inset(0 0 0 0 round 2px); transform: rotateX(var(--photo-x,0deg)) rotateY(var(--photo-y,0deg)) scale(1); filter: saturate(1); }
.top-experience .profile__photo.photo-ready .vertical { opacity: 0; transform: translateY(16px); transition: opacity .8s .7s, transform .8s .7s; }
.top-experience .profile__photo.photo-entered .vertical { opacity: 1; transform: none; }
.top-experience .profile__photo.photo-ready::before { opacity: 0; transform: translate(-12px,-12px); transition: opacity 1.2s .3s, transform 1.2s .3s; }
.top-experience .profile__photo.photo-entered::before { opacity: 1; transform: none; }
/* 文字と丸の間隔は保ち、ホバーでは色と淡い光だけを変える。 */
.top-experience .voices li { transition: color .3s ease; }
.top-experience .voices li::before { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
@media (hover:hover) and (pointer:fine) {
  .top-experience .voices li:hover { color: #087f91; }
  .top-experience .voices li:hover::before { background-color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(21,176,199,.12); }
}
.top-experience a:focus-visible, .top-experience summary:focus-visible { outline: 2px solid #15b0c7; outline-offset: 5px; }
@media (prefers-reduced-motion:reduce) {
  .depth-water { display: none; }
  .top-experience .profile__photo.photo-ready img { clip-path: none; transform: none; filter: none; transition: none; }
  .top-experience .profile__photo.photo-ready .vertical, .top-experience .profile__photo.photo-ready::before { opacity: 1; transform: none; transition: none; }
  .top-experience .plan, .top-experience .example, .top-experience .points li, .top-experience .voices li, .top-experience .voices li::before { transition: none; }
  .top-experience .plan:hover, .top-experience .example:hover, .top-experience .points li:hover { transform: none; }
}
@media print { .depth-water { display: none; } .top-experience .profile__photo.photo-ready img { clip-path: none; transform: none; filter: none; } }

@media (hover:hover) and (pointer:fine) {
  .top-experience .profile__photo.photo-entered:hover img { transition: transform .3s ease-out, filter .5s; }
}

/* 8文字の1行目とカーソルが収まる9emを確保。改行は「、」の後で固定する。 */
@media (max-width:600px) {
  .top-experience .hero__title {
    font-size: min(32px, calc((100vw - 56px) / 9));
    white-space: pre;
    text-wrap: nowrap;
  }
}