/* Bento bulge experiment — v1 grid overlay */

.bento-bulge-page {
  /*
   * Overlay dim — WebGL path uses shader uOverlayDim on .grid--bulge-active;
   * fallback / no canvas uses CSS opacity on .tile and .experimental-bento__surface.
   * Calibrated ~0.35 here ≈ v1 tile opacity 0.12 visually; same number in
   * shader alpha reads much fainter (transparent canvas + home-bg bleed-through).
   */
  --bento-overlay-dim: 0.35;
  --bento-grid-overlay-scale: 0.95;
  /* Mobile single column — width-driven tile height (scales with device, not fixed px/svh) */
  --bento-mobile-tile-ratio: 16 / 10;
}

.grid.grid--bulge {
  position: relative;
}

/* Full-viewport grid — no scroll; top and bottom bands split remaining height 50/50 */
.bento-bulge-page.is-home {
  overflow: hidden;
  height: 100vh;
}

.bento-bulge-page.is-home .stage {
  height: 100%;
  overflow: hidden;
}

.bento-bulge-page.is-home .home-portfolio {
  height: 100%;
  padding-bottom: 0;
}

.bento-bulge-page .grid {
  box-sizing: border-box;
  height: 100vh;
  padding: 4px;
  gap: 4px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: unset;
  transform-origin: center center;
}

.bento-bulge-page .grid .tile[data-id="quest-people"]     { grid-column: 1 / 4; grid-row: 1; }
.bento-bulge-page .grid .tile[data-id="horizon-chat"]     { grid-column: 4 / 7; grid-row: 1; }
.bento-bulge-page .grid .tile[data-id="portal-household"] { grid-column: 1 / 3; grid-row: 2; }
.bento-bulge-page .grid .tile[data-id="portal-voice"]     { grid-column: 3 / 5; grid-row: 2; }
.bento-bulge-page .grid .tile[data-id="horizon-mobile"]   { grid-column: 5 / 7; grid-row: 2; }

.bento-bulge-page .grid .tile {
  min-height: 0;
  min-width: 0;
}

@media (max-width: 1080px) {
  .bento-bulge-page .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: unset;
  }

  .bento-bulge-page .grid .tile[data-id] {
    grid-column: unset;
    grid-row: unset;
    aspect-ratio: unset;
  }

  .bento-bulge-page .grid .tile[data-id="quest-people"]     { grid-column: 1 / 4; grid-row: 1; }
  .bento-bulge-page .grid .tile[data-id="horizon-chat"]     { grid-column: 4 / 7; grid-row: 1; }
  .bento-bulge-page .grid .tile[data-id="portal-household"] { grid-column: 1 / 3; grid-row: 2; }
  .bento-bulge-page .grid .tile[data-id="portal-voice"]     { grid-column: 3 / 5; grid-row: 2; }
  .bento-bulge-page .grid .tile[data-id="horizon-mobile"]   { grid-column: 5 / 7; grid-row: 2; }
}

@media (max-width: 600px) {
  .bento-bulge-page.is-home {
    overflow: auto;
    height: auto;
    min-height: 100vh;
  }

  .bento-bulge-page.is-home .stage {
    height: auto;
    overflow: visible;
  }

  .bento-bulge-page .grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
    min-height: 0;
    padding-bottom: calc((var(--dock-h, 125px) + 12px) / 2);
  }

  /* Single column — one ratio for every tile; height follows column width on each device */
  .bento-bulge-page .grid .tile[data-id],
  .bento-bulge-page .grid .tile[data-orient="portrait"] {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: var(--bento-mobile-tile-ratio);
  }

  /* Single column — default bottom labels for all tiles */
  .bento-bulge-page .grid .tile[data-id="horizon-mobile"] .tile__label,
  .bento-bulge-page .grid .tile[data-id="portal-voice"] .tile__label,
  .bento-bulge-page .grid .tile[data-id="portal-household"] .tile__label {
    top: auto;
    bottom: clamp(12px, 1vw, 18px);
    transform: translateY(10px);
  }
}

.experimental-bento__surface,
.grid--bulge .experimental-bento__surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.is-home.is-detail-opening.bento-bulge-page .grid .experimental-bento__surface,
body.is-home.is-detail-open.bento-bulge-page .grid .experimental-bento__surface {
  transition:
    opacity var(--tx-out) ease-in,
    transform var(--tx-out) ease-in,
    filter var(--tx-out) ease-in;
}

.experimental-bento__surface.is-bulge-surface-ready {
  opacity: 1;
}

/* WebGL overlay dim lives in uOverlayDim — keep canvas CSS opacity at 1 when bulge is active */
body.is-detail-opening.bento-bulge-page.is-home .grid.grid--bulge-active .experimental-bento__surface.is-bulge-surface-ready,
body.is-detail-open.bento-bulge-page.is-home .grid.grid--bulge-active .experimental-bento__surface.is-bulge-surface-ready {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .experimental-bento__surface {
    transition: none;
  }
}

.bento-bulge-perf {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  padding: 6px 10px;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.72);
  border-radius: 6px;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .grid--bulge {
    /* Hover dim for tile labels — pairs with shader uDimOpacity (per-cell, not 1:1 with CSS) */
    --bento-dim-opacity: 0.6;
  }

  /* WebGL owns the grid — hide DOM media and disable v1 rack-focus / tile lift */
  body:not(.is-grid-pressing):not(.is-detail-opening):not(.is-detail-open) .bento-bulge-page .grid.grid--bulge-active .grid:hover .tile:not(:hover),
  body:not(.is-grid-pressing):not(.is-detail-opening):not(.is-detail-open) .bento-bulge-page .grid.grid--bulge-active:hover .tile:not(:hover),
  body:not(.is-grid-pressing):not(.is-detail-opening):not(.is-detail-open) .bento-bulge-page .grid.grid--bulge-active .tile:not(:hover),
  body:not(.is-grid-pressing):not(.is-detail-opening):not(.is-detail-open) .bento-bulge-page .grid.grid--bulge-active .tile:hover,
  body:not(.is-grid-pressing):not(.is-detail-opening):not(.is-detail-open) .bento-bulge-page .grid.grid--bulge-active .tile {
    opacity: 1;
    filter: none;
    transform: none;
    z-index: auto;
  }

  .bento-bulge-page .grid.grid--bulge-active .tile:hover .tile__surface,
  .bento-bulge-page .grid.grid--bulge-active .tile .tile__surface {
    transform: none;
    border-radius: 8px;
    border-color: transparent;
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Keep videos decoding — opacity only, not visibility:hidden */
  .bento-bulge-page .grid.grid--bulge-active .tile .tile__media video {
    opacity: 0.001;
    visibility: visible;
  }

  .bento-bulge-page .grid.grid--bulge-active .tile:hover .tile__media,
  .bento-bulge-page .grid.grid--bulge-active .tile .tile__media {
    transform: none;
  }

  .bento-bulge-page .grid.grid--bulge-active .tile:hover .tile__media video,
  .bento-bulge-page .grid.grid--bulge-active .tile:hover .tile__media img,
  .bento-bulge-page .grid.grid--bulge-active .tile .tile__media video,
  .bento-bulge-page .grid.grid--bulge-active .tile .tile__media img {
    transform: none;
  }

  /* Overlay — dim tile labels via CSS; WebGL canvas uses uOverlayDim when .grid--bulge-active */
  body.is-detail-opening.bento-bulge-page.is-home .grid.grid--bulge .experimental-bento__surface,
  body.is-detail-open.bento-bulge-page.is-home .grid.grid--bulge .experimental-bento__surface,
  body.is-detail-opening.bento-bulge-page.is-home .grid.grid--bulge-active .tile,
  body.is-detail-open.bento-bulge-page.is-home .grid.grid--bulge-active .tile,
  body.is-detail-opening.bento-bulge-page.is-home .grid.grid--bulge .tile,
  body.is-detail-open.bento-bulge-page.is-home .grid.grid--bulge .tile {
    opacity: var(--bento-overlay-dim) !important;
    transition: opacity var(--tx-out) ease-in;
  }

  body.is-detail-opening.bento-bulge-page.is-home .grid.grid--bulge-active,
  body.is-detail-open.bento-bulge-page.is-home .grid.grid--bulge-active,
  body.is-detail-opening.bento-bulge-page.is-home .grid.grid--bulge,
  body.is-detail-open.bento-bulge-page.is-home .grid.grid--bulge {
    transform: scale(var(--bento-grid-overlay-scale));
    filter: blur(14px) saturate(0.72);
    transition:
      transform var(--tx-out) ease-in,
      filter var(--tx-out) ease-in;
  }

  body.is-detail-closing.bento-bulge-page.is-home .grid.grid--bulge-active,
  body.is-detail-closing.bento-bulge-page.is-home .grid.grid--bulge {
    opacity: 1;
    transform: scale(1);
    filter: none;
    transition:
      transform var(--tx-in) ease-out var(--tx-delay),
      filter var(--tx-in) ease-out var(--tx-delay),
      opacity var(--tx-in) ease-out var(--tx-delay);
  }

  body.is-detail-closing.bento-bulge-page.is-home .grid.grid--bulge .experimental-bento__surface,
  body.is-detail-closing.bento-bulge-page.is-home .grid.grid--bulge-active .tile,
  body.is-detail-closing.bento-bulge-page.is-home .grid.grid--bulge .tile {
    opacity: 1 !important;
    transition: opacity var(--tx-in) ease-out var(--tx-delay);
  }
}

.bento-bulge-page .tile__label {
  position: absolute;
  left: clamp(14px, 1vw, 20px);
  right: clamp(14px, 1vw, 20px);
  bottom: clamp(12px, 1vw, 18px);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
  transition:
    opacity var(--d-2, 180ms) var(--e-out, ease),
    transform var(--d-2, 180ms) var(--e-out, ease),
    filter var(--d-2, 180ms) var(--e-out, ease);
}

/* Bottom row — labels top-left (WebGL bulge reads upward from bottom edge) */
.bento-bulge-page .grid .tile[data-id="horizon-mobile"] .tile__label,
.bento-bulge-page .grid .tile[data-id="portal-voice"] .tile__label,
.bento-bulge-page .grid .tile[data-id="portal-household"] .tile__label {
  top: clamp(12px, 1vw, 18px);
  bottom: auto;
  transform: translateY(-10px);
}

/* Legibility gradients render in WebGL — hide DOM veils */
.bento-bulge-page .grid.grid--bulge-active .tile .tile__veil {
  display: none;
}

/*
 * WebGL path — label motion tracks uCellDimAmount (index.js) so text matches
 * tile dim morph; blur + shift + scale restore the rack-focus reveal on enter.
 */
.bento-bulge-page .grid.grid--bulge-active .tile__label {
  --bento-label-t: var(--bento-label-opacity, 0);
  --bento-label-shift: 12px;
  opacity: var(--bento-label-t);
  filter: blur(var(--bento-label-blur, 5px));
  transform:
    translateY(calc((1 - var(--bento-label-t)) * var(--bento-label-shift)))
    scale(calc(0.93 + 0.07 * var(--bento-label-t)));
  transition: none;
}

.bento-bulge-page .grid.grid--bulge-active .tile[data-id="horizon-mobile"] .tile__label,
.bento-bulge-page .grid.grid--bulge-active .tile[data-id="portal-voice"] .tile__label,
.bento-bulge-page .grid.grid--bulge-active .tile[data-id="portal-household"] .tile__label {
  --bento-label-shift: -10px;
}

@media (hover: hover) and (pointer: fine) {
  .bento-bulge-page .grid.grid--bulge-active .tile.is-bulge-hovered,
  .bento-bulge-page .grid.grid--bulge-active .tile:hover {
    z-index: 6;
  }
}

@media (hover: hover) and (pointer: fine) {
  .bento-bulge-page.bento-bulge-has-cursor,
  .bento-bulge-page.bento-bulge-has-cursor * {
    cursor: none !important;
  }
}

.bento-bulge-cursor {
  --cursor-size: 32px;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  pointer-events: none;
  z-index: 10000;
  transform: translate(var(--x, -100px), var(--y, -100px));
}

.bento-bulge-cursor__dot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: scale(1);
  transition: transform 50ms ease, opacity 120ms ease;
}

.bento-bulge-cursor__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.bento-bulge-cursor.is-dock-link .bento-bulge-cursor__dot {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bento-bulge-cursor.is-dock-link .bento-bulge-cursor__dot::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.65) 100%
  );
}

.bento-bulge-cursor.is-pressed .bento-bulge-cursor__dot {
  background: rgba(255, 255, 255, 0.42);
  transform: scale(0.875);
}

.bento-bulge-cursor.is-dock-link.is-pressed .bento-bulge-cursor__dot {
  background: rgba(255, 255, 255, 0.1);
}

.bento-bulge-cursor.is-hidden .bento-bulge-cursor__dot {
  opacity: 0;
  transition: transform 50ms ease, opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .bento-bulge-cursor__dot,
  .bento-bulge-cursor.is-hidden .bento-bulge-cursor__dot {
    transition: none;
  }
}

/* Overlay close — back button stays hidden; no entrance replay */
.bento-bulge-page .reader[hidden],
.bento-bulge-page .reader:not(.is-open) {
  pointer-events: none !important;
}

.bento-bulge-page .reader[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* About + project overlays — transparent panel over dimmed grid (match v1) */
body.bento-bulge-page.is-home .reader.is-open .reader__scrim {
  background: transparent;
}

body.bento-bulge-page.is-home.is-detail-open .reader.is-open .reader__scrim,
body.bento-bulge-page.is-home.is-detail-opening .reader.is-open .reader__scrim {
  opacity: 1;
}

body.bento-bulge-page.is-home .reader--ov-split.is-open .reader__panel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.bento-bulge-page.is-home:not(.is-detail-closing) .reader--ov-split.is-open .reader__panel {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: 1;
}

body.bento-bulge-page .about-page.about-overlay.is-instant .about__hero-intro,
body.bento-bulge-page.is-detail-enter .about-page.about-overlay.is-instant .about__hero-intro {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.bento-bulge-page .about-page.about-overlay.is-instant .about .reveal.in,
body.bento-bulge-page.is-detail-enter .about-page.about-overlay.is-instant .about .reveal.in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.bento-bulge-page .detail-split.is-revealed .pj-head,
body.bento-bulge-page .detail-split.is-revealed .pj-bento__media,
body.bento-bulge-page .detail-split.is-instant .pj-head,
body.bento-bulge-page .detail-split.is-instant .pj-bento__media,
body.bento-bulge-page.is-detail-enter .detail-split.is-revealed .pj-head,
body.bento-bulge-page.is-detail-enter .detail-split.is-revealed .pj-bento__media {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.bento-bulge-page .reader:not(.is-open) .reader__back,
.bento-bulge-page .reader.is-exiting .reader__back,
body.bento-bulge-page.is-detail-closing .reader__back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Restore grid hit targets after overlay closes */
body.bento-bulge-page:not(.is-detail-open):not(.is-detail-opening):not(.is-grid-pressing) .grid,
body.bento-bulge-page:not(.is-detail-open):not(.is-detail-opening):not(.is-grid-pressing) .grid .tile {
  pointer-events: auto !important;
}

/* Return from overlay — don't replay first-load stage / dock entrance */
body.bento-bulge-page[data-home-ready="true"].is-home.is-home-enter .stage {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.bento-bulge-page[data-home-ready="true"].is-home.is-home-enter .dock__logo,
body.bento-bulge-page[data-home-ready="true"].is-home.is-home-enter .dock__details,
body.bento-bulge-page[data-home-ready="true"].is-home.is-home-enter .dock__nav .dock__link {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}