@font-face {
  font-family: 'IBMPlexArabic';
  src: url('fonts/IBMPlexArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {

  --bg: #6B4FBB;
  --bg-dark: #523998;

  --card: rgba(255,255,255,0.58);

  --text: #1f1b2d;
  --muted: #6f6884;

  --line: rgba(255,255,255,0.38);

  --brand: #6B4FBB;
  --brand-dark: #4F3597;

  --shadow:
    0 18px 45px rgba(31,20,66,0.22);

  --radius-xl: 24px;
}

body {

  margin: 0;

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(255,255,255,0.18) 0%,
      transparent 28%
    ),

    radial-gradient(
      circle at 88% 18%,
      rgba(255,255,255,0.12) 0%,
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #6B4FBB 0%,
      #5E45AA 56%,
      #4C348E 100%
    );

  font-family:
    IBMPlexArabic,
    Tahoma,
    Arial,
    sans-serif;

  color: var(--text);

  overflow-x: hidden;
}

/* =========================
   SHEEP
========================= */

.sheep-bg {

  position: fixed;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 5;
}

.sheep-bg span {

  position: absolute;

  display: inline-block;

  font-size: 82px;

  opacity: 0.42;

  filter:
    drop-shadow(
      0 10px 18px rgba(0,0,0,0.22)
    );

  animation:
    sheepFloat 15s linear infinite;
}

.sheep-bg span:nth-child(1) {

  top: 8%;
  right: -120px;

  animation-delay: 0s;
}

.sheep-bg span:nth-child(2) {

  top: 22%;
  right: -120px;

  animation-delay: 2s;

  font-size: 72px;
}

.sheep-bg span:nth-child(3) {

  top: 40%;
  right: -120px;

  animation-delay: 4s;
}

.sheep-bg span:nth-child(4) {

  top: 58%;
  right: -130px;

  animation-delay: 6s;

  font-size: 76px;
}

.sheep-bg span:nth-child(5) {

  top: 74%;
  right: -120px;

  animation-delay: 8s;
}

.sheep-bg span:nth-child(6) {

  top: 88%;
  right: -130px;

  animation-delay: 10s;

  font-size: 70px;
}

@keyframes sheepFloat {

  0% {

    transform:
      translateX(0)
      translateY(0)
      rotate(0deg);
  }

  50% {

    transform:
      translateX(-55vw)
      translateY(-18px)
      rotate(-4deg);
  }

  100% {

    transform:
      translateX(-115vw)
      translateY(0)
      rotate(0deg);
  }
}

/* =========================
   FIREWORKS
========================= */

.soft-fireworks {

  position: fixed;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 4;
}

.soft-fireworks span {

  position: absolute;

  width: 16px;
  height: 16px;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.75);

  opacity: 0;

  filter:
    drop-shadow(
      0 0 18px rgba(255,255,255,0.55)
    );

  animation:
    softFirework 7s ease-in-out infinite;

  box-shadow:
    0 -90px 0 rgba(255,255,255,0.55),
    65px -65px 0 rgba(255,255,255,0.48),
    90px 0 0 rgba(255,255,255,0.52),
    65px 65px 0 rgba(255,255,255,0.46),
    0 90px 0 rgba(255,255,255,0.40),
    -65px 65px 0 rgba(255,255,255,0.46),
    -90px 0 0 rgba(255,255,255,0.52),
    -65px -65px 0 rgba(255,255,255,0.46);
}

.soft-fireworks span:nth-child(1) {

  top: 14%;
  left: 12%;

  animation-delay: 0s;
}

.soft-fireworks span:nth-child(2) {

  top: 22%;
  left: 82%;

  animation-delay: 2.5s;
}

.soft-fireworks span:nth-child(3) {

  top: 68%;
  left: 16%;

  animation-delay: 4.5s;
}

@keyframes softFirework {

  0%,100% {

    opacity: 0;

    transform:
      scale(0.5);
  }

  35% {

    opacity: 0.82;

    transform:
      scale(1);
  }

  70% {

    opacity: 0;

    transform:
      scale(1.55);
  }
}

/* ========================= */

.page {

  position: relative;

  z-index: 1;

  max-width: 980px;

  margin: 0 auto;

  padding: 30px 18px 42px;

  display: flex;
  flex-direction: column;

  gap: 20px;
}

/* =========================
   CARDS
========================= */

.hero,
.controls-card,
.preview-card {

  position: relative;

  z-index: 1;

  overflow: hidden;

  background:
    rgba(255,255,255,0.58);

  border:
    1px solid rgba(255,255,255,0.34);

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

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(18px);

  animation:
    fadeUp 0.7s ease both;
}

.hero {

  text-align: center;

  padding: 30px 22px 26px;
}

.logo {

  width: 155px;

  height: auto;

  display: block;

  margin: 0 auto 18px;

  background: var(--brand);

  padding: 18px;

  border-radius: 22px;
}

.title {

  margin: 0;

  font-size: 30px;

  line-height: 1.55;

  font-weight: 700;

  color: #211b34;
}

.title span {

  display: block;

  margin-top: 4px;

  font-size: 24px;

  line-height: 1.45;

  color: var(--brand);
}

.intro {

  margin: 14px auto 0;

  max-width: 620px;

  font-size: 15px;

  line-height: 1.9;

  color: var(--muted);
}

.controls-card {

  padding: 22px;
}

.section-title {

  margin: 0 0 16px;

  text-align: center;

  font-size: 22px;

  color: #fff;
}

/* =========================
   DEPARTMENTS
========================= */

.department-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;

  margin-bottom: 18px;
}

.department-btn {

  min-height: 58px;

  border:
    1px solid rgba(255,255,255,0.38);

  background:
    rgba(255,255,255,0.18);

  color: var(--brand-dark);

  border-radius: 16px;

  padding: 12px 10px;

  cursor: pointer;

  transition: 0.22s ease;

  font-family: inherit;

  backdrop-filter:
    blur(10px);

  font-weight: 700;
}

.department-btn:hover {

  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,0.26);
}

.department-btn.active {

  background:
    rgba(255,255,255,0.34);

  border-color:
    rgba(255,255,255,0.70);

  color: var(--brand-dark);
}

.department-name {

  display: block;

  font-size: 15px;

  line-height: 1.5;

  font-weight: 700;
}

/* ========================= */

.field-label {

  display: block;

  margin-bottom: 10px;

  font-size: 15px;

  font-weight: 700;

  color: #fff;
}

input {

  width: 100%;

  min-height: 52px;

  border:
    1px solid var(--line);

  border-radius: 15px;

  padding: 0 16px;

  background:
    rgba(255,255,255,0.72);

  font-size: 16px;

  color: var(--text);

  outline: none;

  font-family: inherit;
}

.buttons-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;

  margin-top: 16px;
}

.btn {

  min-height: 50px;

  border: none;

  border-radius: 15px;

  font-family: inherit;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;
}

.btn-primary {

  background: var(--brand);

  color: #fff;
}

.btn-secondary {

  background:
    rgba(255,255,255,0.72);

  color: var(--secondary);
}

.current-department {

  margin-top: 14px;

  text-align: center;

  font-size: 14px;

  color: #fff;
}

.preview-card {

  padding: 20px;
}

.preview-head {

  text-align: center;

  margin-bottom: 16px;
}

.preview-head h2 {

  margin: 0;

  font-size: 22px;

  color: #fff;
}

.preview-head p {

  color: rgba(255,255,255,0.72);
}

.preview-area {

  background:
    rgba(255,255,255,0.20);

  border:
    1px dashed rgba(255,255,255,0.48);

  border-radius: 18px;

  padding: 18px;

  min-height: 300px;

  display: flex;

  justify-content: center;
  align-items: center;
}

canvas {

  width: 100%;

  max-width: 260px;

  border-radius: 12px;

  box-shadow:
    0 12px 28px rgba(31,20,66,0.18);
}

@keyframes fadeUp {

  from {

    opacity: 0;

    transform:
      translateY(14px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .page {

    padding: 18px 12px 28px;
  }

  .department-grid {

    grid-template-columns:
      repeat(2,1fr);
  }

  .buttons-grid {

    grid-template-columns:
      1fr;
  }

  canvas {

    max-width: 195px;
  }

  .sheep-bg {

    z-index: 5;
  }

  .soft-fireworks {

    z-index: 4;
  }

  .sheep-bg span {

    font-size: 96px;

    opacity: 0.52;
  }

  .soft-fireworks span {

    transform: scale(1.35);
  }

  .hero,
  .controls-card,
  .preview-card {

    position: relative;

    z-index: 1;
  }
}