body{
  margin:0;
  min-height:100vh;
  overflow:hidden;
  color:#3f1d32;
  font-family:'Playfair Display', serif;

  background: linear-gradient(
    to bottom,
    hsl(343, 45%, 62%) 0%,
    hsl(321, 63%, 83%) 4%,
    hsl(188, 26%, 56%) 100%
  );
}


/* ===== TEXT (hidden first, then fades in) ===== */
.center{
  position: relative;
  z-index: 999;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding-top: 200px;
  padding-left: 26px;
  padding-right: 26px;

  /* 👇 THIS PART FIXES IT */
  opacity: 0;
  animation: revealText 1.2s ease forwards;
  animation-delay: 2.1s; /* after rugs open */
}

.title{
  position: relative;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.15;
}

.title-bg{
  display: inline-block;

  /* spacing around the words */
  padding: 14px 22px;

  /* YOUR IMAGE */
  background-image: url("background1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =====================
   FAIRY LIGHTS
   ===================== */

.fairy-left,
.fairy-mid,
.fairy-right{
  position: fixed;
  top: 0;

  width: min(520px, 70vw);
  height: auto;

  pointer-events: none;
  z-index: 5;
  opacity: 0.95;

  filter: drop-shadow(0 0 12px rgba(255, 215, 140, 0.45));

  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.fairy-left{
  left: -50px;
  top: -40px;  
}

.fairy-right{
  right: 300;
  transform: scaleX(-1); /* mirror it */
  transform-origin: top right;
  top: -50px;  
}

.fairy-mid{
  left: 97%;
  transform: translateX(-50%);
  width: min(620px, 80vw);  /* slightly wider than sides */
  height: auto;
  top: -55px;               /* a tiny bit higher */
  opacity: 0.92;
}
/* =====================
   THREE HANGING LANTERNS
   ===================== */

.lantern{
  position: fixed;
  top: 0;
  width: min(220px, 40vw);
  height: auto;

  pointer-events: none;
  z-index: 8;

  filter: drop-shadow(0 14px 28px rgba(63,29,50,0.22));
  opacity: 0.98;

  transform-origin: top center;
  animation: lanternSway 4.5s ease-in-out infinite;
}

/* Positions */
.lantern-left{
  left: 1%;
  animation-delay: 0.5s;
  top:0;
}

.lantern-center{
  left: 52%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.lantern-right{
  right: 21%;
  animation-delay: 1s;
  top: 40px;
  
}

/* Sway */
@keyframes lanternSway{
  0%,100% { transform: rotate(-1.5deg); }
  50%     { transform: rotate(1.5deg); }
}

/* IMPORTANT FIX:
   Center lantern needs translateX AND rotate */
.lantern-center{
  animation: lanternSwayCenter 4.5s ease-in-out infinite;
}

@keyframes lanternSwayCenter{
  0%,100% { transform: translateX(-50%) rotate(-1.5deg); }
  50%     { transform: translateX(-50%) rotate(1.5deg); }
}


/* wrapper lets us position relative to the W */
.butterfly-wrap{
  position: absolute;
  left: -56px;   /* 👈 moves butterfly near W */
  top: -26px;    /* 👈 vertical alignment */
}

/* actual butterfly */
.butterfly{
  width: 56px;          /* soft size */
  opacity: 0.9;
  filter: drop-shadow(0 14px 28px rgba(63,29,50,0.28));

}

/* background behind ALL text */
.text-bg{
  position: relative;
  z-index: 10;
  padding: 36px 48px;

  background: rgba(214, 116, 144, 0.75); /* soft pink veil */
  backdrop-filter: blur(1px);         /* gentle softness */

  box-shadow: 0 20px 50px rgba(63,29,50,0.12);
}
.text-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("purple.png"); /* reuse same image */
  background-size: cover;
  background-position: center;
  opacity: 0.5;           /* VERY subtle */
  pointer-events:none;
}
.text-bg > *{
  position: relative;
  z-index: 2;
}

.bismillah{
  font-family:'Amiri', serif;
  font-size:22px;
  color:#a4d7e0;
  margin:0 0 18px;
}

.center h1{
  margin:0;
  font-size:36px;
  font-weight:500;
}

.subtitle{
  margin-top:14px;
  font-size:16px;
  color:#a4d7e0;
}

.flower-on-rug{
  position: absolute;

  /* 👇 place it on TOP of the left rug */
  left: 110px;        /* move horizontally */
  top: 340px;         /* move vertically */

  width: 120px;
  height: auto;

  z-index: 4;         /* ABOVE rug (rug is z-index:2) */
  opacity: 0.95;

  filter: drop-shadow(0 16px 30px rgba(63,29,50,0.28));
}

.flower-on-rug-right{
  position: absolute;

  /* 👇 place it on the RIGHT rug */
  right: 370px;
  top: 160px;

  width: 78px;        /* smaller than left rose */
  height: auto;

  z-index: 9999;         /* above rug */
  opacity: 1.75;      /* softer than main rose */

  filter: drop-shadow(0 10px 22px rgba(63,29,50,0.18));
}


/* ===== RUGS (start stacked at center) ===== */
.rug-tile{
  position:absolute;
  top: 50%;
  left: 50%;
  z-index:2;

  width: 300px;
height: 440px;

  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 0;
  border: none;
  box-shadow: 0 18px 45px rgba(63,29,50,0.18);

  /* start stacked */
  transform: translate(-50%, -50%)
           translate(var(--stack-x, 0px), var(--stack-y, 0px));

  animation: openCurtain 2.0s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: 0.4s;
}

/* little layering so it feels like a stack at the start */
/* subtle stacked look at start */
.tl { --stack-x: -12px; --stack-y: -12px; }
.tr { --stack-x:  12px; --stack-y: -6px; }
.bl { --stack-x: -6px;  --stack-y:  12px; }
.br { --stack-x:  6px;  --stack-y:  6px; }


/* ===== ANIMATIONS ===== */
@keyframes openCurtain {
  0% {
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x), var(--stack-y))
      scale(0.98);
  }
  100% {
    transform:
      translate(-50%, -50%)
      translate(var(--dx), var(--dy))
      scale(1);
  }
}

@keyframes revealText {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* ===== MOBILE ===== */
@media (max-width: 650px){

  body{
    overflow: hidden; /* keep it calm */
  }

  /* ========= LIGHTS ========= */
  .fairy-left, .fairy-mid, .fairy-right{
    width: min(520px, 98vw);
    top: -55px;
  }
  .fairy-left{ left: -14px; }
  .fairy-mid{ left: 50%; transform: translateX(-50%); }
  .fairy-right{ right: -14px; transform: scaleX(-1); }

  /* ========= LANTERNS ========= */
  .lantern{
    width: min(170px, 52vw);
    top: 0;
  }
  .lantern-left{ left: 0%; }
  .lantern-center{ left: 50%; }
  .lantern-right{ right: 0%; top: 22px; }

  /* ========= TEXT BLOCK ========= */
  .center{
    padding-top: 160px; /* pushes text down below lanterns */
    padding-left: 14px;
    padding-right: 14px;
  }

  .text-bg{
    width: min(92vw, 520px);
    padding: 12px 6px;
    border-radius: 18px;
    top:20px;
  }

  .bismillah{ font-size: 16px; margin-bottom: 12px; }
  .center h1{ font-size: 28px; }
  .subtitle{ font-size: 13px; }

  /* Butterfly: keep it near the title but not off-screen */
  .butterfly-wrap{
    left: -28px;
    top: -12px;
  }
  .butterfly{ width: 38px; }

  /* ========= RUG CURTAINS =========
     Make rugs real size again, but smaller than desktop */
  .rug-tile{
    width: 140px;
    height: 210px;
    
    box-shadow: 0 14px 30px rgba(63,29,50,0.16);
  }

  /* Positions: open outward but stay on screen */
  .tl{ --dx:-130px; --dy:-170px; }
  .tr{ --dx: 130px; --dy:-170px; }
  .bl{ --dx:-130px; --dy: 110px; }
  .br{ --dx: 130px; --dy: 110px; }

  /* ========= FLOWERS ========= */
  .flower-on-rug{
    left: 10px;
    top: 220px;
    width: 64px;
  }

  .flower-on-rug-right{
    right: 10px;
    top: 210px;
    width: 46px;
    opacity: 0.9;
  }
}

@media (max-width: 650px){

  /* Top Left Rug */
  .tl{
    top: 15%;
    left: 35%;
  }

  /* Top Right Rug */
  .tr{
    top: 45%;
    left: -115%;
  }

  /* Bottom Left Rug */
  .bl{
    top: 15%;
    left: 185%;
  }

  /* Bottom Right Rug */
  .br{
    top: 65%;
    left: -200%;
  }

}
/* --- Auth buttons on home page --- */
.auth-buttons{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-family: "Playfair Display", serif;
  letter-spacing: .2px;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  border-radius: 25%;
}

.btn:hover{
  transform: translateY(-1px);
  opacity: 0.96;
}

.btn:active{
  transform: translateY(0px) scale(0.99);
}

/* soft light button */
.btn-primary{
  background: rgba(107, 131, 147, 0.88);
  color: #5a2a44;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 25%;
}

/* glassy button */
.btn-ghost{
  background: rgba(90,42,68,0.20);
  color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

/* nice focus for accessibility */
.btn:focus{
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 3px;
}