/* A slow first look at each home, then quiet feedback for useful actions. */
.floating-revision {
  --motion-feedback: 180ms;
  --motion-settle: 320ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-enter-distance: 16px;
}

/* Animate only the photograph. The contrast layer and copy stay still. */
@media (prefers-reduced-motion: no-preference) {
  .floating-revision .hero .hero-photo img.hero-image {
    animation: ccni-home-perspective 24s linear 1 both;
    transform-origin: 50% 55%;
  }
}

@keyframes ccni-home-perspective {
  from { transform: scale(1.01) translate3d(-.1%, .08%, 0); }
  to { transform: scale(1.04) translate3d(.15%, -.1%, 0); }
}

/* The smaller composition keeps the whole building comfortably in frame. */
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .floating-revision .hero .hero-photo img.hero-image {
    animation-name: ccni-home-perspective-phone;
  }
}

@keyframes ccni-home-perspective-phone {
  from { transform: scale(1.005); }
  to { transform: scale(1.025) translate3d(.1%, -.08%, 0); }
}

.floating-revision .button,
.floating-revision .form-text-button,
.floating-revision .menu-toggle,
.floating-revision .menu-close,
.floating-revision .menu-contact-action,
.floating-revision .project-preview-controls button,
.floating-revision .project-story-expand {
  transition: background-color var(--motion-feedback) ease,
    color var(--motion-feedback) ease,
    border-color var(--motion-feedback) ease,
    transform var(--motion-feedback) var(--motion-ease);
}

.floating-revision .button svg,
.floating-revision .card-action svg,
.floating-revision .project-action svg,
.floating-revision .menu-news svg,
.floating-revision .project-story-text-link svg {
  transition: transform var(--motion-settle) var(--motion-ease);
}

.floating-revision .service-card,
.floating-revision .project-card,
.floating-revision .news-card {
  transition: box-shadow var(--motion-settle) var(--motion-ease);
}

.floating-revision .service-media img,
.floating-revision .project-media > img,
.floating-revision .news-card-photo img {
  transition: transform 600ms var(--motion-ease);
}

.floating-revision .card-action,
.floating-revision .project-action,
.floating-revision .news-card-action {
  transition: background-color var(--motion-feedback) ease,
    color var(--motion-feedback) ease,
    border-color var(--motion-feedback) ease;
}

.floating-revision .form-field input:not([type=checkbox]),
.floating-revision .form-field select,
.floating-revision .form-field textarea {
  transition: border-color var(--motion-feedback) ease,
    background-color var(--motion-feedback) ease;
}

.floating-revision .form-field input[type=file]::file-selector-button {
  transition: border-color var(--motion-feedback) ease,
    background-color var(--motion-feedback) ease;
}

@media (hover: hover) and (pointer: fine) {
  .floating-revision .service-card:hover,
  .floating-revision .project-card:hover,
  .floating-revision .news-card:hover {
    box-shadow: 0 16px 32px #17171718;
  }

  .floating-revision .menu-toggle:hover,
  .floating-revision .menu-close:hover {
    background-color: #ffffff12;
    border-color: #ffffff80;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .floating-revision .service-card:hover .service-media img,
  .floating-revision .project-card:hover .project-media > img,
  .floating-revision .news-card:hover .news-card-photo img {
    transform: scale(1.02);
  }

  /* Preview tracks stay stationary so swiping and photo counts remain exact. */
  .floating-revision .projects-overview .project-card:hover .project-media img {
    transform: none;
  }

  .floating-revision .service-card:hover .card-action svg,
  .floating-revision .project-card:hover .project-action svg {
    transform: translate3d(2px, -2px, 0);
  }

  .floating-revision .button:hover svg,
  .floating-revision .menu-news:hover svg,
  .floating-revision .project-story-text-link:hover svg {
    transform: translate3d(2px, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .floating-revision .button:not(:disabled):not([aria-disabled=true]):active,
  .floating-revision .form-text-button:not(:disabled):active,
  .floating-revision .menu-toggle:active,
  .floating-revision .menu-close:active,
  .floating-revision .menu-contact-action:active,
  .floating-revision .project-preview-controls button:active {
    transform: translateY(1px);
  }
}

/* Retain instantaneous colour and focus feedback with a still photograph. */
@media (prefers-reduced-motion: reduce) {
  .floating-revision .hero .hero-photo img.hero-image {
    animation: none !important;
    transform: none !important;
  }
}

/* The opening title, explanation and actions arrive as readable whole groups. */
@media (prefers-reduced-motion: no-preference) {
  .floating-revision .hero-content > h1,
  .floating-revision .hero-content > .hero-summary,
  .floating-revision .hero-content > .actions,
  .floating-revision .hero-content > .section-label,
  .floating-revision .hero-content > .hero-roof-mark {
    animation: ccni-copy-arrive 550ms var(--motion-ease) 1 both;
  }

  .floating-revision .hero-content > h1 { animation-delay: 80ms; }
  .floating-revision .hero-content > .hero-summary { animation-delay: 160ms; }
  .floating-revision .hero-content > .actions { animation-delay: 240ms; }
  .floating-revision .ccni-content-intro,
  .floating-revision .project-story-introduction {
    animation: ccni-copy-arrive 550ms var(--motion-ease) 1 both;
  }

  /* Only JavaScript arms offscreen groups, and only after observation is ready. */
  .floating-revision .ccni-enter {
    opacity: 1;
    transform: none;
    transition: opacity 550ms var(--motion-ease) var(--ccni-enter-delay, 0ms),
      transform 550ms var(--motion-ease) var(--ccni-enter-delay, 0ms),
      box-shadow var(--motion-settle) var(--motion-ease);
  }

  .floating-revision .ccni-enter.ccni-enter-pending {
    opacity: 0;
    transform: translate3d(0, var(--motion-enter-distance), 0);
  }

  .floating-revision .ccni-enter.ccni-enter-visible {
    opacity: 1;
    transform: none;
  }

  .floating-revision .ccni-enter.ccni-enter-instant {
    transition: none;
  }
}

@keyframes ccni-copy-arrive {
  from { opacity: .8; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 599px) {
  .floating-revision { --motion-enter-distance: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-revision .ccni-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* A small, slow pan on service idea photographs, with no controls. */
.service-idea-photo{overflow:hidden;border-radius:20px}
@keyframes ccni-service-pan{from{transform:scale(1.005) translate3d(-.15%,.1%,0)}to{transform:scale(1.04) translate3d(.15%,-.1%,0)}}
@media(prefers-reduced-motion:no-preference){
 .service-idea-photo>img{animation:ccni-service-pan 14s ease-in-out infinite alternate both;animation-play-state:paused}
 .service-idea-photo.is-panning>img{animation-play-state:running}
}
@media(prefers-reduced-motion:reduce){.service-idea-photo>img{animation:none!important;transform:none!important}}