/* Completed reading cards. No long-scroll stages or shared handoff elements. */
.reading-section { --reading-accent:220,79,78; padding:76px 28px; background:#fffdfc; }
.reading-section--deliver { --reading-accent:228,189,37; background:#fffef9; }
.people-circle + .reading-section--values { position:relative; z-index:2; margin-top:-20svh; padding-top:40px; }
.reading-section__inner { max-width:1040px; margin:auto; }
.reading-section h2,.future-vision h2 { margin:0 0 44px; text-align:center; color:var(--oc-ink); font-size:clamp(27px,3vw,38px); line-height:1.5; text-wrap:balance; }
.reading-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0; }
.reading-cards li { min-width:0; padding:28px 24px; border:1px solid rgba(var(--reading-accent),.18); border-top:3px solid rgba(var(--reading-accent),.22); border-radius:18px; background:#fff; }
.reading-card__visual { position:relative; width:190px; max-width:100%; height:190px; margin:0 auto 24px; }
.reading-card__visual > img { width:100%; height:100%; object-fit:contain; }
.reading-cards h3 { margin:0 0 14px; font-size:20px; line-height:1.6; text-wrap:pretty; }
.reading-cards p { margin:0; color:#625d5b; font-size:15px; line-height:1.95; text-wrap:pretty; }
.reading-card__live-base,.reading-card__star,.reading-card__ripple,.reading-card__delivery-base,.reading-card__letter { display:none; }
.future-section { padding:76px 28px 88px; background:linear-gradient(180deg,#fffef9,#fff); }
.future-vision { max-width:1080px; margin:auto; }
.future-vision__body { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.future-vision__motif { position:relative; --orbit-size:min(36vw,400px); width:var(--orbit-size); aspect-ratio:1; margin:auto; }
.future-vision__orbit { position:absolute; inset:0; animation:future-orbit 80s linear infinite; }
.future-vision__orbit span { position:absolute; left:50%; top:50%; width:9%; aspect-ratio:1; transform:translate(-50%,-50%) rotate(var(--star-angle)) translateY(calc(var(--orbit-size) * -.42)); }
.future-vision__orbit img { width:100%; animation:future-star-drift 6s ease-in-out infinite; animation-delay:var(--star-delay,0s); }
.future-vision__heart,.future-vision__star { position:absolute; left:40.625%; top:40.625%; width:18.75%; height:18.75%; object-fit:contain; }
.future-vision__heart { animation:future-heart 12s linear infinite; }
.future-vision__star { opacity:0; animation:future-star 12s linear infinite; }
.future-vision__copy p { margin:0 0 20px; font-size:17px; line-height:2; text-wrap:pretty; }
.future-vision__final { font-weight:700; }
.future-vision__motif * { animation-play-state:paused; }
.future-vision__motif.is-in-view * { animation-play-state:running; }
@keyframes future-orbit { to { transform:rotate(360deg); } }
@keyframes future-star-drift { 0%,100% { transform:translateY(-1px) rotate(-3deg); } 50% { transform:translateY(1px) rotate(3deg); } }
/* 5 seconds holding each shape, with one-second crossfades. */
@keyframes future-heart { 0%,41.6667%,100% { opacity:1; } 50%,91.6667% { opacity:0; } }
@keyframes future-star { 0%,41.6667%,100% { opacity:0; } 50%,91.6667% { opacity:1; } }
@media (min-width:701px) and (prefers-reduced-motion:no-preference) {
  .reading-card__visual--float { animation:reading-float 4s ease-in-out infinite; animation-play-state:paused; }
  .reading-cards li:nth-child(2) .reading-card__visual--float { animation-delay:-2s; }
  .reading-card__static { display:none; }
  .reading-card__live-base { display:block; }
  .reading-card__delivery-base { display:block; position:relative; z-index:2; }
  .reading-card__visual > .reading-card__letter { display:block; position:absolute; z-index:1; left:55%; top:16%; width:47.3%; height:47.3%; animation:reading-letter 4s ease-in-out infinite; animation-play-state:paused; }
  .reading-card__visual--deliver-1 { width:148.2px; }
  .reading-card__visual--deliver-3 { width:137.5px; }
  .reading-card__visual > .reading-card__star { display:block; position:absolute; z-index:2; left:50%; top:22%; width:34%; height:auto; transform:translate(-50%,-50%); animation:reading-star 4s ease-in-out infinite; animation-play-state:paused; }
  .reading-card__visual--deliver-1 > .reading-card__star { left:92%; top:6%; width:13%; }
  .reading-card__visual--deliver-3 > .reading-card__star { left:41.3%; top:64.5%; width:29%; }
  .reading-card__visual--deliver-3 > .reading-card__live-base { position:relative; z-index:3; }
  .reading-card__ripple { display:block; position:absolute; z-index:1; left:41.3%; top:64.5%; width:52%; height:40%; border:2px solid rgba(228,189,37,.65); border-radius:50%; opacity:0; animation:reading-ripple 3.6s linear infinite; animation-play-state:paused; pointer-events:none; }
  .reading-card__ripple--second { animation-delay:-1.8s; }
  .reading-cards li.is-in-view .reading-card__visual,
  .reading-cards li.is-in-view .reading-card__star,
  .reading-cards li.is-in-view .reading-card__letter,
  .reading-cards li.is-in-view .reading-card__ripple { animation-play-state:running; }
}
@keyframes reading-float { 0%,100% { transform:translateY(3px) rotate(-3deg); } 50% { transform:translateY(-9px) rotate(3deg); } }
@keyframes reading-letter { 0%,100% { transform:translate(-50%,-50%) rotate(-8deg); } 50% { transform:translate(-50%,calc(-50% - 12px)) rotate(-2deg); } }
@keyframes reading-star { 0%,100% { transform:translate(-50%,-50%) rotate(-5deg); } 50% { transform:translate(-50%,calc(-50% - 9px)) rotate(5deg); } }
/* Scale only increases. Reset occurs at zero opacity; second wave overlaps it. */
@keyframes reading-ripple {
  0% { transform:translate(-50%,-50%) scale(.6); opacity:0; }
  18% { opacity:.8; }
  80% { opacity:.16; }
  100% { transform:translate(-50%,-50%) scale(1.85); opacity:0; }
}
@media (min-width:701px) {
  .reading-cards { gap:20px; }
  .reading-cards li { padding:18px 22px; }
  .reading-card__visual { width:155px; height:155px; margin-bottom:12px; }
  .reading-card__visual--deliver-1 { width:148.2px; }
  .reading-card__visual--deliver-3 { width:137.5px; }
  .reading-card__visual--potential > img { transform:scale(.738); }
  .reading-section--values .reading-cards li:nth-child(3) .reading-card__visual > img { transform:scale(1.09); }
  .reading-cards h3 { margin-bottom:10px; line-height:1.5; }
  .reading-cards .reading-card__connection-heading { font-size:22px; }
  .reading-cards p { font-size:14px; line-height:1.85; text-align:left; line-break:strict; word-break:normal; }
}
@media (max-width:1100px) { .reading-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .reading-section,.future-section { padding:52px 16px; }
  .reading-section h2,.future-vision h2 { font-size:27px; margin-bottom:30px; }
  .reading-cards { grid-template-columns:1fr; gap:20px; }
  .reading-cards li { display:grid; grid-template-columns:minmax(96px,31%) minmax(0,1fr); align-items:center; gap:16px; padding:22px 16px; }
  .reading-card__visual { width:100%; height:150px; margin:0; }
  .reading-cards h3 { font-size:16px; margin-bottom:10px; line-height:1.6; }
  .reading-cards p { font-size:13px; line-height:1.85; }
  .future-vision__body { grid-template-columns:1fr; gap:22px; }
  .future-vision__motif { --orbit-size:min(78vw,330px); }
  .future-vision__copy { padding:0 8px; }
  .future-vision__copy p { font-size:15px; line-height:1.95; }
}
@media (prefers-reduced-motion:reduce) {
  .future-vision__motif * { animation:none; }
  .future-vision__heart { opacity:1; }
  .future-vision__star { opacity:0; }
}