/* Landing page — full-viewport slideshow (matches project-page fade carousel) */

body[data-v2-page='landing'] {
  --v2-landing-bg: #fff;
  --v2-landing-fg: #000;
  --v2-landing-caption-fg: #000;
  --v2-landing-exit-media-duration: 1.1s;
  --v2-landing-exit-logo-duration: 1.1s;
  --v2-landing-exit-gap: 0.45s;
  --v2-landing-crossfade-duration: 1.6s;
  --v2-landing-caption-inset-left: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  --v2-landing-caption-inset-bottom: calc(var(--v2-margin-y, 50px) + env(safe-area-inset-bottom, 0px));
  height: 100vh;
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;
  background: var(--v2-landing-bg);
  color: var(--v2-landing-fg);
  /* Safe area handled on fixed chrome (carousel/logo); avoid body padding band above the carousel. */
  padding: 0;
}

body[data-v2-page='landing'][data-v2-landing-theme='dark'] {
  --v2-landing-bg: #000;
  --v2-landing-fg: #fff;
  --v2-landing-caption-fg: #fff;
}

body[data-v2-page='landing'] #site-preview-root,
body[data-v2-page='landing'] #v2-page-swap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body[data-v2-page='landing'] .v2-landing {
  position: fixed;
  inset: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--v2-landing-bg);
}

/* Hide v2 chrome on landing */
body[data-v2-page='landing'] .v2-settings-panel,
body[data-v2-page='landing'] .v2-settings-toggle {
  display: none !important;
}

body[data-v2-page='landing'] #v2-columnsHud {
  display: none !important;
}

body[data-v2-page='landing'].v2-show-columns #v2-columnsHud,
body[data-v2-page='landing'].v2-show-rows #v2-columnsHud {
  display: block !important;
}

/* Fade carousel — inset box matches project-page outer margins (--v2-margin-x/y) */
.v2-landing-carousel {
  --v2-landing-inset-top: calc(var(--v2-margin-y, 50px) + env(safe-area-inset-top, 0px));
  --v2-landing-inset-bottom: calc(var(--v2-margin-y, 50px) + env(safe-area-inset-bottom, 0px));
  --v2-landing-inset-left: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  --v2-landing-inset-right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
  /* Definite bounds so img max-* % does not collapse (avoids carousel overflow clipping). */
  --v2-landing-media-max-w: calc(100vw - var(--v2-landing-inset-left) - var(--v2-landing-inset-right));
  --v2-landing-media-max-h: calc(100vh - var(--v2-landing-inset-top) - var(--v2-landing-inset-bottom));
  position: fixed;
  top: var(--v2-landing-inset-top);
  right: var(--v2-landing-inset-right);
  bottom: var(--v2-landing-inset-bottom);
  left: var(--v2-landing-inset-left);
  width: auto;
  height: auto;
  overflow: visible;
  visibility: hidden;
  box-sizing: border-box;
  z-index: 15;
  pointer-events: none;
}

.v2-landing-carousel.is-ready {
  visibility: visible;
}

.v2-landing-carousel:not(.is-ready) .v2-landing-slide {
  transition: none !important;
}

.v2-landing-carousel:not(.is-ready) .v2-landing-slide {
  opacity: 0 !important;
}

/* Crossfade on the slide layer so outgoing + incoming images blend (no bg flash). */
.v2-landing-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  box-sizing: border-box;
  visibility: visible;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: none;
}

.v2-landing-carousel.is-ready .v2-landing-slide {
  transition: opacity var(--v2-landing-crossfade-duration) ease-in-out;
}

.v2-landing-slide--active {
  opacity: 1;
  z-index: 1;
}

.v2-landing-slide__media {
  position: relative;
  display: block;
  width: fit-content;
  max-width: var(--v2-landing-media-max-w);
  max-height: var(--v2-landing-media-max-h);
  background: transparent;
  opacity: 1;
  pointer-events: none;
}

.v2-landing-slide--active .v2-landing-slide__media {
  pointer-events: auto;
}

.v2-landing-slide__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--v2-landing-media-max-w);
  max-height: var(--v2-landing-media-max-h);
  object-fit: contain;
  object-position: left bottom;
}

/* Default mode: image bottom-left; stack shrink-wraps to bitmap */
body[data-v2-page='landing']:not([data-v2-landing-grid-random='on']) .v2-landing-slide__stack {
  position: relative;
  display: block;
  width: fit-content;
  max-width: var(--v2-landing-media-max-w);
  max-height: var(--v2-landing-media-max-h);
  min-height: 0;
  min-width: 0;
}

/* Caption fixed to viewport bottom-left (white in dark mode, black in light) */
body[data-v2-page='landing'] .v2-landing-slide-meta {
  position: fixed;
  left: var(--v2-landing-caption-inset-left);
  bottom: var(--v2-landing-caption-inset-bottom);
  right: auto;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: var(--v2-project-code-title-gap, 8px);
  width: auto;
  max-width: calc(100vw - var(--v2-landing-caption-inset-left) - var(--v2-margin-x, 50px));
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: var(--v2-font-size, 14px);
  line-height: var(--v2-line-height, 1.3);
  letter-spacing: var(--v2-letter-spacing, 0.02em);
  word-spacing: var(--v2-word-spacing, 0);
  font-weight: normal;
  text-decoration: none;
  color: var(--v2-landing-caption-fg);
  opacity: 0;
  transition: none;
  pointer-events: none;
}

body[data-v2-page='landing'] .v2-landing-carousel.is-ready .v2-landing-slide-meta {
  transition: opacity var(--v2-landing-crossfade-duration) ease-in-out;
}

body[data-v2-page='landing'] .v2-landing-slide--active .v2-landing-slide-meta {
  opacity: 1;
  pointer-events: auto;
}

body[data-v2-page='landing'] .v2-landing-slide-meta__code {
  flex: 0 0 auto;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  color: var(--v2-landing-caption-fg);
}

body[data-v2-page='landing'] .v2-landing-slide-meta__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: var(--v2-landing-caption-fg);
}

.v2-landing .logo-container {
  position: fixed;
  top: calc(2 * var(--v2-margin-y, 50px) + env(safe-area-inset-top, 0px));
  left: calc(2 * var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  right: calc(2 * var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
}

/* Clear-logo mode: logo aligns to single outer margin (matches carousel inset). */
body[data-v2-page='landing'][data-v2-landing-clear-logo='on']:not([data-v2-landing-logo-align='center'])
  .v2-landing
  .logo-container,
body[data-v2-page='landing'][data-v2-landing-clear-logo='on']:not([data-v2-landing-logo-align='center'])
  .v2-landing
  .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-clear-logo='on']:not([data-v2-landing-logo-align='center'])
  .v2-landing
  .logo-container--inverse-b {
  top: calc(var(--v2-margin-y, 50px) + env(safe-area-inset-top, 0px));
  left: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
}

/* Logo vertical align: center in viewport */
body[data-v2-page='landing'][data-v2-landing-logo-align='center'] .v2-landing .logo-container,
body[data-v2-page='landing'][data-v2-landing-logo-align='center'] .v2-landing .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-logo-align='center'] .v2-landing .logo-container--inverse-b {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  left: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
}

body[data-v2-page='landing'][data-v2-landing-clear-logo='on'][data-v2-landing-logo-align='center']
  .v2-landing
  .logo-container,
body[data-v2-page='landing'][data-v2-landing-clear-logo='on'][data-v2-landing-logo-align='center']
  .v2-landing
  .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-clear-logo='on'][data-v2-landing-logo-align='center']
  .v2-landing
  .logo-container--inverse-b {
  left: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
}

/* Image band starts one margin below the logo (clearance set in JS). */
body[data-v2-page='landing'][data-v2-landing-clear-logo='on'] .v2-landing-slide {
  justify-content: flex-start;
  padding-top: var(--v2-landing-logo-clearance, 0);
  box-sizing: border-box;
}

.v2-landing-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: opacity 0.45s ease;
}

.v2-landing-logo path,
.v2-landing-logo rect {
  fill: var(--v2-landing-fg);
}

/* Inverse copy: dual layers crossfade with slide opacity (same duration/easing) */
.v2-landing .logo-container--inverse {
  z-index: 25;
  clip-path: inset(100%);
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.v2-landing-carousel.is-ready .logo-container--inverse {
  transition: opacity var(--v2-landing-crossfade-duration) ease-in-out;
}

.v2-landing-carousel.is-ready .logo-container--inverse.is-logo-clip-morph {
  transition:
    opacity var(--v2-landing-crossfade-duration) ease-in-out,
    clip-path var(--v2-landing-crossfade-duration) ease-in-out;
}

.v2-landing .logo-container--inverse.is-logo-clip-front {
  opacity: 1;
}

.v2-landing-logo--inverse path,
.v2-landing-logo--inverse rect {
  fill: var(--v2-landing-bg);
}

.v2-landing-toolbar {
  position: fixed;
  bottom: calc(var(--v2-margin-y, 50px) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.v2-landing-grid-toggle,
.v2-landing-clear-logo-toggle,
.v2-landing-logo-align-toggle,
.v2-landing-theme-toggle {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--v2-landing-fg);
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.v2-landing-grid-toggle {
  border-radius: 0;
  background: transparent;
  background-image:
    linear-gradient(var(--v2-landing-fg), var(--v2-landing-fg)),
    linear-gradient(var(--v2-landing-fg), var(--v2-landing-fg)),
    linear-gradient(var(--v2-landing-fg), var(--v2-landing-fg)),
    linear-gradient(var(--v2-landing-fg), var(--v2-landing-fg));
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%;
  background-repeat: no-repeat;
}

.v2-landing-grid-toggle[aria-pressed='true'] {
  background-color: var(--v2-landing-fg);
  background-image:
    linear-gradient(var(--v2-landing-bg), var(--v2-landing-bg)),
    linear-gradient(var(--v2-landing-bg), var(--v2-landing-bg)),
    linear-gradient(var(--v2-landing-bg), var(--v2-landing-bg)),
    linear-gradient(var(--v2-landing-bg), var(--v2-landing-bg));
}

/* Clear-logo toggle: circle = overlap ok; circle + strike = no overlap */
.v2-landing-clear-logo-toggle {
  border-radius: 50%;
  background-color: transparent;
  background-image: none;
}

.v2-landing-clear-logo-toggle[aria-pressed='true'] {
  background-color: transparent;
  background-image: linear-gradient(
    135deg,
    transparent 46%,
    var(--v2-landing-fg) 46%,
    var(--v2-landing-fg) 54%,
    transparent 54%
  );
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Logo align: top bar (default) / centred bar when active */
.v2-landing-logo-align-toggle {
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--v2-landing-fg), var(--v2-landing-fg));
  background-size: 100% 1px;
  background-position: 0 4px;
  background-repeat: no-repeat;
}

.v2-landing-logo-align-toggle[aria-pressed='true'] {
  background-position: 0 50%;
}

.v2-landing-theme-toggle {
  border-radius: 50%;
}

.v2-landing-theme-toggle[aria-pressed='true'] {
  background: #000;
  border-color: #000;
}

.v2-landing-theme-toggle[aria-pressed='false'] {
  background: #fff;
  border-color: #fff;
}

.v2-landing-grid-toggle:focus-visible,
.v2-landing-clear-logo-toggle:focus-visible,
.v2-landing-logo-align-toggle:focus-visible,
.v2-landing-theme-toggle:focus-visible {
  outline: 2px solid var(--v2-landing-fg);
  outline-offset: 3px;
}

/* Grid-random mode (homepage landing only): image box snaps to guide columns + row bands */
body[data-v2-page='landing'][data-v2-landing-grid-random='on'] {
  --v2-landing-min-row-span: 4;
}

body[data-v2-page='landing'][data-v2-landing-preset='v1B'][data-v2-landing-grid-random='on'] {
  --v2-landing-min-row-span: 6;
}

body[data-v2-page='landing'][data-v2-landing-grid-random='on'] .v2-landing-slide {
  justify-content: flex-start;
  align-items: flex-start;
}

body[data-v2-page='landing'][data-v2-landing-grid-random='on'] .v2-landing-slide__media {
  position: absolute;
  left: var(--v2-landing-cell-left, 0);
  top: var(--v2-landing-cell-top, 0);
  width: var(--v2-landing-cell-width, auto);
  height: var(--v2-landing-cell-height, auto);
  min-height: calc(
    var(--v2-landing-min-row-span) * var(--v2-visualiser-row-height, 0px) +
      (var(--v2-landing-min-row-span) - 1) * var(--v2-visualiser-row-gap, var(--v2-visualiser-col-gap, 0px))
  );
  max-width: none;
  max-height: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: visible;
  box-sizing: border-box;
}

body[data-v2-page='landing'][data-v2-landing-grid-random='on'] .v2-landing-slide__media img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left bottom;
}

/* Grid-random: padding-top is the outer gap above caption text */
body[data-v2-page='landing'][data-v2-landing-grid-random='on'] .v2-landing-slide-meta {
  padding-top: var(--v2-margin-y, 50px);
}

body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing {
  cursor: pointer;
}

/* Enter (v1A): logo visible first, then image + clipped inverse fade in together */
body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing.is-entering:not(.is-entering-media)
  .v2-landing-carousel,
body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing.is-entering:not(.is-entering-media)
  .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing.is-entering:not(.is-entering-media)
  .logo-container--inverse-b {
  opacity: 0 !important;
  visibility: hidden !important;
}

body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-entering .v2-landing-carousel,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-entering .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-entering .logo-container--inverse-b {
  transition: opacity var(--v2-landing-exit-media-duration) ease !important;
}

body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-entering.is-entering-media .v2-landing-carousel,
body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing.is-entering.is-entering-media
  .logo-container--inverse-a.is-logo-clip-front,
body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing.is-entering.is-entering-media
  .logo-container--inverse-b.is-logo-clip-front {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Exit phase 1: image carousel + clipped inverse logo */
.v2-landing.is-exiting .v2-landing-carousel,
.v2-landing.is-exiting .logo-container--inverse-a,
.v2-landing.is-exiting .logo-container--inverse-b {
  opacity: 0 !important;
  transition: opacity var(--v2-landing-exit-media-duration) ease;
}

/* Exit phase 2: full foreground logo */
.v2-landing.is-exiting.is-exiting-logo > .logo-container:not(.logo-container--inverse) {
  opacity: 0;
  transition: opacity var(--v2-landing-exit-logo-duration) ease;
}

body.v2-body.is-entering-from-landing {
  background: var(--v2-bg);
}

body.v2-body.is-entering-from-landing #v2-page-swap {
  opacity: 0;
  transition: opacity var(--v2-landing-exit-logo-duration, 1.1s) ease;
  will-change: opacity;
}

body.v2-body.is-entering-from-landing.is-entering-from-landing--visible #v2-page-swap {
  opacity: 1;
}

.v2-landing-empty {
  font: 12px/1.4 system-ui, sans-serif;
  color: color-mix(in srgb, var(--v2-landing-fg) 60%, transparent);
}

/* landing-v1A / v1A-alt: logo centered in viewport; inset uses double outer margin (×2) */
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing .logo-container,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing .logo-container--inverse-b,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing .logo-container,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing .logo-container--inverse-b {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  left: calc(2 * var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  right: calc(2 * var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
}

/* landing-v1A: images may overlap the logo (no clearance band below SVG) */
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-slide {
  justify-content: flex-end;
  padding-top: 0;
}

/* landing-v1A / v1A-alt: transparent carousel so the main (fg) logo shows beside/ beyond the image */
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-carousel,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing-carousel {
  background: transparent;
}

body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-slide--active,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing-slide--active {
  z-index: 2;
}

/* landing-v1A / v1A-alt: instant slide / inverse-logo updates (no crossfade easing) */
body[data-v2-page='landing'][data-v2-landing-preset='v1A'],
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] {
  --v2-landing-crossfade-duration: 0s;
}

body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-carousel.is-ready .v2-landing-slide,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-carousel.is-ready .v2-landing-slide-meta,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-carousel.is-ready .logo-container--inverse,
body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing-carousel.is-ready
  .logo-container--inverse.is-logo-clip-morph,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing-logo,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing-carousel.is-ready .v2-landing-slide,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing-carousel.is-ready .v2-landing-slide-meta,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing-carousel.is-ready .logo-container--inverse,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt']
  .v2-landing-carousel.is-ready
  .logo-container--inverse.is-logo-clip-morph,
body[data-v2-page='landing'][data-v2-landing-preset='v1A-alt'] .v2-landing-logo {
  transition: none !important;
}

/* landing-v1A exit: allow staged fades despite instant slide cuts */
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-exiting .v2-landing-carousel,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-exiting .logo-container--inverse-a,
body[data-v2-page='landing'][data-v2-landing-preset='v1A'] .v2-landing.is-exiting .logo-container--inverse-b {
  transition: opacity var(--v2-landing-exit-media-duration) ease !important;
}

body[data-v2-page='landing'][data-v2-landing-preset='v1A']
  .v2-landing.is-exiting.is-exiting-logo
  > .logo-container:not(.logo-container--inverse) {
  transition: opacity var(--v2-landing-exit-logo-duration) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .v2-landing-carousel.is-ready .v2-landing-slide,
  .v2-landing-carousel.is-ready .v2-landing-slide-meta,
  .v2-landing-carousel.is-ready .logo-container--inverse.is-logo-clip-morph,
  .v2-landing-logo,
  .logo-container--inverse-a,
  .logo-container--inverse-b,
  .v2-landing.is-entering .v2-landing-carousel,
  .v2-landing.is-entering .logo-container--inverse-a,
  .v2-landing.is-entering .logo-container--inverse-b,
  .v2-landing.is-exiting .v2-landing-carousel,
  .v2-landing.is-exiting .logo-container--inverse-a,
  .v2-landing.is-exiting .logo-container--inverse-b,
  .v2-landing.is-exiting.is-exiting-logo > .logo-container:not(.logo-container--inverse),
  body.v2-body.is-entering-from-landing #v2-page-swap {
    transition: none;
  }
}