@import url("/prometheus/development.css?v=20260518-swipe");

/* ============================================================
   Prometheus Labs — live iOS field
   - Each project info card IS the hex (no inner rectangle).
   - Nodes alternate left/right edges; sine thread weaves between.
   - Mini-shots scroll horizontally with proper per-device ratios.
   ============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

main {
  max-width: 100vw;
  overflow-x: hidden !important;
}

.forest {
  width: 100vw;
  max-width: 100vw;
  overflow: hidden !important;
  contain: paint;
}

.forest .layer {
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw;
  overflow: hidden !important;
}

/* Section: full-bleed canvas for the field */
#live-ios {
  max-width: 100vw !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(96px, 10vw, 160px) !important;
  padding-bottom: clamp(120px, 12vw, 200px) !important;
  overflow: hidden !important;
  contain: paint;
}

#live-ios .section-head {
  max-width: var(--content-max, 1180px);
  margin-inline: auto;
}

/* ----- field shell -------------------------------------------------- */

.proj-field-ios {
  --hex-clip: polygon(19% 0%, 81% 0%, 100% 50%, 81% 100%, 19% 100%, 0% 50%);
  --hex-clip-inner: polygon(19.4% 1.6%, 80.6% 1.6%, 98.8% 50%, 80.6% 98.4%, 19.4% 98.4%, 1.2% 50%);
  --action-clip: var(--button-hex-soft, polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%));
  --node-edge: clamp(24px, 4.5vw, 80px);

  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(72px, 8.5vw, 150px) !important;
  width: min(1340px, calc(100% - var(--node-edge) * 2)) !important;
  min-height: 0 !important;
  margin: clamp(48px, 6vw, 110px) auto 0 !important;
  padding-block: clamp(20px, 3vw, 60px);
  overflow: visible !important;
  contain: none !important;
}

/* sine thread overlay */
.proj-field-ios .proj-threads {
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}

.proj-field-ios .proj-threads path {
  stroke: rgba(246, 166, 51, .34) !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round;
  fill: none;
}

/* ----- row (proj-node) --------------------------------------------- */

.proj-field-ios .proj-node {
  /* tuning knobs: how far the pair tilts toward its viewport edge,
     and how far the anchor overlaps into the info hex's clipped zone
     so its outer vertex kisses the info hex's diagonal */
  --tilt-offset: clamp(80px, 12vw, 240px);
  --anchor-overlap: clamp(70px, 9vw, 140px);
  --anchor-drop: clamp(28px, 3.4vw, 64px);

  position: relative !important;
  z-index: 2;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  /* narrower than the track so justify-self can actually slide the
     whole pair toward its viewport edge */
  width: calc(100% - var(--tilt-offset)) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.proj-field-ios > .proj-node:nth-of-type(odd) {
  justify-self: start !important;
}

.proj-field-ios > .proj-node:nth-of-type(even),
.proj-field-ios > .proj-node.flip {
  justify-self: end !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px) !important;
}

.proj-field-ios > .proj-node:nth-of-type(odd) .proj-mob   { grid-column: 1; order: 0; }
.proj-field-ios > .proj-node:nth-of-type(odd) .proj-info  { grid-column: 2; order: 1; }
.proj-field-ios > .proj-node:nth-of-type(even) .proj-mob,
.proj-field-ios > .proj-node.flip .proj-mob              { grid-column: 2; order: 1; }
.proj-field-ios > .proj-node:nth-of-type(even) .proj-info,
.proj-field-ios > .proj-node.flip .proj-info             { grid-column: 1; order: 0; }

/* Anchor sits at the upper diagonal of the info hex — overlaps into
   the hex's transparent corner so its outer vertex touches the diagonal edge. */
.proj-field-ios > .proj-node:nth-of-type(odd) .proj-mob {
  align-self: start;
  margin-top: var(--anchor-drop);
  margin-right: calc(-1 * var(--anchor-overlap)) !important;
  z-index: 4;
}

.proj-field-ios > .proj-node:nth-of-type(even) .proj-mob,
.proj-field-ios > .proj-node.flip .proj-mob {
  align-self: start;
  margin-top: var(--anchor-drop);
  margin-left: calc(-1 * var(--anchor-overlap)) !important;
  margin-right: 0 !important;
  z-index: 4;
}

/* Mirror satellite cluster on flip/even nodes so they fly outward
   toward the dashed curve instead of into the content hex. */
.proj-field-ios > .proj-node:nth-of-type(even) .mob-sat,
.proj-field-ios > .proj-node.flip .mob-sat {
  transform:
    translate(calc(-50% - var(--cx)), calc(-50% + var(--cy)))
    rotate(calc(-1 * var(--rot))) !important;
}

.proj-field-ios > .proj-node:nth-of-type(even).is-focused .mob-sat,
.proj-field-ios > .proj-node.flip.is-focused .mob-sat {
  transform:
    translate(calc(-50% - var(--sx)), calc(-50% + var(--sy)))
    rotate(0deg) !important;
}

/* ----- anchor (proj-mob) ------------------------------------------- */

.proj-field-ios .proj-mob {
  position: relative;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  flex: initial !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  justify-self: center;
}

/* Free-transform offsets — applied only on desktop where the
   overlapping pair layout is active. On tablet/mobile the layout
   switches to normal stacking, so positional drags would distort
   the grid. */
@media (min-width: 1101px) {
  .proj-field-ios .proj-mob,
  .proj-field-ios .proj-info,
  #development .dev-showcase {
    translate: var(--free-x, 0px) var(--free-y, 0px);
  }
}

/* ----- content hex (proj-info) ------------------------------------- */

.proj-field-ios .proj-bound {
  display: none !important;
}

.proj-field-ios .proj-info {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 820px !important;
  min-height: clamp(440px, 36vw, 520px);
  flex: initial !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "tag tag tag"
    "title ios detail"
    "desc desc desc"
    "meta meta meta"
    "carousel carousel carousel" !important;
  column-gap: 14px;
  row-gap: 10px;

  padding:
    clamp(32px, 3.6vw, 52px)
    clamp(96px, 9.5vw, 150px)
    clamp(28px, 3.2vw, 44px) !important;

  clip-path: var(--hex-clip);
  -webkit-clip-path: var(--hex-clip);
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;

  background:
    radial-gradient(58% 48% at 78% 14%, rgba(140, 165, 190, .08), transparent 65%),
    radial-gradient(46% 40% at 18% 86%, rgba(120, 145, 180, .06), transparent 65%),
    rgba(14, 19, 26, .96) !important;

  filter:
    drop-shadow(0 22px 60px rgba(0, 0, 0, .55))
    drop-shadow(0 0 30px rgba(140, 165, 190, calc(.08 + .14 * var(--focus, .3))));

  isolation: isolate;
  overflow: hidden !important;
  backdrop-filter: none !important;
}

.proj-field-ios .proj-info .proj-tag { grid-area: tag; }
.proj-field-ios .proj-info h3 { grid-area: title; align-self: center; }
.proj-field-ios .proj-info > p { grid-area: desc; }
.proj-field-ios .proj-info .proj-meta { grid-area: meta; }
.proj-field-ios .proj-info .ios-token { grid-area: ios; align-self: center; }
.proj-field-ios .proj-info .detail-token { grid-area: detail; align-self: center; }
.proj-field-ios .proj-info .mini-carousel { grid-area: carousel; }
.proj-field-ios .proj-info .carousel-hint { display: none !important; }

/* hex inner gradient + diagonal slash */
.proj-field-ios .proj-info::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--hex-clip-inner);
  -webkit-clip-path: var(--hex-clip-inner);
  background:
    linear-gradient(145deg, transparent 0 32%, rgba(140, 165, 190, .06) 50%, transparent 68% 100%);
  border: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(.55 + .45 * var(--focus, .3));
}

.proj-field-ios .proj-info::after {
  display: none !important;
}

.proj-field-ios .proj-info > *:not(.proj-bound) {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.proj-field-ios .proj-info .proj-tag {
  margin: 0 !important;
}

.proj-field-ios .proj-info h3 {
  font-size: clamp(36px, 3.8vw, 54px) !important;
  line-height: .96 !important;
  margin: 0 !important;
  letter-spacing: -.022em;
}

.proj-field-ios .proj-info p {
  max-width: 64ch;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.proj-field-ios .proj-info .proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 0 !important;
}

.proj-field-ios .proj-info .proj-meta span {
  font-size: 10.5px;
  padding: 6px 9px;
}

.proj-field-ios .proj-info .ios-token,
.proj-field-ios .proj-info .detail-token {
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
  clip-path: var(--action-clip) !important;
  -webkit-clip-path: var(--action-clip) !important;
  border-radius: 0 !important;
  font-size: 10.5px !important;
  letter-spacing: .10em !important;
  min-height: 0 !important;
}

.proj-field-ios .proj-info .ios-token {
  padding: 10px 22px !important;
}

.proj-field-ios .proj-info .detail-token {
  padding: 10px 18px !important;
}

/* keep the .flip alignment readable on the left side */
.proj-field-ios > .proj-node.flip .proj-info,
.proj-field-ios > .proj-node:nth-of-type(even) .proj-info {
  text-align: left !important;
}

.proj-field-ios > .proj-node.flip .proj-info .proj-meta,
.proj-field-ios > .proj-node:nth-of-type(even) .proj-info .proj-meta {
  justify-content: flex-start !important;
}

/* ----- mini carousel (horizontal scroll) --------------------------- */

.proj-field-ios .mini-carousel {
  --shot-scale-base: .82;
  --carousel-edge-pad: clamp(48px, 6vw, 88px);
  --carousel-shot-half: clamp(80px, 9vw, 140px);
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  align-items: center;
  width: calc(100% + var(--carousel-edge-pad)) !important;
  max-width: none !important;
  margin: 12px calc(var(--carousel-edge-pad) / -2) 0 !important;
  padding: 38px var(--carousel-edge-pad) 44px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  /* Keep snap soft, and do not trap diagonal trackpad gestures at the
     rail edge. Vertical momentum should stay with the page. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--carousel-edge-pad);
  overscroll-behavior-x: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  contain: layout !important;
  grid-template-columns: none !important;
}

/* end spacers let the first and last shots scroll all the way into
   the centered (highlighted) snap position. flex-basis 50% resolves
   against the flex container's content box (post-padding), so the
   spacer just has to make up the remaining distance from content-box
   center to shot center, i.e. half the content-box minus half a shot. */
.proj-field-ios .mini-carousel::before,
.proj-field-ios .mini-carousel::after {
  content: '';
  flex: 0 0 max(0px, calc(50% - var(--carousel-shot-half)));
  pointer-events: none;
}

.proj-field-ios .mini-carousel::-webkit-scrollbar {
  display: none;
}

.proj-field-ios .mini-carousel .mini-shot:nth-child(n+3) {
  display: flex !important;
}

.proj-field-ios .mini-shot {
  --shot-focus: .35;
  flex: 0 0 auto !important;
  min-width: 0;
  scroll-snap-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .35),
    0 0 calc(10px + 18px * var(--shot-focus)) rgba(140, 165, 190, calc(.10 + .18 * var(--shot-focus)));

  transform: scale(calc(var(--shot-scale-base) + .18 * var(--shot-focus)));
  opacity: calc(.55 + .45 * var(--shot-focus));
  filter: saturate(calc(.85 + .15 * var(--shot-focus)));
  transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease, filter .3s ease;
}

.proj-field-ios .mini-shot.phone {
  flex-basis: auto !important;
  width: clamp(108px, 9.5vw, 142px) !important;
  aspect-ratio: 9 / 19.5 !important;
  height: auto !important;
  max-height: none !important;
}

.proj-field-ios .mini-shot.ipad,
.proj-field-ios .mini-shot.ipad.landscape {
  flex-basis: auto !important;
  width: clamp(208px, 18vw, 268px) !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-height: none !important;
}

.proj-field-ios .mini-shot.watch {
  flex-basis: auto !important;
  width: clamp(94px, 8vw, 118px) !important;
  aspect-ratio: 41 / 49 !important;
  border-radius: 28px !important;
  padding: 7px !important;
  height: auto !important;
  max-height: none !important;
}

.proj-field-ios .mini-shot.is-front {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .50),
    0 0 26px rgba(140, 165, 190, .28);
}

.proj-field-ios .mini-shot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  display: block;
}

.proj-field-ios .mini-shot.watch img {
  border-radius: 22px !important;
}

.proj-field-ios .carousel-hint {
  display: block !important;
  margin: 2px 0 0 !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
}

/* ----- tablet ------------------------------------------------------- */

@media (max-width: 1100px) {
  #live-ios {
    padding-top: clamp(72px, 8vw, 120px) !important;
    padding-bottom: clamp(84px, 9vw, 140px) !important;
  }

  .proj-field-ios {
    --hex-clip: polygon(14% 0%, 86% 0%, 100% 50%, 86% 100%, 14% 100%, 0% 50%);
    --hex-clip-inner: polygon(14.5% 1.6%, 85.5% 1.6%, 99% 50%, 85.5% 98.4%, 14.5% 98.4%, 1% 50%);
    width: min(960px, calc(100% - 36px)) !important;
    gap: clamp(60px, 7vw, 110px) !important;
    margin-top: clamp(36px, 5vw, 70px) !important;
  }

  .proj-field-ios > .proj-node:nth-of-type(odd),
  .proj-field-ios > .proj-node:nth-of-type(even),
  .proj-field-ios > .proj-node.flip {
    --tilt-offset: 0px;
    justify-self: stretch !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
  }

  .proj-field-ios > .proj-node:nth-of-type(even) .proj-mob,
  .proj-field-ios > .proj-node.flip .proj-mob {
    grid-column: 1;
    order: 0;
  }
  .proj-field-ios > .proj-node:nth-of-type(even) .proj-info,
  .proj-field-ios > .proj-node.flip .proj-info {
    grid-column: 2;
    order: 1;
  }

  /* drop the desktop overlap + tilt — stacked layout uses normal flow */
  .proj-field-ios > .proj-node:nth-of-type(odd) .proj-mob,
  .proj-field-ios > .proj-node:nth-of-type(even) .proj-mob,
  .proj-field-ios > .proj-node.flip .proj-mob {
    align-self: center !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* and unmirror the satellite cluster — tablet puts anchor on left for all rows */
  .proj-field-ios > .proj-node:nth-of-type(even) .mob-sat,
  .proj-field-ios > .proj-node.flip .mob-sat {
    transform:
      translate(calc(-50% + var(--cx)), calc(-50% + var(--cy)))
      rotate(var(--rot)) !important;
  }
  .proj-field-ios > .proj-node:nth-of-type(even).is-focused .mob-sat,
  .proj-field-ios > .proj-node.flip.is-focused .mob-sat {
    transform:
      translate(calc(-50% + var(--sx)), calc(-50% + var(--sy)))
      rotate(0deg) !important;
  }

  .proj-field-ios .proj-mob {
    max-width: 160px;
  }

  .proj-field-ios .proj-info {
    min-height: 460px;
    padding:
      clamp(28px, 4vw, 42px)
      clamp(60px, 8vw, 96px)
      clamp(28px, 4vw, 42px) !important;
  }

  .proj-field-ios .proj-info::after {
    clip-path: polygon(
      14% 0%, 86% 0%, 100% 50%, 86% 100%, 14% 100%, 0% 50%,
      1% 50%, 14.5% 1.6%, 85.5% 1.6%, 99% 50%, 85.5% 98.4%, 14.5% 98.4%, 1% 50%
    );
    -webkit-clip-path: polygon(
      14% 0%, 86% 0%, 100% 50%, 86% 100%, 14% 100%, 0% 50%,
      1% 50%, 14.5% 1.6%, 85.5% 1.6%, 99% 50%, 85.5% 98.4%, 14.5% 98.4%, 1% 50%
    );
  }

  .proj-field-ios .proj-info h3 {
    font-size: clamp(34px, 4.4vw, 50px) !important;
  }
}

/* ----- mobile ------------------------------------------------------- */

@media (max-width: 720px) {
  #live-ios {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  .proj-field-ios {
    --hex-clip: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    --hex-clip-inner: polygon(10.5% 1.6%, 89.5% 1.6%, 99% 50%, 89.5% 98.4%, 10.5% 98.4%, 1% 50%);
    width: calc(100% - 24px) !important;
    gap: 42px !important;
    margin-top: 24px !important;
  }

  .proj-field-ios > .proj-node,
  .proj-field-ios > .proj-node.flip,
  .proj-field-ios > .proj-node:nth-of-type(odd),
  .proj-field-ios > .proj-node:nth-of-type(even) {
    --tilt-offset: 0px;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
  }

  .proj-field-ios .proj-node > * { grid-column: 1 !important; }
  .proj-field-ios > .proj-node:nth-of-type(odd) .proj-mob,
  .proj-field-ios > .proj-node:nth-of-type(even) .proj-mob,
  .proj-field-ios > .proj-node.flip .proj-mob { grid-row: 1 !important; order: 0 !important; }
  .proj-field-ios > .proj-node:nth-of-type(odd) .proj-info,
  .proj-field-ios > .proj-node:nth-of-type(even) .proj-info,
  .proj-field-ios > .proj-node.flip .proj-info { grid-row: 2 !important; order: 1 !important; }

  .proj-field-ios .proj-mob {
    max-width: 132px !important;
    width: 132px !important;
    justify-self: start !important;
    margin-left: 8px !important;
  }

  .proj-field-ios .proj-info {
    min-height: 0 !important;
    padding: 36px clamp(28px, 7vw, 44px) !important;
    max-width: 100% !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "tag"
      "title"
      "ios"
      "detail"
      "desc"
      "meta"
      "carousel" !important;
    column-gap: 0 !important;
    row-gap: 10px !important;
  }

  .proj-field-ios .proj-info .ios-token,
  .proj-field-ios .proj-info .detail-token {
    justify-self: start !important;
  }

  .proj-field-ios .proj-info::after {
    clip-path: polygon(
      10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%,
      1% 50%, 10.5% 1.6%, 89.5% 1.6%, 99% 50%, 89.5% 98.4%, 10.5% 98.4%, 1% 50%
    );
    -webkit-clip-path: polygon(
      10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%,
      1% 50%, 10.5% 1.6%, 89.5% 1.6%, 99% 50%, 89.5% 98.4%, 10.5% 98.4%, 1% 50%
    );
  }

  .proj-field-ios .proj-info h3 {
    font-size: clamp(34px, 9.6vw, 44px) !important;
  }

  .proj-field-ios .proj-info p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .proj-field-ios .proj-threads {
    display: none !important;
  }

  .proj-field-ios .mini-shot.phone {
    width: clamp(82px, 22vw, 112px);
  }
  .proj-field-ios .mini-shot.ipad,
  .proj-field-ios .mini-shot.ipad.landscape {
    width: clamp(176px, 48vw, 240px);
  }
  .proj-field-ios .mini-shot.watch {
    width: clamp(78px, 20vw, 98px);
  }
}