/*==================================================
HERO
==================================================*/

.hero {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at top right,
      var(--primary-light-alpha-08),
      transparent 45%
    ),
    radial-gradient(
      circle at left bottom,
      var(--secondary-alpha-08),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      var(--white) 0%,
      var(--background-hero-mid) 55%,
      var(--background-hero-end) 100%
    );
}

.hero-dot,
.hero-glow,
.hero-pattern {
  pointer-events: none;
}

/*==================================================
BACKGROUND ORBS
==================================================*/

.hero::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.03;

  pointer-events: none;
}

.hero::after {
  content: "";

  position: absolute;

  width: 380px;
  height: 380px;

  bottom: -120px;
  left: -100px;

  border-radius: var(--radius-round);

  background: radial-gradient(var(--gold-alpha-10), transparent 70%);

  pointer-events: none;
}
/* Background Pattern */

.hero-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.05;

  pointer-events: none;
}

.hero-glow {
  position: absolute;

  right: -220px;

  top: -180px;

  width: 720px;

  height: 720px;

  border-radius: var(--radius-round);

  background: radial-gradient(
    circle,
    var(--primary-light-alpha-14) 0%,
    var(--primary-light-alpha-08) 30%,
    transparent 75%
  );

  filter: blur(45px);

  pointer-events: none;
}

/* Layout */

.hero-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;

  position: relative;
  z-index: 5;
}

/* Content */

.hero-content {
  position: relative;

  z-index: 2;
}

.hero-arabic {
  margin-bottom: 24px;

  color: var(--primary);

  font-family: var(--arabic-font);

  font-size: 2rem;
}

.hero h1 {
  margin-bottom: 28px;

  font-size: clamp(3rem, 6vw, 5rem);
}

.hero h1 span {
  color: var(--primary);
}

.hero-description {
  max-width: 560px;

  margin-bottom: 42px;
}

/* Buttons */

.hero-buttons {
  display: flex;

  gap: 18px;

  flex-wrap: wrap;
}

/* Visual */

.hero-visual {
  display: flex;

  justify-content: center;

  align-items: center;
}

.hero-visual svg {
  filter: drop-shadow(0 30px 40px var(--primary-alpha-08));
}

.hero-visual img {
  width: 100%;

  max-width: 520px;

  animation: float 6s ease-in-out infinite;
}

/*==================================================
HERO SVG
==================================================*/

.hero-svg {
  width: 100%;

  max-width: 560px;
}

.hero-glow {
  animation: glowPulse 5s ease-in-out infinite;
}

.hero-circle {
  fill: none;

  stroke: var(--primary-alpha-15);

  stroke-width: 2;

  stroke-dasharray: 8 10;
}

.book-cover {
  fill: var(--white);

  stroke: var(--primary);

  stroke-width: 3;

  filter: drop-shadow(0 12px 20px var(--primary-alpha-10));
}

.book-line {
  stroke: var(--primary);

  stroke-width: 2;
}

.key-ring {
  fill: none;

  stroke: var(--gold);

  stroke-width: 4;
}

.key-body {
  stroke: var(--gold);

  stroke-width: 4;

  stroke-linecap: round;
}

.star {
  fill: var(--gold);
}

@keyframes glowPulse {
  0% {
    opacity: 0.45;

    transform: scale(1);
  }

  50% {
    opacity: 0.8;

    transform: scale(1.05);
  }

  100% {
    opacity: 0.45;

    transform: scale(1);
  }
}

/*==================================================
DECORATIVE LINE
==================================================*/

.hero-grid::after {
  content: "";

  position: absolute;

  right: 40px;

  top: 80px;

  width: 220px;

  height: 220px;

  border: 2px dashed var(--primary-alpha-12);

  border-radius: var(--radius-round);

  animation: rotateSlow 40s linear infinite;
}

.hero-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.05;

  pointer-events: none;

  background-image: radial-gradient(
    circle,
    var(--primary-alpha-15) 1px,
    transparent 1px
  );

  background-size: 36px 36px;
}

/*==================================================
HERO CONTENT
==================================================*/

.hero-content {
  position: relative;

  z-index: 2;
}

.hero-arabic {
  display: inline-block;

  margin-bottom: 24px;

  color: var(--primary);

  font-family: var(--arabic-font);

  font-size: 2rem;
}

.hero h1 {
  line-height: 1.05;

  letter-spacing: -1px;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  -webkit-background-clip: text;

  color: transparent;
}

.hero-description {
  max-width: 560px;

  margin-bottom: 42px;

  font-size: 1.1rem;

  line-height: 1.9;
}

.hero-buttons {
  display: flex;

  gap: 20px;

  flex-wrap: wrap;
}

/*==================================================
HERO VISUAL
==================================================*/

.hero-visual {
  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;
}

.hero-svg {
  width: 100%;

  max-width: 560px;

  animation: float 7s ease-in-out infinite;
}

/*==================================================
SVG
==================================================*/

.hero-glow {
  animation: glowPulse 5s ease-in-out infinite;
}

.hero-circle {
  fill: none;

  stroke: var(--primary-alpha-18);

  stroke-width: 2;

  stroke-dasharray: 10 8;
}

.book-cover {
  fill: var(--white);

  stroke: var(--primary);

  stroke-width: 3;
}

.book-line {
  stroke: var(--primary);

  stroke-width: 2;
}

.key-ring {
  fill: none;

  stroke: var(--gold);

  stroke-width: 4;
}

.key-body {
  stroke: var(--gold);

  stroke-width: 4;

  stroke-linecap: round;
}

.star {
  fill: var(--gold);
}

.hero:hover .hero-svg {
  transform: translateY(-5px);
}

.hero-dot {
  position: absolute;

  border-radius: var(--radius-round);

  background: var(--primary-light-alpha-15);

  animation: floatDot 8s ease-in-out infinite;
}

.hero-dot-1 {
  width: 14px;
  height: 14px;

  top: 18%;

  right: 18%;
}

.hero-dot-2 {
  width: 10px;
  height: 10px;

  top: 38%;

  right: 8%;

  animation-delay: 2s;
}

.hero-dot-3 {
  width: 18px;
  height: 18px;

  bottom: 20%;

  right: 28%;

  animation-delay: 4s;
}

@keyframes floatDot {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -16px;
  }
}

/*==========================================
HERO SVG
==========================================*/

.hero-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-visual svg {
  width: 100%;

  max-width: 620px;

  height: auto;

  display: block;
}

.hero-glow {
  position: absolute;

  width: 420px;

  height: 420px;

  border-radius: var(--radius-round);

  background: var(--primary-light-alpha-12);

  filter: blur(80px);

  z-index: 1;
}

.hero-circle {
  position: absolute;

  border: 2px solid var(--secondary-alpha-35);

  border-radius: var(--radius-round);
}

.circle-1 {
  width: 36px;

  height: 36px;

  top: 60px;

  right: 80px;
}

.circle-2 {
  width: 18px;

  height: 18px;

  left: 50px;

  bottom: 80px;
}

.hero-scroll {
  position: absolute;

  left: 50%;
  bottom: 70px;

  translate: -50%;

  width: 30px;
  height: 50px;

  border: 2px solid var(--primary-alpha-30);
  border-radius: var(--radius-pill);

  z-index: 10;
}

.hero-scroll span {
  position: absolute;

  left: 50%;
  top: 9px;

  translate: -50%;

  width: 6px;
  height: 6px;

  border-radius: var(--radius-round);

  background: var(--primary);

  animation: scrollMouse 2s infinite;
}

@keyframes scrollMouse {
  0% {
    translate: -50% 0;
    opacity: 1;
  }

  100% {
    translate: -50% 18px;
    opacity: 0;
  }
}

/*==================================================
HILL CONTINUOUS LINE
==================================================*/

/* ==============================
   HERO HILLS
============================== */

#hill-front,
#hill-back {
  fill: none;

  stroke: #7b5e3b;

  stroke-linecap: round;
  stroke-linejoin: round;
}

#hill-front {
  stroke-width: 6;
  opacity: 1;
}

#hill-back {
  stroke-width: 6;
  opacity: 0.8;
}