/* ==========================================================================
   KEBUN BUNGA IRIS - STYLESHEET (Bagian 1: Variabel & Background Ladang)
   ========================================================================== */

:root {
  --primary-purple: #4a3e72;
  --accent-iris: #6b52ae;
  --soft-lavender: #d8d0ee;
  --golden-sun: #ffd89b;
  --leaf-green: #3d5a45;
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(255, 255, 255, 0.6);
  --text-dark: #2c2538;
  --text-muted: #5e546e;
  --ease-gentle: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-curtain: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-dark);
  background-color: #f7f2e9;
  -webkit-font-smoothing: antialiased;
}

/* 1. BACKGROUND LADANG BUNGA (DREAMY MEADOW + DEPTH BLUR) */
.garden-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.sky-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #9cb8da 0%,
    #c4d5ea 25%,
    #f2dbdf 50%,
    #f8e3c5 75%,
    #e7e3bf 100%
  );
}

.sun-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(255, 245, 215, 0.7) 0%,
    rgba(255, 225, 170, 0.35) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(40px);
  animation: sunPulse 8s ease-in-out infinite alternate;
}

@keyframes sunPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.95; }
}

.meadow-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-repeat: repeat-x;
}

.layer-back {
  height: 48vh;
  background: 
    radial-gradient(ellipse at 25% 100%, #879978 0%, #7d8e6e 60%, transparent 80%),
    radial-gradient(ellipse at 75% 100%, #9987a0 0%, #897893 50%, transparent 75%),
    linear-gradient(to top, #7e947b 0%, rgba(142, 168, 140, 0.4) 60%, transparent 100%);
  filter: blur(14px);
  opacity: 0.85;
}

.layer-mid {
  height: 38vh;
  background: 
    radial-gradient(circle at 15% 90%, rgba(107, 82, 174, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 45% 85%, rgba(220, 180, 240, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(125, 95, 185, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 60% 95%, rgba(245, 205, 120, 0.35) 0%, transparent 35%),
    linear-gradient(to top, #506e4c 0%, rgba(95, 126, 92, 0.6) 50%, transparent 100%);
  filter: blur(6px);
  opacity: 0.9;
}

.layer-front {
  height: 24vh;
  background: 
    radial-gradient(ellipse at 30% 100%, rgba(61, 90, 69, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(74, 62, 114, 0.35) 0%, transparent 55%),
    linear-gradient(to top, #395238 0%, rgba(61, 90, 69, 0.3) 70%, transparent 100%);
  filter: blur(1.5px);
  opacity: 0.95;
}

.particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.particle {
  position: absolute;
  border-radius: 50% 0 50% 50%;
  pointer-events: none;
  opacity: 0;
  animation: floatPetal linear infinite;
}

@keyframes floatPetal {
  0% {
    transform: translateY(105vh) translateX(0) rotate(0deg) scale(0.6);
    opacity: 0;
  }
  15% { opacity: 0.75; }
  85% { opacity: 0.7; }
  100% {
    transform: translateY(-10vh) translateX(120px) rotate(420deg) scale(1);
    opacity: 0;
  }
}

.sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffeaa7, 0 0 20px #ffeaa7;
  pointer-events: none;
  opacity: 0;
  animation: floatSparkle ease-in-out infinite alternate;
}

@keyframes floatSparkle {
  0% { transform: translateY(0) scale(0.5); opacity: 0.2; }
  50% { opacity: 0.9; }
  100% { transform: translateY(-40px) scale(1.3); opacity: 0.3; }
}

/* ==========================================================================
   2. KONTEN UTAMA (HANYA AMPLOP 3D PRESISI TANPA CARD / TEXT)
   ========================================================================== */

.garden-content {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.8s var(--ease-gentle), transform 1.8s var(--ease-gentle);
  pointer-events: none;
}

body.curtain-opened .garden-content {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Panggung Amplop 3D (Perspective Viewport) */
.envelope-stage {
  perspective: 1200px;
  perspective-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.envelope-stage:active {
  cursor: grabbing;
}

/* Kontainer Utama Amplop 3D */
.envelope-3d {
  position: relative;
  /* Dimensi amplop disesuaikan dengan rasio asli 2540 x 2916 (~0.871) */
  width: min(340px, 78vw);
  aspect-ratio: 2540 / 2916;
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1);
  will-change: transform;
}

/* Ketika mouse keluar, amplop kembali dengan animasi pegas yang lembut */
.envelope-3d.resting {
  transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Bayangan 3D di bawah amplop */
.envelope-shadow {
  position: absolute;
  bottom: -4%;
  left: 6%;
  width: 88%;
  height: 24px;
  background: radial-gradient(
    ellipse at center,
    rgba(40, 25, 65, 0.38) 0%,
    rgba(40, 25, 65, 0.16) 45%,
    transparent 75%
  );
  filter: blur(14px);
  transform: translateZ(-35px) scale(0.95);
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.envelope-3d:hover .envelope-shadow {
  transform: translateZ(-45px) scale(1.06) translateY(12px);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   3 LAYER TIMPA AMPLOP PRESISI:
   Layer 1: evenlope_v1.webp (Back)       -> z-index: 1
   Layer 2: evenlope_paper_v1.webp (Paper) -> z-index: 2
   Layer 3: evenlope_front_v1.webp (Front) -> z-index: 3
   -------------------------------------------------------------------------- */

/* Base Layer Styling */
.env-layer {
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Layer 1: Belakang Amplop (Evenlope Back dengan tutup terbuka) */
.env-layer-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  transform: translateZ(0px);
  filter: drop-shadow(0 14px 28px rgba(35, 20, 55, 0.18));
}

/* Layer 2: Wrapper Kertas Surat (Evenlope Paper) */
.env-layer-paper-wrap {
  position: absolute;
  /* Posisi kertas berada pas di dalam kantung amplop */
  left: 50%;
  bottom: 1.5%;
  width: 90.5%;
  aspect-ratio: 1 / 1; /* Rasio asli 2452 x 2452 */
  z-index: 2;
  transform: translateX(-50%) translateY(0) translateZ(8px);
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  pointer-events: none;
}

.env-layer-paper {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, 0.08));
}

/* Efek Kertas Geser Keluar Sedikit Saat Amplop Dihover */
.envelope-3d:hover .env-layer-paper-wrap {
  /* Geser ke atas sekitar 18% dari tingginya */
  transform: translateX(-50%) translateY(-19%) translateZ(14px);
}

/* Layer 3: Depan Amplop (Lipatan kantong segitiga depan) */
.env-layer-front {
  position: absolute;
  left: 50%;
  bottom: 0.5%;
  /* Skala presisi matematis: 2453 / 2540 = 96.575% */
  width: 96.58%;
  height: auto;
  aspect-ratio: 2453 / 1836;
  object-fit: contain;
  transform: translateX(-50%) translateZ(18px);
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(35, 20, 55, 0.12));
}

/* ==========================================================================
   3. TIRAI BUNGA PEMBUKA LAYAR (IRIS FLOWER CURTAIN)
   ========================================================================== */

.flower-curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: auto;
  overflow: hidden;
  transition: opacity 1s ease 2s, visibility 1s ease 2.5s;
}

body.curtain-opened .flower-curtain {
  pointer-events: none;
}

.curtain-wing {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72vw;
  height: 100%;
  transition: transform 3.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.curtain-left {
  left: 0;
  transform: translateX(0);
}

.curtain-right {
  right: 0;
  transform: translateX(0);
}

/* Membuka ke arah luar dengan lengkungan anggun ditiup angin */
body.curtain-opened .curtain-left {
  transform: translateX(-118%) rotate(-12deg);
}

body.curtain-opened .curtain-right {
  transform: translateX(118%) rotate(12deg);
}

.flower-stem {
  position: absolute;
  bottom: -6vh;
  transform-origin: bottom center;
  transition: filter 0.8s ease;
  will-change: transform;
}

.flower-stem .iris-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(28, 18, 48, 0.28));
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

/* ==========================================================================
   SUSUNAN BUNGA MENYILANG (CROSSED & LEANING STEMS)
   ========================================================================== */

/* Sayap Kiri: Condong menyilang ke arah kanan / tengah */
.stem-l-1 {
  left: 3vw;
  width: 38vw;
  max-width: 480px;
  height: 112vh;
  z-index: 5;
  animation: windBreezeLeft 7.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

.stem-l-2 {
  left: 17vw;
  width: 36vw;
  max-width: 440px;
  height: 105vh;
  z-index: 4;
  animation: windBreezeLeftCross 8.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.2s infinite;
}

.stem-l-3 {
  left: 31vw;
  width: 33vw;
  max-width: 410px;
  height: 100vh;
  z-index: 3;
  animation: windBreezeLeftDeep 6.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.1s infinite;
}

.stem-l-4 {
  left: 8vw;
  width: 34vw;
  max-width: 410px;
  height: 94vh;
  z-index: 2;
  filter: brightness(0.9) blur(1px);
  animation: windBreezeLeft 7.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.6s infinite;
}

.stem-l-5 {
  left: 24vw;
  width: 30vw;
  max-width: 370px;
  height: 86vh;
  z-index: 1;
  filter: brightness(0.82) blur(3px);
  animation: windBreezeLeftCross 9.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.8s infinite;
}

/* Sayap Kanan: Condong menyilang ke arah kiri / tengah */
.stem-r-1 {
  right: 3vw;
  width: 38vw;
  max-width: 480px;
  height: 112vh;
  z-index: 5;
  animation: windBreezeRight 8.1s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

.stem-r-2 {
  right: 17vw;
  width: 36vw;
  max-width: 440px;
  height: 105vh;
  z-index: 4;
  animation: windBreezeRightCross 7.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.5s infinite;
}

.stem-r-3 {
  right: 31vw;
  width: 33vw;
  max-width: 410px;
  height: 100vh;
  z-index: 3;
  animation: windBreezeRightDeep 8.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.8s infinite;
}

.stem-r-4 {
  right: 8vw;
  width: 34vw;
  max-width: 410px;
  height: 94vh;
  z-index: 2;
  filter: brightness(0.9) blur(1px);
  animation: windBreezeRight 7.0s cubic-bezier(0.445, 0.05, 0.55, 0.95) 2.3s infinite;
}

.stem-r-5 {
  right: 24vw;
  width: 30vw;
  max-width: 370px;
  height: 86vh;
  z-index: 1;
  filter: brightness(0.82) blur(3px);
  animation: windBreezeRightCross 9.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.1s infinite;
}

/* ==========================================================================
   ANIMASI TERPAAN ANGIN ORGANIK & SANGAT HALUS (MULTI-STAGE BREEZE)
   ========================================================================== */

/* Sayap Kiri: Variasi kemiringan menyilang ke kanan (+deg) */
@keyframes windBreezeLeft {
  0% {
    transform: rotate(11deg) skewX(-2deg) translateY(0);
  }
  24% {
    transform: rotate(14deg) skewX(-3.5deg) translateY(-5px);
  }
  48% {
    transform: rotate(9.5deg) skewX(-1.5deg) translateY(2px);
  }
  72% {
    transform: rotate(15.5deg) skewX(-4deg) translateY(-8px);
  }
  88% {
    transform: rotate(12deg) skewX(-2.5deg) translateY(-2px);
  }
  100% {
    transform: rotate(11deg) skewX(-2deg) translateY(0);
  }
}

@keyframes windBreezeLeftCross {
  0% {
    transform: rotate(17deg) skewX(-3deg) translateY(0);
  }
  28% {
    transform: rotate(20.5deg) skewX(-5deg) translateY(-7px);
  }
  54% {
    transform: rotate(15deg) skewX(-2deg) translateY(3px);
  }
  78% {
    transform: rotate(21.5deg) skewX(-5.5deg) translateY(-10px);
  }
  90% {
    transform: rotate(18deg) skewX(-3.5deg) translateY(-2px);
  }
  100% {
    transform: rotate(17deg) skewX(-3deg) translateY(0);
  }
}

@keyframes windBreezeLeftDeep {
  0% {
    transform: rotate(7deg) skewX(-1.5deg) translateY(0);
  }
  22% {
    transform: rotate(10.5deg) skewX(-3deg) translateY(-4px);
  }
  50% {
    transform: rotate(5.5deg) skewX(-1deg) translateY(2px);
  }
  75% {
    transform: rotate(11.5deg) skewX(-3.5deg) translateY(-6px);
  }
  100% {
    transform: rotate(7deg) skewX(-1.5deg) translateY(0);
  }
}

/* Sayap Kanan: Variasi kemiringan menyilang ke kiri (-deg) */
@keyframes windBreezeRight {
  0% {
    transform: scaleX(-1) rotate(11deg) skewX(-2deg) translateY(0);
  }
  26% {
    transform: scaleX(-1) rotate(14.5deg) skewX(-3.8deg) translateY(-6px);
  }
  50% {
    transform: scaleX(-1) rotate(9.5deg) skewX(-1.5deg) translateY(2px);
  }
  74% {
    transform: scaleX(-1) rotate(16deg) skewX(-4.2deg) translateY(-9px);
  }
  89% {
    transform: scaleX(-1) rotate(12.5deg) skewX(-2.5deg) translateY(-2px);
  }
  100% {
    transform: scaleX(-1) rotate(11deg) skewX(-2deg) translateY(0);
  }
}

@keyframes windBreezeRightCross {
  0% {
    transform: scaleX(-1) rotate(17deg) skewX(-3deg) translateY(0);
  }
  25% {
    transform: scaleX(-1) rotate(21deg) skewX(-5deg) translateY(-8px);
  }
  55% {
    transform: scaleX(-1) rotate(15.5deg) skewX(-2deg) translateY(3px);
  }
  76% {
    transform: scaleX(-1) rotate(22deg) skewX(-5.5deg) translateY(-11px);
  }
  92% {
    transform: scaleX(-1) rotate(18.5deg) skewX(-3.5deg) translateY(-2px);
  }
  100% {
    transform: scaleX(-1) rotate(17deg) skewX(-3deg) translateY(0);
  }
}

@keyframes windBreezeRightDeep {
  0% {
    transform: scaleX(-1) rotate(7deg) skewX(-1.5deg) translateY(0);
  }
  23% {
    transform: scaleX(-1) rotate(11deg) skewX(-3.2deg) translateY(-5px);
  }
  52% {
    transform: scaleX(-1) rotate(6deg) skewX(-1.2deg) translateY(2px);
  }
  77% {
    transform: scaleX(-1) rotate(12deg) skewX(-3.8deg) translateY(-7px);
  }
  100% {
    transform: scaleX(-1) rotate(7deg) skewX(-1.5deg) translateY(0);
  }
}

/* Prompt Teks di Tengah */
.curtain-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 1.1rem 2rem;
  border-radius: 40px;
  box-shadow: 0 12px 40px rgba(50, 30, 80, 0.22);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.8s ease, transform 0.8s var(--ease-gentle);
  animation: promptPulse 2.8s infinite ease-in-out;
}

.curtain-prompt .prompt-icon {
  font-size: 1.3rem;
  animation: spinSlow 8s linear infinite;
}

.curtain-prompt .prompt-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary-purple);
  letter-spacing: 0.3px;
}

@keyframes promptPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes spinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.curtain-opened .curtain-prompt {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.9);
  pointer-events: none;
}

/* 4. RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .curtain-wing { width: 92vw; }
  .stem-l-1, .stem-r-1 { width: 62vw; }
  .stem-l-2, .stem-r-2 { width: 56vw; left: 16vw; }
  .stem-r-2 { right: 16vw; left: auto; }
  .stem-l-3, .stem-r-3 { width: 50vw; left: 32vw; }
  .stem-r-3 { right: 32vw; left: auto; }
  .envelope-3d { width: min(300px, 84vw); }
  .curtain-prompt { width: 85%; max-width: 320px; padding: 0.9rem 1.4rem; }
  .curtain-prompt .prompt-text { font-size: 0.82rem; }
}