/* =========================================================================
   furayoshi.com/connect — big-screen socials page
   -------------------------------------------------------------------------
   A full-viewport page for TV displays / projected decks. Reuses the design
   tokens from main.css (three themes via data-theme), so it stays in the
   same colour system as the rest of the site. Panels are sized in clamp()
   so they scale from laptops up to wall-sized displays.

   Layout: 2x2 grid — community / socials / video / more — plus a header,
   an animated meteors canvas layer (meteors.js), and a Home Page button
   pinned at the bottom. On narrow screens the grid collapses to one
   column and the page becomes scrollable.
   ========================================================================= */

/* ---- ambient canvas (meteors.js) -----------------------------------
   Sits above the star field canvas (z-index -1) but below the page
   content; pointer-events none so tiles stay clickable. */

#furayoshi-sky-extras {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

/* ---- page scaffold ---------------------------------------------------- */

html, body { height: 100%; }

.connect {
  position: relative;
  z-index: 1;               /* above the meteors canvas (z-index 0) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.5vw, 3rem) clamp(1rem, 4vw, 5rem) clamp(0.8rem, 2vh, 2rem);
  gap: clamp(0.8rem, 1.8vh, 1.8rem);
  box-sizing: border-box;
}

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

.connect-head { text-align: center; flex: 0 0 auto; }

.connect-title {
  margin: 0;
  font-size: clamp(1.7rem, 4.2vw, 3.6rem);
  line-height: 1.15;
}

/* second-level emphasis in the title, echoes the hero's split colours */
.connect-title .accent { color: var(--accent); }

/* the connect page header is name-only: none of the theme's
   h1::after accent bar */
.connect-title { padding-bottom: 0; }
.connect-title::after { display: none; }

/* ---- panels grid --------------------------------------------------------
   Big screens: 2x2, full height, no scrolling. Small screens: 1 column. */

/* gallery packing: boxes are only as tall as their links need —
   like photos of different aspect ratios packed into equal-height
   columns — and the flexible tail box (more / Home Page) soaks up
   whatever space is left so the columns sit flush */
.connect-grid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.6rem);
  min-height: 0;
  padding-bottom: 0.3rem;
}
.connect-col { display: contents; }

/* mobile: unwrap the two gallery columns and restore source order */
@media (max-width: 859px) {
  .connect-panel[data-panel="community"] { order: 1; }
  .connect-panel[data-panel="im"]        { order: 2; }
  .connect-panel[data-panel="socials"]   { order: 3; }
  .connect-panel[data-panel="video"]     { order: 4; }
  .connect-panel[data-panel="more"]      { order: 5; }
  .connect-home                          { order: 6; }
}

@media (min-width: 860px) and (min-height: 560px) {
  .connect-grid { flex-direction: row; }
  .connect-col {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.5vw, 1.6rem);
    min-height: 0;
  }
  .connect-col--main { flex: 1 1 0; }
  .connect-col--side { flex: 1.1 1 0; }
  .connect-panel[data-panel="more"] { flex: 1 1 auto; }
  /* Home Page button: flexible, pinned to the bottom so both
     gallery columns end flush */
  .connect-home {
    flex: 1 1 auto;
    align-items: flex-end;
    padding: 0 0 0.4rem;
  }
}

.connect-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(0.7rem, 1.4vw, 1.4rem) clamp(0.8rem, 1.6vw, 1.6rem);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(3px);
}

/* per-panel category tints, drawn from the palette tokens */
.connect-panel[data-panel="community"] { --panel-accent: var(--mint); }
.connect-panel[data-panel="socials"]   { --panel-accent: var(--lilac); }
.connect-panel[data-panel="video"]     { --panel-accent: var(--coral); }
.connect-panel[data-panel="more"]      { --panel-accent: var(--info); }
.connect-panel[data-panel="im"]       { --panel-accent: var(--secondary); }

.connect-panel-title {
  margin: 0 0 clamp(0.4rem, 1vh, 0.9rem);
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--panel-accent);
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.connect-panel-title::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: var(--radius-pill);
  background: var(--panel-accent);
  flex: 0 0 auto;
}

/* ---- link tiles --------------------------------------------------------- */

.connect-tiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.5rem, 1vh, 0.9rem);
  flex: 1 1 auto;
  min-height: 0;
}

.connect-tile {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1.3rem);
  padding: clamp(0.5rem, 1.1vh, 0.95rem) clamp(0.7rem, 1.3vw, 1.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 160ms ease, border-color 160ms ease,
              background-color 160ms ease, box-shadow 160ms ease;
}

.connect-tile:hover,
.connect-tile:focus-visible {
  transform: translateY(-0.18rem);
  border-color: var(--panel-accent);
  background: var(--surface-card-strong);
  box-shadow: 0 10px 34px -18px var(--panel-accent),
              0 0 0 1px var(--panel-accent);
}

.connect-tile:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 3px; }

/* the glyph chip: a roundish badge carrying the hand-drawn icon */
.connect-tile-icon {
  flex: 0 0 auto;
  width: clamp(2.4rem, 4.2vw, 4rem);
  height: clamp(2.4rem, 4.2vw, 4rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24%;
  background: color-mix(in srgb, var(--panel-accent) 14%, transparent);
  color: var(--panel-accent);
}
.connect-tile-icon svg {
  width: 58%;
  height: 58%;
  display: block;
}

.connect-tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.connect-tile-name {
  font-size: clamp(1.05rem, 1.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: inherit;
}

.connect-tile-handle {
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 1.05vw, 0.92rem);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-tile-arrow {
  margin-left: auto;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  color: var(--text-tertiary);
  transition: transform 160ms ease, color 160ms ease;
  flex: 0 0 auto;
}
.connect-tile:hover .connect-tile-arrow {
  transform: translateX(4px);
  color: var(--panel-accent);
}

/* "more" tile: a single big call-to-action, centred in its panel */
.connect-tile--more { justify-content: center; text-align: left; }

/* ---- home page button: last grid cell on big screens, centred ---- */

.connect-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.connect-home a {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: clamp(0.55rem, 1.3vh, 0.95rem) clamp(1.6rem, 3.4vw, 3rem);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: clamp(0.85rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease,
              box-shadow 160ms ease;
}

.connect-home svg {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}

.connect-home a:hover,
.connect-home a:focus-visible {
  color: var(--text-inverse);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -16px var(--accent);
}
.connect-home a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- big-screen only: lock everything into one non-scrolling viewport --- */

@media (min-width: 860px) and (min-height: 560px) {
  /* big screens fill one screen of content; the footer flows below it
   like on every other page (reachable by normal scrolling) */

  .connect-panel {
    padding: clamp(0.7rem, 1.15vh, 1.15rem) clamp(0.9rem, 1.25vw, 1.5rem);
    gap: clamp(0.35rem, 0.7vh, 0.7rem);
  }
  .connect-tiles { gap: clamp(0.4rem, 1vh, 0.8rem); }
  .connect-tile {
    flex: 1 1 0;
    min-height: clamp(2.6rem, 9vh, 4.3rem);
    padding: clamp(0.3rem, 0.95vh, 0.75rem) clamp(0.85rem, 1.1vw, 1.25rem);
    gap: clamp(0.55rem, 0.85vw, 0.85rem);
    border-radius: clamp(0.75rem, 0.9vw, 1rem);
  }

  /* on big screens the glyph chip and text follow viewport HEIGHT */
  .connect-tile-icon {
    width: clamp(2.1rem, 3.6vh, 3.4rem);
    height: clamp(2.1rem, 3.6vh, 3.4rem);
  }
  .connect-tile-name {
    font-size: clamp(0.82rem, 1.8vh, 1.3rem);
  }
  .connect-tile-handle {
    font-size: clamp(0.5rem, 1.15vh, 0.72rem);
  }
}

/* ---- motion and print ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .connect-tile, .connect-home a, .connect-tile-arrow { transition: none; }
  .connect-tile:hover, .connect-home a:hover { transform: none; }
}