body {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
    radial-gradient(circle at 14% 8%, rgba(35, 71, 50, 0.26), transparent 30%),
    var(--bg);
}

.ambient::before,
.ambient::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ambient::before {
  opacity: 0.4;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line) 34%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 50% 16%, #000 0 38%, transparent 78%);
}

.ambient::after {
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(224, 185, 96, 0.14), transparent 38%),
    radial-gradient(ellipse at 92% 42%, rgba(19, 61, 40, 0.42), transparent 30%);
  transform: translateY(calc(var(--layers-scroll, 0) * -44px));
}

.nav--pill {
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--line) 72%, transparent) inset;
}

.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  width: min(86vw, 980px);
  aspect-ratio: 1;
  top: clamp(56px, 10vw, 112px);
  right: max(-340px, -22vw);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.18), transparent 18%),
    radial-gradient(circle at 48% 46%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 64%);
  box-shadow:
    inset 0 0 120px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 160px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(var(--hero-drift, 0));
}

.hero::after {
  width: min(94vw, 1120px);
  height: 360px;
  left: 50%;
  bottom: 10%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  filter: blur(34px);
  transform: translateX(-50%) translateY(calc(var(--hero-drift, 0) * -0.42));
}

.hero .bento--intro {
  position: relative;
}

.bento-card,
.project-card__inner,
.contact__form {
  box-shadow:
    0 18px 50px color-mix(in srgb, #000 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--line) 74%, transparent) inset;
}

.bento-card--bio,
.bento-card--highlight {
  backdrop-filter: blur(18px);
}

.bento-card--touch {
  min-height: 100%;
}

.layers-scroll-ready .reveal {
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 760ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: blur(8px);
}

.layers-scroll-ready .reveal.visible {
  filter: blur(0);
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 54% 8%, rgba(244, 238, 222, 0.92), transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(215, 183, 105, 0.18), transparent 28%),
    #fbfaf6;
}

:root[data-theme="light"] .ambient::before {
  opacity: 0.32;
  background:
    radial-gradient(circle, rgba(214, 181, 97, 0.26) 1px, transparent 1.4px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 0, transparent 72%);
}

:root[data-theme="light"] .ambient::after {
  opacity: 0.86;
  background:
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.96), rgba(238, 230, 214, 0.38) 24%, transparent 45%),
    radial-gradient(ellipse at 20% 18%, rgba(44, 72, 55, 0.08), transparent 38%);
}

:root[data-theme="light"] .hero {
  color: #fffaf0;
  background:
    radial-gradient(circle at 50% 42%, rgba(234, 197, 23, 0.3), transparent 11%),
    radial-gradient(circle at 52% 44%, rgba(234, 179, 8, 0.2) 0 22%, transparent 42%),
    radial-gradient(ellipse at 50% 46%, rgba(234, 179, 8, 0.34), transparent 36%),
    radial-gradient(ellipse at 8% 42%, rgba(243, 216, 98, 0.18), transparent 22%),
    radial-gradient(ellipse at 92% 40%, rgba(243, 216, 98, 0.18), transparent 22%),
    linear-gradient(180deg, #264633 0%, #173623 24%, #102619 58%, #0b1810 100%);
}

:root[data-theme="light"] .hero::before {
  width: min(76vw, 840px);
  top: clamp(82px, 10vw, 140px);
  right: 50%;
  border-color: rgba(234, 197, 23, 0.36);
  background:
    radial-gradient(circle at 50% 50%, rgba(234, 197, 23, 0.16), transparent 34%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 82px, rgba(234, 197, 23, 0.18) 84px 88px);
  box-shadow:
    inset 0 0 110px rgba(234, 179, 8, 0.12),
    0 0 170px rgba(234, 179, 8, 0.18);
  transform: translateX(50%) translateY(var(--hero-drift, 0));
}

:root[data-theme="light"] .hero::after {
  width: min(124vw, 1500px);
  height: 460px;
  bottom: 30%;
  background:
    repeating-linear-gradient(90deg, transparent 0 7.2%, rgba(249, 222, 98, 0.16) 7.7%, transparent 8.4%),
    radial-gradient(ellipse at 50% 50%, rgba(234, 179, 8, 0.3), transparent 68%);
  filter: blur(22px);
}

:root[data-theme="light"] .hero .badge,
:root[data-theme="light"] .hero__role,
:root[data-theme="light"] .hero__bio,
:root[data-theme="light"] .bento-card--highlight p,
:root[data-theme="light"] .bento-card__tag {
  color: rgba(255, 250, 240, 0.8);
}

:root[data-theme="light"] .hero__title span:first-child {
  color: rgba(255, 250, 240, 0.94);
}

:root[data-theme="light"] .hero__title .scramble-text--first .scramble-text__char {
  color: rgba(255, 250, 240, 0.96);
}

:root[data-theme="light"] .hero__title-accent .scramble-text__word,
:root[data-theme="light"] .hero__title-accent .scramble-text__char {
  background-image: linear-gradient(135deg, #ffe678, #d9b76f 48%, #fff3b0);
}

:root[data-theme="light"] .hero .bento-card {
  border-color: rgba(234, 211, 157, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(10, 24, 16, 0.48);
  box-shadow:
    0 24px 76px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(234, 211, 157, 0.16) inset;
}

:root[data-theme="light"] .hero .bento-card--touch,
:root[data-theme="light"] .hero .bento-card--bio {
  color: rgba(255, 250, 240, 0.9);
}

:root[data-theme="light"] .bento-card--email {
  background: linear-gradient(135deg, #d7ae50, #f1d889);
  color: #11170f;
}

:root[data-theme="light"] .hero .btn--primary {
  background: #f0d072;
  color: #11170f;
}

:root[data-theme="light"] .hero .btn--ghost {
  color: #fffaf0;
  border-color: rgba(255, 250, 240, 0.32);
}

:root[data-theme="light"] .bento-card,
:root[data-theme="light"] .project-card__inner,
:root[data-theme="light"] .contact__form {
  box-shadow:
    0 20px 58px rgba(56, 47, 31, 0.1),
    0 0 0 1px rgba(214, 203, 176, 0.72) inset;
}

html[dir="rtl"] .hero::before {
  right: auto;
  left: max(-340px, -22vw);
}

html[dir="rtl"][data-theme="light"] .hero::before {
  right: 50%;
  left: auto;
  transform: translateX(50%) translateY(var(--hero-drift, 0));
}

@media (max-width: 900px) {
  .hero::before {
    width: 820px;
    top: 80px;
    right: -520px;
  }

  html[dir="rtl"] .hero::before {
    right: auto;
    left: -520px;
  }
}

@media (max-width: 620px) {
  .hero::before {
    width: 620px;
    top: 120px;
    right: -430px;
  }

  .hero::after {
    height: 220px;
    bottom: 20%;
  }

  .layers-scroll-ready .reveal {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient::after,
  .hero::before,
  .hero::after {
    transform: none;
  }
}

/* Light mode returns to the page canvas instead of using the dark hero scene. */
:root[data-theme="light"] .hero {
  color: var(--text);
  background: transparent;
}

:root[data-theme="light"] .hero::before,
:root[data-theme="light"] .hero::after {
  display: none;
}

:root[data-theme="light"] .hero .badge,
:root[data-theme="light"] .hero__role,
:root[data-theme="light"] .hero__bio,
:root[data-theme="light"] .bento-card--highlight p {
  color: var(--muted);
}

:root[data-theme="light"] .hero .bento-card__tag {
  color: var(--accent-strong);
}

:root[data-theme="light"] .hero__title span:first-child,
:root[data-theme="light"] .hero__title .scramble-text--first .scramble-text__char {
  color: var(--text-strong);
}

:root[data-theme="light"] .hero .bento-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow:
    0 20px 58px rgba(56, 47, 31, 0.1),
    0 0 0 1px rgba(214, 203, 176, 0.72) inset;
}

:root[data-theme="light"] .hero .bento-card--portrait,
:root[data-theme="light"] .hero .bento-card--portrait:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .hero .bento-card--touch,
:root[data-theme="light"] .hero .bento-card--bio {
  color: var(--text);
}

:root[data-theme="light"] .hero .bento-card--email {
  background: linear-gradient(135deg, #d7ae50, #f1d889);
  color: #11170f;
}

:root[data-theme="light"] .hero .bento-card--actions {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .hero .btn--ghost {
  color: var(--text-strong);
  border-color: var(--line-strong);
}

/* Flower Arc is a dark-theme media layer. The original bento hero grid and
   title/portrait placement remain owned by styles.css. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #061426 url("../assets/images/hero-flower-arc.webp") center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.hero__background-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.05) brightness(0.72);
  transform: scale(1.02);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 12, 28, 0.74) 0%, rgba(3, 12, 28, 0.48) 38%, rgba(3, 12, 28, 0.12) 68%, rgba(3, 12, 28, 0.34) 100%),
    linear-gradient(180deg, rgba(3, 10, 23, 0.48) 0%, transparent 34%, transparent 70%, rgba(3, 10, 23, 0.7) 100%);
}

:root[data-theme="dark"] .hero {
  background: #061426;
}

:root[data-theme="dark"] .hero__media {
  opacity: 1;
  visibility: visible;
}

html[dir="rtl"] .hero__title-accent.scramble-text--plain,
html[lang="fa"] .hero__title-accent.scramble-text--plain {
  color: #d8ae59;
  -webkit-text-fill-color: #d8ae59;
  background: none;
}

:root[data-theme="light"] .hero__media {
  display: none;
}

@media (max-width: 900px) {
  .hero__background-video {
    object-position: 62% center;
  }

  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(3, 11, 26, 0.62) 0%, rgba(3, 11, 26, 0.2) 40%, rgba(3, 11, 26, 0.56) 100%),
      linear-gradient(90deg, rgba(3, 11, 26, 0.3), transparent 72%);
  }
}

@media (max-width: 620px) {
  .hero__background-video {
    object-position: 68% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__background-video {
    display: none;
  }
}