/* Connect・署名ぷか・泡バースト・フッターをまとめる。
   ぷかの基底スタイルを持つ content.css の後に読み込む。 */
/* Links and footer */
.connect {
  overflow: clip;
  text-align: center;
  background: #030817;
}
.connect-scene {
  position: absolute;
  z-index: 0;
  inset: -4%;
  pointer-events: none;
  transform: scale(1.035);
  transform-origin: center;
  animation: connect-scene-zoom 44s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.connect.is-scene-active .connect-scene { animation-play-state: running; }
.connect-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  opacity: 0.62;
  filter: blur(1.5px);
}
.connect-window-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.window-light {
  position: absolute;
  top: var(--light-y);
  left: var(--light-x);
  width: var(--light-size, 0.72rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.82;
  background: radial-gradient(
    circle,
    rgb(242 250 255 / 0.98) 0 9%,
    rgb(77 232 255 / 0.9) 18%,
    rgb(77 232 255 / 0.36) 42%,
    transparent 72%
  );
  box-shadow: 0 0 12px rgb(77 232 255 / 0.76), 0 0 28px rgb(77 232 255 / 0.44);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.motion .window-light { opacity: 0; }
.window-light.is-on {
  animation: window-light-glimmer var(--glimmer, 7s) ease-in-out var(--glimmer-delay, 0s) infinite alternate;
  animation-play-state: paused;
}
.connect.is-scene-active .window-light.is-on { animation-play-state: running; }
@keyframes window-light-glimmer {
  from { opacity: 0.68; }
  to { opacity: 0.98; }
}
.connect::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(10 22 48 / 0.34), rgb(5 11 24 / 0.44) 54%, rgb(3 7 19 / 0.76) 100%),
    linear-gradient(180deg, rgb(5 11 24 / 0.56), rgb(5 11 24 / 0.42) 44%, rgb(3 7 19 / 0.84));
  pointer-events: none;
}
.connect > .shell {
  position: relative;
  z-index: 4;
}
@keyframes connect-scene-zoom {
  from { transform: scale(1.035); }
  to { transform: scale(1.11); }
}
.connect-ambience,
.puka-surprise-layer,
.whale-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.connect-ambience,
.whale-layer { z-index: 2; }
.puka-surprise-layer { z-index: 3; }
.connect-jelly,
.surprise-jelly {
  position: absolute;
  left: var(--creature-x);
  width: var(--creature-size);
  aspect-ratio: 0.86;
  border: 1px solid rgb(77 232 255 / 0.5);
  border-radius: 52% 52% 34% 34%;
  background: radial-gradient(circle at 50% 18%, rgb(242 250 255 / 0.42), rgb(77 232 255 / 0.13) 46%, rgb(167 139 250 / 0.05));
  box-shadow: 0 0 12px rgb(77 232 255 / 0.28), 0 0 28px rgb(77 232 255 / 0.16), inset 0 0 1.2rem rgb(77 232 255 / 0.1);
  opacity: 0;
  transform-origin: center;
  pointer-events: none;
}
.connect-jelly::before,
.connect-jelly::after,
.surprise-jelly::before,
.surprise-jelly::after {
  content: "";
  position: absolute;
  top: 72%;
  bottom: -58%;
  width: 25%;
  border-right: 1px solid rgb(77 232 255 / 0.48);
  border-left: 1px solid rgb(77 232 255 / 0.48);
  border-radius: 0 0 50% 50%;
}
.connect-jelly::before,
.surprise-jelly::before { left: 14%; }
.connect-jelly::after,
.surprise-jelly::after { right: 14%; }
.connect-jelly {
  bottom: -18%;
  animation: connect-jelly-rise var(--creature-duration) linear var(--creature-delay) infinite;
  animation-play-state: paused;
}
.connect.is-scene-active .connect-jelly { animation-play-state: running; }
@keyframes connect-jelly-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 12vh, 0) rotate(-2deg) scale(0.94);
  }
  14% { opacity: var(--creature-alpha, 0.16); }
  72% { opacity: var(--creature-alpha, 0.16); }
  100% {
    opacity: 0;
    transform: translate3d(var(--creature-drift), -118vh, 0) rotate(3deg) scale(1.05);
  }
}
.fish-school {
  position: absolute;
  top: var(--school-y);
  left: 0;
  width: 13rem;
  height: 5rem;
  opacity: 0;
  color: rgb(4 12 28 / 0.78);
  filter: drop-shadow(0 0 5px rgb(77 232 255 / 0.12));
  transform: translate3d(-25vw, 0, 0);
  animation: fish-school-pass 49s linear -14s infinite;
  animation-play-state: paused;
}
.connect.is-scene-active .fish-school { animation-play-state: running; }
.fish-school i {
  position: absolute;
  top: var(--fish-y);
  left: var(--fish-x);
  width: var(--fish-size);
  aspect-ratio: 2.1;
  border-radius: 52% 68% 68% 52%;
  background: currentColor;
  transform: rotate(var(--fish-rotate));
}
.fish-school i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 88%;
  width: 58%;
  aspect-ratio: 1;
  background: currentColor;
  clip-path: polygon(100% 50%, 0 4%, 16% 50%, 0 96%);
  transform: translateY(-50%);
}
@keyframes fish-school-pass {
  0%, 5% {
    opacity: 0;
    transform: translate3d(-25vw, 0, 0);
  }
  11% { opacity: 0.18; }
  52% {
    opacity: 0.15;
    transform: translate3d(110vw, -1.5rem, 0);
  }
  59%, 100% {
    opacity: 0;
    transform: translate3d(125vw, -1.8rem, 0);
  }
}
.surprise-jelly {
  bottom: -20%;
  animation: surprise-jelly-rise var(--creature-duration) var(--ease) var(--creature-delay) forwards;
  animation-play-state: paused;
}
.connect.is-scene-active .surprise-jelly { animation-play-state: running; }
@keyframes surprise-jelly-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 8vh, 0) rotate(-3deg) scale(0.72);
  }
  12% { opacity: var(--creature-alpha, 0.62); }
  70% { opacity: var(--creature-alpha, 0.62); }
  100% {
    opacity: 0;
    transform: translate3d(var(--creature-drift), -122vh, 0) rotate(4deg) scale(1.08);
  }
}
.deep-whale {
  position: absolute;
  top: 22%;
  left: 0;
  width: clamp(34rem, 78vw, 68rem);
  color: rgb(1 7 18 / 0.86);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgb(77 232 255 / 0.2)) drop-shadow(0 0 24px rgb(77 232 255 / 0.08));
  transform: translate3d(-120%, 0, 0);
  will-change: transform, opacity;
}
.deep-whale svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
  stroke: rgb(77 232 255 / 0.22);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.deep-whale.is-swimming {
  animation: deep-whale-pass 42s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-play-state: paused;
}
.connect.is-scene-active .deep-whale.is-swimming { animation-play-state: running; }
@keyframes deep-whale-pass {
  0% {
    opacity: 0;
    transform: translate3d(-120%, 4vh, 0) scale(0.94);
  }
  9% { opacity: 0.2; }
  84% { opacity: 0.17; }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 25%), -5vh, 0) scale(1.02);
  }
}
.connect .section-title {
  font-size: clamp(2rem, 5vw, 2.625rem);
  text-shadow: 0 2px 12px rgb(3 7 19 / 0.96), 0 0 28px rgb(77 232 255 / 0.18);
}
.connect .section-title.is-lit {
  animation: connect-title-glow 5.8s ease-in-out infinite alternate;
}
@keyframes connect-title-glow {
  from {
    text-shadow: 0 2px 12px rgb(3 7 19 / 0.96), 0 0 12px rgb(77 232 255 / 0.22), 0 0 28px rgb(77 232 255 / 0.14);
  }
  to {
    text-shadow: 0 2px 12px rgb(3 7 19 / 0.96), 0 0 12px rgb(77 232 255 / 0.42), 0 0 32px rgb(167 139 250 / 0.24);
  }
}
.connect-sub {
  margin-top: 1rem;
  color: rgb(242 250 255 / 0.82);
  text-shadow: 0 2px 8px rgb(3 7 19 / 0.96);
  text-wrap: balance;
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: clamp(2.8rem, 6vw, 4.8rem);
}
.social-link {
  --social-accent: var(--glow-cyan);
  --social-rgb: 77 232 255;
  --mag-x: 0px;
  --mag-y: 0px;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  overflow: hidden;
  border: 1px solid rgb(var(--social-rgb) / 0.68);
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--social-rgb) / 0.16), transparent 74%),
    rgb(5 11 24 / 0.72);
  box-shadow: inset 0 0 1.5rem rgb(var(--social-rgb) / 0.08), 0 0 18px rgb(var(--social-rgb) / 0.08);
  color: var(--social-accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition: border-color 0.7s var(--ease), color 0.7s var(--ease), box-shadow 0.7s var(--ease), transform 0.7s var(--ease);
}
.social-link:nth-child(2) {
  --social-accent: var(--glow-pink);
  --social-rgb: 255 158 216;
}
.social-link:nth-child(3) {
  --social-accent: var(--glow-purple);
  --social-rgb: 167 139 250;
}
.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--social-rgb) / 0.22), transparent);
  transform: translateX(-110%);
  transition: transform 0.9s var(--ease);
}
.social-link:hover {
  border-color: var(--social-accent);
  color: var(--foam);
  box-shadow: inset 0 0 1.8rem rgb(var(--social-rgb) / 0.16), 0 0 12px rgb(var(--social-rgb) / 0.22), 0 0 28px rgb(var(--social-rgb) / 0.14);
}
.social-link:hover::before { transform: translateX(110%); }
.signoff-puka {
  position: relative;
  display: block;
  width: 5.6rem;
  aspect-ratio: 1.35;
  margin: clamp(3rem, 8vw, 5.5rem) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.puka-speech {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 0.9rem);
  left: 50%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(77 232 255 / 0.46);
  border-radius: 1rem;
  background: rgb(5 11 24 / 0.9);
  box-shadow: 0 0 12px rgb(77 232 255 / 0.16), 0 0 28px rgb(77 232 255 / 0.1);
  color: var(--foam);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0.5rem) scale(0.96);
  pointer-events: none;
}
.puka-speech::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.55rem;
  aspect-ratio: 1;
  border-right: 1px solid rgb(77 232 255 / 0.46);
  border-bottom: 1px solid rgb(77 232 255 / 0.46);
  background: rgb(5 11 24 / 0.9);
  transform: translate(-50%, -50%) rotate(45deg);
}
.signoff-puka.is-speaking .puka-speech {
  animation: puka-speech-pop 2.8s var(--ease) forwards;
}
@keyframes puka-speech-pop {
  0% { opacity: 0; transform: translate(-50%, 0.5rem) scale(0.96); }
  18%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -0.3rem) scale(0.98); }
}
.puka-touch-hint {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: rgb(242 250 255 / 0.58);
  font-family: var(--mono);
  font-size: 0.56rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: puka-hint-float 6.8s ease-in-out infinite alternate;
  animation-play-state: paused;
  pointer-events: none;
}
.connect.is-scene-active .puka-touch-hint { animation-play-state: running; }
.puka-touch-hint::before {
  content: "";
  width: 0.58rem;
  aspect-ratio: 1;
  border: 1px solid rgb(77 232 255 / 0.58);
  border-radius: 50%;
  box-shadow: 0 0 8px rgb(77 232 255 / 0.28);
}
.puka-touch-hint::after {
  content: "";
  position: absolute;
  top: -0.24rem;
  left: 0.34rem;
  width: 0.24rem;
  aspect-ratio: 1;
  border: 1px solid rgb(77 232 255 / 0.42);
  border-radius: 50%;
}
@keyframes puka-hint-float {
  from { opacity: 0.48; transform: translate(-50%, 0); }
  to { opacity: 0.74; transform: translate(-50%, -0.28rem); }
}
.puka-sprite {
  position: absolute;
  inset: 0;
  display: block;
  animation: puka-idle 5.2s ease-in-out infinite;
}
.signoff-puka .puka-lamp {
  left: 58%;
  animation: puka-lantern 6.4s ease-in-out infinite;
}
.signoff-puka .puka-body::before,
.signoff-puka .puka-body::after {
  transform-origin: center;
  animation: puka-eye-blink 7.1s steps(1, end) infinite;
}
@keyframes puka-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-0.55rem) rotate(1.5deg); }
}
@keyframes puka-lantern {
  0%, 56%, 68%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px var(--glow-cyan), 0 0 28px var(--glow-cyan);
  }
  58% { opacity: 0.18; transform: scale(0.76); }
  60% { opacity: 1; transform: scale(1.12); }
  62% { opacity: 0.32; transform: scale(0.84); }
  65% {
    opacity: 0.9;
    transform: scale(1.06);
    box-shadow: 0 0 18px var(--glow-cyan), 0 0 38px var(--glow-cyan);
  }
}
@keyframes puka-eye-blink {
  0%, 72%, 76%, 100% { transform: scaleY(1); }
  73%, 75% { transform: scaleY(0.12); }
}
@keyframes puka-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-0.9rem) scale(0.9, 1.14); }
  66% { transform: translateY(0.12rem) scale(1.1, 0.88); }
}
@media (hover: hover) and (pointer: fine) {
  .signoff-puka:hover .puka-sprite {
    animation: puka-bounce 0.62s var(--ease);
  }
}
.signoff-puka.is-bouncing .puka-sprite {
  animation: puka-bounce 0.62s var(--ease);
}
.signoff-puka.is-surprised .puka-lamp {
  animation: puka-lantern-surprise 3.8s var(--ease);
}
@keyframes puka-lantern-surprise {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px var(--glow-cyan), 0 0 28px var(--glow-cyan);
  }
  24% {
    opacity: 1;
    transform: scale(1.42);
    box-shadow: 0 0 22px var(--foam), 0 0 52px var(--glow-cyan), 0 0 80px rgb(167 139 250 / 0.52);
  }
  68% {
    opacity: 0.9;
    transform: scale(1.16);
    box-shadow: 0 0 18px var(--glow-cyan), 0 0 42px var(--glow-cyan);
  }
}
.burst-bubble {
  position: fixed;
  z-index: 1200;
  top: var(--burst-y);
  left: var(--burst-x);
  width: var(--burst-size);
  aspect-ratio: 1;
  border: 1px solid var(--glow-cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(77 232 255 / 0.42);
  pointer-events: none;
  animation: bubble-burst 0.72s var(--ease) forwards;
}
@keyframes bubble-burst {
  to {
    opacity: 0;
    transform: translate(var(--burst-dx), var(--burst-dy)) scale(0.45);
  }
}
.site-footer {
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2rem;
  border-top: 1px solid var(--line);
  background: #030713;
}
.footer-brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer-brand strong {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.14em;
}
.footer-brand span {
  color: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}
.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: rgb(242 250 255 / 0.45);
  font-size: 0.68rem;
  line-height: 1.8;
}
.footer-note { max-width: 46rem; text-wrap: pretty; }
.footer-note a {
  color: rgb(242 250 255 / 0.78);
  text-decoration: underline;
  text-decoration-color: rgb(77 232 255 / 0.45);
  text-underline-offset: 0.25em;
}
.copyright {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}