/* Homepage motion: finite entrance, then direct pointer feedback. */
body[data-page="home"] {
  /* Keep async content and staggered reveals from moving the scroll position. */
  overflow-anchor: none;
}
body[data-page="home"] .site-header {
  min-height: 102px;
}
.landing-hero {
  isolation: isolate;
  --hero-step: 100ms;
  --hero-reveal-duration: 850ms;
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero-aura {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  opacity: 0.7;
}
.hero-aura-gold {
  inset-inline-start: -290px;
  top: -200px;
  background: radial-gradient(circle, var(--accent-soft), transparent 67%);
}
html[lang="ar"] .landing-hero {
  background: none;
}
html[lang="ar"] .hero-aura-gold {
  display: none;
}
.hero-aura-blue {
  inset-inline-end: -340px;
  top: -180px;
  background: radial-gradient(circle, #6a89bc13, transparent 66%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(ellipse at 50% 25%, #0005, transparent 65%);
  opacity: 0.24;
}
.hero-layout,
.landing-hero > .container:last-child {
  position: relative;
}
.hero-stage {
  position: relative;
  min-width: 0;
  perspective: 1400px;
}
.hero-orbits {
  position: absolute;
  width: 128%;
  height: 128%;
  inset: -14%;
  pointer-events: none;
  overflow: visible;
  color: var(--accent);
}
.hero-orbit-lines {
  stroke: currentColor;
  stroke-width: 0.7;
  opacity: 0.3;
}
.hero-orbit-stars {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.7;
}
.hero-workspace {
  margin-bottom: 0;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  transform: rotateX(var(--hero-rotate-x, 0deg))
    rotateY(var(--hero-rotate-y, 0deg));
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 350ms ease,
    box-shadow 350ms ease;
  box-shadow:
    var(--shadow),
    0 28px 70px -35px #0005;
}
.hero-project {
  flex: 1;
}
.hero-workspace .workspace-caption {
  margin-top: auto;
}
.hero-card-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}
.hero-card-light::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 28%,
    #fff1 48%,
    transparent 68%
  );
  opacity: 0;
}
.hero-project-media > img {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-copy,
.hero-workspace {
  animation: none;
}
.hero-copy h1 .accent-text {
  position: relative;
  width: fit-content;
}
.hero-copy h1 .accent-text::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.06em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-workspace:hover {
    border-color: var(--accent);
    box-shadow:
      var(--shadow),
      0 30px 80px -35px #0007;
  }
  .hero-project-link:hover .hero-project-media > img {
    transform: scale(1.035);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .eyebrow > span,
  .hero-copy h1 > span,
  .hero-description,
  .hero-actions > .btn,
  .hero-assurance > *,
  .workspace-heading > span,
  .hero-project-media,
  .hero-project-label,
  .hero-project-details .card-badges > *,
  .hero-project-details > h2,
  .hero-project-details > p,
  .hero-project-open,
  .workspace-caption > *,
  .platform-strip > p,
  .platform-stats > div {
    animation: hero-rise var(--hero-reveal-duration)
      cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .hero-copy > .eyebrow > span:nth-child(1) {
    animation-delay: calc(var(--hero-step) * 0.4);
  }
  .hero-copy > .eyebrow > span:nth-child(2) {
    animation-delay: calc(var(--hero-step) * 0.8);
  }
  .hero-copy > .eyebrow > span:nth-child(3) {
    animation-delay: calc(var(--hero-step) * 1.2);
  }
  .hero-copy > .eyebrow > span:nth-child(4) {
    animation-delay: calc(var(--hero-step) * 1.6);
  }
  .hero-copy h1 > span {
    animation-name: hero-title-enter;
    animation-duration: 1100ms;
    transform-origin: center bottom;
  }
  .hero-copy h1 > span:first-child {
    animation-delay: calc(var(--hero-step) * 2);
  }
  .hero-copy h1 > span:last-child {
    animation-delay: calc(var(--hero-step) * 4);
  }
  .hero-description {
    animation-delay: calc(var(--hero-step) * 6);
  }
  .hero-actions > .btn:nth-child(1) {
    animation-delay: calc(var(--hero-step) * 8);
  }
  .hero-actions > .btn:nth-child(2) {
    animation-delay: calc(var(--hero-step) * 9);
  }
  .hero-assurance > :nth-child(1),
  .hero-assurance > :nth-child(2) {
    animation-delay: calc(var(--hero-step) * 10);
  }
  .hero-assurance > :nth-child(3),
  .hero-assurance > :nth-child(4) {
    animation-delay: calc(var(--hero-step) * 11);
  }
  .hero-stage {
    animation: hero-stage-enter 1100ms calc(var(--hero-step) * 4)
      cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .workspace-heading > span:first-child {
    animation-delay: calc(var(--hero-step) * 6);
  }
  .workspace-heading > span:last-child {
    animation-delay: calc(var(--hero-step) * 7);
  }
  .hero-project-media {
    animation-name: hero-media-enter;
    animation-duration: 1100ms;
    animation-delay: calc(var(--hero-step) * 8);
  }
  .hero-project-label {
    animation-delay: calc(var(--hero-step) * 10);
  }
  .hero-project-details .card-badges > * {
    animation-delay: calc(var(--hero-step) * 10.5);
  }
  .hero-project-details .card-badges > :nth-child(2) {
    animation-delay: calc(var(--hero-step) * 11);
  }
  .hero-project-details > h2 {
    animation-delay: calc(var(--hero-step) * 11.5);
  }
  .hero-project-details > p {
    animation-delay: calc(var(--hero-step) * 12.5);
  }
  .hero-project-open {
    animation-delay: calc(var(--hero-step) * 13.5);
  }
  .workspace-caption > span {
    animation-delay: calc(var(--hero-step) * 14.5);
  }
  .workspace-caption > a {
    animation-delay: calc(var(--hero-step) * 15.5);
  }
  .platform-strip > p {
    animation-delay: calc(var(--hero-step) * 15);
  }
  .platform-stats > div:nth-child(1) {
    animation-delay: calc(var(--hero-step) * 16);
  }
  .platform-stats > div:nth-child(2) {
    animation-delay: calc(var(--hero-step) * 17);
  }
  .platform-stats > div:nth-child(3) {
    animation-delay: calc(var(--hero-step) * 18);
  }
  .platform-stats > div:nth-child(4) {
    animation-delay: calc(var(--hero-step) * 19);
  }
  .hero-actions > .btn:focus-visible,
  .hero-stage:focus-within,
  .hero-project-link:focus-visible
    :is(
      .hero-project-media,
      .hero-project-label,
      .card-badges > *,
      h2,
      p,
      .hero-project-open
    ),
  .workspace-caption > a:focus-visible {
    animation: none;
  }
  .hero-card-light::after {
    animation: hero-light-pass 1600ms 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-orbit-lines ellipse {
    stroke-dasharray: 1800;
    animation: hero-orbit-draw 1900ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-orbit-lines ellipse:last-child {
    animation-delay: 360ms;
  }
  .hero-orbit-stars {
    animation: hero-stars-enter 1100ms 800ms both;
  }
  .hero-copy h1 .accent-text::after {
    animation: hero-rule-enter 1100ms 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-aura-gold {
    animation: hero-aura-enter 2800ms ease-out both;
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-title-enter {
  from {
    opacity: 0;
    transform: perspective(900px) translateY(40px) rotateX(12deg);
  }
  to {
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(0);
  }
}
@keyframes hero-media-enter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes hero-stage-enter {
  from {
    opacity: 0;
    transform: translateY(32px) rotate(-2deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}
@keyframes hero-light-pass {
  0% {
    opacity: 0;
    transform: translateX(-65%);
  }
  25% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(65%);
  }
}
@keyframes hero-orbit-draw {
  from {
    stroke-dashoffset: 1800;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes hero-stars-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@keyframes hero-rule-enter {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes hero-aura-enter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.85);
  }
  to {
    opacity: 0.7;
    transform: translateY(0) scale(1);
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body[data-page="home"] .site-header {
    min-height: 81px;
  }
}
@media (max-width: 767px) {
  .landing-hero {
    --hero-step: 80ms;
    --hero-reveal-duration: 650ms;
  }
  body[data-page="home"] .site-header {
    min-height: 75px;
  }
  .hero-workspace {
    min-height: 338px;
  }
  .hero-stage {
    width: 100%;
  }
  .hero-orbits {
    width: 112%;
    height: 120%;
    inset: -10% -6%;
    opacity: 0.65;
  }
  .hero-aura {
    width: 540px;
    height: 540px;
  }
  .hero-grid {
    background-size: 56px 56px;
    opacity: 0.16;
  }
  .hero-copy h1 .accent-text::after {
    bottom: 0;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .hero-copy h1 > span,
  .hero-stage,
  .hero-project-media {
    animation-duration: 800ms;
  }
  .hero-stage {
    animation-name: hero-rise;
  }
  .hero-aura-gold,
  .hero-orbit-lines ellipse,
  .hero-orbit-stars,
  .hero-card-light::after {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero *,
  .landing-hero *::before,
  .landing-hero *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-workspace {
    transform: none;
  }
}