/* ==================================================================
   Home — editorial bento grid, dock, detail/about overlays
================================================================== */

body.is-home {
  background-image: none;
  background-color: var(--bg);
}

.home-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #000;
  /*
   * Figma Website background (2407:46675): radial from bottom-center,
   * plum → black. Ellipse size approximated from Figma gradientTransform.
   */
  background-image: radial-gradient(
    ellipse 100% 85% at 50% 100%,
    var(--plum) 0%,
    var(--home-vignette-mid) 50%,
    var(--home-vignette-deep) 75%,
    #000 100%
  );
}
.home-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/home-grain-tile.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* home pages: grain lives on .home-bg, not the viewport overlay */
body.is-home.u-grain::before,
body.is-home.u-grain::after {
  content: none;
}

.stage {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

.home-portfolio {
  padding-bottom: clamp(24px, 4vw, 48px);
}

@keyframes home-content-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.is-home.is-home-pending .stage {
  opacity: 0;
  transform: translateY(16px);
}

body.is-home.is-home-enter .stage {
  animation: home-content-in 400ms ease-out 150ms both;
}

/* ---- edge-to-edge bento (explicit placement — bottom row aligned) ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, clamp(62px, 6.2vw, 102px));
  gap: 4px;
  width: 100%;
  padding: 4px 4px 0;
}

/* top band */
.tile[data-id="quest-people"]    { grid-column: 1 / 4; grid-row: 1 / 5; }
.tile[data-id="horizon-chat"]    { grid-column: 4 / 7; grid-row: 1 / 5; }
/* bottom band — 8 rows, all columns end at row line 13 */
.tile[data-id="portal-household"] { grid-column: 1 / 3; grid-row: 5 / 13; }
.tile[data-id="portal-voice"]    { grid-column: 3 / 5; grid-row: 5 / 8; }
.tile[data-id="horizon-mobile"]  { grid-column: 5 / 7; grid-row: 5 / 8; }
.tile[data-id="mk-play"]         { grid-column: 3 / 5; grid-row: 8 / 13; }
.tile[data-id="life360-messaging"] { grid-column: 5 / 7; grid-row: 8 / 13; }

/* ---- tile base ---- */
.tile {
  --edge-x: 0px;
  --edge-y: 0px;
  position: relative;
  cursor: pointer;
  transition:
    opacity var(--d-2) var(--e-out),
    filter var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}
.tile__surface {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  isolation: isolate;
  will-change: transform;
  transition:
    border-color var(--d-1) var(--e-out),
    border-radius var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out),
    overflow 0s;
}
.tile__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}
.tile__media video,
.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: transform var(--d-3) var(--e-out);
}
.tile[data-fit="contain"] .tile__media {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #2c2336, #14101c);
}
.tile[data-fit="contain"] .tile__media video,
.tile[data-fit="contain"] .tile__media img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.tile[data-cover-align="top left"] .tile__media video,
.tile[data-cover-align="top left"] .tile__media img,
.tile[data-cover-align="left top"] .tile__media video,
.tile[data-cover-align="left top"] .tile__media img {
  object-position: left top;
}

/* Social VR — inset vignette fallback only (WebGL shader when .grid--bulge-active) */
.bento-bulge-page .grid:not(.grid--bulge-active) .tile[data-id="quest-people"] .tile__surface {
  box-shadow: inset 0 0 90px 90px #222229;
}

.tile__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* tilted from bottom-left — 15° clockwise off vertical, pure black */
  background: linear-gradient(
    15deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.34) 28%,
    transparent 50%
  );
  opacity: 0.18;
  transition: opacity var(--d-2) var(--e-out);
}
.tile__label {
  position: absolute;
  left: clamp(14px, 1vw, 20px);
  right: clamp(14px, 1vw, 20px);
  bottom: clamp(12px, 1vw, 18px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
  transition:
    opacity var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out),
    filter var(--d-2) var(--e-out);
}
.tile__product {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.8);
}
.tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.55vw, 1.48rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
}

/* rack-focus dim + unified depth hover (Social VR blur de-blur) */
@media (hover: hover) {
  /* blur/dim the whole tile as one layer — bleeds into gutters, not clipped per-surface */
  .grid:hover .tile:not(:hover) {
    opacity: 0.58;
    filter: blur(4px) saturate(0.78);
  }
  .grid:hover .tile:not(:hover) .tile__surface {
    overflow: visible;
    isolation: auto;
  }
  .tile:hover {
    z-index: 6;
    opacity: 1;
    filter: none;
  }
  .tile:hover .tile__surface {
    overflow: hidden;
    transform: translate(var(--edge-x), var(--edge-y)) scale(1.045);
    border-radius: 16px;
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  /* edge tiles — extend hit area to viewport edge (surface nudges, tile box stays) */
  .tile[data-edge-prox*="left"]::before,
  .tile[data-edge-prox*="right"]::before,
  .tile[data-edge-prox*="top"]::after {
    content: "";
    position: absolute;
    z-index: 5;
  }
  .tile[data-edge-prox*="left"]::before {
    top: 0;
    bottom: 0;
    right: 100%;
    width: var(--edge-hit-left, 0px);
  }
  .tile[data-edge-prox*="right"]::before {
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--edge-hit-right, 0px);
  }
  .tile[data-edge-prox*="top"]::after {
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--edge-hit-top, 0px);
  }
  .tile:hover .tile__media video,
  .tile:hover .tile__media img { transform: scale(1.08); }
  .tile:hover .tile__veil { opacity: 1; }
  .tile:hover .tile__label {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* pointer down — ease tile back to rest while grid dims */
  .tile.is-pressed {
    z-index: 1;
    opacity: 1;
    filter: none;
    transform: none;
    transition:
      opacity var(--tx-out) ease-in,
      filter var(--tx-out) ease-in,
      transform var(--tx-out) ease-in;
  }
  .tile.is-pressed .tile__surface {
    overflow: hidden;
    transform: none;
    border-radius: 8px;
    border-color: transparent;
    box-shadow: none;
    transition:
      border-color var(--tx-out) ease-in,
      border-radius var(--tx-out) ease-in,
      box-shadow var(--tx-out) ease-in,
      transform var(--tx-out) ease-in;
  }
  .tile.is-pressed .tile__media video,
  .tile.is-pressed .tile__media img {
    transform: none;
    transition: transform var(--tx-out) ease-in;
  }
  .tile.is-pressed .tile__veil { opacity: 0.72; }
  .tile.is-pressed .tile__label {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* detail transition — grid blurs when overlay opens (not on pointer down) */
body.is-home.is-detail-opening,
body.is-home.is-detail-open {
  background-color: transparent;
}
body.is-home.is-detail-opening .u-glow,
body.is-home.is-detail-open .u-glow {
  opacity: 0;
  visibility: hidden;
}
body.is-home.is-detail-opening .home-bg,
body.is-home.is-detail-open .home-bg {
  opacity: 1;
}

body.is-home.is-detail-opening .grid,
body.is-home.is-detail-open .grid {
  transform: scale(0.985) translateY(4px);
  filter: blur(14px) saturate(0.72);
  pointer-events: none;
  transition:
    transform var(--tx-out) ease-in,
    filter var(--tx-out) ease-in;
}
body.is-home.is-detail-opening .grid .tile,
body.is-home.is-detail-open .grid .tile {
  opacity: 0.12;
  transition: opacity var(--tx-out) ease-in;
}

body.is-home.is-detail-closing .grid,
body.is-home.is-home-enter .grid {
  transform: scale(1) translateY(0);
  filter: none;
  pointer-events: auto;
  transition:
    transform var(--tx-in) ease-out var(--tx-delay),
    filter var(--tx-in) ease-out var(--tx-delay);
}
body.is-home.is-detail-closing .grid .tile,
body.is-home.is-home-enter .grid .tile {
  opacity: 1;
  transition: opacity var(--tx-in) ease-out var(--tx-delay);
}

body.is-home .reader.is-open .reader__scrim {
  background: transparent;
}
body.is-home.is-detail-open .reader.is-open .reader__scrim {
  opacity: 1;
}
body.is-home .reader--ov-split.is-open .reader__panel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.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;
  transition: opacity 0.35s var(--e-out);
}

/* Direct URL / refresh — render final state, no entrance animations */
body.is-home .detail-split.is-instant,
body.is-home.is-detail-enter .detail-split.is-instant,
body.is-home .detail-split.is-instant .pj-head,
body.is-home .detail-split.is-instant .pj-title,
body.is-home .detail-split.is-instant .pj-lede,
body.is-home .detail-split.is-instant .pj-meta,
body.is-home .detail-split.is-instant .pj-sec,
body.is-home .detail-split.is-instant .pj-cta,
body.is-home .detail-split.is-instant .reveal {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}
body.is-home .about-page.about-overlay.is-instant .about__hero-intro,
body.is-home.is-detail-enter .about-page.about-overlay.is-instant .about__hero-intro,
body.is-home .about-page.about-overlay.is-instant .about .reveal.in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
body.is-home .detail-split.is-instant .pj-head,
body.is-home .detail-split.is-instant .pj-sec,
body.is-home .detail-split.is-instant .pj-cta,
body.is-home .detail-split.is-instant .reveal {
  transform: none !important;
  filter: none !important;
}
body.is-home.is-detail-enter .detail-close {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    grid-auto-rows: clamp(58px, 9vw, 96px);
  }
  .tile[data-id="quest-people"],
  .tile[data-id="horizon-chat"] { grid-column: 1 / 5; grid-row: auto; }
  .tile[data-id="quest-people"] { grid-row: span 4; }
  .tile[data-id="horizon-chat"] { grid-row: span 4; }
  .tile[data-id="horizon-mobile"],
  .tile[data-id="portal-voice"],
  .tile[data-id="portal-household"],
  .tile[data-id="mk-play"],
  .tile[data-id="life360-messaging"] {
    grid-column: span 2;
    grid-row: span 3;
  }
  .tile[data-id="portal-household"] { grid-row: span 5; }
}
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .tile[data-id] {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  .tile[data-orient="portrait"] {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 4;
  }
  .grid:hover {
    transform: none;
  }
  .grid:hover .tile {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .grid:hover .tile .tile__surface { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__surface,
  .tile__media video,
  .tile__media img,
  .tile__label { transition: none !important; }
}

/* ---- 404 error page ---- */
.error-page__main {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  padding: clamp(48px, 10vh, 120px) var(--pad) 160px;
  place-items: center;
}

.error-page__content {
  width: min(100%, 34rem);
  text-align: center;
}

.error-page__code {
  margin: 0;
}

.error-page__code.t-label.is-caps {
  font-size: 18px;
}

.error-page__code.t-grad {
  color: transparent;
}

.error-page__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--ink);
}

.error-page__lede {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-dim);
}

.error-page__lede a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 0.18em;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

@media (hover: hover) {
  .error-page__lede a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
  }
}