/* ============================================================
   Steorra — opening + Projects page (index pages only)
   ------------------------------------------------------------
   Layering (all fixed, full screen):
     0  .shader-bg        animated backdrop — never moves
     1  .projects-scene   transparent WebGL canvas: the card ring only
     2  .slider           the projects panel: PROJECTS / COMPANY, copyright
                          (click-transparent except the COMPANY button)
     3  .top-bar--fixed   brand (star + wordmark) + EN/JA + CONTACT
    30  .proj-backdrop    click-to-close layer while a card is open
    40  .proj-panel       project detail (glass card, same as .facts)
   The page does not scroll. On load the company business card is shown
   alone and still; projects-3d.min.js then moves it into the ring as the
   other cards appear and the ring starts turning (body.at-projects marks
   the end, fading in the chrome). Any input skips the hold.
   ============================================================ */

html, body {
  height: 100%;
  overflow: hidden;
}

/* ---- slide stage ---- */

.slider {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  /* clicks fall through to the ring canvas below; only the button opts back in */
  pointer-events: none;
}

.slide-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* the projects panel is a screen-sized layer whose chrome fades in once the
   ring is in place */
.slide-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.slide-panel--projects { z-index: 1; }
.copyright--projects {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'DotGothic16', monospace;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.at-projects .copyright--projects { opacity: 0.55; }
body.is-focused .copyright--projects { opacity: 0; }

/* ---- header brand ---- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  color: #ECEEF6;
  text-decoration: none;
  letter-spacing: 0;          /* .top-bar tracks its labels; the wordmark stays as designed */
  line-height: 1;
}
.brand:hover { text-decoration: none; color: #FFFFFF; }
.pixel-star--brand { font-size: 2px; }          /* 15 cells × 2px = 30px */
.pixel-star--brand > i { animation: none; }
.wordmark-logo--brand { font-size: 28px; }

/* ---- shared fixed header ---- */

.top-bar--fixed {
  position: fixed;
  top: 32px;
  left: 40px;
  right: 40px;
  width: auto;
  z-index: 3;
  /* EN / JA and CONTACT: an explicit face, so phones (whose default is a
     serif) match the desktop's sans */
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---- WebGL canvas: card ring ---- */

.projects-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.projects-scene.is-ready { opacity: 1; }
.projects-scene { touch-action: none; }   /* drags turn the ring / scroll the phone column; the page never scrolls */
/* cards become clickable only once panel 2 has arrived (p ≥ 0.9) */
body.at-projects .projects-scene { pointer-events: auto; }

/* ---- panel 2: projects ---- */

.slide-panel--projects {
  font-family: 'DotGothic16', monospace;
  color: #ECEEF6;
}

/* a faint pool of light behind the ring, for card legibility over the backdrop */
.ring-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84vw, 940px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 238, 246, 0.07) 0%, rgba(236, 238, 246, 0.025) 38%, rgba(236, 238, 246, 0) 62%);
  pointer-events: none;
}

.projects-actions {
  position: absolute;
  bottom: 48px;
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* PROJECTS / COMPANY: text buttons at the bottom right. PROJECTS lines the
   project cards up in a row (pressed state = row shown); COMPANY opens the
   business card directly. */
.projects-actions {
  right: 40px;
  display: flex;
  align-items: center;
  gap: 36px;
  pointer-events: none;
}
.projects-action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: #ECEEF6;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.projects-action .icon-star { margin-right: 6px; }
.projects-action:hover,
.projects-action[aria-pressed="true"] { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
body.at-projects .projects-actions { opacity: 0.9; }
body.at-projects .projects-action { pointer-events: auto; }
body.is-focused .projects-actions { opacity: 0; }
body.is-focused .projects-action { pointer-events: none; }

/* ---- detail panel (glass) ----
   One layout for every card, top to bottom: index / year, name, short
   description, ABOUT (long description), COMPANY (logo + name, linked),
   KPI (free tiles). Empty sections are hidden by the script. ABOUT takes
   any spare height so COMPANY and KPI sit at the bottom of the box. */

.proj-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
}
body.is-focused .proj-backdrop { display: block; }

.proj-panel {
  position: fixed;
  z-index: 40;
  /* desktop: left / top / width / height are set per card by the script —
     for a portrait card the panel is the card's twin (same box); the values
     below are the landscape card's and the fallback */
  right: 40px;
  top: 50%;
  width: min(clamp(480px, 34vw, 600px), calc(100vw - 48px));
  max-height: calc(100vh - 160px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 32px 36px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 238, 246, 0.25) transparent;
  border-radius: 24px;
  border: 1px solid rgba(236, 238, 246, 0.1);
  background: rgba(8, 8, 14, 0.66);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(236, 238, 246, 0.06);
  font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  color: #ECEEF6;
  letter-spacing: 0;
  transform: translateY(-50%) translateX(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.1s, transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 0.1s;
}
body.is-focused .proj-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* wide, two-column variant (the landscape business card): header across,
   ABOUT on the left, COMPANY and PROFILE stacked on the right */
.proj-panel--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 44px;
  align-content: start;
}
.proj-panel--wide .proj-head { grid-column: 1 / -1; }
.proj-panel--wide #proj-sec-about { grid-column: 1; grid-row: 2 / span 2; }
.proj-panel--wide #proj-sec-company { grid-column: 2; grid-row: 2; }
.proj-panel--wide #proj-sec-kpis { grid-column: 2; grid-row: 3; align-self: start; }
.proj-panel--wide .proj-desc { font-size: 14px; line-height: 1.7; }

/* labels and small print keep the site's pixel face */
.proj-index,
.proj-label,
.proj-company-url,
.proj-kpis dt {
  font-family: 'DotGothic16', monospace;
  text-transform: uppercase;
}

.proj-head { padding-right: 44px; }
.proj-index {
  font-size: 12px;
  letter-spacing: 0.24em;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
.proj-title {
  margin: 12px 0 8px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.proj-tagline {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.72;
}

.proj-sec {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(236, 238, 246, 0.12);
}
.proj-sec[hidden] { display: none; }
#proj-sec-about { flex: 1 0 auto; }
.proj-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  opacity: 0.45;
}
.proj-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  white-space: pre-line;          /* blank line in the data = paragraph break */
  text-align: justify;            /* flush both edges; the last line of a paragraph stays left */
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;                  /* English: hyphenate rather than open wide gaps */
  overflow-wrap: anywhere;
  color: rgba(236, 238, 246, 0.88);
}
/* Japanese: justified too. With no word spaces the browser distributes the
   slack between characters, so a long Latin run wrapping whole ("Development」")
   would leave the line above gap-toothed. The script wraps Latin runs in
   <span lang="en"> so `hyphens: auto` can break them, and the copy in
   projects-data.js is worded so the brand names fall mid-line. */
html[lang="ja"] .proj-desc {
  text-justify: inter-character;
  line-break: strict;
  overflow-wrap: break-word;
}
.proj-desc [lang="en"] { -webkit-hyphens: auto; hyphens: auto; }

/* company: one linked row, logo tile + name + host */
.proj-company {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(236, 238, 246, 0.08);
  background: rgba(236, 238, 246, 0.05);
  color: #ECEEF6;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.proj-company:hover { background: rgba(236, 238, 246, 0.1); border-color: rgba(236, 238, 246, 0.16); text-decoration: none; }
.proj-company.is-static { pointer-events: none; }
.proj-company.is-static .proj-ext { display: none; }
.proj-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(236, 238, 246, 0.08);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.proj-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; display: block; }
.proj-logo--wide { flex-basis: 112px; width: 112px; }        /* wordmark-shaped logos */
.proj-logo--wide img { padding: 10px 12px; }
.proj-logo--cover img { padding: 0; object-fit: cover; }   /* logoFit: 'cover' */
.proj-company-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.proj-company-name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.proj-company-url {
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-ext { font-size: 16px; opacity: 0.55; }

/* KPI: tiles, two per row; multi-line or long values take the row */
.proj-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.proj-kpis .kpi {
  padding: 14px 16px 13px;
  border-radius: 14px;
  border: 1px solid rgba(236, 238, 246, 0.08);
  background: rgba(236, 238, 246, 0.05);
  min-width: 0;
}
.proj-kpis .kpi--wide { grid-column: 1 / -1; }
.proj-kpis dt {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  opacity: 0.5;
}
.proj-kpis dd {
  margin: 7px 0 0;
  font-size: 15px;                 /* text values: the same weight as the panel copy */
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.proj-kpis .kpi--num dd {          /* numbers (a KPI) read large */
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.proj-kpis .kpi--wide dd {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  white-space: pre-line;
  letter-spacing: 0;
}

.proj-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(236, 238, 246, 0.2);
  background: rgba(8, 8, 14, 0.4);
  color: #ECEEF6;
  font: 14px/1 'DotGothic16', monospace;
  cursor: pointer;
  transition: background 0.15s ease;
}
.proj-close:hover { background: rgba(236, 238, 246, 0.14); }

/* short desktop viewports (laptops): tighter panel so more of it fits before scrolling */
@media (min-width: 721px) and (max-height: 800px) {
  .proj-panel { padding: 28px 32px 24px; }
  .proj-title { font-size: 28px; margin: 10px 0 6px; }
  .proj-tagline { font-size: 15px; }
  .proj-sec { margin-top: 18px; padding-top: 16px; }
  .proj-label { margin-bottom: 10px; }
  .proj-desc { font-size: 14px; line-height: 1.7; }
  .proj-company { padding: 10px 12px; }
  .proj-kpis .kpi { padding: 11px 14px 10px; }
  .proj-kpis .kpi--num dd { font-size: 18px; }
  .proj-close { top: 16px; right: 16px; }
}

/* ---- mobile ---- */

@media (max-width: 720px) {
  .proj-panel {
    right: 16px;
    left: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
    /* a fixed height whatever the card's content (the panel scrolls inside),
       so the card centred above it is always the same size. The script
       reads this height to place the card (focusPose). */
    height: 50vh;
    height: 50svh;
    max-height: none;
    padding: 24px 22px 22px;
    border-radius: 20px;
    transform: translateY(16px);
  }
  body.is-focused .proj-panel { transform: translateY(0); }
  .proj-title { font-size: 26px; }
  .proj-tagline { font-size: 15px; }
  .proj-sec { margin-top: 20px; padding-top: 18px; }
  .proj-kpis .kpi--num dd { font-size: 18px; }
  .proj-close { top: 16px; right: 16px; }
}

@media (max-width: 600px) {
  /* mirror .page's mobile padding (24px) */
  .top-bar--fixed {
    top: 24px;
    left: 24px;
    right: 24px;
  }
  /* narrow screens: PROJECTS / COMPANY and the copyright stack at the left */
  .projects-actions { font-size: 11px; left: 24px; bottom: 64px; right: auto; gap: 24px; }
  .copyright--projects {
    left: 24px;
    bottom: 32px;
    transform: none;
    font-size: 11px;
  }

  /* header: brand at the left, CONTACT + EN/JA together at the right (the
     brand takes the top-left corner) */
  .top-bar--fixed .top-bar-group { display: flex; gap: 8px; }
  .top-bar--fixed .btn { order: 0; }
  .top-bar--fixed .lang-switch { order: 0; }
  .top-bar--fixed .btn,
  .top-bar--fixed .lang-switch { width: 100px; }
  /* CONTACT in the 100px pill: tighter tracking and gap, and the star's
     6px left overflow counted in, so the star sits in from the edge and
     nearer the label instead of against the pill's rim */
  .top-bar--fixed .btn { gap: 6px; letter-spacing: 0.1em; }
  .top-bar--fixed .btn .icon-star { margin-left: 6px; margin-right: 5px; }
  .brand { gap: 10px; height: 36px; }
  .pixel-star--brand { font-size: 1.5px; }       /* 22.5px */
  .wordmark-logo--brand { font-size: 22px; }
}

/* ---- a phone held sideways (short, wider than tall) ----
   Laid out like the desktop with tight margins: compact header, the
   PROJECTS / COMPANY buttons and the copyright in the bottom corners, and
   the open card at the left with the panel beside it at the same height
   (the script sets the panel's left / top / width / height: isPhoneLandscape
   in projects-3d.js, which mirrors this query). One column, smaller type. */
@media (max-height: 520px) and (orientation: landscape) {
  .top-bar--fixed { top: 16px; left: 24px; right: 24px; }
  .top-bar--fixed .btn,
  .top-bar--fixed .lang-switch { width: 120px; height: 36px; font-size: 11px; }
  .top-bar--fixed .lang-switch a { height: 26px; font-size: 11px; }
  .brand { gap: 10px; height: 36px; }
  .pixel-star--brand { font-size: 1.5px; }
  .wordmark-logo--brand { font-size: 22px; }
  .ring-glow { width: min(84vw, 130vh); }

  .projects-actions { left: auto; right: 24px; bottom: 16px; font-size: 11px; gap: 24px; }
  .copyright--projects { left: 24px; right: auto; bottom: 16px; transform: none; font-size: 11px; }

  .proj-panel {
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;              /* left / top / width / height come from the script */
    max-height: none;
    padding: 18px 20px;
    border-radius: 18px;
    transform: translateY(-50%) translateX(16px);
  }
  body.is-focused .proj-panel { transform: translateY(-50%) translateX(0); }
  .proj-head { padding-right: 36px; }
  .proj-title { font-size: 22px; margin: 8px 0 6px; }
  .proj-tagline { font-size: 14px; }
  .proj-sec { margin-top: 16px; padding-top: 14px; }
  .proj-label { margin-bottom: 8px; }
  .proj-desc { font-size: 13.5px; line-height: 1.7; }
  .proj-company { padding: 10px 12px; }
  .proj-kpis .kpi { padding: 10px 12px 9px; }
  .proj-kpis .kpi--num dd { font-size: 17px; }
  .proj-close { top: 12px; right: 12px; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .proj-panel { transition: opacity 0.2s ease; }
  .projects-scene { transition: none; }
}