/* =========================
   Base / Reset
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  background: #fbfaf7;
  font-family: sans-serif;
  overflow: hidden;
  direction: rtl;
}

/* =========================
   Architectural Lines
========================= */
.lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Base line style */
.arch-line {
  position: absolute;
  opacity: 0.22;
}

/* Line 1 – Top Left (L-shaped) */
.a1 {
  top: 24%;
  left: -70px;
  width: 190px;
  height: 190px;
  border-top: 2px solid rgba(214,179,106,.45);
  border-right: 2px solid rgba(214,179,106,.45);
  animation: moveX 18s ease-in-out infinite;
}

/* Line 2 – Top Right (Broken + Slight angle) */
.a2 {
  top: 14%;
  right: -90px;
  width: 230px;
  height: 120px;
  border-bottom: 2px solid rgba(214,179,106,.35);
  border-left: 2px solid rgba(214,179,106,.35);
  transform: rotate(-12deg);
  animation: moveY 22s ease-in-out infinite;
}

/* Line 3 – Bottom (Subtle, very light) */
.a3 {
  bottom: 20%;
  left: 18%;
  width: 260px;
  height: 70px;
  border-top: 1.5px solid rgba(214,179,106,.25);
  border-right: 1.5px solid rgba(214,179,106,.25);
  animation: moveXReverse 26s ease-in-out infinite;
}

/* Animations for lines */
@keyframes moveX {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(20px); }
}

@keyframes moveXReverse {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(-22px); }
}

@keyframes moveY {
  0%,100% { transform: rotate(-12deg) translateY(0); }
  50%     { transform: rotate(-12deg) translateY(16px); }
}

/* =========================
   Center Content
========================= */
.center {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Logo */
.logo {
  width: 260px;
  opacity: 0;
  animation:
    fadeUp 1.8s ease forwards,
    glow 5s ease-in-out infinite;
}

/* Caption */
.caption {
  margin-top: 22px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #c2a45e;
  opacity: 0;
  animation: fadeUp 1.8s ease forwards;
  animation-delay: 1s;
}

/* Logo animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%   { filter: drop-shadow(0 0 0 rgba(214,179,106,0)); }
  50%  { filter: drop-shadow(0 0 22px rgba(214,179,106,.35)); }
  100% { filter: drop-shadow(0 0 0 rgba(214,179,106,0)); }
}

/* =========================
   Mobile Optimization
========================= */
@media (max-width: 768px) {

  /* Logo becomes the hero */
  .logo {
    width: 320px;
  }

  .caption {
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  /* Lines: softer & fewer */
  .arch-line {
    opacity: 0.18;
  }

  .a1 {
    width: 150px;
    height: 150px;
    top: 18%;
    left: -60px;
    border-width: 1.5px;
  }

  .a2 {
    width: 170px;
    height: 90px;
    top: 10%;
    right: -70px;
    border-width: 1.5px;
  }

  .a3 {
    display: none;
  }

  /* Softer motion */
  @keyframes moveX {
    0%,100% { transform: translateX(0); }
    50%     { transform: translateX(10px); }
  }

  @keyframes moveY {
    0%,100% { transform: rotate(-12deg) translateY(0); }
    50%     { transform: rotate(-12deg) translateY(8px); }
  }
}