/* Profile・Story・Stream・Gallery・Schedule のコンテンツスタイル。
   ぷかの基底スタイルは connect の署名ぷかも使うため、connect.css より先に読み込む。 */
/* Profile */
.profile-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.profile-portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgb(77 232 255 / 0.3);
  background: var(--deep);
  transform-style: preserve-3d;
}
.profile-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(242 250 255 / 0.12);
  box-shadow: inset 0 0 3rem rgb(77 232 255 / 0.08);
  pointer-events: none;
}
.profile-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.4rem;
}
.profile-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgb(77 232 255 / 0.3);
  border-radius: 99rem;
  color: rgb(242 250 255 / 0.86);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
}
.profile-list {
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}
.profile-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.profile-row dt {
  color: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.profile-row dd {
  color: rgb(242 250 255 / 0.86);
  line-height: 1.75;
  text-wrap: pretty;
}
.puka-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.3rem;
  border: 1px solid rgb(167 139 250 / 0.28);
  background: linear-gradient(120deg, rgb(167 139 250 / 0.08), rgb(77 232 255 / 0.05));
}
.puka-icon {
  position: relative;
  width: 4.4rem;
  aspect-ratio: 1.2;
}
.puka-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 72%;
  border: 1px solid rgb(77 232 255 / 0.56);
  border-radius: 52% 54% 48% 46%;
  background: radial-gradient(circle at 62% 40%, #153769, #071226 72%);
  box-shadow: 0 0 12px rgb(77 232 255 / 0.32), 0 0 28px rgb(77 232 255 / 0.18);
}
.puka-body::before,
.puka-body::after {
  content: "";
  position: absolute;
  top: 43%;
  width: 0.42rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--foam);
  box-shadow: 0 0 8px var(--glow-cyan);
}
.puka-body::before { left: 28%; }
.puka-body::after { right: 28%; }
.puka-lamp {
  position: absolute;
  top: 0;
  left: 54%;
  width: 1.15rem;
  aspect-ratio: 1;
  border: 1px solid var(--foam);
  border-radius: 50%;
  background: var(--glow-cyan);
  box-shadow: 0 0 12px var(--glow-cyan), 0 0 28px var(--glow-cyan);
}
.puka-lamp::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 78%;
  width: 1.7rem;
  height: 1.3rem;
  border-top: 1px solid rgb(77 232 255 / 0.7);
  border-radius: 60% 0 0;
  transform: rotate(14deg);
  transform-origin: right bottom;
}
.puka-card:hover .puka-lamp { animation: lamp-blink 0.7s ease-in-out 2; }
@keyframes lamp-blink { 50% { opacity: 0.32; transform: scale(0.78); } }
.puka-copy strong {
  display: block;
  color: var(--glow-cyan);
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.puka-copy p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Story */
.story-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.story-copy p {
  max-width: 39rem;
  margin-top: 1.6rem;
  color: rgb(242 250 255 / 0.78);
  line-height: 2.2;
  text-wrap: pretty;
}
.story-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid rgb(77 232 255 / 0.24);
  background: var(--deep);
}
.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-image::after {
  content: "ABYSS STATION / DEPTH 6,500M";
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  color: rgb(242 250 255 / 0.62);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 5px var(--abyss);
}

/* Stream cards */
.streams {
  overflow: clip;
  background:
    radial-gradient(circle at 86% 20%, rgb(167 139 250 / 0.08), transparent 34%),
    var(--abyss);
}
.streams::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -10%;
  bottom: 4%;
  width: clamp(18rem, 46vw, 42rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.24;
  filter: blur(42px);
  background: radial-gradient(circle, rgb(77 232 255 / 0.46), rgb(167 139 250 / 0.14) 42%, transparent 72%);
  pointer-events: none;
}
.streams > .glow-ring { z-index: 0; }
.streams > .shell {
  position: relative;
  z-index: 1;
}
.stream-ambience {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.stream-ambience i {
  position: absolute;
  bottom: -3rem;
  left: var(--x);
  width: var(--s);
  aspect-ratio: 1;
  border: 1px solid rgb(242 250 255 / 0.34);
  border-radius: 50%;
  opacity: 0;
  box-shadow: inset 0.18rem 0.18rem 0.3rem rgb(242 250 255 / 0.12), 0 0 0.8rem rgb(77 232 255 / 0.16);
  animation: stream-bubble-rise var(--d) linear var(--delay) infinite;
}
@keyframes stream-bubble-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.82); }
  12% { opacity: 0.2; }
  72% { opacity: 0.12; }
  100% { opacity: 0; transform: translate3d(var(--drift), -75rem, 0) scale(1.08); }
}
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.content-card {
  --card-accent: var(--glow-cyan);
  --card-rgb: 77 232 255;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 3rem;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgb(var(--card-rgb) / 0.34);
  background:
    radial-gradient(circle at 88% 14%, rgb(var(--card-rgb) / 0.2), transparent 34%),
    radial-gradient(circle at 10% 92%, rgb(77 232 255 / 0.08), transparent 42%),
    linear-gradient(150deg, rgb(10 22 48 / 0.97), rgb(5 11 24 / 0.9));
  box-shadow: inset 0 1px rgb(242 250 255 / 0.05);
  transform-style: preserve-3d;
  translate: 0 0;
  transition: translate 0.7s var(--ease), border-color 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.content-card:nth-child(2) {
  --card-accent: var(--glow-pink);
  --card-rgb: 255 158 216;
}
.content-card:nth-child(3) {
  --card-accent: var(--glow-purple);
  --card-rgb: 167 139 250;
}
.content-card::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 10rem;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.58;
  filter: blur(16px);
  background: radial-gradient(circle, rgb(var(--card-rgb) / 0.68), transparent 68%);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.content-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  box-shadow: 0 0 12px var(--card-accent), 0 0 28px rgb(var(--card-rgb) / 0.48);
}
@media (hover: hover) and (pointer: fine) {
  .content-card:hover {
    border-color: rgb(var(--card-rgb) / 0.82);
    box-shadow: 0 0 12px rgb(var(--card-rgb) / 0.2), 0 0 28px rgb(var(--card-rgb) / 0.13);
    translate: 0 -0.25rem;
  }
  .content-card:hover::before {
    opacity: 0.9;
    transform: scale(1.12);
  }
  .content-card:hover .card-symbol {
    border-color: rgb(var(--card-rgb) / 0.9);
    box-shadow: inset 0 0 1.4rem rgb(var(--card-rgb) / 0.22), 0 0 2rem rgb(var(--card-rgb) / 0.28);
  }
}
.card-label {
  color: var(--card-accent);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.card-symbol {
  position: relative;
  width: 3.4rem;
  aspect-ratio: 1;
  margin-top: 1.4rem;
  border: 1px solid rgb(var(--card-rgb) / 0.52);
  border-radius: 50%;
  box-shadow: inset 0 0 1.2rem rgb(var(--card-rgb) / 0.14), 0 0 1.5rem rgb(var(--card-rgb) / 0.14);
  transition: border-color 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.card-symbol::before,
.card-symbol::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.card-symbol::before {
  inset: 20%;
  border: 1px solid var(--card-accent);
  opacity: 0;
  animation: sonar-pulse 3.8s ease-out infinite;
}
.content-card:nth-child(2) .card-symbol::before { animation-delay: -1.2s; }
.content-card:nth-child(3) .card-symbol::before { animation-delay: -2.4s; }
.card-symbol::after {
  inset: 42%;
  background: var(--card-accent);
  box-shadow: 0 0 12px var(--card-accent), 0 0 28px var(--card-accent);
}
@keyframes sonar-pulse {
  0%, 8% { opacity: 0; transform: scale(0.62); }
  20% { opacity: 0.64; }
  70%, 100% { opacity: 0; transform: scale(2.35); }
}
.content-card h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.045em;
  text-wrap: balance;
}
.content-card p {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.8;
  text-wrap: pretty;
}

/* Gallery */
.gallery-carousel {
  position: relative;
  isolation: isolate;
}
.gallery-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery-item { position: relative; }
.gallery-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid rgb(77 232 255 / 0.18);
  background: var(--deep);
  transition: border-color 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.gallery-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  background: #020611;
  opacity: 0;
  pointer-events: none;
}
.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.gallery-item:hover .gallery-image {
  border-color: rgb(77 232 255 / 0.68);
  box-shadow: 0 0 12px rgb(77 232 255 / 0.16), 0 0 28px rgb(77 232 255 / 0.1);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.gallery-item figcaption span:first-child {
  color: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}
.gallery-current-caption,
.gallery-controls { display: none; }
.motion .gallery-carousel.is-carousel .gallery-viewport {
  position: relative;
  height: clamp(19rem, 40vw, 30rem);
  overflow: visible;
  perspective: 90rem;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  cursor: grab;
}
.motion .gallery-carousel.is-carousel.is-dragging .gallery-viewport { cursor: grabbing; }
.motion .gallery-carousel.is-carousel .gallery-track {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}
.motion .gallery-carousel.is-carousel .gallery-item {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: clamp(17rem, 48vw, 40rem);
  margin: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform, opacity;
  cursor: pointer;
}
.motion .gallery-carousel.is-carousel .gallery-item figcaption { display: none; }
.motion .gallery-carousel.is-carousel .gallery-shade {
  display: block;
  will-change: opacity;
}
.motion .gallery-carousel.is-carousel .gallery-image {
  box-shadow: 0 1.3rem 4rem rgb(0 0 0 / 0.42);
  pointer-events: none;
}
.motion .gallery-carousel.is-carousel .gallery-item:hover img { transform: none; }
.motion .gallery-carousel.is-carousel .gallery-current-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.1rem;
  min-height: 2.4rem;
  margin-top: 0.7rem;
  color: var(--foam);
  font-size: 0.9rem;
  text-align: center;
}
.gallery-current-caption span:first-child {
  color: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.motion .gallery-carousel.is-carousel .gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.3rem;
}
.gallery-control {
  display: grid;
  place-items: center;
  width: 3.2rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgb(77 232 255 / 0.42);
  border-radius: 50%;
  background: rgb(5 11 24 / 0.7);
  box-shadow: inset 0 0 1.2rem rgb(77 232 255 / 0.08);
  cursor: pointer;
  transition: border-color 0.8s var(--ease), box-shadow 0.8s var(--ease), transform 0.8s var(--ease);
}
.gallery-control:hover {
  border-color: var(--glow-cyan);
  box-shadow: 0 0 12px rgb(77 232 255 / 0.24), 0 0 28px rgb(77 232 255 / 0.14);
  transform: scale(1.04);
}
.gallery-position {
  min-width: 4.6rem;
  color: rgb(242 250 255 / 0.64);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-align: center;
}
.gallery-drag-proxy {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Schedule */
.schedule-list { border-top: 1px solid var(--line); }
.schedule-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: center;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.schedule-day {
  color: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.schedule-program {
  font-weight: 800;
  line-height: 1.55;
  text-wrap: pretty;
}
.schedule-time {
  color: rgb(242 250 255 / 0.64);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.schedule-row.is-off .schedule-program,
.schedule-row.is-off .schedule-time { color: rgb(242 250 255 / 0.4); }