@font-face { font-family: "Poppins"; src: url("../../../assets/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("../../../assets/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "Noto Sans SC"; src: url("../../../assets/fonts/NotoSansSC-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Noto Sans SC"; src: url("../../../assets/fonts/NotoSansSC-SemiBold.ttf") format("truetype"); font-weight: 600; }

:root {
  --ink: #122d53;
  --ink-soft: #58708e;
  --light-blue: #77cfff;
  --page-width: min(1450px, calc(100% - 36px));
}

* { box-sizing: border-box; }
html { min-width: 320px; height: 100%; }
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 16% 18%, rgba(88, 175, 238, 0.42), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(186, 124, 227, 0.36), transparent 29%),
    radial-gradient(circle at 50% 96%, rgba(63, 181, 209, 0.3), transparent 38%),
    linear-gradient(145deg, #c7dceb 0%, #c6d3e6 37%, #d8d0e5 70%, #c2d9e4 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.13), transparent 35%, rgba(43,75,123,.12));
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.effect-canvas { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.sky-atmosphere { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.nebula { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .48; animation: nebula-drift 13s ease-in-out infinite alternate; }
.nebula-one { width: 36vw; height: 36vw; left: -14vw; top: 24vh; background: rgba(73, 168, 235, .32); }
.nebula-two { width: 31vw; height: 31vw; right: -10vw; top: -9vw; background: rgba(190, 114, 235, .28); animation-delay: -5s; }
.nebula-three { width: 28vw; height: 28vw; right: 24vw; bottom: -17vw; background: rgba(88, 216, 224, .26); animation-delay: -9s; }

.star-layer { position: absolute; inset: 0; opacity: .82; }
.star-layer::before, .star-layer::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow:
    7vw 12vh rgba(255,255,255,.75), 14vw 64vh rgba(111,197,255,.72), 22vw 29vh rgba(255,208,234,.85),
    31vw 76vh rgba(255,255,255,.72), 42vw 14vh rgba(255,231,175,.8), 50vw 54vh rgba(186,238,255,.78),
    58vw 83vh rgba(255,255,255,.68), 66vw 24vh rgba(196,178,255,.78), 75vw 68vh rgba(255,215,180,.72),
    84vw 37vh rgba(255,255,255,.84), 93vw 77vh rgba(149,229,255,.74), 97vw 13vh rgba(255,195,220,.8);
}
.star-layer::after { left: 3vw; top: 9vh; transform: scale(1.55); opacity: .5; }
.star-layer-far { transform: translate(5vw, 4vh) scale(.72); opacity: .38; }

.page-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--page-width);
  height: 118px;
  margin: 0 auto;
  padding: 14px 0 8px;
}
.back-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(72, 126, 183, .3);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(241, 249, 255, .52);
  box-shadow: 0 10px 28px rgba(33, 81, 135, .1);
  text-decoration: none;
  backdrop-filter: blur(13px);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}
.back-link:hover, .back-link:focus-visible { transform: translateY(-2px); border-color: rgba(82, 185, 245, .68); background: rgba(229, 247, 255, .86); }
.title-lockup { text-align: center; }
.title-lockup p { margin: 0 0 2px; color: #506f98; font: .68rem "Poppins", sans-serif; letter-spacing: .23em; }
.title-lockup h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.2; letter-spacing: .16em; text-indent: .16em; text-shadow: 0 8px 24px rgba(40, 77, 129, .12); }
.page-mark {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(117, 149, 210, .28);
  border-radius: 18px;
  background: rgba(245, 250, 255, .48);
  box-shadow: inset 0 0 18px rgba(255,255,255,.66), 0 12px 28px rgba(58,86,139,.1);
  backdrop-filter: blur(12px);
}
.page-mark img { width: 28px; height: 28px; filter: saturate(.72) hue-rotate(12deg); }

.team-shell {
  position: relative;
  z-index: 5;
  width: var(--page-width);
  height: calc(100vh - 118px);
  height: calc(100dvh - 118px);
  margin: 0 auto;
  overflow: hidden;
}
.team-stage { position: relative; height: calc(100% - 48px); perspective: 1500px; }
.team-ring { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; touch-action: pan-y; }

.developer-card {
  position: absolute;
  top: 12px;
  left: 50%;
  width: clamp(330px, 28vw, 420px);
  height: min(650px, calc(100vh - 185px));
  height: min(650px, calc(100dvh - 185px));
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 34px;
  color: var(--ink);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(20px) saturate(1.12);
  transform: translateX(-50%) scale(.58);
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  outline: none;
  will-change: left, transform, opacity, filter;
  transition: left 760ms cubic-bezier(.2,.8,.22,1), transform 760ms cubic-bezier(.2,.8,.22,1), opacity 440ms ease, filter 440ms ease, border-color 330ms ease, box-shadow 330ms ease, background 330ms ease;
}
.theme-silver {
  --card-border: rgba(255,255,255,.86);
  --card-background: linear-gradient(145deg, rgba(255,255,255,.77), rgba(225,232,242,.64));
  --card-shadow: 0 30px 74px rgba(53,71,103,.18), inset 0 0 35px rgba(255,255,255,.72);
  --accent: #7487a2;
  --accent-soft: rgba(227,235,246,.74);
}
.theme-orange {
  --card-border: rgba(255,186,117,.55);
  --card-background: linear-gradient(145deg, rgba(255,246,232,.8), rgba(255,207,155,.62));
  --card-shadow: 0 30px 74px rgba(183,99,34,.18), inset 0 0 35px rgba(255,246,227,.62);
  --accent: #d77727;
  --accent-soft: rgba(255,206,143,.72);
}
.theme-sky {
  --card-border: rgba(112,197,255,.58);
  --card-background: linear-gradient(145deg, rgba(237,249,255,.82), rgba(151,216,255,.62));
  --card-shadow: 0 30px 74px rgba(37,125,184,.18), inset 0 0 35px rgba(236,251,255,.72);
  --accent: #278aca;
  --accent-soft: rgba(147,216,255,.72);
}
.developer-card.is-active { z-index: 5; opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); filter: none; }
.developer-card.is-left, .developer-card.is-right { z-index: 3; opacity: .76; pointer-events: auto; cursor: pointer; filter: saturate(.76) brightness(1.04); }
.developer-card.is-left { left: 18%; transform: translateX(-50%) perspective(1100px) rotateY(34deg) scale(.75); }
.developer-card.is-right { left: 82%; transform: translateX(-50%) perspective(1100px) rotateY(-34deg) scale(.75); }

.developer-card::before, .developer-card::after { content: ""; position: absolute; pointer-events: none; transition: opacity 330ms ease, transform 500ms ease; }
.developer-card::before { inset: 0; z-index: -1; opacity: .26; background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.82) 36%, transparent 56%); transform: translateX(-120%); }
.developer-card::after { right: -92px; bottom: -92px; z-index: -1; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.08), 0 0 54px var(--accent-soft); }
.developer-card:hover::before, .developer-card:focus-visible::before { transform: translateX(125%); }
.theme-silver:hover, .theme-silver:focus-visible { border-color: rgba(255,255,255,1); background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(186,201,222,.92)); box-shadow: 0 34px 84px rgba(73,91,119,.3), 0 0 42px rgba(255,255,255,.82), inset 0 0 42px rgba(255,255,255,.88); }
.theme-orange:hover, .theme-orange:focus-visible { border-color: rgba(255,159,70,.9); background: linear-gradient(135deg, rgba(255,238,209,.98), rgba(255,148,54,.88)); box-shadow: 0 34px 84px rgba(205,103,25,.3), 0 0 42px rgba(255,163,72,.42), inset 0 0 42px rgba(255,243,219,.6); }
.theme-sky:hover, .theme-sky:focus-visible { border-color: rgba(72,186,255,.94); background: linear-gradient(135deg, rgba(220,247,255,.98), rgba(75,185,247,.86)); box-shadow: 0 34px 84px rgba(36,130,191,.3), 0 0 42px rgba(78,192,255,.44), inset 0 0 42px rgba(228,250,255,.65); }

.card-halo { position: absolute; top: 16px; left: 50%; width: 78%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 16px rgba(255,255,255,.045), 0 0 60px var(--accent-soft); opacity: .7; }
.portrait-space { position: relative; height: 72%; margin: 20px 20px 0; border-bottom: 1px solid rgba(255,255,255,.48); border-radius: 26px 26px 12px 12px; }
.portrait-space::before, .portrait-space::after { content: ""; position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); opacity: .24; }
.portrait-space::before { top: 16%; width: 34%; aspect-ratio: 1; border: 1px solid var(--accent); }
.portrait-space::after { bottom: 7%; width: 68%; height: 42%; border: 1px solid var(--accent); border-bottom: 0; border-radius: 50% 50% 20% 20%; }
.developer-copy { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; height: 28%; padding: 10px 24px 24px; text-align: center; }
.role-label { padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; color: var(--accent); background: rgba(255,255,255,.42); font: .62rem "Poppins",sans-serif; letter-spacing: .16em; }
.developer-copy h2 { margin: 10px 0 2px; font-size: clamp(1.65rem,2.6vw,2.35rem); line-height: 1.15; letter-spacing: .12em; text-indent: .12em; }
.developer-copy p { margin: 0; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); font-size: .9rem; letter-spacing: .12em; }

.stage-arrow {
  position: absolute; top: 47%; z-index: 8; display: grid; place-items: center; width: 50px; height: 50px;
  border: 1px solid rgba(104,151,205,.3); border-radius: 18px; color: var(--ink); background: rgba(239,248,255,.56);
  box-shadow: 0 13px 32px rgba(37,82,135,.13), inset 0 0 18px rgba(255,255,255,.72); backdrop-filter: blur(13px);
  font: 300 2rem/1 "Poppins",sans-serif; cursor: pointer; transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.stage-arrow:hover, .stage-arrow:focus-visible { transform: scale(1.08); background: rgba(191,231,255,.9); box-shadow: 0 16px 38px rgba(45,123,181,.2), 0 0 24px rgba(112,204,255,.32); }
.arrow-left { left: 1.5%; }
.arrow-right { right: 1.5%; }
.team-pagination { position: absolute; left: 50%; bottom: 17px; z-index: 8; display: flex; gap: 8px; transform: translateX(-50%); }
.team-dot { width: 24px; height: 5px; border-radius: 999px; background: rgba(61,104,157,.2); transition: width 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.team-dot.is-active { width: 44px; background: linear-gradient(90deg,#82cfff,#9b9eea); box-shadow: 0 0 14px rgba(83,163,227,.35); }

@keyframes nebula-drift { from { transform: translate3d(-2%,-2%,0) scale(.96); } to { transform: translate3d(4%,4%,0) scale(1.08); } }

@media (max-width: 900px) {
  .developer-card { width: clamp(300px,52vw,390px); }
  .developer-card.is-left { left: 8%; transform: translateX(-50%) perspective(1000px) rotateY(38deg) scale(.67); }
  .developer-card.is-right { left: 92%; transform: translateX(-50%) perspective(1000px) rotateY(-38deg) scale(.67); }
  .stage-arrow { top: auto; bottom: 3px; }
  .arrow-left { left: calc(50% - 108px); }
  .arrow-right { right: calc(50% - 108px); }
}

@media (max-width: 600px) {
  .page-header { grid-template-columns: 1fr auto; height: 106px; width: calc(100% - 24px); }
  .back-link { padding: 8px 11px; font-size: .76rem; }
  .title-lockup { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); white-space: nowrap; }
  .title-lockup p { display: none; }
  .title-lockup h1 { font-size: 1.48rem; }
  .page-mark { width: 42px; height: 42px; border-radius: 14px; }
  .page-mark img { width: 23px; height: 23px; }
  .team-shell { width: 100%; height: calc(100dvh - 106px); }
  .team-stage { height: calc(100% - 42px); }
  .developer-card { top: 8px; width: min(78vw,340px); height: min(590px,calc(100dvh - 164px)); min-height: 430px; border-radius: 28px; }
  .developer-card.is-left { left: -16%; opacity: .46; transform: translateX(-50%) rotateY(28deg) scale(.66); }
  .developer-card.is-right { left: 116%; opacity: .46; transform: translateX(-50%) rotateY(-28deg) scale(.66); }
  .portrait-space { height: 70%; margin: 15px 15px 0; }
  .developer-copy { height: 30%; }
  .stage-arrow { width: 44px; height: 44px; border-radius: 15px; bottom: -3px; }
  .arrow-left { left: calc(50% - 94px); }
  .arrow-right { right: calc(50% - 94px); }
  .team-pagination { bottom: 14px; }
}

@media (max-height: 720px) and (min-width: 601px) {
  .page-header { height: 94px; }
  .team-shell { height: calc(100dvh - 94px); }
  .developer-card { height: calc(100dvh - 142px); min-height: 450px; top: 2px; }
  .portrait-space { height: 68%; }
  .developer-copy { height: 32%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}