@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap");

.afro-network-fv {
  --black: #090909;
  --red: #f01819;
  --paper: #fff;
  --pink: #f46f9a;
  --blue: #79cde8;
  --yellow: #f2cc45;
  --purple: #9b79d1;
  --green: #58b982;
  --orange: #f08a47;
}

.afro-network-fv,
.afro-network-fv * { box-sizing: border-box; }
.afro-network-fv {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  overflow: clip;
  color: var(--black);
  background: var(--paper);
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.afro-network-fv a { color: inherit; }

.fv-sequence {
  position: relative;
  height: 170svh;
  background: var(--paper);
}

.fv-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: clip;
  isolation: isolate;
  background: var(--paper);
}

.initial-brand-art {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  will-change: opacity, transform;
}

.brand-sun {
  position: absolute;
  z-index: 4;
  top: clamp(25px, 4.4vh, 52px);
  left: clamp(30px, 3.8vw, 72px);
  width: clamp(100px, 10.7vw, 184px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  transform-origin: center;
  will-change: transform, opacity;
}

.scene-wrap {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

#webgl-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .35s ease;
}

.person-reveal {
  position: absolute;
  z-index: 5;
  right: clamp(-96px, -5.5vw, -42px);
  bottom: -4svh;
  width: clamp(360px, 40vw, 680px);
  opacity: 0;
  visibility: hidden;
  transform-origin: 56% 100%;
  pointer-events: none;
  will-change: transform, opacity;
}
.person-reveal img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 56% 100%;
  animation: person-sway 3.6s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes person-sway {
  0% { transform: rotate(-1.1deg) translateY(0); }
  100% { transform: rotate(1.1deg) translateY(-7px); }
}

.fallback-art {
  display: none;
  position: absolute;
  width: min(78vw, 820px);
  height: min(42vw, 440px);
  left: 55%;
  top: 54%;
  transform: translate(-50%, -50%);
}
.fallback-art span {
  position: absolute;
  background: var(--black);
  border-radius: 50% 46% 42% 48%;
}
.fallback-art span:nth-child(1) { width: 30%; height: 48%; left: 0; top: 42%; }
.fallback-art span:nth-child(2) { width: 29%; height: 58%; left: 12%; top: 20%; }
.fallback-art span:nth-child(3) { width: 31%; height: 64%; left: 30%; top: 5%; }
.fallback-art span:nth-child(4) { width: 31%; height: 66%; left: 49%; top: 0; }
.fallback-art span:nth-child(5) { width: 31%; height: 60%; left: 67%; top: 14%; }
.fallback-art span:nth-child(6) { width: 27%; height: 50%; left: 78%; top: 40%; }
.fallback-art span:nth-child(7) { width: 48%; height: 42%; left: 5%; bottom: 0; border-radius: 0; }
.fallback-art span:nth-child(8) { width: 50%; height: 42%; right: 4%; bottom: 0; border-radius: 0; }
.fallback-art span:nth-child(9) { width: 20%; height: 34%; left: 41%; bottom: 0; border-radius: 0; }

.no-webgl #webgl-canvas { display: none; }
.no-webgl .fallback-art { display: block; }

.intro-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  color: var(--black);
  pointer-events: none;
  will-change: opacity, transform;
}
.fv-header {
  position: absolute;
  top: 18px;
  right: 2vw;
  left: 2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fv-header p {
  margin: 0;
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
.fv-header nav {
  display: flex;
  gap: clamp(3rem, 6.5vw, 7.5rem);
  padding-right: 4vw;
  font-size: clamp(.74rem, .82vw, .9rem);
  letter-spacing: .16em;
}
.afro-message {
  position: absolute;
  top: 65%;
  left: 60%;
  width: min(68vw, 980px);
  color: #fff;
  text-align: left;
  transform: translate(-50%, -50%);
}
.afro-message h1 {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(3.2rem, 4.6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: 1;
}
.fv-title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.line-work { width: 100%; margin-left: -15%; font-size: .72em; line-height: 1.2; text-align: center; }
.line-but { margin: .15em 0 -.1em 16%; font-size: .52em; line-height: 1.22; transform: rotate(-11deg); transform-origin: left center; }
.line-people { margin-left: 8%; font-size: 1.17em; line-height: 1.17; letter-spacing: -.075em; }
.line-company { margin: .38em 0 0 17%; font-size: .65em; line-height: 1.28; }
.line-system { margin: .08em 0 0 11%; font-size: .86em; line-height: 1.24; }
.accent-person { color: var(--red); }

.word-particles {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.word-particle {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--black);
  opacity: 0;
  will-change: transform, opacity;
}
.word-particle-red { background: var(--red); }

.scroll-cue {
  position: absolute;
  z-index: 7;
  right: clamp(22px, 3vw, 52px);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}
.scroll-cue i { display: block; width: 1px; height: 54px; background: var(--black); }

.progress-rail {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #e9e9e9;
}
.progress-rail span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}

.swell-connection-placeholder {
  min-height: 20svh;
  display: grid;
  place-items: center;
  border-top: 1px solid #dedede;
  background: #fff;
}
.swell-connection-placeholder span {
  color: #aaa;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
}

@media (max-width: 800px) {
  .fv-sequence { height: 176svh; }
  .fv-sticky { min-height: 560px; }
  .brand-sun { top: 19svh; left: 18px; width: 72px; }
  .initial-brand-art { object-fit: cover; object-position: 50% center; }
  .person-reveal { right: -26vw; bottom: -1svh; width: 92vw; }
  .fv-header { top: 16px; right: 18px; left: 18px; }
  .fv-header p { max-width: 62vw; font-size: .9rem; line-height: 1.35; }
  .fv-header nav { gap: 1.25rem; padding-right: 0; font-size: .57rem; }
  .afro-message { top: 55%; left: 50%; width: 90vw; }
  .afro-message h1 { font-size: clamp(2.7rem, 13.5vw, 3.4rem); letter-spacing: -.07em; }
  .line-work { width: 100%; margin-left: 0; font-size: .9em; text-align: center; }
  .line-but { margin-left: 10%; font-size: .58em; transform: none; }
  .line-people { margin-left: 3%; font-size: 1.12em; letter-spacing: -.075em; }
  .line-company { margin-top: .55em; margin-left: 7%; font-size: .58em; }
  .line-system { margin-left: 2%; font-size: .78em; }
  .word-particle { width: 5px; }
  .scroll-cue { right: 12px; bottom: 22px; transform: scale(.85); transform-origin: bottom right; }
  .fallback-art { left: 50%; top: 57%; width: 92vw; height: 49vw; }
  .swell-connection-placeholder { min-height: 16svh; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-sequence { height: 100svh; }
  .scroll-cue, .progress-rail { display: none; }
  .brand-sun, #webgl-canvas { transition: none !important; }
  .person-reveal img { animation: none; }
}