/* Silent 14.5s fly-over, adapted from the supplied film direction.
   Edit only these accents to recolor the decorative scene. No audio or media dependencies. */
.portfolio-backdrop {
  --film-cyan: #78f0dc;
  --film-purple: #aa9cff;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 82% 30%, #24213f 0, #101928 35%, #090d16 75%);
  contain: strict;
}
body { isolation: isolate; }
.film-stage {
  position: absolute;
  width: min(100vw, 1100px);
  height: 100%;
  right: -15%;
  top: 0;
  perspective: 1150px;
  perspective-origin: 50% 45%;
  opacity: .32;
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 85%, transparent);
}
.film-camera {
  position: absolute;
  width: 390px;
  height: 1000px;
  left: 50%;
  top: 40%;
  margin-left: -195px;
  transform-style: preserve-3d;
  animation: portfolio-flight 14.5s linear infinite;
}
.film-page {
  position: absolute;
  inset: 0;
  border: 1px solid #a4b1c844;
  border-radius: 24px;
  background: linear-gradient(155deg, #26384a, #131c2b 55%, #201e34);
  box-shadow: 0 40px 90px #0007;
  padding: 26px;
  display: grid;
  align-content: start;
  gap: 26px;
  transform-style: preserve-3d;
}
.film-section { position: relative; transform-style: preserve-3d; }
.film-hero { height: 225px; padding: 24px 18px; border-bottom: 1px solid #a4b1c833; }
.film-line { height: 7px; border-radius: 8px; background: #a4b1c84d; width: 66%; margin: 12px 0; }
.film-line.short { width: 42%; }
.film-line.title { width: 80%; height: 17px; background: var(--film-cyan); opacity: .65; }
.film-line.title:nth-child(2) { background: var(--film-purple); width: 58%; }
.film-chip { display: inline-block; width: 66px; height: 20px; margin: 16px 8px 0 0; border: 1px solid #78f0dc66; border-radius: 5px; background: #78f0dc22; transform: translateZ(25px); }
.film-chip + .film-chip { background: #aa9cff22; border-color: #aa9cff66; }
.film-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.film-panel {
  height: 170px;
  border-radius: 13px;
  border: 1px solid #a4b1c844;
  background: linear-gradient(135deg, #304c59, #182333);
  box-shadow: 0 16px 26px #0005;
  transform-origin: center;
  animation: portfolio-lift 14.5s ease-in-out infinite;
}
.film-panel:nth-child(2) { background: linear-gradient(135deg, #413952, #1c2233); animation-name: portfolio-lift-second; }
.film-chart { height: 110px; display: flex; gap: 12px; align-items: end; padding: 22px; }
.film-chart i { flex: 1; background: var(--film-cyan); opacity: .5; border-radius: 4px 4px 0 0; height: 50%; }
.film-chart i:nth-child(2) { height: 85%; }
.film-chart i:nth-child(3) { height: 65%; background: var(--film-purple); }
.film-chart i:nth-child(4) { height: 100%; }
.film-orbit { width: 80px; height: 80px; border: 1px solid var(--film-purple); border-radius: 50%; margin: 30px auto; position: relative; }
.film-orbit::after { content: ''; position: absolute; inset: 14px; border: 1px solid var(--film-cyan); transform: rotate(-25deg); border-radius: 12px; }
.film-wide { height: 150px; border: 1px solid #aa9cff55; border-radius: 12px; background: #aa9cff11; padding: 22px; transform: translateZ(20px); }
.film-wide .film-line { margin: 15px 0; }
.film-footer { height: 130px; border-top: 1px solid #a4b1c833; padding-top: 22px; }
.film-tile { position: absolute; top: 90px; width: 52px; height: 52px; border-radius: 12px; border: 1px solid #78f0dc77; background: linear-gradient(145deg, #38575d, #172032); box-shadow: 0 18px 30px #0005; transform: translateZ(50px); animation: portfolio-tile 14.5s ease-in-out infinite; }
.film-tile::after { content: ''; position: absolute; inset: 15px; border: 1px solid var(--film-cyan); border-radius: 5px; }
.film-tile.left { left: -45px; }
.film-tile.right { right: -45px; top: 220px; border-color: #aa9cff77; }
/* Continuous backward glide, overhead rise, then a quiet return to the hero.
   No text or end-card overlays; the real portfolio remains interactive above it. */
@keyframes portfolio-flight {
  0% { transform: translateY(-70px) rotateX(56deg) scale(1.15); }
  5% { transform: translateY(-85px) rotateX(56deg) scale(1.14); }
  54% { transform: translateY(-520px) rotateX(56deg) scale(.94); }
  64% { transform: translateY(-350px) rotateX(0deg) scale(.55); }
  66% { transform: translateY(-350px) rotateX(0deg) scale(.56); }
  70% { transform: translateY(-70px) rotateX(22deg) scale(.9); }
  90% { transform: translateY(-70px) rotateX(22deg) scale(.92); }
  100% { transform: translateY(-70px) rotateX(56deg) scale(1.15); }
}
@keyframes portfolio-lift {
  0%, 12%, 58%, 100% { transform: translateZ(18px) rotateX(0deg); }
  22%, 40% { transform: translateZ(85px) rotateX(-30deg); }
}
@keyframes portfolio-lift-second {
  0%, 15%, 62%, 100% { transform: translateZ(22px) rotateX(0deg); }
  25%, 43% { transform: translateZ(110px) rotateX(-36deg); }
}
@keyframes portfolio-tile {
  0%, 100% { transform: translate3d(0, 0, 50px) rotateX(0deg); }
  12%, 48% { transform: translate3d(0, 55px, 110px) rotateX(-25deg); }
  64% { transform: translate3d(0, 0, 25px) rotateX(0deg); }
  72%, 90% { transform: translate3d(0, 0, 75px) rotateX(-15deg); }
}
/* Opaque enough to protect text contrast while letting the scene read in negative space. */
.hero::before { background: linear-gradient(90deg, #090d16f2, #090d16c9 48%, #090d1655); }
.hero-grid { display: none; }
.sculpture { opacity: .8; }
.motion-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 30px; background: #101724ed; color: var(--muted); cursor: pointer; font-size: 11px; box-shadow: 0 6px 24px #0005; }
.motion-toggle:hover { color: var(--cyan); }
.motion-toggle[hidden] { display: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .project-card { transform: none; }
@media (max-width: 700px) {
  .film-stage { right: -35%; width: 150vw; opacity: .23; }
  .film-camera { width: 300px; margin-left: -150px; }
  .film-page { padding: 20px; }
  .film-panels { gap: 10px; }
  .film-chart { gap: 7px; padding: 16px; }
  .hero::before { background: linear-gradient(180deg, #090d16df, #090d16ba); }
  .motion-toggle { bottom: 12px; right: 12px; }
  footer { padding-bottom: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-camera { animation: none; transform: translateY(-180px) rotateX(25deg) scale(.8); }
  .film-panel, .film-tile { animation: none; }
  .motion-toggle { display: none; }
}