/* MUSE / cinematic polish. Load after styles.css; contact reveal owns its own styling. */

/* Light belongs to the opening scene, leaving the rest of the page clear. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 77% 24%, rgba(255,255,255,0.34), transparent 39%),
    radial-gradient(ellipse at 82% 76%, rgba(192,242,241,0.2), transparent 32%);
  opacity: 0.7;
}

.studio-visual {
  background:
    radial-gradient(ellipse at 25% 25%, rgba(212,210,245,0.24), transparent 55%),
    radial-gradient(ellipse at 78% 75%, rgba(192,242,241,0.3), transparent 55%),
    #f0f3f0;
}

/* Extend the existing reveal system, so JavaScript-free content remains visible. */
.motion-ready :is(.work-section, .clients-section, .studio-section, .services-section) [data-reveal] {
  transition-duration: 950ms, 1150ms;
}
.motion-ready .work-card[data-reveal] {
  transform: scale(0.985);
  transition-property: opacity, translate, transform;
  transition-duration: 900ms, 1150ms, 1150ms;
  transition-timing-function: var(--ease);
  transition-delay: var(--scene-delay, 0ms);
}
.motion-ready .work-card[data-reveal].is-visible {
  transform: none;
}
.work-card:nth-child(3n + 2) { --scene-delay: 80ms; }
.work-card:nth-child(3n) { --scene-delay: 160ms; }
.work-grid.is-filtered .work-card { --scene-delay: 0ms; }
.service-row:nth-child(3n + 2) { transition-delay: 65ms; }
.service-row:nth-child(3n) { transition-delay: 130ms; }

.work-image-wrap > img {
  transition-duration: 1400ms;
  transition-timing-function: var(--ease);
}
.work-info {
  transition: transform 750ms var(--ease);
}
.service-row {
  position: relative;
}
.service-row::after {
  content: "";
  position: absolute;
  pointer-events: none;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ink), #74beca, var(--lavender));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 750ms var(--ease);
}
.service-row[open]::after,
.service-row:focus-within::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready body:not(.motion-paused) .hero::after {
    animation: muse-scene-light 20s ease-in-out infinite alternate;
  }
  .motion-ready body:not(.motion-paused) .hero-content > .eyebrow {
    animation: muse-scene-enter 1000ms var(--ease) 100ms both;
  }
  .motion-ready body:not(.motion-paused) .hero-copy {
    animation: muse-scene-enter 1100ms var(--ease) 280ms both;
  }
  .motion-ready body:not(.motion-paused) .hero-actions {
    animation: muse-scene-enter 1100ms var(--ease) 390ms both;
  }
}

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .motion-ready body:not(.motion-paused) .hero-video-wrap {
    animation: muse-camera-drift 24s ease-in-out infinite alternate;
    transform-origin: 70% 50%;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.motion-paused) .work-card:hover .work-image-wrap > img {
    transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.065);
  }
  body:not(.motion-paused) .work-card:hover .work-info {
    transform: translateY(-3px);
  }
  .service-row:hover::after { transform: scaleX(1); }
}

@keyframes muse-scene-light {
  from { transform: translate3d(-1%, 0, 0) scale(1); opacity: 0.55; }
  to { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 0.85; }
}
@keyframes muse-camera-drift {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
@keyframes muse-scene-enter {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

/* The existing control also stops the added movement immediately. */
.motion-paused .hero::after,
.motion-paused .hero-video-wrap,
.motion-paused .hero-content > .eyebrow,
.motion-paused .hero-copy,
.motion-paused .hero-actions {
  animation: none !important;
  transform: none;
  translate: none;
  opacity: 1;
}
.motion-paused .work-card[data-reveal] {
  opacity: 1;
  translate: none;
  transform: none;
  transition: none;
}
.motion-paused .work-image-wrap > img,
.motion-paused .work-info {
  transform: none !important;
  transition: none !important;
}
.motion-paused :is(.work-section, .clients-section, .studio-section, .services-section) [data-reveal],
.motion-paused .service-row::after {
  transition-delay: 0ms;
  transition-duration: 0ms;
}
@media (max-width: 540px) {
  .work-card { --scene-delay: 0ms !important; }
  .hero::after { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-video-wrap {
    animation: none !important;
    transform: none !important;
  }
  .motion-ready .work-card[data-reveal],
  .work-image-wrap > img, .work-info {
    transform: none !important;
    transition: none !important;
  }
  .motion-ready .work-card[data-reveal] {
    opacity: 1;
    translate: none;
  }
}

/* The original brand artwork stays intact; light is masked to its silhouette. */
[data-brand-animation] { position: relative; isolation: isolate; }
[data-brand-animation] img { transform-origin: left center; }
.site-header [data-brand-animation].is-logo-entering img { animation: muse-logo-arrive 800ms var(--ease) both; }
@supports (mask-image: url("assets/muse-logo.svg")) or (-webkit-mask-image: url("assets/muse-logo.svg")) {
  [data-brand-animation]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(192,242,241,0.85) 43%, #fff 50%, rgba(212,210,245,0.9) 57%, transparent 70%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 150% center;
    -webkit-mask: url("assets/muse-logo.svg") left center / contain no-repeat;
    mask: url("assets/muse-logo.svg") left center / contain no-repeat;
    mask-mode: alpha;
  }
  [data-brand-animation].is-logo-shimmering::after { animation: muse-logo-sheen 1200ms var(--ease) both; }
}
@keyframes muse-logo-arrive {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px) scale(0.98); filter: blur(2px); }
  to { opacity: 1; clip-path: inset(0); transform: none; filter: none; }
}
@keyframes muse-logo-sheen {
  0% { opacity: 0; background-position: 150% center; }
  18%, 72% { opacity: 0.95; }
  100% { opacity: 0; background-position: -150% center; }
}
.motion-paused [data-brand-animation] img { animation: none !important; opacity: 1; transform: none; clip-path: none; filter: none; }
.motion-paused [data-brand-animation]::after { animation: none !important; opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  [data-brand-animation] img { animation: none !important; opacity: 1; transform: none; clip-path: none; filter: none; }
  [data-brand-animation]::after { animation: none !important; opacity: 0 !important; }
}