/* A little more character, with motion kept separate from the page layout. */
.nav-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.desktop-nav { justify-self: center; }
.nav-cta { justify-self: end; }

/* Give the navigation an even amount of space on both sides. */
@media (max-width: 760px) {
  .nav-wrap { display: flex; }
  .desktop-nav { display: none; }
  .nav-cta { margin-left: auto; }
  .menu-toggle { display: block; }
  .mobile-nav:not([hidden]) { display: flex; }
}

/* Keep the mobile poster headline above its character illustration. */
@media (max-width: 640px) {
  .brand-project .project-poster {
    top: 24px;
    left: 24px;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    padding: 22px 20px;
    transform: rotate(-7deg);
  }
  .brand-project .project-poster strong {
    font-size: clamp(31px, 8vw, 42px);
    margin-top: 18px;
  }
  .brand-project .project-poster strong > span {
    position: absolute;
    left: 20px;
    bottom: 24px;
    font-size: 64px;
    margin: 0;
    line-height: .8;
  }
  .brand-project .poster-bottom {
    position: static;
    display: block;
    margin-top: 14px;
    max-width: 130px;
    font-size: 6px;
    line-height: 1.5;
  }
  .brand-project > img {
    width: min(66%, 245px);
    right: -6%;
    bottom: -6%;
    transform: none;
  }
  .project-card:hover .brand-project > img { transform: translateY(-4px); }
  .project-card:hover .project-poster { transform: rotate(-7deg); }
}

html.smooth-ready { scroll-behavior: auto; }
[data-parallax] {
  translate: var(--drift-x, 0px) calc(var(--parallax-y, 0px) + var(--drift-y, 0px));
  will-change: translate;
}
.spin-object { display: inline-block; animation: slow-spin 32s linear infinite; }
.breathe-object { display: inline-block; animation: object-breathe 5s ease-in-out infinite; }
.hero-glow { animation: warm-glow 9s ease-in-out infinite alternate; }
.hero-doodles { inset: -12%; animation: doodle-drift 65s ease-in-out infinite alternate; }
.orbit-one { animation: orbit-wobble 9s ease-in-out infinite; }
.live-dot { animation: live-pulse 3s ease-in-out infinite; }
.hero-foot i.scroll-mouse {
  width: 19px; height: 30px; border-radius: 12px; position: relative;
  border-color: #a7c2b570;
}
.scroll-mouse::after {
  content: ''; width: 3px; height: 6px; background: var(--mint);
  position: absolute; left: 7px; top: 6px; border-radius: 3px;
  animation: scroll-dot 2.2s ease-in-out infinite;
}
.mascot-note { right: 23%; bottom: 12px; font-size: 11px; }
.service-list li::before {
  content: ''; display: inline-block; width: 4px; height: 4px;
  margin: 0 13px 2px 0; background: var(--orange); border-radius: 50%;
}
.services, .process, .faq { position: relative; isolation: isolate; }
.services { padding-top: 90px; overflow: clip; }
.section-heading, .service-tabs, .service-panels, .service-note,
.work-heading, .work-filters, .work-grid, .contact-heading, .contact-grid {
  position: relative; z-index: 1;
}
.floating-object { position: absolute; pointer-events: none; z-index: 0; line-height: 1; }
.service-flower { left: 4%; top: 15%; font-size: 65px; color: var(--orange); opacity: .55; }
.service-orb {
  right: 3%; top: 46%; width: 32px; height: 32px; border: 8px solid var(--yellow);
  border-radius: 50%; opacity: .55; box-shadow: 4px 6px 0 #082e2b33;
}
.work-spark { right: 7%; top: 45px; font-size: 52px; color: #568369; opacity: .6; }
.contact-spark { left: 4%; top: 90px; font-size: 77px; color: var(--teal); opacity: .18; }
.service-art > img {
  animation: illustration-float 6.5s ease-in-out infinite;
  --art-angle: 0deg;
}
.social-art > img { --art-angle: 6deg; }
.digital-art > img { --art-angle: -3deg; animation-delay: -2s; }
.campaign-art > img { width: 118%; max-width: none; --art-angle: -3deg; animation-delay: -1s; }
.art-label { animation: label-bob 6s ease-in-out infinite; }
.art-label-two { animation-delay: -2s; }
.brand-tile-type { animation: tile-bob 7s ease-in-out infinite; }
.brand-tile-color { animation: tile-bob 6s ease-in-out infinite reverse; }
.brand-art-star { animation: star-wiggle 8s ease-in-out infinite; }
.sound-waves i { animation: wave-pulse 6s ease-in-out infinite; }
.sound-waves i:nth-child(2) { animation-delay: -2s; }
.sound-waves i:nth-child(3) { animation-delay: -4s; }

/* Four independent concepts, with their own small worlds. */
.work-grid { row-gap: 44px; }
.work-filters { flex-wrap: wrap; }
.project-visual {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: box-shadow .35s, transform .35s cubic-bezier(.2,.6,.2,1);
}
.project-card:hover .project-open { transform: scale(1.12); }
.project-card .project-open { font-family: var(--body); font-size: 25px; font-weight: 400; }
.production-project { background: #e5d6b4; }
.launch-project { background: #1d514b; }
.scene-heading {
  font-family: var(--display); font-size: 29px; line-height: .96;
  letter-spacing: -.045em; position: absolute; top: 26px; left: 27px; z-index: 2;
}
.production-project .scene-heading { color: var(--teal); }
.launch-project .scene-heading { color: var(--cream); }
.production-project > img, .launch-project > img {
  position: absolute; width: 95%; max-width: none; right: -2%; bottom: -1%;
  filter: drop-shadow(0 17px 12px #123c3b2e);
  transition: transform .65s cubic-bezier(.2,.6,.2,1);
}
.launch-project > img { width: 103%; right: -9%; bottom: 0; }
.project-card:hover .production-project > img { transform: translateY(-9px) rotate(-2deg); }
.project-card:hover .launch-project > img { transform: translate(2px,-12px) rotate(-3deg); }
.scene-grid {
  position: absolute; inset: 0; opacity: .14;
  background-image: linear-gradient(#123c3b55 1px,transparent 1px), linear-gradient(90deg,#123c3b55 1px,transparent 1px);
  background-size: 33px 33px;
}
.film-hole { position: absolute; width: 40px; height: 12px; border: 2px solid #123c3b4d; border-radius: 3px; right: 25px; }
.film-hole-one { top: 28px; } .film-hole-two { top: 50px; }
.launch-orbit {
  position: absolute; width: 82%; height: 79%; border: 1px solid #b6d2ae35;
  border-radius: 50%; right: -10%; top: 10%; transform: rotate(-25deg);
}
.launch-spark { position: absolute; color: var(--yellow); font-size: 39px; right: 38px; top: 25px; }
.project-card:nth-child(2n) { transition-delay: .08s; }

/* The crew appears outside the portfolio, too. */
.about-art-parallax { width: 125%; max-width: none; margin-left: -12%; position: relative; z-index: 1; }
.about-art-parallax > img { width: 100%; filter: drop-shadow(0 20px 20px #072c2c50); animation: studio-float 7s ease-in-out infinite; }
.about-orbit { animation: about-orbit-turn 20s ease-in-out infinite; }
.process-heading {
  display: grid; grid-template-columns: minmax(0,1fr) 235px;
  text-align: left; column-gap: 45px; align-items: center;
}
.process-heading > .eyebrow, .process-heading > h2, .process-heading > p { grid-column: 1; }
.process-heading > p:not(.eyebrow) { font-size: 16px; color: #47695a; }
.process-heading > h2 { font-size: clamp(36px,4.2vw,63px); }
.process-companion { grid-column: 2; grid-row: 1 / 4; }
.process-companion img { width: 115%; max-width: none; margin-left: -7.5%; animation: crew-float 7.5s ease-in-out infinite; }
.step-number > span { display: inline-block; transition: transform .5s; }
.process-step:hover .step-number > span { transform: rotate(25deg) scale(1.1); }
.faq-buddy { width: 190px; margin: 22px 0 25px; }
.faq-buddy img { width: 100%; animation: buddy-float 5.5s ease-in-out infinite; filter: drop-shadow(0 13px 10px #062b2b30); }
.faq-heading > p:last-child { margin-top: 0; }
.contact-doodles { inset: -10%; animation: doodle-drift 90s ease-in-out infinite alternate-reverse; }
.contact-eye { animation: eye-look 7s ease-in-out infinite; }
.footer-wordmark > span { animation: slow-spin 28s linear infinite; }

@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes object-breathe { 0%,100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.2) rotate(12deg); } }
@keyframes doodle-drift { to { transform: translate3d(22px,30px,0) rotate(2deg); } }
@keyframes warm-glow { from { opacity: .08; } to { opacity: .18; } }
@keyframes orbit-wobble { 0%,100% { transform: rotate(25deg) translateY(0); } 50% { transform: rotate(65deg) translateY(-14px); } }
@keyframes live-pulse { 0%,100% { box-shadow: 0 0 0 4px #ff890015; } 50% { box-shadow: 0 0 0 8px #ff890005; } }
@keyframes scroll-dot { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes illustration-float { 0%,100% { transform: translateY(0) rotate(var(--art-angle)); } 50% { transform: translateY(-13px) rotate(calc(var(--art-angle) + 2deg)); } }
@keyframes label-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes tile-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes star-wiggle { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(12deg); } }
@keyframes wave-pulse { 0%,100% { opacity: .6; scale: 1; } 50% { opacity: 1; scale: 1.07; } }
@keyframes studio-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes about-orbit-turn { 0%,100% { transform: rotate(20deg) scaleY(.72); } 50% { transform: rotate(45deg) scaleY(.8); } }
@keyframes crew-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes buddy-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes eye-look { 0%,100% { transform: rotate(0); } 40%,60% { transform: rotate(12deg); } }

@media(max-width:1150px) {
  .scene-heading { font-size: 25px; left: 23px; top: 23px; }
  .process-heading { grid-template-columns: minmax(0,1fr) 205px; column-gap: 30px; }
}
@media(max-width:860px) {
  .process-heading { grid-template-columns: minmax(0,1fr) 175px; column-gap: 25px; }
  .process-heading > h2 { font-size: 36px; }
  .scene-heading { font-size: 22px; left: 20px; top: 20px; }
  .film-hole { width: 29px; height: 9px; right: 18px; }
  .film-hole-one { top: 22px; } .film-hole-two { top: 39px; }
  .launch-spark { font-size: 29px; right: 26px; top: 22px; }
  .faq-buddy { width: 160px; }
  .service-flower { left: 1%; font-size: 43px; }
}
@media(max-width:640px) {
  .services { padding-top: 68px; }
  .service-flower { top: 30px; left: 7%; font-size: 27px; opacity: .4; }
  .service-orb { right: 3%; top: 42%; width: 19px; height: 19px; border-width: 5px; opacity: .35; }
  .work-spark { right: 7%; top: 24px; font-size: 27px; }
  .contact-spark { left: auto; right: 6%; top: 24px; font-size: 38px; }
  .hero-foot i.scroll-mouse { width: 16px; height: 27px; }
  .scroll-mouse::after { left: 5.5px; width: 3px; top: 5px; }
  .hero-foot > a { bottom: 7px; }
  .mascot-note { font-size: 9px; right: 23%; bottom: 9px; }
  .campaign-art > img { width: 115%; max-height: 350px; }
  .scene-heading { font-size: 28px; left: 25px; top: 25px; }
  .production-project > img { width: 100%; right: -4%; bottom: 0; }
  .launch-project > img { width: 110%; right: -13%; bottom: 0; }
  .film-hole { width: 33px; height: 11px; right: 22px; }
  .film-hole-one { top: 27px; } .film-hole-two { top: 46px; }
  .launch-spark { font-size: 31px; right: 25px; top: 29px; }
  .work-grid { row-gap: 33px; }
  .about-art-parallax { width: 116%; margin-left: -8%; }
  .process-heading { display: block; }
  .process-heading > h2 { font-size: 8.7vw; }
  .process-heading > p:not(.eyebrow) { font-size: 14px; }
  .process-companion { width: 180px; margin: 28px auto -7px; }
  .process-heading { margin-bottom: 35px; }
  .faq-buddy { width: 140px; margin: 20px 0; }
  .faq-heading > p:last-child { margin-top: 0; }
}
.motion-paused [data-parallax] { translate: 0 0 !important; }
.motion-paused .project-visual { transform: none; }
@media(prefers-reduced-motion:reduce) {
  [data-parallax] { translate: 0 0 !important; will-change: auto; }
  .project-visual { transform: none; }
  .spin-object, .breathe-object, .hero-glow, .hero-doodles, .orbit-one, .live-dot,
  .scroll-mouse::after, .service-art > img, .art-label, .brand-tile-type, .brand-tile-color,
  .brand-art-star, .sound-waves i, .about-art-parallax > img, .about-orbit,
  .process-companion img, .faq-buddy img, .contact-doodles, .contact-eye, .footer-wordmark > span {
    animation: none !important;
  }
}