/* page-specific styles; base reset/scene/scroll-hint/title/rule/container come from vision.css */

.co-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:32px;
}

.co-row{
  background:#fff;
  border-radius:12px;
  padding:14px 18px;
  box-shadow:0 8px 18px rgba(20,30,70,.06);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.co-row:nth-child(1){transition-delay:.4s;}
.co-row:nth-child(2){transition-delay:.48s;}
.co-row:nth-child(3){transition-delay:.56s;}
.co-row:nth-child(4){transition-delay:.64s;}
.co-row:nth-child(5){transition-delay:.72s;}
.co-row:nth-child(6){transition-delay:.8s;}

.co-row-top{
  display:flex;align-items:center;gap:12px;
  margin-bottom:6px;
}

.co-icon{
  width:32px;height:32px;border-radius:50%;
  background:#eef0f8;
  display:flex;align-items:center;justify-content:center;
  color:#132a55;flex:0 0 auto;
}
.co-icon svg{width:17px;height:17px;}

.co-label{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#132a55;
}

.co-value{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:.9rem;
  line-height:1.5;
  color:#28417c;
  padding-left:44px;
}

.vision-scene.revealed .co-row{
  opacity:1;
  transform:translateY(0);
}

/* ---- map visual ---- */

.co-map{
  position:relative;
  width:100%;
  aspect-ratio:1/0.92;
  background:#f1ece1;
  overflow:hidden;
  clip-path:polygon(
    6% 0%, 2% 7%, 8% 13%, 3% 20%, 8% 27%, 2% 34%,
    7% 41%, 3% 48%, 8% 55%, 2% 62%, 7% 69%, 3% 76%,
    8% 83%, 2% 90%, 6% 96%, 4% 100%,
    100% 100%, 100% 0%
  );
  box-shadow:0 20px 40px rgba(30,30,60,.12);
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease .5s, transform .9s ease .5s;
}
.vision-scene.revealed .co-map{opacity:1;transform:translateY(0);}

.co-map-roads{position:absolute;inset:0;width:100%;height:100%;}

.co-park{
  position:absolute;right:8%;top:14%;
  width:34%;height:38%;
  background:#c9d6bd;
  border-radius:48% 52% 46% 54%/54% 48% 52% 46%;
}

.co-map-label{
  position:absolute;
  font-family:"IBM Plex Sans",sans-serif;
  color:#132a55;
}
.co-label-hiroo{
  left:16%;top:50%;
  font-weight:800;font-size:1.4rem;letter-spacing:.04em;
}
.co-label-park{
  right:9%;top:36%;width:34%;
  font-weight:600;font-size:.72rem;line-height:1.4;text-align:center;
}
.co-label-small{
  font-weight:500;font-size:.7rem;
  display:flex;align-items:center;gap:6px;
}
.co-label-small svg{width:14px;height:14px;flex:0 0 auto;}
.co-label-azabu{left:58%;top:60%;}
.co-label-library{left:58%;top:76%;}

.co-station{
  position:absolute;left:13%;top:29%;
  background:#132a55;color:#fff;
  font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:.68rem;
  padding:6px 10px;border-radius:4px;
  line-height:1.25;text-align:center;
}

.co-compass{
  position:absolute;right:6%;bottom:6%;
  width:34px;height:34px;
  color:#132a55;
}

.co-note{
  position:absolute;
  font-family:"IBM Plex Sans",sans-serif;
  font-size:.68rem;line-height:1.35;font-weight:500;
  color:#132a55;
  padding:10px 12px 14px;
  box-shadow:0 8px 16px rgba(20,20,50,.14);
}
.co-note::after{
  content:"";
  position:absolute;right:0;bottom:0;
  width:16px;height:16px;
  background:linear-gradient(225deg, rgba(0,0,0,.16) 50%, transparent 51%);
}
.co-note--yellow{
  background:#f6e6a8;
  right:16%;top:6%;width:100px;
  transform:rotate(-3deg);
}
.co-note--blue{
  background:#cfe0ea;
  left:14%;bottom:10%;width:78px;
  transform:rotate(-4deg);
}