/* Hardware dimensions/materials ported from Aceternity MacbookScroll.
   Only .laptop-content expands; the backplate and base stay one rigid object. */
body[data-page="home"] .hero-pin { height: 240svh; }
body[data-page="home"] .hero-stage {
  isolation: isolate;
  /* Same parent perspective as the original MacbookScroll component. */
  perspective: 800px;
}
.laptop-hardware {
  position: absolute; z-index: 1; width: 512px; height: 544px;
  transform-origin: top left; pointer-events: none; will-change: transform, opacity;
}
.laptop-lid {
  /* The projected outline is fixed inside the hardware, above its hinge. */
  display: block; position: relative; width: 512px; height: 192px;
  overflow: visible;
}
.laptop-backplate {
  fill: #010101; stroke: #010101; stroke-linejoin: round;
}
.laptop-deck {
  position: relative; width: 512px; height: 352px; overflow: hidden;
  border-radius: 16px; background: #e5e7eb;
}
.laptop-hinge { position: relative; height: 40px; }
.laptop-hinge::after { content: ""; position: absolute; left: 10%; width: 80%; height: 16px; background: #050505; }
.laptop-inputs { display: grid; grid-template-columns: 10% 80% 10%; }
.laptop-speaker {
  height: 160px; margin-top: 8px; padding: 0 .5px;
  background: radial-gradient(circle, #08080a .5px, transparent .5px) 0 0 / 3px 3px;
}
.laptop-keyboard { margin: 0 4px; padding: 4px; border-radius: 6px; background: #050505; transform: translateZ(0); }
.laptop-key-row { display: flex; gap: 2px; margin-bottom: 2px; }
.laptop-key {
  flex: none; padding: .5px; border-radius: 4px; background: #ffffff33;
  box-shadow: 0 20px 25px -5px #fff, 0 8px 10px -6px #fff; transform: translateZ(0);
}
.laptop-key-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 3.5px; background: #0a090d;
  box-shadow: 0 -.5px 2px 0 #0d0d0f inset, -.5px 0 2px 0 #0d0d0f inset;
  color: #fff; font: 400 5px/1.5 Arial, sans-serif;
}
.laptop-key-face svg { width: 6px; height: 6px; flex: none; }
.laptop-key-function svg { margin-bottom: 4px; }
.laptop-key-label-left { align-items: flex-start; justify-content: flex-end; padding: 0 0 2px 4px; }
.laptop-key-label-right { align-items: flex-end; justify-content: flex-end; padding: 0 4px 2px 0; }
.laptop-key-modifier { align-items: stretch; justify-content: space-between; padding: 4px; }
.laptop-key-modifier > :first-child { align-self: flex-end; }
.laptop-touch-id { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: linear-gradient(#171717 20%, #000 50%, #171717 95%); }
.laptop-touch-id::after { content: ""; display: block; height: 100%; border-radius: inherit; background: #000; }
.laptop-arrows { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 78.4px; height: 24px; margin-top: 2px; padding: .5px; }
.laptop-arrows > div { display: flex; }
.laptop-arrows .laptop-key-face { height: 12px; }
.laptop-trackpad { width: 40%; height: 128px; margin: 4px auto; border-radius: 12px; box-shadow: 0 0 1px 1px #00000020 inset; }
.laptop-lip { position: absolute; left: calc(50% - 40px); bottom: 0; width: 80px; height: 8px; border-radius: 24px 24px 0 0; background: linear-gradient(to top, #272729, #050505); }
.laptop-content {
  --caption-height: clamp(30px, calc(var(--artwork-width, 512px) * .019 + 16px), 34px);
  position: absolute; z-index: 10; transform-origin: center top;
  /* Artwork only: the separate fixed lid supplies the black screen surround. */
  overflow: hidden; padding: 0; background: transparent; box-shadow: none;
  will-change: transform; border-radius: 8px;
}
body[data-page="home"] .laptop-content .home-view {
  position: relative; inset: auto; width: 100%; height: 100%; min-height: 0;
  border-radius: inherit; transform: none; touch-action: pan-y;
}
.laptop-content .carousel-slide {
  /* The active project must fill the physical laptop display. */
  background-size: cover;
  background-repeat: no-repeat;
  transform: none;
}
body[data-page="home"] .laptop-content .carousel-track { height: calc(100% - var(--caption-height)); }
.laptop-content .carousel-caption {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  height: var(--caption-height); min-height: 0; padding: 8px 0; gap: 0;
  font-size: clamp(10px, calc(var(--artwork-width, 512px) * .019), 18px);
}
.laptop-content .carousel-caption p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laptop-content .carousel-counter { text-align: right; }
.laptop-content .carousel-arrow { width: clamp(30px, 5vw, 64px); height: clamp(30px, 5vw, 64px); }
.laptop-content .carousel-arrow::before { width: 12px; height: 12px; border-width: 2px; }
.laptop-scroll-hint { position: absolute; left: 0; right: 0; bottom: 5%; text-align: center; font-size: 13px; font-weight: 400; letter-spacing: .08em; color: #666; pointer-events: none; }
.laptop-scroll-hint span { display: inline-block; margin-left: 12px; }
@media (max-width: 820px) {
  body[data-page="home"] .hero-pin { height: 210svh; }
  body[data-page="home"] .site-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 48px; padding: 0; align-items: center; }
  body[data-page="home"] .nav-info { text-align: right; }
  body[data-page="home"] .nav-center { text-align: center; }
  body[data-page="home"] .index-view { padding-top: 48px; }
  body[data-page="home"] .category-toolbar { top: 48px; }
  .laptop-scroll-hint { bottom: 14%; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-pin { height: 100svh; }
  .laptop-hardware, .laptop-scroll-hint { display: none; }
  .laptop-content .carousel-slide { transition: none; }
}