/* macOS-inspired motion layer — build 001
   Additive motion system: spring transforms, glass toolbar, dock magnification,
   layered hover depth, scroll reveals and page transitions. */

:root {
  --mac-spring: cubic-bezier(.16, 1, .3, 1);
  --mac-spring-soft: cubic-bezier(.22, 1, .36, 1);
  --mac-spring-snap: cubic-bezier(.34, 1.56, .64, 1);
  --mac-ease-out: cubic-bezier(.2, .8, .2, 1);
  --mac-glass: color-mix(in srgb, var(--tone-a, #fff) 72%, transparent);
  --mac-glass-strong: color-mix(in srgb, var(--tone-b, #fff) 84%, transparent);
  --mac-shadow: 0 28px 70px rgb(0 0 0 / 13%), 0 8px 24px rgb(0 0 0 / 8%);
  --mac-shadow-hover: 0 42px 110px rgb(0 0 0 / 20%), 0 12px 34px rgb(0 0 0 / 10%);
}

html {
  scroll-behavior: smooth;
  view-transition-name: none;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cross-document View Transitions in browsers that support them. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: macViewOld .34s var(--mac-ease-out) both;
}

::view-transition-new(root) {
  animation: macViewNew .58s var(--mac-spring) both;
}

@keyframes macViewOld {
  to { opacity: 0; transform: scale(.985); filter: blur(6px); }
}

@keyframes macViewNew {
  from { opacity: 0; transform: scale(1.016) translateY(10px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Fallback page-transition curtain. */
.mac-page-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.035);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--yellow, #f8bb10) 9%, transparent), transparent 34%),
    color-mix(in srgb, var(--tone-a, #fff) 94%, transparent);
  -webkit-backdrop-filter: blur(0px) saturate(110%);
  backdrop-filter: blur(0px) saturate(110%);
  transition:
    opacity .30s var(--mac-ease-out),
    transform .46s var(--mac-spring),
    backdrop-filter .30s ease,
    -webkit-backdrop-filter .30s ease;
}

body.mac-page-leave .mac-page-curtain {
  opacity: 1;
  transform: scale(1);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

body.mac-page-enter main,
body.mac-page-enter #root > *:not(.seo-fallback) {
  animation: macPageEnter .72s var(--mac-spring) both;
}

@keyframes macPageEnter {
  from { opacity: 0; transform: translateY(14px) scale(.993); filter: blur(5px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Floating glass toolbar — macOS toolbar feel while preserving the original layout. */
.site-header {
  position: sticky !important;
  top: max(10px, env(safe-area-inset-top, 0px));
  z-index: 80 !important;
  margin-top: 10px !important;
  padding-inline: 14px;
  border: 1px solid color-mix(in srgb, var(--line, #ddd) 74%, transparent) !important;
  border-radius: 22px;
  background: var(--mac-glass) !important;
  box-shadow: 0 16px 46px rgb(0 0 0 / 9%), inset 0 1px rgb(255 255 255 / 24%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  transition:
    transform .52s var(--mac-spring),
    box-shadow .42s ease,
    background-color .35s ease,
    border-color .35s ease;
  transform: translate3d(0,0,0);
}

.site-header.mac-header-scrolled {
  transform: translateY(2px) scale(.995);
  box-shadow: 0 22px 64px rgb(0 0 0 / 14%), inset 0 1px rgb(255 255 255 / 20%);
}

.site-brand > span,
.site-nav-actions .site-util-btn,
.site-nav-actions .nav-cta,
.site-nav-actions > button,
.site-nav-actions > a,
.site-links a {
  will-change: transform;
  transform-origin: 50% 100%;
}

.site-links a {
  position: relative;
  transition: color .22s ease, transform .38s var(--mac-spring) !important;
}

.site-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(.2);
  background: var(--yellow, #f8bb10);
  transition: opacity .2s ease, transform .42s var(--mac-spring-snap);
}

.site-links a:hover::after,
.site-links a:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* A tiny Dock shelf under the utility controls, only visible on precise pointers. */
.site-utility-group {
  position: relative;
  padding: 4px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--field-bg, #fff) 54%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line, #ddd) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* Magnetic controls and buttons. JS writes --mac-x / --mac-y. */
.mac-magnetic {
  --mac-x: 0px;
  --mac-y: 0px;
  translate: var(--mac-x) var(--mac-y);
  transition:
    translate .46s var(--mac-spring),
    scale .38s var(--mac-spring-snap),
    box-shadow .28s ease,
    filter .28s ease !important;
  will-change: translate, scale;
}

.mac-magnetic:hover {
  filter: saturate(1.06);
}

.mac-pressing {
  scale: .955 !important;
  transition-duration: .09s !important;
}

/* Universal focus halo with native-app feel. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow, #f8bb10) 28%, transparent),
              0 0 0 1px var(--yellow, #f8bb10) !important;
}

/* Layered card motion. */
.mac-tilt {
  --mac-rx: 0deg;
  --mac-ry: 0deg;
  --mac-lift: 0px;
  --mac-card-scale: 1;
  --mac-glow-x: 50%;
  --mac-glow-y: 50%;
  position: relative;
  transform:
    perspective(1150px)
    translate3d(0, var(--mac-lift), 0)
    rotateX(var(--mac-rx))
    rotateY(var(--mac-ry))
    scale(var(--mac-card-scale));
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform .72s var(--mac-spring),
    box-shadow .45s ease,
    border-color .35s ease,
    filter .35s ease;
  will-change: transform;
  isolation: isolate;
}

.mac-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mac-glow-x) var(--mac-glow-y), rgb(255 255 255 / 16%), transparent 34%);
  mix-blend-mode: soft-light;
  transition: opacity .28s ease;
}

.mac-tilt.mac-pointer-over {
  --mac-lift: -7px;
  --mac-card-scale: 1.012;
  box-shadow: var(--mac-shadow-hover) !important;
}

.mac-tilt.mac-pointer-over::after {
  opacity: 1;
}

.project-card,
.work-card,
.service-intro-card,
.case-scope,
.estimator-card,
.consultation-card,
.request-layout,
.resume-fact-card,
.education-card,
.consultation-card,
.service-deliverables li,
.about-hero-grid > img,
.case-visual img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.project-card-image,
.work-card-media img,
.case-visual img,
.about-hero-grid > img {
  transition:
    transform .86s var(--mac-spring),
    filter .5s ease !important;
  will-change: transform;
}

.project-card.mac-pointer-over .project-card-image,
.work-card.mac-pointer-over .work-card-media img {
  transform: scale(1.045) translate3d(0,-2px,0) !important;
  filter: saturate(1.04) contrast(1.015);
}

.project-overlay,
.work-card-copy {
  transform: translateZ(22px);
}

/* Launching a project acts like opening a window. */
.project-card.mac-launching,
.work-card.mac-launching {
  --mac-lift: -13px;
  --mac-card-scale: 1.035;
  z-index: 30;
  filter: saturate(1.08);
  box-shadow: 0 52px 140px rgb(0 0 0 / 26%) !important;
}

body.mac-page-leave .project-card:not(.mac-launching),
body.mac-page-leave .work-card:not(.mac-launching) {
  transition: filter .26s ease, opacity .26s ease, transform .32s var(--mac-ease-out);
}

/* Content-window entrance: hero copy and hero media do not arrive at the same time. */
.mac-hero-copy-enter {
  animation: macHeroCopy .92s .05s var(--mac-spring) both;
}

.mac-hero-media-enter {
  animation: macHeroMedia 1.02s .14s var(--mac-spring) both;
}

@keyframes macHeroCopy {
  from { opacity: 0; transform: translate3d(0,24px,0) scale(.985); filter: blur(7px); }
  55% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes macHeroMedia {
  from { opacity: 0; transform: translate3d(28px,16px,0) scale(.94) rotateY(-3deg); filter: blur(8px); }
  62% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}

html[dir="rtl"] .mac-hero-media-enter {
  animation-name: macHeroMediaRtl;
}

@keyframes macHeroMediaRtl {
  from { opacity: 0; transform: translate3d(-28px,16px,0) scale(.94) rotateY(3deg); filter: blur(8px); }
  62% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Scroll reveal: spring + blur + slight scale, with JS-driven stagger. */
.mac-reveal {
  --mac-reveal-delay: 0ms;
  opacity: 0;
  filter: blur(7px);
  translate: 0 28px;
  scale: .985;
  transition:
    opacity .62s var(--mac-ease-out) var(--mac-reveal-delay),
    translate .9s var(--mac-spring) var(--mac-reveal-delay),
    scale .9s var(--mac-spring) var(--mac-reveal-delay),
    filter .58s ease var(--mac-reveal-delay);
}

.mac-reveal.mac-visible {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
  scale: 1;
}

/* Section headings feel like native window titles sliding into place. */
.section-title.mac-reveal,
.section-heading-inline.mac-reveal,
.content-eyebrow.mac-reveal {
  translate: 0 18px;
}
.section-title.mac-reveal.mac-visible,
.section-heading-inline.mac-reveal.mac-visible,
.content-eyebrow.mac-reveal.mac-visible {
  translate: 0 0;
}

/* Selection controls have a springy segmented-control response. */
.estimator-projects button,
.estimator-designs button,
.estimator-features label,
.consultation-days button,
.consultation-times button,
.consultation-methods label,
.tag-list span {
  transition:
    transform .42s var(--mac-spring-snap),
    background-color .26s ease,
    border-color .26s ease,
    color .26s ease,
    box-shadow .26s ease !important;
}

.estimator-projects button:hover,
.estimator-designs button:hover,
.consultation-days button:hover,
.consultation-times button:hover,
.consultation-methods label:hover,
.tag-list span:hover {
  transform: translateY(-2px) scale(1.012);
}

.estimator-projects button.is-selected,
.estimator-designs button.is-selected,
.consultation-days button.is-selected,
.consultation-times button.is-selected,
.consultation-methods label.is-selected {
  animation: macSelected .46s var(--mac-spring-snap) both;
}

@keyframes macSelected {
  0% { transform: scale(.97); }
  65% { transform: scale(1.028); }
  100% { transform: scale(1); }
}

/* Form fields expand very slightly, like focused native controls. */
input,
select,
textarea {
  transition:
    border-color .24s ease,
    box-shadow .32s ease,
    background-color .35s ease,
    color .35s ease,
    transform .42s var(--mac-spring) !important;
}

input:focus,
select:focus,
textarea:focus {
  transform: translateY(-1px) scale(1.004);
}

/* Scroll-linked depth variable written by JS. */
.mac-parallax {
  --mac-parallax-y: 0px;
  translate: 0 var(--mac-parallax-y);
  transition: translate .12s linear;
  will-change: translate;
}

/* Subtle animated glow on primary CTAs. */
.nav-cta,
.hero-buttons a:first-child,
.request-submit,
.estimate-apply,
.consultation-submit {
  position: relative;
  overflow: hidden;
}

.nav-cta::before,
.hero-buttons a:first-child::before,
.request-submit::before,
.estimate-apply::before,
.consultation-submit::before {
  content: "";
  position: absolute;
  inset: -80% -35%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / 32%) 49%, transparent 62%);
  transform: translateX(-80%) rotate(7deg);
  transition: transform .85s var(--mac-spring);
}

.nav-cta:hover::before,
.hero-buttons a:first-child:hover::before,
.request-submit:hover::before,
.estimate-apply:hover::before,
.consultation-submit:hover::before {
  transform: translateX(82%) rotate(7deg);
}

/* Theme toggles get a quick system-appearance flash. */
.mac-theme-flash {
  position: fixed;
  z-index: 2147483490;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--yellow, #f8bb10) 72%, var(--tone-a, #fff));
  transform: translate(-50%, -50%) scale(0);
  opacity: .7;
  animation: macThemeFlash .7s var(--mac-spring) forwards;
}

@keyframes macThemeFlash {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .64; }
  70% { opacity: .14; }
  100% { transform: translate(-50%, -50%) scale(90); opacity: 0; }
}

/* Hash target pulse after smooth navigation. */
.mac-target-pulse {
  animation: macTargetPulse .72s var(--mac-spring-snap);
}

@keyframes macTargetPulse {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

/* High-frequency motion is disabled on touch-first layouts where it adds no value. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .mac-tilt {
    transform: none !important;
  }
  .mac-tilt::after {
    display: none;
  }
  .site-header {
    top: max(8px, env(safe-area-inset-top, 0px));
    border-radius: 18px;
  }
  .mac-magnetic {
    translate: 0 0 !important;
  }
}

/* Accessibility: respect operating-system motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .mac-page-curtain { display: none !important; }
  .mac-reveal,
  .mac-hero-copy-enter,
  .mac-hero-media-enter,
  .mac-parallax,
  .mac-tilt {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  .mac-theme-flash { display: none !important; }
}