/* =========================================================
   01. THREE-PANEL ORBIT
   Adapted from our original website animation.

   Stage height: space available for the animation.
   Panel width: size of each website preview.
   Duration: 15 seconds for one complete orbit.
========================================================= */

.concept-orbit-stage {
  position: relative;
  height: 460px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.86),
      transparent 55%
    ),
    linear-gradient(145deg, #e6eff3, #d5e3ea);
}

.portfolio-orbit {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 43%;
  transform-style: preserve-3d;
}

/* A faint oval suggests the path around the centre. */
.portfolio-orbit::before {
  position: absolute;
  top: 49%;
  left: 50%;
  width: 74%;
  height: 39%;
  border: 1px solid rgba(20, 49, 77, 0.12);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%) rotateX(68deg);
}

.orbit-page {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(50%, 250px);
  aspect-ratio: 2 / 3;
  padding: 7px;
  border: 2px solid rgba(244, 252, 255, 0.95);
  border-radius: 9px;
  background: rgba(224, 240, 247, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    5px 7px 0 rgba(151, 194, 214, 0.72),
    13px 18px 28px rgba(20, 49, 77, 0.24);
  transform-style: preserve-3d;
  transform-origin: center;
  animation: portfolio-orbit 15s
    cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Start each panel at a different point in the orbit. */
.orbit-page:nth-child(2) {
  animation-delay: -5s;
}

.orbit-page:nth-child(3) {
  animation-delay: -10s;
}

/* Hover over the visual to pause and inspect it. */
.portfolio-orbit:hover .orbit-page {
  animation-play-state: paused;
}

.orbit-glass-edge {
  position: absolute;
  z-index: -1;
  inset: 8px -8px -10px 8px;
  border: 1px solid rgba(205, 235, 247, 0.9);
  border-radius: 8px;
  background: rgba(158, 204, 224, 0.42);
  transform: translateZ(-18px);
}

.orbit-mockup {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  background: white;
}

/* Front → right and back → left and back → front. */
@keyframes portfolio-orbit {
  0%, 100% {
    z-index: 3;
    opacity: 1;
    transform:
      translate3d(-50%, -47%, 150px)
      scale(0.91) rotateY(0deg);
  }

  28% {
    z-index: 2;
    opacity: 0.76;
    transform:
      translate3d(-20%, -59%, -80px)
      scale(0.69) rotateY(-13deg);
  }

  34% {
    z-index: 1;
  }

  62% {
    z-index: 1;
    opacity: 0.58;
    transform:
      translate3d(-82%, -63%, -150px)
      scale(0.61) rotateY(7deg);
  }

  68% {
    z-index: 2;
  }
}

/* Smaller screens: reduce the stage and preview sizes. */
@media (max-width: 760px) {
  .concept-orbit-stage {
    height: 390px;
  }

  .orbit-page {
    width: min(60%, 210px);
    padding: 4px;
  }
}

/* Respect visitors who prefer reduced motion.
   All three previews remain visible without moving. */
@media (prefers-reduced-motion: reduce) {
  .orbit-page {
    animation: none;
  }

  .orbit-page:nth-child(1) {
    z-index: 3;
    transform:
      translate3d(-50%, -47%, 120px) scale(0.88);
  }

  .orbit-page:nth-child(2) {
    z-index: 2;
    opacity: 0.72;
    transform:
      translate3d(-18%, -60%, -60px)
      scale(0.68) rotateY(-12deg);
  }

  .orbit-page:nth-child(3) {
    z-index: 1;
    opacity: 0.58;
    transform:
      translate3d(-84%, -61%, -120px)
      scale(0.62) rotateY(8deg);
  }
}
/* Hide the orbit guide line. */
.portfolio-orbit::before {
  display: none;
}
/* ======================================================
   PORTFOLIO — COMPANION DEVICE REVEAL
   Laptops stay visible. Companion devices appear once.
   JavaScript enables this only when scrolling is supported.
   ====================================================== */

.portfolio-device-stage.reveal-ready .portfolio-companion {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition:
    opacity 2000ms ease,
    transform 2000ms ease;
}

/* Slight stagger across the three examples. */
.portfolio-architecture .portfolio-companion {
  transition-delay: 150ms;
}

.portfolio-electronics .portfolio-companion {
  transition-delay: 300ms;
}

.portfolio-device-stage.reveal-ready.is-visible .portfolio-companion {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .portfolio-device-stage.reveal-ready .portfolio-companion {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ======================================================
   HERO — LAPTOP AND SCREEN POSITIONING
   Screen corners match realistic-laptop-v2.webp.
   JavaScript will map the page onto those four corners.
   ====================================================== */

.ascent-builder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 460px;
  isolation: isolate;
}

.ascent-laptop-stage {
  position: relative;
  width: 140%;
  max-width: none;
  aspect-ratio: 3 / 2;
  transform: translateX(-8%);
}

.ascent-laptop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Clip everything to the photographic screen opening. */
.ascent-screen-window {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background: #fafaf8;
  clip-path: polygon(
    42.12% 16.5%,
    82.42% 22.75%,
    77.47% 62.89%,
    37.76% 51.07%
  );
}

/* A fixed-size canvas keeps the miniature website consistent.
   JavaScript applies the photographic perspective. */
.ascent-screen-plane,
.ascent-flight-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 446px;
  transform-origin: 0 0;
}

.ascent-screen-plane {
  overflow: hidden;
  background: #fafaf8;
}

.ascent-page {
  position: relative;
  width: 100%;
}

/* Override general site image spacing for these assets. */
.ascent-page .ascent-piece {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.ascent-destinations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  padding: 12px 18px;
  background: #fafaf8;
}

/* Only hide pieces once JavaScript is ready to animate them. */
.ascent-builder.animation-ready .ascent-piece {
  visibility: hidden;
}

.ascent-builder.animation-ready .ascent-piece.is-landed {
  visibility: visible;
}

/* Floating pieces can travel outside the clipped screen. */
.ascent-flight-layer {
  z-index: 3;
  pointer-events: none;
}

.ascent-flight-tile {
  position: absolute;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(234, 241, 245, 0.65);
  box-shadow: 0 18px 35px rgba(20, 49, 77, 0.2);
  box-sizing: border-box;
}

.ascent-flight-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@media (max-width: 760px) {
  .ascent-builder {
    min-height: 340px;
  }

  .ascent-laptop-stage {
    width: 120%;
    transform: translateX(-6%);
  }
}
/* Transparent header overlays the hero.
   Crop the empty space above and below its lettering. */
.ascent-page > .ascent-piece:first-child {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 0;
  width: 100%;
  height: 64px;
  object-fit: cover;
  object-position: center;
}
/* Dark glass for the floating header only.
   Removed with the travelling tile when the header lands. */
.ascent-flight-tile.ascent-flight-header {
  background: linear-gradient(
    135deg,
    rgba(20, 49, 77, 0.88),
    rgba(9, 25, 40, 0.75)
  );
  border-color: rgba(190, 220, 240, 0.55);
}
/* ======================================================
   HERO — BLUE POWDER BACKDROP
   Separate decorative layer behind the laptop.
   ====================================================== */

.ascent-powder {
  position: absolute;
  z-index: -1;
  top: -8%;
  left: 8%;
  width: 100%;
  max-width: none;
  height: auto;
  opacity: 0.8;
  pointer-events: none;
}

/* Keep the powder's layer within the laptop stage. */
.ascent-laptop-stage {
  isolation: isolate;
}