/* ==========================================================================
   Intro title card (section transitions) and squad (team introduction)
   ========================================================================== */

/* Shared squad background ------------------------------------------------ */
.squad-bg, .intro-card__bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #04050b 0%, #0b0c18 30%, #262842 58%, #8d8ca8 82%, #d9d9e6 100%);
}
.squad-bg__stars, .intro-card__bg::before {
  content: ''; position: absolute; inset: 0 0 35%;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 28% 42%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 46% 12%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 63% 33%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 78% 8%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 46%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 6% 52%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 54% 58%, rgba(255, 255, 255, 0.6) 50%, transparent 52%);
  background-size: 640px 420px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }
.squad-bg__waves, .intro-card__bg::after {
  content: ''; position: absolute; inset: 52% 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='240' viewBox='0 0 1200 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12'%3E%3Cpath d='M0 40 C200 10 400 70 600 40 S1000 10 1200 40'/%3E%3Cpath d='M0 80 C200 50 400 110 600 80 S1000 50 1200 80'/%3E%3Cpath d='M0 120 C200 90 400 150 600 120 S1000 90 1200 120'/%3E%3Cpath d='M0 160 C200 130 400 190 600 160 S1000 130 1200 160'/%3E%3Cpath d='M0 200 C200 170 400 230 600 200 S1000 170 1200 200'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 1200px 100%;
  animation: waves 22s linear infinite;
}
@keyframes waves { to { background-position: -1200px 0; } }
.squad-bg__fog { position: absolute; inset: 60% -10% -10%; background: radial-gradient(60% 60% at 50% 100%, rgba(255, 255, 255, 0.55), transparent 70%); filter: blur(10px); }

/* Intro title card (transition) ----------------------------------------- */
.intro-card { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intro-card__content { position: absolute; left: calc(185 * var(--u)); top: 34%; }
.intro-card__index { display: block; font-family: var(--font-serif); font-weight: 700; font-size: max(11px, calc(12 * var(--u))); color: #c9c9d3; opacity: 0; transition: opacity 0.6s 0.5s; }
.intro-card__title {
  font-family: var(--font-serif); font-weight: 700; font-size: calc(64 * var(--u)); color: #e8e8f1;
  text-shadow: 0 0 30px rgba(140, 150, 255, 0.25);
  opacity: 0; filter: blur(14px); transform: translateY(30px) scale(1.04); transform-origin: left center;
  transition: opacity 1s var(--ease-out) 0.35s, filter 1.1s var(--ease-out) 0.35s, transform 1.2s var(--ease-out) 0.35s;
}
.intro-card__index i { font-style: normal; opacity: 0.5; }
.intro-card__line {
  display: block; width: calc(220 * var(--u)); min-width: 120px; height: 2px; margin-top: calc(18 * var(--u));
  background: linear-gradient(90deg, var(--card-accent, #8fd0ff), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) 0.6s;
}
.intro-card__sub {
  margin-top: calc(12 * var(--u));
  font-family: var(--font-mono); font-size: max(11px, calc(12 * var(--u))); letter-spacing: 0.32em; text-transform: uppercase;
  color: #a9afcf; opacity: 0; transform: translateY(8px);
  transition: opacity 0.8s var(--ease-out) 0.75s, transform 0.8s var(--ease-out) 0.75s;
}
.intro-card[data-section="squad"] { --card-accent: #8b7bff; }
.intro-card[data-section="news"] { --card-accent: #5ea8ff; }
.intro-card[data-section="gallery"] { --card-accent: #5ef0b0; }
.intro-card[data-section="world"] { --card-accent: #ffc46b; }
.intro-card.is-visible .intro-card__line { transform: none; }
.intro-card.is-visible .intro-card__sub { opacity: 1; transform: none; }
.intro-card.is-visible .intro-card__index { opacity: 1; }
.intro-card.is-visible .intro-card__title { opacity: 1; filter: blur(0); transform: none; }
.intro-card.is-leaving { opacity: 0; transition: opacity 0.7s ease; }
.intro-card.is-leaving .intro-card__title, .intro-card.is-leaving .intro-card__sub { transform: translateY(-20px); filter: blur(6px); transition-duration: 0.7s; transition-delay: 0s; }

/* The incoming section settles from a slight zoom as the title card dissolves over it. */
.view.is-revealing { animation: section-reveal 0.9s var(--ease-out) both; }
@keyframes section-reveal { from { transform: scale(1.035); filter: brightness(0.6) blur(2px); } to { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .view.is-revealing { animation: none; } }

/* Squad ------------------------------------------------------------------ */
/* --su: the squad stage is laid out in design units that respect BOTH viewport width and height,
   so the composition never overflows on short or ultra-wide screens (1u = 1px at 1440×800). */
.page-squad {
  --accent: #8b7bff; --dir: 1;
  --su: min(var(--u), calc(var(--vh) * 100 / 800));
  background: #05060c;
}
.squad-docs { position: absolute; inset: 0; pointer-events: none; }
.squad-doc {
  position: absolute; margin: 0; padding: 14px 16px;
  font-family: var(--font-mono); font-size: max(8px, calc(9 * var(--su))); line-height: 1.6; color: rgba(220, 225, 255, 0.55);
  white-space: pre;
  background: linear-gradient(160deg, rgba(150, 155, 185, 0.18), rgba(60, 62, 90, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.squad-doc--1 { left: 50%; top: 30%; transform: rotate(-2deg); }
.squad-doc--2 { left: 61%; top: 20%; }
.squad-doc--3 { left: 70%; top: 44%; }
.squad-doc--4 { left: 46%; top: 62%; filter: blur(1px); }
.squad-docs__glyph { position: absolute; right: 7.5%; top: 13%; font-family: var(--font-serif); font-weight: 900; font-size: calc(28 * var(--su)); line-height: 0.95; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25); letter-spacing: 0.05em; opacity: 0; transition: opacity 1.2s 0.4s; }
.page-squad.is-entered .squad-doc { opacity: 1; transform: none; transition-delay: 0.3s; }
.page-squad.is-entered .squad-doc--1 { transform: rotate(-2deg); }
.page-squad.is-entered .squad-docs__glyph { opacity: 1; }

.squad-stage { position: absolute; inset: 0; pointer-events: none; }
.squad-portrait {
  position: absolute; left: 63%; top: calc(var(--header-h) - 30px); height: calc(100 * var(--vh) + 40px); max-height: calc(1376 * var(--su)); max-width: none; width: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 30%, transparent));
  opacity: 0; translate: calc(var(--dir) * 60px) 20px;
  transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out);
}
.page-squad.is-entered .squad-portrait { opacity: 1; translate: 0 0; transition-delay: 0.15s; }
.page-squad.is-switching .squad-portrait { opacity: 0; translate: calc(var(--dir) * -50px) 0; transition-duration: 0.3s; transition-delay: 0s; }
.page-squad.is-entered .squad-portrait { animation: float 6s ease-in-out infinite 1.2s; }
@keyframes float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

.squad-info { position: absolute; left: calc(186 * var(--su)); top: calc(200 * var(--su)); width: calc(420 * var(--su)); min-width: 320px; z-index: 2; }
.squad-info [data-anim] { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.page-squad.is-entered .squad-info [data-anim] { opacity: 1; transform: none; }
.page-squad.is-entered .squad-info [data-anim]:nth-child(2) { transition-delay: 0.08s; }
.page-squad.is-entered .squad-info [data-anim]:nth-child(3) { transition-delay: 0.16s; }
.page-squad.is-entered .squad-info [data-anim]:nth-child(4) { transition-delay: 0.24s; }
.page-squad.is-switching .squad-info [data-anim] { opacity: 0; transform: translateX(-16px); transition-duration: 0.25s; transition-delay: 0s; }

.squad-title { position: relative; }
.squad-title__ghost {
  position: absolute; left: calc(-6 * var(--su)); top: 50%; transform: translateY(-58%);
  font-family: var(--font-serif); font-weight: 900; font-size: calc(78 * var(--su)); letter-spacing: 0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(150, 140, 220, 0.25);
  pointer-events: none;
}
.squad-title__main {
  position: relative; display: inline-block; white-space: nowrap;
  font-family: var(--font-serif); font-weight: 900; font-size: calc(56 * var(--su) * var(--title-fit, 1)); letter-spacing: 0.035em; line-height: 1.15;
  background: linear-gradient(180deg, #ffffff 0%, #f0eefe 40%, color-mix(in srgb, var(--accent) 65%, #b8b0ff) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.squad-tag { display: flex; align-items: center; gap: calc(16 * var(--su)); margin-top: calc(18 * var(--su)); }
.tag-parchment {
  position: relative; display: inline-grid; place-items: center;
  min-width: calc(165 * var(--su)); height: max(20px, calc(21 * var(--su))); padding: 0 calc(20 * var(--su));
  font-size: max(10.5px, calc(11.5 * var(--su))); font-weight: 800; color: #1d1a16;
  background: linear-gradient(180deg, var(--cream-1), var(--cream-2));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.tag-parchment::before, .tag-parchment::after { content: ''; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: #2b2620; transform: rotate(45deg); }
.tag-parchment::before { left: 6px; }
.tag-parchment::after { right: 6px; }
.squad-tag__icon { display: grid; width: calc(16 * var(--su)); height: calc(16 * var(--su)); min-width: 14px; min-height: 14px; color: color-mix(in srgb, var(--accent) 70%, #a58bff); }
.squad-quote { margin-top: calc(36 * var(--su)); font-size: max(13px, calc(13.5 * var(--su))); font-weight: 700; line-height: 1.4; color: #fff; }
.squad-desc { margin-top: calc(22 * var(--su)); display: grid; gap: 0; font-size: max(11.5px, calc(10.8 * var(--su))); line-height: 1.68; color: var(--text-dim); max-height: calc(170 * var(--su) + 40px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; padding-right: 6px; }

.squad-switcher {
  position: absolute; left: calc(186 * var(--su)); top: calc(615 * var(--su)); z-index: 3;
  display: flex; align-items: center; gap: calc(12 * var(--su));
  padding: calc(8 * var(--su)) calc(12 * var(--su));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 42, 60, 0.88), rgba(18, 19, 30, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out) 0.35s, transform 0.8s var(--ease-out) 0.35s;
}
.page-squad.is-entered .squad-switcher { opacity: 1; transform: none; }
.squad-switcher__avatars { display: flex; gap: calc(12 * var(--su)); }
.avatar {
  position: relative; width: calc(48 * var(--su)); height: calc(48 * var(--su)); min-width: 42px; min-height: 42px;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  filter: saturate(0.7) brightness(0.8);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, filter 0.3s;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar:hover { filter: none; transform: translateY(-2px); }
.avatar.is-active { filter: none; box-shadow: 0 0 0 2px #1a1a24, 0 0 0 4px var(--cream-2), 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); transform: scale(1.06); }

.squad-toggle {
  position: absolute; left: 86.3%; top: calc(615 * var(--su)); z-index: 3;
  width: calc(30 * var(--su)); height: calc(58 * var(--su)); min-width: 30px; min-height: 56px;
  border-radius: 999px;
  background: rgba(20, 20, 30, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0; transition: opacity 0.6s 0.5s;
}
.page-squad.is-entered .squad-toggle { opacity: 1; }
.squad-toggle span {
  position: absolute; left: 50%; bottom: 3px; width: calc(25 * var(--su)); height: calc(25 * var(--su)); min-width: 25px; min-height: 25px;
  display: grid; place-items: center; transform: translateX(-50%);
  border-radius: 50%; font-size: 8px; font-weight: 800; color: #1d1a16;
  background: radial-gradient(circle at 40% 35%, #fffaf0, #e3d2a6);
  transition: bottom 0.35s var(--ease-out);
}
.squad-toggle.is-on span { bottom: calc(100% - 3px - max(25px, 25 * var(--su))); }

.squad-skills {
  position: absolute; left: calc(1060 * var(--su)); top: calc(330 * var(--su)); width: calc(250 * var(--su)); min-width: 230px;
  padding: 18px 20px; z-index: 2; pointer-events: auto;
  background: linear-gradient(160deg, rgba(20, 22, 40, 0.9), rgba(10, 10, 20, 0.85));
  border: 1px solid rgba(232, 215, 171, 0.3);
  opacity: 0; visibility: hidden; transform: translateX(20px);
  transition: opacity 0.4s, transform 0.5s var(--ease-out), visibility 0.4s;
}
.squad-skills.is-visible { opacity: 1; visibility: visible; transform: none; }
.squad-skills__title { font-family: var(--font-serif); font-size: 15px; color: var(--cream-2); margin-bottom: 12px; }
.squad-skills ul { display: grid; gap: 10px; }
.squad-skills li { display: grid; grid-template-columns: 1fr 34px; gap: 4px 10px; align-items: center; font-size: 12px; font-weight: 700; }
.squad-skills__bar { grid-column: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.squad-skills__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--slime-deep), var(--accent)); transition: width 0.9s var(--ease-out) 0.15s; }
.squad-skills.is-visible .squad-skills__bar i { width: var(--v); }
.squad-skills b { grid-column: 2; grid-row: 1 / span 2; text-align: right; color: var(--cream-2); font-family: var(--font-serif); }

/* Tablet / small laptop: keep the portrait clear of the copy column and the STAT panel on-screen. */
@media (max-width: 1100px) and (min-width: 769px) {
  .squad-portrait { left: 71%; top: calc(var(--header-top) + var(--header-h) + 8px); height: calc(100 * var(--vh) - var(--header-top) - var(--header-h) - 24px); }
  .squad-info { width: min(44vw, 400px); min-width: 0; }
  .squad-doc--4, .squad-docs__glyph { display: none; }
  .squad-skills { left: auto; right: calc(24px + 4vw); }
  .squad-toggle { left: auto; right: 4vw; }
}

/* Mobile: portrait on top, info sheet + avatar bar docked to the bottom.
   --info-h is measured by pages/squad.js so the STAT toggle/panel always sit right above the sheet. */
@media (max-width: 768px) {
  .page-squad { --bar-h: calc(68px + env(safe-area-inset-bottom)); --dock: calc(var(--bar-h) + var(--info-h, 132px)); }
  .intro-card__content { left: 24px; right: 24px; top: 38%; }
  .intro-card__title { font-size: 34px; }

  .squad-docs { display: none; }
  .squad-portrait {
    left: 50%; top: calc(var(--header-h) + 4px);
    height: max(300px, calc(100 * var(--vh) - var(--header-h) - var(--dock) + 36px)); min-height: 0;
  }
  .squad-info {
    left: 0; right: 0; top: auto; bottom: var(--bar-h); width: auto; min-width: 0;
    padding: 16px 18px 14px;
    background: linear-gradient(180deg, rgba(14, 15, 26, 0.6), rgba(10, 10, 18, 0.96) 40%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .squad-title { max-width: 100%; overflow-x: clip; }
  .squad-title__main { font-size: calc(30px * var(--title-fit, 1)); }
  .squad-title__ghost { font-size: 42px; }
  .squad-tag { margin: 0; gap: 8px; }
  .tag-parchment { min-width: 0; font-size: 11px; padding: 0 16px; white-space: nowrap; }
  .squad-quote { margin-top: 0; font-size: 13px; line-height: 1.45; }
  .squad-desc { display: none; }
  .squad-switcher {
    left: 0; right: 0; top: auto; bottom: 0; height: var(--bar-h); justify-content: space-between;
    border-radius: 0; padding: 0 14px env(safe-area-inset-bottom);
    background: rgba(8, 8, 14, 0.97);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .squad-switcher__avatars { gap: 8px; }
  .avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .squad-toggle {
    left: auto; right: 16px; top: auto; bottom: calc(var(--dock) + 12px);
    width: 56px; height: 30px; min-width: 0; min-height: 30px;
  }
  .squad-toggle span { bottom: 2px; left: 3px; transform: none; transition: left 0.35s var(--ease-out); }
  .squad-toggle.is-on span { bottom: 2px; left: calc(100% - 28px); }
  .squad-skills {
    left: 16px; right: 16px; top: auto; bottom: calc(var(--dock) + 54px); width: auto; min-width: 0;
    max-height: calc(100 * var(--vh) - var(--header-h) - var(--dock) - 70px); overflow-y: auto;
  }
}
@media (max-width: 768px) and (max-height: 640px) {
  .squad-quote { display: none; }
}