/*
 * Opt-in motion profile: add ?motion=ios26 to the page URL.
 * This file is intentionally isolated so removing its link restores the baseline.
 */

:root.motion-ios26 {
  --motion-instant: 140ms;
  --motion-content: 260ms;
  --motion-layer: 360ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-ios26 .profile-panel,
.motion-ios26 .video-tile,
.motion-ios26 .app-grid,
.motion-ios26 .tools-panel,
.motion-ios26 .works-panel {
  animation-name: motionIOS26StageIn;
  animation-duration: 520ms;
  animation-timing-function: var(--motion-ease-out);
}

.motion-ios26 .profile-panel {
  animation-delay: 40ms;
}

.motion-ios26 .video-tile,
.motion-ios26 .app-grid {
  animation-delay: 80ms;
}

.motion-ios26 .tools-panel {
  animation-delay: 120ms;
}

.motion-ios26 .works-panel {
  animation-delay: 160ms;
}

.motion-ios26 :where(
  .app-icon,
  .play-orb,
  .video-tile .lg-content,
  .tool-icon,
  .work-card,
  .player-back,
  .player-nav,
  .viewer-close,
  .viewer-nav,
  .sheet-close,
  .wechat-round-action
) {
  --liquid-press-scale: 0.976;
  --liquid-touch-scale: 0.982;
  --liquid-release-scale: 1.002;
  transition-duration: var(--motion-content), var(--motion-content), var(--motion-content);
  transition-timing-function: var(--motion-ease-spring), var(--motion-ease-out), var(--motion-ease-out);
}

.motion-ios26 :where(
  .app-icon,
  .play-orb,
  .video-tile .lg-content,
  .tool-icon,
  .work-card,
  .player-back,
  .player-nav,
  .viewer-close,
  .viewer-nav,
  .sheet-close,
  .wechat-round-action
):is(:active, .is-pressing) {
  transition-duration: var(--motion-instant);
}

.motion-ios26 :where(
  .app-icon,
  .play-orb,
  .video-tile .lg-content,
  .tool-icon,
  .work-card,
  .player-back,
  .player-nav,
  .viewer-close,
  .viewer-nav,
  .sheet-close,
  .wechat-round-action
).is-releasing {
  transition-duration: 240ms, 220ms, 220ms;
  transition-timing-function: var(--motion-ease-spring), var(--motion-ease-out), var(--motion-ease-out);
}

.motion-ios26 .glass-panel[data-liquid-distort] .lg-filter-box,
.motion-ios26 .glass-panel[data-liquid-distort] .lg-overlay-bg,
.motion-ios26 .glass-panel[data-liquid-distort] .lg-overlay-bg::before {
  transition-duration: var(--motion-instant);
  transition-timing-function: var(--motion-ease-out);
}

.motion-ios26 .project-viewer:not([hidden]),
.motion-ios26 .app-sheet:not([hidden]),
.motion-ios26 .contact-layer:not([hidden]),
.motion-ios26 .segment-player:not([hidden]):not(.is-inline) {
  animation: motionIOS26LayerIn var(--motion-layer) var(--motion-ease-out) both;
}

.motion-ios26 .sheet-card {
  animation: motionIOS26CardIn var(--motion-layer) var(--motion-ease-out) both;
}

.motion-ios26 .project-frame img {
  transition-duration: var(--motion-content);
  transition-timing-function: var(--motion-ease-out);
}

.motion-ios26 .project-viewer.is-changing .project-frame img {
  opacity: 0.48;
  transform: scale(1.012);
}

.motion-ios26 .project-frame > .official-media-controller.is-inline-media {
  transition-duration: var(--motion-layer);
  transition-timing-function: var(--motion-ease-out);
}

.motion-ios26 .project-viewer.is-playing .project-highlight {
  animation: motionIOS26MetaIn 360ms 70ms var(--motion-ease-out) both;
}

.motion-ios26 .contact-toast {
  transition-duration: 180ms;
  transition-timing-function: var(--motion-ease-out);
}

@keyframes motionIOS26StageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motionIOS26LayerIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.994);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes motionIOS26CardIn {
  from {
    opacity: 0;
    transform: var(--sheet-transform, translate(-50%, -50%)) scale(0.986);
  }

  to {
    opacity: 1;
    transform: var(--sheet-transform, translate(-50%, -50%)) scale(1);
  }
}

@keyframes motionIOS26MetaIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ios26 .profile-panel,
  .motion-ios26 .video-tile,
  .motion-ios26 .app-grid,
  .motion-ios26 .tools-panel,
  .motion-ios26 .works-panel,
  .motion-ios26 .project-viewer:not([hidden]),
  .motion-ios26 .app-sheet:not([hidden]),
  .motion-ios26 .contact-layer:not([hidden]),
  .motion-ios26 .segment-player:not([hidden]),
  .motion-ios26 .sheet-card,
  .motion-ios26 .project-viewer.is-playing .project-highlight {
    animation: none !important;
  }

  .motion-ios26 :where(
    .app-icon,
    .play-orb,
    .video-tile .lg-content,
    .tool-icon,
    .work-card,
    .player-back,
    .player-nav,
    .viewer-close,
    .viewer-nav,
    .sheet-close,
    .wechat-round-action
  ),
  .motion-ios26 .glass-panel[data-liquid-distort] .lg-filter-box,
  .motion-ios26 .glass-panel[data-liquid-distort] .lg-overlay-bg,
  .motion-ios26 .glass-panel[data-liquid-distort] .lg-overlay-bg::before,
  .motion-ios26 .project-frame img,
  .motion-ios26 .project-frame > .official-media-controller.is-inline-media,
  .motion-ios26 .contact-toast {
    transition-duration: 1ms !important;
  }

  .motion-ios26 .project-viewer.is-changing .project-frame img,
  .motion-ios26 :where(
    .app-icon,
    .play-orb,
    .video-tile .lg-content,
    .tool-icon,
    .work-card,
    .player-back,
    .player-nav,
    .viewer-close,
    .viewer-nav,
    .sheet-close,
    .wechat-round-action
  ):is(:active, .is-pressing, .is-releasing) {
    transform: var(--liquid-base-transform, none);
  }
}