:root {
  --motion-micro: 160ms;
  --motion-ui: 240ms;
  --motion-page: 520ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-out 280ms var(--ease-standard) both; }
::view-transition-new(root) { animation: page-in 620ms var(--ease-out) both; }
::view-transition-group(case-study-hero) {
  z-index: 20;
  overflow: clip;
  animation-duration: 720ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(case-study-hero),
::view-transition-new(case-study-hero) {
  height: 100%;
  object-fit: cover;
  animation-duration: 720ms;
  animation-timing-function: var(--ease-out);
}

@keyframes page-out { to { opacity: .2; transform: scale(.985); } }
@keyframes page-in { from { opacity: 0; transform: translateY(14px) scale(.995); } }

.site-loader {
  --blueprint-ink: #111;
  display: none;
  position: fixed;
  z-index: 10000;
  inset: 0;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  background: #fff;
  color: var(--blueprint-ink);
  transition: opacity 360ms var(--ease-standard), visibility 360ms;
}
.site-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .65;
  background-image: linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, #000 12%, transparent 73%);
}

.js .site-loader { display: grid; }
.site-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader__hud {
  position: relative;
  width: min(90vw, 38rem);
  aspect-ratio: 1;
}
.blueprint-stage { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.8); animation: blueprint-stage-in 420ms var(--ease-out) both; }
.blueprint-stage::before, .blueprint-stage::after { content: ""; position: absolute; z-index: 3; width: 1.45rem; height: 1.45rem; border-color: var(--blueprint-ink); pointer-events: none; }
.blueprint-stage::before { top: .6rem; left: .6rem; border-top: 1px solid; border-left: 1px solid; }
.blueprint-stage::after { right: .6rem; bottom: .6rem; border-right: 1px solid; border-bottom: 1px solid; }
.blueprint-launchpad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(100% 0 0); animation: blueprint-reveal 3.4s steps(32,end) .18s both; }
.blueprint-axis { position: absolute; z-index: 1; background: rgba(0,0,0,.08); pointer-events: none; }
.blueprint-axis--x { left: 7%; right: 7%; top: 50%; height: 1px; }
.blueprint-axis--y { top: 7%; bottom: 7%; left: 50%; width: 1px; }
.blueprint-printer { position: absolute; z-index: 4; left: 7%; right: 7%; bottom: 8%; height: 1px; background: linear-gradient(90deg,transparent 0 4%,rgba(0,0,0,.38) 12% 88%,transparent 96%); transform: translateY(0); animation: printer-rise 3.4s steps(32,end) .18s both; }
.blueprint-printer i { position: absolute; top: -.32rem; left: 0; width: 2.4rem; height: .65rem; border: 1px solid rgba(0,0,0,.55); background: #fff; box-shadow: 0 .25rem .7rem rgba(0,0,0,.09); animation: printer-scan 106.25ms linear .18s 32 alternate both; }
.blueprint-printer i::after { content: ""; position: absolute; left: 50%; bottom: -.36rem; width: 1px; height: .36rem; background: #111; }
.blueprint-meta { position: absolute; z-index: 5; top: .8rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; color: rgba(0,0,0,.55); font: 500 .52rem/1 Geist, monospace; letter-spacing: .08em; }
.blueprint-status { position: absolute; z-index: 5; left: 50%; bottom: .9rem; width: 15rem; height: 1rem; transform: translateX(-50%); color: var(--blueprint-ink); text-align: center; font: 500 .56rem/1 Geist, monospace; letter-spacing: .13em; text-transform: uppercase; }
.blueprint-status span { position: absolute; inset: 0; opacity: 0; animation: blueprint-status 1.5s var(--ease-out) both; }
.blueprint-status span:nth-child(2) { animation-delay: 1.35s; }
.blueprint-status span:nth-child(3) { animation-delay: 2.7s; }
.site-loader > p { margin: .9rem 0 0; color: #536074; font: 500 .66rem/1.2 Geist, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
@keyframes blueprint-stage-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes blueprint-reveal { from { clip-path: inset(100% 0 0); opacity: .25; } to { clip-path: inset(0); opacity: 1; } }
@keyframes printer-rise { 0% { opacity: 0; transform: translateY(0); } 3%, 94% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(0px - min(76vw, 32rem))); } }
@keyframes printer-scan { to { transform: translateX(calc(min(76vw, 32rem) - 2.4rem)); } }
@keyframes blueprint-status { 0%, 100% { opacity: 0; transform: translateY(4px); } 16%, 76% { opacity: 1; transform: none; } }

.project-visual, .case-hero { contain: paint; overflow: clip; }
.project.is-transitioning .project-visual, .case-hero { view-transition-name: case-study-hero; }
html[data-case-transition="freelance-portfolio-coreflow-cs"] .project[data-case-slug="freelance-portfolio-coreflow-cs"] .project-visual,
html[data-case-transition="freelance-portfolio-loyalty-referral-cs"] .project[data-case-slug="freelance-portfolio-loyalty-referral-cs"] .project-visual,
html[data-case-transition="freelance-portfolio-stayezy-cs"] .project[data-case-slug="freelance-portfolio-stayezy-cs"] .project-visual,
html[data-case-transition="freelance-portfolio-printstop-cs"] .project[data-case-slug="freelance-portfolio-printstop-cs"] .project-visual { view-transition-name: case-study-hero; }

.button, .header-cta, .case-header a, .footer-links a, .service-card > a,
.portal-footer__cta, .menu-button, .testimonial-nav > button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.button::after, .header-cta::after, .case-header a::after, .footer-links a::after,
.service-card > a::after, .portal-footer__cta::after, .menu-button::after,
.testimonial-nav > button::after, .project-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -85% -55%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-62%) rotate(10deg);
  background: linear-gradient(108deg, transparent 30%, rgba(255,94,199,.2) 40%, rgba(113,222,255,.4) 48%, rgba(255,238,138,.34) 55%, rgba(169,125,255,.2) 62%, transparent 72%);
  mix-blend-mode: screen;
}

.project-visual::after { z-index: 2; inset: -55%; }

@keyframes rainbow-metal-sweep {
  0% { opacity: 0; transform: translateX(-62%) rotate(10deg); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: translateX(62%) rotate(10deg); }
}

@media (hover: hover) and (pointer: fine) {
  .project-visual img { transition: transform 600ms var(--ease-out), filter 300ms ease; }
  .project:hover .project-visual img { transform: scale(1.018); filter: saturate(1.04); }
  .project-info h3 { transition: transform var(--motion-ui) var(--ease-out); }
  .project:hover .project-info h3 { color: inherit; transform: translateX(.2rem); }
  .button, .header-cta, .case-header a, .footer-links a, .service-card > a, .portal-footer__cta, .menu-button, .testimonial-nav > button { transition: transform var(--motion-micro) var(--ease-out), background-color var(--motion-micro) ease, color var(--motion-micro) ease, border-color var(--motion-micro) ease, box-shadow var(--motion-micro) ease; }
  .button:hover, .header-cta:hover, .case-header a:hover { transform: translateY(-2px); }
  .button:active, .header-cta:active, .case-header a:active { transform: translateY(0) scale(.98); }
  .button:hover::after, .header-cta:hover::after, .case-header a:hover::after, .footer-links a:hover::after,
  .service-card > a:hover::after, .portal-footer__cta:hover::after, .menu-button:hover::after,
  .testimonial-nav > button:hover::after, .project:hover .project-visual::after {
    animation: rainbow-metal-sweep 780ms var(--ease-out) both;
  }
  .screen-card, .case-panel, .process-frame { transition: transform var(--motion-ui) var(--ease-out), box-shadow var(--motion-ui) ease; }
  .screen-card:hover, .case-panel:hover, .process-frame:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(17,17,17,.07); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .blueprint-stage, .blueprint-launchpad, .blueprint-printer, .blueprint-printer i, .blueprint-status span { animation: none !important; transform: none; }
  .blueprint-launchpad { clip-path: none; opacity: 1; }
  .blueprint-printer { display: none; }
  .blueprint-status span { display: none; }
  .blueprint-status span:first-child { display: block; opacity: 1; }
  .button::after, .header-cta::after, .case-header a::after, .footer-links a::after,
  .service-card > a::after, .portal-footer__cta::after, .menu-button::after,
  .testimonial-nav > button::after, .project-visual::after { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}