.ali-hero {
  --ali-reveal-duration: 1280ms;

  position: relative;
  min-height: min(860px, calc(100dvh - 76px));
  display: grid;
  align-items: center;
  padding-block: clamp(3.2rem, 6.5vw, 5.8rem) clamp(2rem, 4vw, 3.2rem);
  overflow: hidden;
  isolation: isolate;
}

.ali-hero [data-ali-reveal-item="heading"] {
  --ali-reveal-y: 46px;
}

.ali-hero [data-ali-reveal-item="copy"],
.ali-hero [data-ali-reveal-item="actions"] {
  --ali-reveal-y: 28px;
}

.ali-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 16% 48%, oklch(74% 0.08 84 / 0.13), transparent 24rem),
    linear-gradient(180deg, oklch(7.5% 0.01 78), oklch(10.5% 0.015 78));
}

.ali-hero::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, oklch(77% 0.12 83 / 0.42), transparent);
}

.ali-hero__grid {
  display: grid;
  gap: clamp(1.6rem, 3.2vw, 3.5rem);
  align-items: center;
  direction: ltr;
}

.ali-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.35rem;
  max-width: 700px;
  direction: rtl;
}

.ali-hero h1 {
  max-width: 10.5ch;
  margin: 0;
  color: var(--color-gold-soft);
  font-size: clamp(2.75rem, 6.35vw, 6.9rem);
  line-height: 1.08;
  text-wrap: balance;
}

.ali-hero p {
  max-width: 48ch;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 0.96rem + 0.34vw, 1.2rem);
}

.ali-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.ali-hero__visual {
  position: relative;
  min-height: clamp(390px, 54vw, 700px);
  direction: rtl;
}

.ali-hero__visual::before {
  position: absolute;
  inset: auto -8% -12% 6%;
  height: 38%;
  z-index: 0;
  content: "";
  background: radial-gradient(ellipse at center, oklch(75% 0.09 84 / 0.22), transparent 68%);
  filter: blur(26px);
}

.ali-hero__portrait {
  position: absolute;
  inset: -2% -4% -4% -4%;
  z-index: 1;
  overflow: hidden;
  background: oklch(8% 0.012 78);
  mask-image:
    linear-gradient(90deg, transparent 0%, black 5%, black 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 3%, black 90%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, black 5%, black 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 3%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
}

.ali-hero__portrait::before,
.ali-hero__portrait::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
}

.ali-hero__portrait::before {
  background:
    radial-gradient(circle at 46% 34%, transparent 0 22rem, oklch(8% 0.012 78 / 0.2) 34rem),
    linear-gradient(90deg, oklch(8% 0.012 78 / 0.48), transparent 20%, transparent 70%, oklch(8% 0.012 78 / 0.74));
}

.ali-hero__portrait::after {
  background:
    linear-gradient(180deg, oklch(8% 0.012 78 / 0.52), transparent 16%, transparent 74%, oklch(8% 0.012 78 / 0.9)),
    radial-gradient(circle at 38% 44%, oklch(78% 0.02 84 / 0.12), transparent 30rem);
}

.ali-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  filter: contrast(1.02) brightness(0.9) saturate(0.96);
  transform: scale(1.01);
}

.ali-hero--service,
.ali-hero--contact,
.ali-hero--profile,
.ali-hero--journal,
.ali-hero--default {
  min-height: min(720px, calc(100dvh - 76px));
}

.ali-hero--service h1,
.ali-hero--contact h1,
.ali-hero--profile h1,
.ali-hero--journal h1,
.ali-hero--default h1 {
  max-width: 12ch;
  font-size: clamp(2.55rem, 5vw, 5.45rem);
}

@media (min-width: 900px) {
  .ali-hero__grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(360px, 0.95fr);
  }

  .ali-hero__visual {
    grid-column: 1;
    grid-row: 1;
  }

  .ali-hero__copy {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
  }
}

@media (max-width: 899px) {
  .ali-hero {
    min-height: auto;
    padding-block-start: 2.8rem;
  }

  .ali-hero__copy {
    order: 1;
  }

  .ali-hero__visual {
    order: 2;
  }
}

@media (max-width: 699px) {
  .ali-hero h1 {
    font-size: clamp(2.7rem, 12.5vw, 4.05rem);
    line-height: 1.12;
  }

  .ali-hero__visual {
    min-height: 360px;
    margin-inline: -1rem;
  }
}