/**
 * “呼吸するWeb” — atmospheric motion for tokyo1970.com.
 * Alpha 2 introduces a blurred red bloom that grows from a small point
 * and slowly spreads across the page like light bleeding through paper.
 */

:root {
  --tokyo1970-bloom-duration: 46s;
  --tokyo1970-drift-duration: 82s;
}

html {
  background: #fff;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.tokyo1970-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 14%, rgba(255,255,255,.96), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #fff 0%, #fcfbfa 58%, #f7f6f4 100%);
}

.tokyo1970-atmosphere::before,
.tokyo1970-atmosphere::after {
  content: "";
  position: absolute;
  will-change: transform, opacity;
}

/*
 * 暗室の呼吸
 * 小さな赤い光が、紙の裏側から滲むように画面全体へ広がる。
 */
.tokyo1970-atmosphere::before {
  width: 24vmin;
  height: 24vmin;
  left: 13%;
  top: 67%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(132, 24, 29, .34) 0%,
    rgba(141, 37, 39, .22) 23%,
    rgba(151, 57, 51, .11) 47%,
    rgba(151, 57, 51, 0) 72%
  );
  filter: blur(22px);
  transform-origin: center;
  animation: tokyo1970-red-bloom var(--tokyo1970-bloom-duration) cubic-bezier(.42, 0, .28, 1) infinite;
}

/* 紙とフィルムの、ごく薄い粒子。 */
.tokyo1970-atmosphere::after {
  inset: -12%;
  opacity: .105;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  animation: tokyo1970-drift var(--tokyo1970-drift-duration) linear infinite;
}

body.is-scrolling .tokyo1970-atmosphere::after {
  opacity: .075;
}

.main_topics li,
.topics li {
  transition: transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .42s ease, opacity .42s ease;
}

.main_topics li:hover,
.topics li:hover {
  transform: translateY(-2px);
}

.main_topics img,
.topics img {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}

.main_topics a:hover img,
.topics a:hover img {
  transform: scale(1.018);
  filter: contrast(1.025);
}

@keyframes tokyo1970-red-bloom {
  0% {
    transform: translate3d(-12vw, 8vh, 0) scale(.16);
    opacity: 0;
  }
  7% {
    opacity: .72;
  }
  28% {
    opacity: .55;
  }
  68% {
    transform: translate3d(25vw, -26vh, 0) scale(8.7);
    opacity: .22;
  }
  88% {
    transform: translate3d(48vw, -39vh, 0) scale(12.8);
    opacity: .08;
  }
  100% {
    transform: translate3d(58vw, -47vh, 0) scale(15.2);
    opacity: 0;
  }
}

@keyframes tokyo1970-drift {
  0%   { transform: translate3d(-2%, -1%, 0); }
  50%  { transform: translate3d(1.5%, 1%, 0); }
  100% { transform: translate3d(-2%, -1%, 0); }
}

@media (max-width: 767px) {
  :root {
    --tokyo1970-bloom-duration: 52s;
  }

  .tokyo1970-atmosphere::before {
    width: 34vmin;
    height: 34vmin;
    left: 6%;
    top: 72%;
    filter: blur(18px);
  }

  .tokyo1970-atmosphere::after {
    opacity: .075;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tokyo1970-atmosphere::before,
  .tokyo1970-atmosphere::after,
  .main_topics li,
  .topics li,
  .main_topics img,
  .topics img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .tokyo1970-atmosphere::before {
    opacity: .08;
    transform: scale(7);
  }
}