/*
 * homepage.css — The Gentle Studio
 * Three-view homepage: side-scroll, vertical, grid
 */

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

/* ── Canvas ──────────────────────────────────────────────
 * .tgs-canvas is the project grid as a *box*: every rule below describes how
 * cards behave inside it and none of them care where that box is. The views
 * measure it with clientWidth/clientHeight and bind their scroll handlers to
 * it, so the same engine drives a full-page grid and one sitting in a layout
 * block.
 *
 * #canvas is only the page-level shell that pins that box to the viewport. */
.tgs-canvas {
  background: var(--color-bg);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tgs-canvas::-webkit-scrollbar { display: none; }

#canvas {
  position: fixed;
  top: 66px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

/* Inside a layout block the grid fills its container instead. */
.projects-block > .tgs-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Floating View Toggle — right-middle ─────────────────── */
.view-toggle-panel {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-muted);
  box-shadow: 0 4px 20px var(--veil-faint);
}
.view-toggle-panel .view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: inherit;
  transition: color var(--duration-fast), background var(--duration-fast);
  padding: 0;
}
.view-toggle-panel .view-btn + .view-btn {
  border-top: 1px solid var(--color-faint);
}
.view-toggle-panel .view-btn:hover { color: var(--color-ink); }
.view-toggle-panel .view-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.view-toggle-panel .view-btn.active { color: var(--color-ink); background: var(--color-faint); }

/* ── Category Filter ─────────────────────────────────────────
 * Text in the middle of the nav, not a bar of its own. It used to float below
 * the nav in a bordered, shadowed box — a second piece of chrome competing
 * with the real one. The current category is marked by weight alone, so
 * nothing boxes the words in.
 *
 * A grid embedded in a page layout keeps its own host (.projects-filter, in
 * project.css) and never touches the nav — a block inside a page should not
 * rewrite the site's chrome. The tab styling below is shared, so both places
 * read the same. #catFilter is the third host, for a portfolio page with no
 * layout; it keeps its positioning and loses the box. */
#catFilter:empty { display: none; }
#catFilter {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  white-space: nowrap;
}
.cat-tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 9px 14px;
  border: none;
  cursor: inherit;
  background: transparent;
  color: var(--color-muted);
  /* Reserve the bold width up front, so the row does not shift as the active
     item changes. */
  transition: color var(--duration-fast);
}
.cat-tab::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}
.cat-tab:hover  { color: var(--color-ink); }
.cat-tab:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }

/* ── Narrowing by descriptor ──────────────────────────────────────────
   Category is a tab because it is a place you go; client and agency are
   dropdowns because they combine and because there can be many of each.
   Styled to sit in the same line as the tabs and read as the same family of
   control — no border until it is doing something, and then the ink colour
   the active tab uses. */
.cat-facet {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 8px 22px 8px 10px;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-muted);
  cursor: inherit;
  max-width: 190px;
  appearance: none;
  /* The caret, drawn rather than fetched — one less request and it takes the
     colour of the control. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px top 52%, right 7px top 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.cat-facet:hover  { color: var(--color-ink); }
.cat-facet.active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.cat-facet:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.cat-facet option { text-transform: none; letter-spacing: 0; color: var(--color-ink); }

.cat-clear { color: var(--color-placeholder); }
.cat-clear:hover { color: var(--color-danger); }
.cat-tab.active { color: var(--color-ink); font-weight: 700; }


/* ════════════════════════════════════════════════════════════
   PROJECT CARDS — shared styles across all views
════════════════════════════════════════════════════════════ */
.card {
  position: absolute;
  cursor: inherit;
  text-decoration: none;
  color: inherit;
  will-change: transform, opacity;
}

.card-inner {
  position: relative;
  overflow: hidden;
  background: var(--color-faint);
  border-radius: var(--radius);
}

.card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-normal) ease;
  filter: saturate(0.85) brightness(0.96);
  will-change: transform;
}
.card:hover .card-img { transform: scale(1.04); filter: saturate(1) brightness(1); }

.card-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.85) brightness(0.96);
  transition: filter var(--duration-normal) ease;
  pointer-events: none;
}
.card:hover .card-video { filter: saturate(1) brightness(1); }

.card-placeholder {
  width: 100%; height: 100%;
  background: var(--color-faint);
}

.card-caption {
  margin-top: 11px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card-caption-name {
}
.card-caption-id {
}


/* ════════════════════════════════════════════════════════════
   VIEW 1: SIDE-SCROLL
════════════════════════════════════════════════════════════ */
.tgs-canvas[data-view="side-scroll"] {
  overflow-x: auto;
  overflow-y: hidden;
}

.tgs-canvas[data-view="side-scroll"] .card {
  /* JS positions absolutely with parallax transform */
}

.tgs-canvas[data-view="side-scroll"] .card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--veil-strong) 0%, var(--veil-medium) 20%, var(--veil-soft) 45%, var(--veil-faint) 70%, transparent 100%);
  padding: 40px 20px 14px;
}
.tgs-canvas[data-view="side-scroll"] .card-caption-name,
.tgs-canvas[data-view="side-scroll"] .card-caption-id {
  color: var(--color-overlay);
}
.tgs-canvas[data-view="side-scroll"] .card-caption-id {
  color: var(--color-on-image);
}

/* Floating idle animation */
@keyframes cardFloat {
  0%, 100% { translate: 0 0; }
  25%      { translate: calc(var(--float-x, 4px)) calc(var(--float-y, -6px)); }
  50%      { translate: calc(var(--float-x, 4px) * -0.6) calc(var(--float-y, -6px) * 0.8); }
  75%      { translate: calc(var(--float-x, 4px) * 0.3) calc(var(--float-y, -6px) * -0.5); }
}

.tgs-canvas[data-view="side-scroll"] .card.floating {
  animation: cardFloat var(--float-dur, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Scroll reveal */
.tgs-canvas[data-view="side-scroll"] .card.scroll-hidden {
  opacity: 0;
  scale: 0.82;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              scale 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.tgs-canvas[data-view="side-scroll"] .card.scroll-revealed {
  opacity: 1;
  scale: 1;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              scale 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ════════════════════════════════════════════════════════════
   VIEW 2: VINYL STACK
════════════════════════════════════════════════════════════ */
.tgs-canvas[data-view="vertical"] {
  overflow: hidden;
}

.tgs-canvas[data-view="vertical"] .card {
  position: absolute;
  will-change: transform, opacity;
}

.tgs-canvas[data-view="vertical"] .card-inner {
  box-shadow: 0 8px 40px var(--veil-soft), 0 2px 8px var(--veil-faint);
  border-radius: 10px;
}

.tgs-canvas[data-view="vertical"] .card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: linear-gradient(to top, var(--veil-strong) 0%, var(--veil-medium) 20%, var(--veil-soft) 45%, var(--veil-faint) 70%, transparent 100%);
  padding: 40px 20px 14px;
  border-radius: 0 0 10px 10px;
}
.tgs-canvas[data-view="vertical"] .card.in-focus .card-caption {
  opacity: 1;
}
.tgs-canvas[data-view="vertical"] .card-caption-name,
.tgs-canvas[data-view="vertical"] .card-caption-id {
  color: var(--color-overlay);
}
.tgs-canvas[data-view="vertical"] .card-caption-id {
  color: var(--color-on-image);
}


/* ════════════════════════════════════════════════════════════
   VIEW 3: GRID
════════════════════════════════════════════════════════════ */
.tgs-canvas[data-view="grid"] {
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 2px;
  padding: 0;
}

.tgs-canvas[data-view="grid"] .card {
  position: relative;
  overflow: hidden;
}
/* Corner squares — bg-colored 10px squares at each corner tip */
.tgs-canvas[data-view="grid"] .card::before,
.tgs-canvas[data-view="grid"] .card::after,
.tgs-canvas[data-view="grid"] .card-inner::before,
.tgs-canvas[data-view="grid"] .card-inner::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-bg);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tgs-canvas[data-view="grid"] .card.grid-settled::before,
.tgs-canvas[data-view="grid"] .card.grid-settled::after,
.tgs-canvas[data-view="grid"] .card.grid-settled .card-inner::before,
.tgs-canvas[data-view="grid"] .card.grid-settled .card-inner::after {
  opacity: 1;
}
.tgs-canvas[data-view="grid"] .card::before        { top: 0; left: 0; }
.tgs-canvas[data-view="grid"] .card::after         { top: 0; right: 0; }
.tgs-canvas[data-view="grid"] .card-inner::before  { bottom: 0; left: 0; }
.tgs-canvas[data-view="grid"] .card-inner::after   { bottom: 0; right: 0; }
/* Row span matches column span, and layoutGrid sets grid-auto-rows to one
   column's width — that pairing is what makes a card square. JS writes both
   inline; these keep the static case honest. */
.tgs-canvas[data-view="grid"] .card[data-size="large"]  { grid-column: span 4; grid-row: span 4; }
.tgs-canvas[data-view="grid"] .card[data-size="medium"] { grid-column: span 3; grid-row: span 3; }
.tgs-canvas[data-view="grid"] .card[data-size="small"]  { grid-column: span 2; grid-row: span 2; }

.tgs-canvas[data-view="grid"] .card-inner {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
}

.tgs-canvas[data-view="grid"] .card-img,
.tgs-canvas[data-view="grid"] .card-video,
.tgs-canvas[data-view="grid"] .card-placeholder {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* Caption as hover overlay in grid */
.tgs-canvas[data-view="grid"] .card-caption {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, var(--veil-strong) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--duration-fast);
  pointer-events: none;
}
.tgs-canvas[data-view="grid"] .card:hover .card-caption { opacity: 1; }
.tgs-canvas[data-view="grid"] .card-caption-name,
.tgs-canvas[data-view="grid"] .card-caption-id {
  color: var(--color-overlay);
}
.tgs-canvas[data-view="grid"] .card-caption-name {
  font-size: 9px;
}
.tgs-canvas[data-view="grid"] .card-caption-id {
  font-size: 8px;
  color: var(--color-on-image);
  margin-top: 2px;
}


/* ════════════════════════════════════════════════════════════
   FIRST POPULATION ANIMATION
════════════════════════════════════════════════════════════ */
@keyframes cardPopulate {
  from {
    opacity: 0;
    transform: translate(var(--pop-x, 0px), var(--pop-y, 40px)) scale(var(--pop-scale, 0.85));
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.card.populating {
  animation: cardPopulate 0.7s var(--ease-out) forwards;
  animation-delay: var(--pop-delay, 0s);
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════
   SCROLL HINT
════════════════════════════════════════════════════════════ */
#scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 50;
  pointer-events: none;
}
#scroll-hint.visible { opacity: 1; }

.scroll-hint-line {
  width: 48px;
  height: 1px;
  background: var(--color-muted);
  position: relative;
  overflow: hidden;
}
.scroll-hint-line::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-ink);
  animation: scanline 2.4s ease-in-out infinite;
}
@keyframes scanline { 0% { left: -100%; } 100% { left: 100%; } }