/* Roza — Premium Cinematic Flower Experience */
:root {
  --bg: #050204;
  --bg2: #12070d;
  --ink: #fdfafb;
  --muted: #b5a4ad;
  --rose: #e96b91;
  --rose2: #ff9ab6;
  --gold: #e6c587;
  --line: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  --ease: cubic-bezier(0.25, 1, 0.25, 1);
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden; 
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}

button, input { font: inherit; outline: none; border: 0; }
button:focus-visible, input:focus-visible { box-shadow: 0 0 0 2px var(--rose2); }

#app {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(90, 20, 50, 0.25), transparent 60%),
              linear-gradient(180deg, #050204 0%, #11060a 50%, #050204 100%);
}

/* Ambient Animated Glows */
.ambient, .grain, .scene { position: absolute; inset: 0; }
.ambient { pointer-events: none; overflow: hidden; }
.grain {
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.15;
  animation: breathe 10s ease-in-out infinite alternate;
}
.orb-a { width: 50vw; height: 50vw; background: #c2275e; top: -20vw; left: -10vw; }
.orb-b { width: 40vw; height: 40vw; background: #8a3363; right: -15vw; bottom: 5vw; animation-delay: -5s; }

@keyframes breathe {
  0% { transform: scale(1) translate(0, 0); opacity: 0.12; }
  100% { transform: scale(1.1) translate(20px, -20px); opacity: 0.22; }
}

/* Particles & Swaying Petals */
#particles, #petals { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; 
  background: #fff; opacity: 0.4; animation: twinkle var(--d) ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity: 0.1; transform: scale(0.5); } 100% { opacity: 0.6; transform: scale(1.5); box-shadow: 0 0 8px rgba(255,255,255,0.8); } }

.petal {
  position: absolute; width: 12px; height: 22px; border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, rgba(255,190,210,0.85), rgba(180,50,90,0.4));
  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.2);
  filter: blur(0.5px); opacity: 0;
  animation: fall var(--d) cubic-bezier(0.3, 0, 0.7, 1) infinite;
  left: var(--x); top: -40px;
}
@keyframes fall {
  0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translate3d(var(--drift), 110vh, 0) rotate(720deg); opacity: 0; }
}

/* Navigation */
.topbar {
  position: absolute; z-index: 50; top: max(20px, env(safe-area-inset-top)); 
  left: 0; right: 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.progress { display: flex; gap: 8px; }
.progress .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: 0.5s var(--ease); }
.progress .dot.active { width: 24px; border-radius: 10px; background: var(--rose2); box-shadow: 0 0 12px rgba(255, 154, 182, 0.6); }

.icon-btn, .tiny-btn {
  width: 44px; height: 44px; border-radius: 50%; color: #fff; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); 
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: 0.3s ease; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover, .tiny-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }

/* Typography & Layout */
.scene {
  z-index: 10; display: grid; place-items: center; padding: 80px 24px 40px;
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}
.scene.leaving { opacity: 0; transform: scale(0.95) translateY(10px); filter: blur(12px); }
.content { width: min(800px, 100%); text-align: center; position: relative; }

.eyebrow { font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; font-weight: 500; }
.kicker { font-size: clamp(14px, 2vw, 16px); letter-spacing: 0.05em; color: var(--muted); margin: 0 0 16px; }
.title {
  font-family: "Cormorant Garamond", serif; font-size: clamp(48px, 9vw, 92px);
  line-height: 0.95; font-weight: 500; letter-spacing: -0.02em; margin: 0;
  text-shadow: 0 10px 40px rgba(255, 154, 182, 0.15);
}
.title em { color: var(--rose2); font-style: italic; display: inline-block; padding-right: 5px; }
.subtitle { max-width: 500px; margin: 24px auto 0; color: #d0c4cb; font-size: 15px; line-height: 1.7; font-weight: 300; }

/* Frosted Glass Buttons & Cards */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.primary, .secondary {
  height: 54px; padding: 0 32px; border-radius: 999px; cursor: pointer;
  transition: 0.4s var(--ease); font-size: 13px; letter-spacing: 0.1em;
}
.primary {
  color: #1a080f; font-weight: 600;
  background: linear-gradient(135deg, #ffc4d6, #e96b91);
  box-shadow: 0 12px 30px rgba(233, 107, 145, 0.25), inset 0 1px 1px rgba(255,255,255,0.6);
}
.primary:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(233, 107, 145, 0.4), inset 0 1px 1px rgba(255,255,255,0.8); filter: brightness(1.1); }
.secondary {
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.secondary:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); }

.flower-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px auto 0; max-width: 700px; }
.flower-card {
  position: relative; height: 160px; padding: 24px 10px; border-radius: 24px;
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  cursor: pointer; transition: 0.5s var(--ease); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.flower-card::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(255,154,182,0.15), transparent 70%);
  opacity: 0; transition: 0.5s ease;
}
.flower-card:hover, .flower-card.selected {
  transform: translateY(-8px); border-color: rgba(255, 154, 182, 0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 20px rgba(233, 107, 145, 0.15);
}
.flower-card:hover::before, .flower-card.selected::before { opacity: 1; }
.flower-icon { font-size: 50px; display: block; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4)); margin-bottom: 12px; transition: 0.4s ease; }
.flower-card:hover .flower-icon { transform: scale(1.15) rotate(5deg); }
.flower-name { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #e9dfe4; font-weight: 500; }
.other-card { grid-column: 1 / -1; height: 72px; flex-direction: row; gap: 12px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Inputs & Memories */
.field { width: min(600px, 100%); margin: 36px auto 0; position: relative; }
.input {
  width: 100%; height: 64px; border-radius: 20px; border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px);
  color: #fff; font-size: 18px; padding: 0 24px; text-align: center; transition: 0.4s var(--ease);
}
.input:focus {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 154, 182, 0.6);
  box-shadow: 0 0 30px rgba(233, 107, 145, 0.15); transform: translateY(-2px);
}

.memory {
  margin: 40px auto 0; padding: 40px; border: 1px solid var(--glass-border);
  border-radius: 32px; background: var(--glass); backdrop-filter: blur(15px);
  box-shadow: var(--shadow); max-width: 560px; position: relative; overflow: hidden;
}
.memory::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%); pointer-events: none; }
.memory-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--gold); }
.memory-answer { font-family: "Cormorant Garamond", serif; font-size: 52px; line-height: 1.1; margin: 16px 0 12px; color: #fff; text-shadow: 0 4px 20px rgba(255, 154, 182, 0.3); }
.memory-note { font-size: 13px; color: var(--muted); font-weight: 300; }

.answer-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(10px); border-radius: 999px; color: #fff;
  font-family: "Cormorant Garamond", serif; font-size: 26px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.big-you {
  font-family: "Cormorant Garamond", serif; font-size: clamp(80px, 20vw, 150px);
  line-height: 0.8; color: #ffabc3; text-shadow: 0 0 60px rgba(255, 154, 182, 0.3), 0 0 15px rgba(255, 255, 255, 0.5);
  margin: 30px 0; background: linear-gradient(to bottom, #fff, #ffabc3); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* 6-Photo Garden Sequence Enhancements */
.garden-scene { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.garden-stage { position: relative; width: min(1000px, 96vw); height: min(700px, 75vh); min-height: 500px; }
.garden-vignette {
  position: absolute; inset: 0; border-radius: 40px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 123, 164, 0.08), transparent 40%);
}

.garden-photo {
  position: absolute; width: clamp(120px, 18vw, 200px); aspect-ratio: 3/4;
  left: var(--left); top: var(--top); transform: translate(-50%, -50%) scale(0.05) rotate(var(--rot));
  opacity: 0; visibility: hidden; border-radius: 48% 48% 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 25px 80px rgba(0,0,0,0.8);
  transition: opacity 1.2s var(--ease), transform 1.5s var(--ease), filter 1.5s var(--ease);
  filter: blur(25px) brightness(0.5); background: #0a0407; z-index: 2; overflow: hidden;
}
.garden-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garden-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }

/* The Floating Magic! */
.garden-photo.bloom {
  opacity: 1; visibility: visible; filter: blur(0) brightness(0.95);
  transform: translate(-50%, -50%) scale(1) rotate(var(--rot));
  animation: floatPhoto 6s ease-in-out infinite alternate;
}
@keyframes floatPhoto { 
  0% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot)) translateY(0px); } 
  100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot)) translateY(-15px); } 
}

.garden-photo.focus {
  width: clamp(200px, 32vw, 320px); z-index: 20; border-color: rgba(255, 210, 225, 0.6);
  box-shadow: 0 40px 120px rgba(235, 74, 125, 0.35), 0 0 60px rgba(255, 154, 182, 0.2);
  filter: blur(0) brightness(1.05); transform: translate(-50%, -50%) scale(1) rotate(0deg);
  animation: floatFocus 6s ease-in-out infinite alternate;
}
@keyframes floatFocus { 
  0% { transform: translate(-50%, -50%) scale(1) translateY(0px); } 
  100% { transform: translate(-50%, -50%) scale(1) translateY(-10px); } 
}

.garden-photo.distant { opacity: 0.3; filter: blur(3px) brightness(0.5); transform: translate(-50%, -50%) scale(0.8) rotate(var(--rot)); animation: none; }
.photo-number {
  position: absolute; left: 12px; bottom: 12px; z-index: 5; padding: 6px 10px;
  border-radius: 999px; font-size: 9px; letter-spacing: 0.2em; color: #fff;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1);
}

.garden-copy { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(800px, 94vw); text-align: center; z-index: 100; pointer-events: none; }
.garden-copy button { pointer-events: auto; }
.garden-caption { min-height: 30px; margin-top: 12px; color: #d0c4cb; font-size: 14px; letter-spacing: 0.08em; transition: opacity 0.8s, transform 0.8s; font-weight: 300; }

/* Flower Over Photos */
.photo-flower { position: fixed; z-index: 50; width: 20px; height: 20px; transform: translate(-50%, -50%) scale(0.01); opacity: 0; pointer-events: none; }
.photo-flower .petal {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 54px; margin: -27px 0 0 -18px;
  border-radius: 100% 0 100% 0; background: radial-gradient(circle at 30% 20%, #fff, #ffabc3 40%, #bd3e69 100%);
  box-shadow: 0 8px 25px rgba(224, 67, 115, 0.4); transform-origin: center bottom;
}
.photo-flower .petal:nth-child(1) { transform: rotate(0deg) translateY(-20px); }
.photo-flower .petal:nth-child(2) { transform: rotate(60deg) translateY(-20px); }
.photo-flower .petal:nth-child(3) { transform: rotate(120deg) translateY(-20px); }
.photo-flower .petal:nth-child(4) { transform: rotate(180deg) translateY(-20px); }
.photo-flower .petal:nth-child(5) { transform: rotate(240deg) translateY(-20px); }
.photo-flower .petal:nth-child(6) { transform: rotate(300deg) translateY(-20px); }
.photo-flower .center {
  position: absolute; width: 18px; height: 18px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, #ffe7a9, #d79a45); box-shadow: 0 0 30px rgba(255, 205, 100, 0.8);
}
.photo-flower.blooming { animation: flowerAppear 1.5s cubic-bezier(0.2, 1, 0.2, 1) forwards; }
@keyframes flowerAppear {
  0% { transform: translate(-50%, -50%) scale(0.02) rotate(-45deg); opacity: 0; }
  40% { opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.15) rotate(10deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* Final Message Card */
.final-card {
  max-width: 720px; margin: auto; padding: clamp(40px, 8vw, 64px); border: 1px solid var(--glass-border);
  border-radius: 40px; background: var(--glass); backdrop-filter: blur(20px); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.final-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; }
.final-message { font-family: "Cormorant Garamond", serif; font-size: clamp(28px, 5.5vw, 46px); line-height: 1.25; color: #fff; text-shadow: 0 2px 15px rgba(0,0,0,0.5); }
.final-message p { margin: 0 0 20px; }
.final-message strong { color: #ffabc3; font-weight: 500; }
.final-message .small { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-top: 40px; font-weight: 500; text-shadow: none; }

/* UI Helpers */
.toast {
  position: absolute; z-index: 999; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  padding: 14px 24px; border: 1px solid var(--glass-border); border-radius: 999px;
  background: rgba(10, 4, 7, 0.85); backdrop-filter: blur(16px); color: #fff; font-size: 13px; font-weight: 500;
  letter-spacing: 0.05em; opacity: 0; pointer-events: none; transition: 0.4s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.loading-flower { font-size: 64px; display: inline-block; animation: heartbeat 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; color: var(--rose2); filter: drop-shadow(0 0 20px rgba(255, 154, 182, 0.4)); }
.dots { display: inline-flex; gap: 6px; margin-left: 8px; }
.dots i { width: 6px; height: 6px; background: var(--rose2); border-radius: 50%; animation: dot 1.4s infinite ease-in-out both; }
.dots i:nth-child(1) { animation-delay: -0.32s; } .dots i:nth-child(2) { animation-delay: -0.16s; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes dot { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px var(--rose2); } }

/* Mobile Adjustments */
@media (max-width: 600px) {
  .scene { padding: 90px 20px 30px; }
  .flower-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .flower-card { height: 140px; padding: 16px 5px; border-radius: 20px; }
  .flower-icon { font-size: 42px; }
  .other-card { height: 64px; }
  .actions .primary, .actions .secondary { width: 100%; }
  .memory { padding: 30px 20px; }
  .garden-stage { height: 62vh; min-height: 460px; }
  .garden-photo { width: clamp(100px, 26vw, 150px); }
  .garden-photo.focus { width: clamp(160px, 45vw, 240px); }
  .garden-copy { bottom: -15px; }
}
/* Missing Photo Fallback & Utilities */
.hidden { display: none !important; }

.media-fallback {
  position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; 
  text-align: center; padding: 30px; background: rgba(5, 2, 4, 0.95); 
  backdrop-filter: blur(15px); color: #fff;
}
.media-fallback > div { display: grid; gap: 8px; }
.fallback-flower { font-size: 65px; color: var(--rose2); }
.media-fallback span { font-size: 13px; color: var(--muted); }
code { color: #ffabc3; font-family: monospace; }