@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

html,
body {
	width: 100%;
	height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
	font-family: "Poppins", sans-serif;
	background-color: #f2f1eb;
}

/*--================================== Lock Screen ==================================--*/
.lock-screen {
	position: fixed; /* penting supaya menimpa section lain */
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	height: auto;
	background: url("../img/bg/bg-paint-1.png") center/cover no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	padding: 1rem;
	z-index: 10; /* pastikan di atas bibleVerses */
	transition: transform 1s ease-in-out;
}

.lock-screen.hide {
  transform: translateY(-100%); /* Naik keluar layar */
}

.lock-screen .logo {
	width: 350px;
	max-width: 70%;
	height: auto;
	display: block;
	margin: 20px auto;
	animation: pulse 5.5s ease-in-out infinite;
}

.lock-screen h1 {
	font-family: "Dancing Script", cursive;
	font-size: 4rem;
	color: #2b201c;
}

.lock-screen h3 {
	font-size: clamp(20px, 3vw, 32px);
	color: #2b201c;
}

.lock-screen p {
	font-size: clamp(18px, 2vw, 28px);
	/* margin: 25px 0 40px; */
	color: #2b201c;
}

.btn-invite {
  background: transparent;
  color: #2b201c;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: none;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* jarak icon dan teks */
}

.btn-invite::before,
.btn-invite::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #2b201c;
}

.btn-invite::before {
  top: 0;
}

.btn-invite::after {
  bottom: 0;
}

.btn-invite:hover {
  color: #9d8a59; /* warna emas ketika hover */
}

.btn-invite i {
  font-size: 18px;
}

/*--================================== Bible Verses ==================================--*/
.bible-verses {
	position: relative;
	width: 100%;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	padding: 1rem;

	opacity: 0; /* awalnya belum kelihatan */
	transform: translateY(30px);
	transition: opacity 1s ease, transform 1s ease;
}

.bible-verses.show {
  opacity: 1;
  transform: translateY(0);
}

.bible-verses h1 {
	font-family: "Dancing Script", cursive;
	font-size: clamp(36px, 6vw, 80px);
	color: #2b201c;
	z-index: 1;
}

.bible-verses p {
	font-size: clamp(18px, 2vw, 28px);
	margin: 25px 0 40px;
	color: #2b201c;
	z-index: 1;
}

/* Animasi untuk teks "Verses" */
.verses-title {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease, transform 1s ease;
}

.bible-verses.show .verses-title {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.5s;
}

.verses-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.bible-verses.show .verses-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/*--================================== History Diman ==================================--*/
.history-diman {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

.history-diman .row {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	width: 100%;
	max-width: 1200px;
}

/* === LEFT: TEXT === */
.history-text {
	flex: 1;
}

.history-text h1 {
	font-family: "Noto Serif", serif;
	font-size: 3rem;
	color: #2b201c;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.history-text .subtitle {
	color: #9d8a59;
	font-weight: 500;
	margin-bottom: 40px;
}

.timeline {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px 0;
}

.timeline div {
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid #9d8a59;
	color: #2b201c;
	font-size: 18px;
	padding: 5px 0;
}

.timeline .timeline-year {
	font-weight: 600;
	color: #9d8a59;
}

.timeline-detail {
    text-align: end;
}

/* === RIGHT: IMAGES === */
.history-images {
	flex: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.history-bg img {
	width: 100%;
	max-width: 700px;
	border-radius: 20px;
	filter: grayscale(100%);
	height: 650px;
	object-fit: cover;
	object-position: center;
}

.history-photo-wrapper {
	position: relative;
	width: 100%;
	max-width: 700px; /* samakan dengan bg */
	height: 650px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.polaroid {
	position: absolute;
	width: 300px; /* lebih besar */
	background: #fff;
	padding: 10px 10px 35px 10px; /* bawah lebih tebal */
	border: 1px solid #ddd;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.polaroid img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
	border: 1px solid #ccc;
}

/* Tape */
.polaroid .tape {
	content: "";
	width: 60px;
	height: 20px;
	background: rgba(255, 255, 200, 0.8);
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%) rotate(-5deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Polaroid back (BW) */
.polaroid.back {
	transform: translate(-40px, 20px) rotate(-5deg);
	z-index: 1;
	filter: grayscale(100%);
}

/* Polaroid front (office) */
.polaroid.front {
	transform: translate(40px, -20px) rotate(3deg);
	z-index: 2;
}

/*--================================== Event Information ==================================--*/
.event-information {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

/* --- Section Container --- */
.event-information .info-container {
	display: flex;
	flex-direction: column;
	align-items: center; /* ini yang bikin semua anaknya center */
	text-align: center;
}

.info-image img {
	width: 80%;
	border-radius: 20px;
	height: 550px;
	object-fit: cover;
	object-position: center;
	margin-left: auto;
	margin-right: auto;
}

.info-text {
	border-radius: 20px;
	padding: 2rem;
	max-width: 1200px;
	width: 90%;
	height: auto;
	background: #f8f7f3;
	margin-left: auto;
	margin-right: auto; /* pusatkan blok */
	text-align: start;
}

.info-text .info-title {
	border-right: 2px solid #4d4b32;
}

.info-text h1 {
	font-family: "Noto Serif", serif;
	font-size: 2rem;
	color: #4d4b32;
}

.info-text span {
	font-size: 1.4rem;
	font-weight: 800;
	color: #4d4b32;
}

.info-text p {
	font-size: 1rem;
	color: #9d8a59;
}

/*=== RIBBON ===*/
.event-information .ribbon {
	position: absolute;
	width: 200px;
	display: block;
	z-index: 0;
}

.event-information .ribbon path {
	animation: draw 3.5s ease-in-out forwards infinite;
}

/*=== LEFT BOTTOM ===*/
.event-information .ribbon-left-bottom {
	left: -20px;
	bottom: -100px;
	transform: rotate(125deg);
}

/*=== RIGHT TOP ===*/
.event-information .ribbon-right-top {
	right: -10px;
	top: -90px;
	transform: rotate(-55deg);
}

/*--================================== Other Information ==================================--*/
.other-information {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	background-image: url(../img/bg/bg-paint-2.png);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

.other-information .other-container {
	width: 100%;
	max-width: 1300px;
}

.info-maps iframe {
	border-radius: 20px;
	width: 600px;
	height: 450px;
}

.info-time h1 {
	font-family: "Dancing Script", sans-serif;
	font-size: 5rem;
	margin-bottom: 2rem;
	color: #2b201c;
	text-align: center;
}

.info-box {
	border: 4px solid #2b201c;
	border-radius: 20px;
	width: 130px;
	height: 130px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 600;
	margin: 15px; /* jarak antar kotak */
}

.info-box span {
	font-size: 2rem;
	font-weight: bold;
}

.info-box p {
	margin: 0;
	font-size: 1.3rem;
}

/*--================================== Event Highlights ==================================--*/
.event-highlights {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

.event-highlights .row {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	width: 100%;
	max-width: 1200px;
}

/* === LEFT: TEXT === */
.event-text {
	flex: 1;
}

.event-text h1 {
	font-family: "Noto Serif", serif;
	font-size: 3rem;
	color: #2b201c;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.event-text .subtitle {
	color: #9d8a59;
	font-weight: 500;
	margin-bottom: 40px;
}

/* === LEFT: TABLES === */
.highlights {
	font-size: 1.2rem;
	color: #2b201c;
}

.table > :not(caption) > * > * {
	background-color: #f2f1eb !important;
}

.table .table-title {
	color: #9d8a59;
}

.table-info {
	border-bottom: solid 2px #9d8a59;
}

.table-info th {
	color: #9d8a59;
	font-weight: 600;
}

.table-info td {
	color: #2b201c;
	font-weight: 500;
}

/* === RIGHT: IMAGES === */
.event-images {
	flex: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.event-bg img {
	width: 100%;
	max-width: 700px;
	border-radius: 20px;
	filter: grayscale(100%);
	height: 650px;
	object-fit: cover;
	object-position: center;
}

.event-photo-wrapper {
	position: relative;
	width: 100%;
	max-width: 700px; /* samakan dengan bg */
	height: 650px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*--================================== Messages ==================================--*/
.messages-list {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

.msg-image img {
	width: 600px;
	border-radius: 20px;
	height: 600px;
	object-fit: cover;
	object-position: center;
}

.msg-text {
	padding: 0 40px 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.msg-text h1 {
	font-family: 'Noto Serif', serif;
	font-size: 3rem;
	color: #2b201c;
	text-transform: uppercase;
}

.msg-text .subtitle {
	color: #9d8a59;
	font-weight: 500;
	margin-bottom: 10px;
}

/* Messages styling */
.messages-container {
  flex: 1.3; /* Lebih lebar agar teks muat */
  border-radius: 12px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
	max-height: calc(150px * 3 + 2rem); /* 3 wishes + jarak */
	width: 100%;
  overflow-y: auto;   /* scroll kalau lebih dari 3 */
  justify-content: flex-start;
  align-items: stretch;
}

.message-card {
  background: #fff;
  border: 1.5px solid #7a6026;
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left; /* teks jadi rata kiri */
  line-height: 1.5;
  animation: fadeIn 0.6s ease;
}

.message-card .chat-icon {
	font-size: 24px;
	color: #9d8a59;
	margin-top: 4px;
	flex-shrink: 0; /* cegah icon mengecil */
}

.message-card strong {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: #3e2f13;
  display: block;
}

.message-card p {
  margin: 4px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #4b3c21;
}

.message-card small {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #7a6026;
}

.message-empty span {
	display: block;
	font-weight: 600;
	color: #4d4b32;
	margin-bottom: 5px;
	font-family: 'Dancing Script', cursive;
	font-size: 1.8rem;
}

/*--================================== RSVP ==================================--*/
.rsvp-form {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

.rsvp-image img {
	width: 600px;
	border-radius: 20px;
	height: 600px;
	object-fit: cover;
	object-position: center;
}

.rsvp-text {
	padding: 0 40px 0 40px;
}

.rsvp-text h1 {
	font-family: 'Noto Serif', serif;
	font-size: 3rem;
	color: #2b201c;
	text-transform: uppercase;
}

.rsvp-text .subtitle {
	color: #9d8a59;
	font-weight: 500;
	margin-bottom: 10px;
}

.rsvp-container {
  margin-top: 2rem;
  width: 100%;
  max-width: 600px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.rsvp-container label {
	color: #9d8a59;
	font-weight: 600;
	font-family: 'Dancing Script', cursive;
	font-size: 1.4rem;
}

.rsvp-container .form-check-label {
	color: #2b201c;
	font-weight: 500;
	font-size: 1.3rem;
	cursor: pointer;
}

.rsvp-container .form-control {
	border: 2px solid #9d8a59;
	border-radius: 10px;
	background: #f8f7f3;
	color: #2b201c;
	font-size: 1rem;
	font-weight: 500;
	padding: 10px;
	margin-top: 5px;
}

.rsvp-container .form-control:focus {
	border-color: #4d4b32;
	box-shadow: 0 0 5px rgba(77, 75, 50, 0.5);
	outline: none;
}

.rsvp-container .form-check-input:checked {
	background-color: #4d4b32;
	border-color: #4d4b32;
}

.rsvp-container .form-check-input:focus {
	border-color: #4d4b32;
	box-shadow: 0 0 5px rgba(77, 75, 50, 0.5);
	outline: none;
}

.rsvp-container .form-check-input {
	width: 20px;
	height: 20px;
	margin-top: 0;
	margin-right: 10px;
	cursor: pointer;
}

.rsvp-container button {
	margin-top: 20px;
	padding: 12px 25px;
	border-radius: 30px;
	background-color: #2b201c;
	border: none;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease;
	width: 100%;
}

.rsvp-container button:hover {
	background-color: #3b491c;
	color: #fff;
	border: none;
	transform: scale(1.05);
}

.rsvp-container button:focus {
	background-color: #3b491c;
	color: #fff;
	border: none;
	box-shadow: 0 0 0 .25rem rgba(77, 75, 50, 0.5);
	transform: scale(1.05);
}

/*--================================== Quotes ==================================--*/
.event-quotes {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	height: auto;
	background-image: url(../img/bg/bg-paint-1.png);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden; /* cegah dekor keluar area */
	padding: 1rem;
}

.event-quotes .quotes-container {
	width: 100%;
	max-width: 1200px;
	padding: 4rem;
	margin-left: auto;
	margin-right: auto;
}

.quotes-container h1 {
	font-family: 'Dancing Script', cursive;
	font-size: clamp(36px, 4vw, 80px);
	color: #2b201c;
	margin-bottom: 10px;
}

.quotes-container p {
	font-size: 1.5rem;
	color: #4d4b32;
	line-height: 1.4;
	padding: 0;
}

.quotes-container .anniversary-text {
	text-align: left;
	margin-bottom: 2rem;
}

.quotes-container .and-text {
	margin-bottom: 2rem;
}

.quotes-container .christmas-text {
	text-align: right;
}

/*--================================== Gallery ==================================--*/
.gallery-title {
  font-family: 'Dancing Script', cursive;
  font-size: 3.5rem;
  font-weight: 600;
}

.gallery-desc {
  font-size: 1rem;
  color: #444;
  max-width: 350px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: 180px;
  gap: 15px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 12px;
	cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

/* ukuran custom */
.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item.wide {
  grid-column: span 2;
}

/* Lightbox Styling */
.lightbox {
  display: none; 
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.8);
  text-align: center;
  overflow: hidden;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
	align-items: center;
	justify-content: center;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  animation: zoom 0.4s ease;
}

.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  user-select: none;
}

.lightbox .close {
  top: 30px;
  right: 45px;
  transform: none;
  font-size: 40px;
}

.lightbox .prev {
  left: 40px;
}

.lightbox .next {
  right: 40px;
}

.lightbox .prev:hover,
.lightbox .next:hover,
.lightbox .close:hover {
  color: #9d8a59;
}

.caption {
  margin-top: 15px;
  font-size: 16px;
  color: #f1f1f1;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/*--================================== Decoration ==================================--*/
.decor {
	position: absolute;
	opacity: 0.7;
}

.decor-bell {
	width: 120px;
	top: 3%;
	animation: swing 2s ease-in-out infinite alternate;
	margin-bottom: 20px;
}

.decor-leaf-1 {
	width: 400px;
	top: -120px;
	left: -100px;
}
.decor-leaf-2 {
	width: 350px;
	top: -150px;
	right: 120px;
}
.decor-leaf-3 {
	width: 350px;
	top: -80px;
	right: -40px;
}
.decor-leaf-4 {
	width: 350px;
	bottom: -150px;
	left: 150px;
}
.decor-leaf-5 {
	width: 350px;
	bottom: -130px;
	left: -20px;
}
.decor-leaf-6 {
	width: 400px;
	bottom: -120px;
	right: -60px;
}
.decor-leaf-7 {
	width: 250px;
	top: 30px;
	left: -50px;
}
.decor-leaf-8 {
	width: 250px;
	top: -120px;
	left: 250px;
}

.decor-leaf-1,
.decor-leaf-2,
.decor-leaf-3,
.decor-leaf-7 {
	animation: float15 6s ease-in-out infinite alternate;
}

.decor-leaf-4,
.decor-leaf-5,
.decor-leaf-6,
.decor-leaf-8 {
	animation: float180 6s ease-in-out infinite alternate;
}

.decor-paint-1 {
	top: -550px;
	left: -180px;
	width: min(70%, 1000px);
	height: auto;
	object-fit: contain;
	z-index: 0;
}

.decor-paint-2 {
	bottom: -550px;
	right: -400px;
	width: min(60%, 1000px);
	height: auto;
	object-fit: contain;
	z-index: 0;
}

.decor-paint-3 {
	bottom: -250px;
	left: -320px;
	width: min(50%, 1000px);
	height: auto;
	object-fit: contain;
}

.decor-gift {
	bottom: -100px;
	right: -100px;
	width: 400px;
	opacity: 0.8;
	animation: float0 5s ease-in-out infinite alternate;
}

.decor-gift-2 {
	bottom: -50px;
	left: -30px;
	width: 500px;
	opacity: 0.8;
	animation: float0 5s ease-in-out infinite alternate;
	z-index: 99;
}

.decor-star-1,
.decor-star-4 {
	left: -50px;
	top: 8%;
	width: 300px;
	opacity: 0.8;
	animation: float0 5s ease-in-out infinite alternate;
}

.decor-star-2,
.decor-star-5 {
	left: 40%;
	bottom: 10%;
	width: 200px;
	opacity: 0.8;
	animation: swing 2s ease-in-out infinite alternate;
	z-index: 1;
}

.decor-star-3 {
	right: 12%;
	top: 1%;
	width: 180px;
	opacity: 0.8;
	animation: swing 2s ease-in-out infinite alternate;
	z-index: 1;
}

.decor-stick {
	right: -50px;
	top: -40px;
	width: 550px;
	opacity: 0.8;
	animation: swing 2s ease-in-out infinite alternate;
	z-index: 1;
}

.decor-light {
	width: 450px;
	top: -140px;
	right: -10px;
}

/*--================================== Footer ==================================--*/
.site-footer {
  background: #f8f6f2;
  border-top: 1px solid #e5e5e5;
  font-size: 0.95rem;
}

.footer-logo {
  max-height: 100px;
}

.footer-brand {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: #444;
  margin: 0;
}

/* Grid wrapper */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* penting untuk responsive */
  gap: 20px;
  text-align: center;
}

.footer-section {
  flex: 1;
  min-width: 200px;
}

/* Navigation */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: #444;
  text-decoration: none;
  transition: color .3s;
}

.footer-nav a:hover {
  color: #b58900;
}

/* Social */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.footer-social a {
  color: #444;
  font-size: 1.2rem;
  transition: color .3s;
}

.footer-social a:hover {
  color: #b58900;
}

/* Copyright */
.footer-bottom {
  text-align: center;
  margin-top: 20px;
  color: #777;
  font-size: 0.85rem;
}

.footer-bottom a {
	color: #444;
	text-decoration: none;
	font-weight: 600;
	transition: color .3s;
}

/*--================================== Floating Buttons ==================================--*/
.floating-buttons {
	position: fixed;
	bottom: 20px;
	left: 20px;
	display: flex;
	flex-direction: column-reverse; /* Musik di bawah, Top di atasnya */
	gap: 15px;
	z-index: 9999;
}

/*=== Music Button ===*/
.music-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: solid 8px #a5a877;
	background: #2b201c;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform 0.3s ease;
}

.music-btn img {
	width: 32px;
	height: 32px;
	pointer-events: none;
}

.music-btn.playing {
	animation: spin 4s linear infinite;
}

.music-btn:hover {
	transform: scale(1.1);
}

/*=== Top Button ===*/
.top-btn {
	bottom: 90px; /* di atas tombol musik */
	left: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: solid 8px #a5a877;
	background: #2b201c;
	color: white;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none; /* tidak bisa diklik saat invisible */
	transition: opacity 0.5s ease, transform 0.5s ease;
	z-index: 999;
}

.top-btn.show {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.top-btn:hover {
	transform: scale(1.1);
}

/* ======================= RESPONSIVE DESIGN ======================= */
/* 💻 Max width 1366px (Laptop) */
@media (max-width: 1366px) {
	.lock-screen h1 {
		font-size: 2rem;
	}

	.lock-screen h3 {
		font-size: 1.3rem;
	}

	.lock-screen p, .lock-screen button, .lock-screen button i {
		font-size: 1.1rem;
	}

	.lock-screen .logo {
		width: 250px;
	}

  .bible-verses h1 {
    font-size: 3rem;
  }

  .bible-verses p {
		font-size: 1.5rem;
  }

  .history-text h1,
  .event-text h1,
	.msg-text h1,
	.rsvp-text h1 {
    font-size: 2.5rem;
  }

  .history-text p,
  .event-text p,
	.msg-text p,
	.rsvp-text p {
    font-size: 1.1rem;
  }
	
	.info-text {
		margin-bottom: 50px;
	}
	
	.decor-bell {
		width: 120px;
	}

	.decor-leaf-1,
	.decor-leaf-2,
	.decor-leaf-3,
	.decor-leaf-4,
	.decor-leaf-5,
	.decor-leaf-6 {
		width: 280px;
	}

	.decor-leaf-1 {
		left: -100px;
		top: -80px;
	}

	.decor-leaf-2 {
		right: 30px;
		top: -140px;
	}

	.decor-leaf-3 {
		right: -70px;
		top: -90px;
	}

	.decor-leaf-4 {
		left: 30px;
		bottom: -110px;
	}

	.decor-leaf-5 {
		bottom: -70px;
		left: -80px;
	}

	.decor-leaf-6 {
		right: -130px;
		bottom: -70px;
	}

	.decor-paint-1 {
		top: -150px;
		left: -80px;
		width: 350px;
	}

	.decor-paint-2 {
		bottom: -80px;
		right: -50px;
		width: 300px;
	}

	.decor-leaf-7,
	.decor-leaf-8 {
		width: 170px;
	}

	.decor-leaf-7 {
		left: -40px;
		top: -10px;
	}

	.decor-leaf-8 {
		top: -50px;
		left: 250px;
	}

	.decor-gift {
		width: 250px;
		bottom: -50px;
		right: -50px;
	}

	.decor-star-1 {
		width: 120px;
		left: -30px;
		top: 13%;
	}

	.decor-star-2 {
		width: 130px;
	}

	.decor-star-3 {
		width: 110px;
		right: 2%;
		top: 14%;
	}

	.event-information .ribbon {
		width: 150px;
	}

	.event-information .ribbon-right-top {
		right: 10px;
		top: -80px;
	}

	.event-information .ribbon-left-bottom {
		left: -20px;
		bottom: -80px;
	}

	.decor-stick {
		width: 240px;
		right: -50px;
		top: 10%;
	}

	.decor-star-4 {
		width: 130px;
		left: -30px;
		top: 60%;
	}

	.decor-star-5 {
		width: 110px;
		left: 42%;
		top: 10%;
	}

	.decor-light {
		width: 280px;
		top: -90px;
		right: -10px;
	}

	.decor-gift-2 {
		width: 250px;
		bottom: -30px;
		left: -8px;
	}

	.decor-paint-3 {
		bottom: -120px;
		left: -170px;
		width: 500px;
	}
}

/* 💻 Max width 1200px (Large Device) */
@media (max-width: 1200px) {
	.lock-screen h1 {
		font-size: 3rem;
	}

	.lock-screen h3 {
		font-size: 2rem;
	}

	.lock-screen p, .lock-screen button, .lock-screen button i {
		font-size: 1.8rem;
	}

	.lock-screen .logo {
		width: 400px;
	}

  .bible-verses h1 {
    font-size: 4rem;
  }

  .bible-verses p {
		font-size: 2rem;
    margin: 10px 0 20px;
		padding: 30px;
  }

  .history-diman,
  .event-information,
  .event-highlights,
  .other-information {
    padding: 4rem 2rem;
    height: auto;
  }

  .history-diman .row,
  .event-highlights .row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
		width: 150%;
  }

  .history-text,
  .event-text {
    text-align: center;
  }

  .history-text h1,
  .event-text h1,
	.msg-text h1,
	.rsvp-text h1 {
    font-size: 2.5rem;
  }

  .history-text p,
  .event-text p,
	.msg-text p,
	.rsvp-text p {
    font-size: 1.5rem;
  }

  .history-bg img,
  .event-bg img,
  .history-photo-wrapper,
  .event-photo-wrapper {
    width: 100%;
    max-width: 500px;
    height: 500px;
  }

	.timeline {
		padding: 20px;
	}

	.timeline span {
		font-size: 1.5rem;
		text-align: end;
	}

  .polaroid {
    width: 40%;
  }

  .info-text {
    max-width: 1000px;
    width: 95%;
  }

	.info-text h1 {
		font-size: 1.7rem;
	}

	.info-text span {
		font-size: 1.5rem;
	}

	.info-text p {
		font-size: 1.3rem;
	}

  .info-image img {
    width: 95%;
    height: 500px;
  }

	.info-maps iframe {
		width: 500px;
		height: 450px;
	}

  .polaroid {
    width: 260px;
  }

	.table-title,
	.table-info {
		font-size: 1.5rem;
	}

  .msg-image,
  .rsvp-image {
    padding-left: 30px;
  }

  .msg-image img,
  .rsvp-image img {
    width: 480px;
    height: 650px;
  }

	.message-card .chat-icon {
		font-size: 1.8rem;
	}

	.message-card strong {
		font-size: 2rem;
	}

	.message-card p {
		font-size: 1.3rem;
	}

	.message-card small {
		font-size: 1rem;
	}

	.message-empty span {
		font-size: 2.5rem;
	}

	.rsvp-container label {
		font-size: 1.8rem;
	}

	.rsvp-container .form-check-label {
		font-size: 1.8rem;
	}

	.rsvp-container .form-control {
		font-size: 1.3rem;
	}

	.rsvp-container .form-check-input {
		width: 30px;
		height: 30px;
	}

	.rsvp-container button {
		font-size: 1.5rem;
	}

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-rows: 160px;
  }

  .quotes-container h1 {
    font-size: 3.3rem;
  }

  .quotes-container p {
    font-size: 1.8rem;
  }

  .gallery-title {
    font-size: 3.2rem;
  }

  .gallery-desc {
    font-size: 1.5rem;
  }

	.lightbox .caption {
		font-size: 1.5rem;
	}

  .music-btn {
    width: 90px;
    height: 90px;
		border-width: 10px;
  }

	.music-btn img {
		width: 48px;
		height: 48px;
	}

  .top-btn {
    width: 80px;
    height: 80px;
		font-size: 2rem;
		border-width: 10px;
  }

	.decor-bell {
		width: 180px;
	}

	.decor-leaf-1,
	.decor-leaf-2,
	.decor-leaf-3,
	.decor-leaf-4,
	.decor-leaf-5,
	.decor-leaf-6 {
		width: 350px;
	}

	.decor-leaf-1 {
		left: -130px;
		top: -100px;
	}

	.decor-leaf-2 {
		right: 10px;
		top: -160px;
	}

	.decor-leaf-3 {
		right: -90px;
		top: -100px;
	}

	.decor-leaf-4 {
		left: 10px;
		bottom: -120px;
	}

	.decor-leaf-5 {
		bottom: -80px;
		left: -100px;
	}

	.decor-leaf-6 {
		right: -130px;
		bottom: -70px;
	}

	.decor-paint-1 {
		top: -240px;
		left: -120px;
		width: 600px;
	}

	.decor-paint-2 {
		bottom: -150px;
		right: -90px;
		width: 500px;
	}

	.decor-leaf-7,
	.decor-leaf-8 {
		width: 300px;
	}

	.decor-leaf-7 {
		left: -70px;
		top: -10px;
	}

	.decor-leaf-8 {
		top: -50px;
		left: 350px;
	}

	.decor-gift {
		width: 400px;
		bottom: -80px;
		right: -90px;
	}

	.decor-star-1 {
		width: 150px;
		left: -30px;
		top: 13%;
	}

	.decor-star-2 {
		width: 160px;
		left: 73%;
		bottom: 38%;
	}

	.decor-star-3 {
		width: 120px;
		right: 2%;
		top: 14%;
	}

	.event-information .ribbon {
		width: 230px;
	}

	.event-information .ribbon-right-top {
		right: 10px;
		top: -110px;
	}

	.event-information .ribbon-left-bottom {
		left: -40px;
		bottom: -110px;
	}

	.decor-stick {
		width: 220px;
		right: -40px;
		top: 20%;
	}

	.decor-star-4 {
		width: 220px;
		left: -50px;
		top: 60%;
	}

	.decor-star-5 {
		width: 160px;
		right: 5%;
		top: 18%;
	}

	.decor-light {
		width: 320px;
		top: -100px;
		right: -8px;
	}

	.decor-gift-2 {
		width: 300px;
		bottom: -30px;
		left: -10px;
	}

	.decor-paint-3 {
		bottom: -120px;
		left: -150px;
		width: 550px;
	}
}

/* 📱 Max width 992px (Tablet Landscape) */
@media (max-width: 992px) {
	.lock-screen h1 {
		font-size: 2.5rem;
	}

	.lock-screen h3 {
		font-size: 1.8rem;
	}

	.lock-screen p, .lock-screen button, .lock-screen button i {
		font-size: 1.5rem;
	}

  .bible-verses h1 {
    font-size: 3.5rem;
  }

  .bible-verses p {
		font-size: 1.6rem;
    margin: 10px 0 20px;
		padding: 30px;
  }

  .history-diman .row,
  .event-highlights .row {
		width: 100%;
  }

  .history-text h1,
  .event-text h1,
	.msg-text h1,
	.rsvp-text h1,
	.info-text h1 {
    font-size: 2.5rem;
  }

  .history-text p,
  .event-text p,
	.msg-text p,
	.rsvp-text p,
	.info-text p {
    font-size: 1.5rem;
  }

  .history-bg img,
  .event-bg img,
  .history-photo-wrapper,
  .event-photo-wrapper {
    width: 100%;
    max-width: 500px;
    height: 500px;
  }

	.timeline {
		padding: 30px;
	}

	.timeline span {
		font-size: 1.5rem;
		text-align: end;
	}

  .polaroid {
    width: 40%;
  }

  .info-text {
    max-width: 700px;
    width: 95%;
    text-align: center;
  }

	.info-text span {
		font-size: 1.8rem;
	}

  .info-text .info-title {
    border-right: none;
    border-bottom: 2px solid #4d4b32;
    margin-bottom: 10px;
  }

  .info-maps iframe {
    width: 650px;
    height: 450px;
  }

	.info-time {
		margin-top: 40px;
	}

	.info-time h1 {
		font-size: 5rem;
	}

  .info-box {
    width: 150px;
    height: 150px;
    font-size: 1.5rem;
  }

  .info-box span {
    font-size: 2.3rem;
  }

  .info-box p {
    font-size: 1.4rem;
  }

	.table-title,
	.table-info {
		font-size: 1.5rem;
	}

  .msg-image img,
  .rsvp-image img {
    width: 500px;
    height: 500px;
		margin-bottom: 20px;
  }

  .msg-text h1,
  .rsvp-text h1 {
		margin-top: 20px;
  }

  .rsvp-container,
  .messages-container {
    width: 80%;
    padding: 0 10px;
		margin-bottom: 40px;
  }

	.message-card .chat-icon {
		font-size: 1.8rem;
	}

	.message-card strong {
		font-size: 2rem;
	}

	.message-card p {
		font-size: 1.3rem;
	}

	.message-card small {
		font-size: 1rem;
	}

	.message-empty span {
		font-size: 2.5rem;
	}

	.rsvp-container label {
		font-size: 1.8rem;
	}

	.rsvp-container .form-check-label {
		font-size: 1.8rem;
	}

	.rsvp-container .form-control {
		font-size: 1.3rem;
	}

	.rsvp-container .form-check-input {
		width: 30px;
		height: 30px;
	}

	.rsvp-container button {
		font-size: 1.5rem;
	}

  .quotes-container h1 {
    font-size: 3rem;
	text-align: center;
  }

  .quotes-container p {
    font-size: 1.5rem;
    text-align: center;
  }

  .gallery-title {
    font-size: 3rem;
  }

  .gallery-desc {
    font-size: 1.3rem;
  }

  .music-btn {
    width: 90px;
    height: 90px;
		border-width: 10px;
  }

	.music-btn img {
		width: 48px;
		height: 48px;
	}

  .top-btn {
    width: 80px;
    height: 80px;
		font-size: 2rem;
		border-width: 10px;
  }

	.decor-bell {
		width: 150px;
	}

	.decor-leaf-1,
	.decor-leaf-2,
	.decor-leaf-3,
	.decor-leaf-4,
	.decor-leaf-5,
	.decor-leaf-6 {
		width: 300px;
	}

	.decor-leaf-1 {
		left: -80px;
		top: -100px;
	}

	.decor-leaf-2 {
		right: -5px;
		top: -160px;
	}

	.decor-leaf-3 {
		right: -70px;
		top: -120px;
	}

	.decor-leaf-4 {
		left: -25px;
		bottom: -115px;
	}

	.decor-leaf-5 {
		bottom: -80px;
		left: -130px;
	}

	.decor-leaf-6 {
		right: -100px;
		bottom: -80px;
	}

	.decor-paint-1 {
		top: -160px;
		left: -80px;
		width: 400px;
	}

	.decor-paint-2 {
		bottom: -130px;
		right: -90px;
		width: 400px;
	}

	.decor-leaf-7,
	.decor-leaf-8 {
		width: 230px;
	}

	.decor-leaf-7 {
		left: -50px;
		top: -20px;
	}

	.decor-leaf-8 {
		top: -50px;
		right: -90px;
	}

	.decor-gift {
		width: 300px;
		bottom: -60px;
		right: -90px;
	}

	.decor-star-1 {
		width: 100px;
		left: -30px;
		top: 13%;
	}

	.decor-star-2 {
		width: 120px;
		left: 73%;
		bottom: 38%;
	}

	.decor-star-3 {
		width: 70px;
		right: 2%;
		top: 14%;
	}

	.event-information .ribbon {
		width: 180px;
	}

	.event-information .ribbon-right-top {
		right: 10px;
		top: -90px;
	}

	.event-information .ribbon-left-bottom {
		left: -40px;
		bottom: -90px;
	}

	.decor-stick {
		width: 180px;
		right: -40px;
		top: 55%;
	}

	.decor-star-4 {
		width: 180px;
		left: -20px;
		top: 30%;
	}

	.decor-star-5 {
		width: 130px;
		left: 75%;
		top: 0;
	}

	.decor-light {
		width: 240px;
		top: -80px;
		right: -5px;
	}

	.decor-gift-2 {
		width: 230px;
		bottom: -30px;
		left: -10px;
	}

	.decor-paint-3 {
		bottom: -80px;
		left: -130px;
		width: 450px;
	}
}

/* 📲 Max width 768px (Tablet Portrait / Phablet) */
@media (max-width: 768px) {
  .timeline div {
    width: 90%;
    font-size: 16px;
    margin: 0 auto;
  }

  .polaroid {
    width: 60%;
  }

  .polaroid.back {
    transform: translate(-20px, 15px) rotate(-4deg);
  }

  .polaroid.front {
    transform: translate(20px, -15px) rotate(2deg);
  }

  .info-image img {
    height: 350px;
    width: 90%;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: 140px;
  }
}

/* 📞 Max width 576px (Mobile) */
@media (max-width: 576px) {
  .lock-screen h1 {
    font-size: 1.8rem;
  }

  .lock-screen h3 {
    font-size: 1.2rem;
  }

  .lock-screen .logo {
    width: 250px;
  }

	.lock-screen p, .lock-screen button, .lock-screen button i {
		font-size: 1rem;
	}

  .bible-verses h1 {
    font-size: 2.5rem;
  }

  .bible-verses p {
		font-size: 1rem;
		padding: 10px;
  }

  .history-text h1,
  .event-text h1,
  .msg-text h1,
  .rsvp-text h1 {
    font-size: 1.6rem;
  }

  .history-text p,
  .event-text p,
  .msg-text p,
  .rsvp-text p {
    font-size: .9rem;
  }

	.timeline {
		padding: 0;
	}

  .timeline div {
    flex-direction: column;
    text-align: center;
  }

	.timeline span {
		text-align: center;
		font-size: 1rem;
	}

  .history-bg img,
  .event-bg img {
    width: 100%;
		min-width: 300px;
    height: 400px;
  }

  .polaroid {
    width: 80%;
  }

  .info-image img {
    width: 100%;
    height: 300px;
  }

  .info-text {
    padding: 1.2rem;
  }

  .info-text h1 {
    font-size: 1.5rem;
  }

  .info-text p {
    font-size: .9rem;
  }

	.info-text span {
		font-size: 1.2rem;
	}

	.info-maps {
		margin-bottom: 10px;
	}

	.info-maps iframe {
		width: 300px;
		height: 350px;
	}

	.info-time h1 {
		font-size: 2.8rem;
	}

  .info-box {
    width: 90px;
    height: 90px;
    font-size: 1rem;
  }

  .info-box span {
    font-size: 1.5rem;
  }

  .info-box p {
    font-size: .9rem;
  }

	.table-title,
	.table-info {
		font-size: 1.1rem;
	}

  .msg-image img,
  .rsvp-image img {
    width: 300px;
    height: 300px;
  }

  .rsvp-container,
  .messages-container {
    width: 100%;
  }

	.message-card .chat-icon {
		font-size: 1.3rem;
	}

	.message-card strong {
		font-size: 1.5rem;
	}

	.message-card p {
		font-size: 1rem;
	}

	.message-card small {
		font-size: .8rem;
	}

	.message-empty span {
		font-size: 1.5rem;
	}

	.rsvp-container label {
		font-size: 1.2rem;
	}

	.rsvp-container .form-check-label {
		font-size: 1.2rem;
	}

	.rsvp-container .form-control {
		font-size: .9rem;
	}

	.rsvp-container .form-check-input {
		width: 20px;
		height: 20px;
	}

	.rsvp-container button {
		font-size: 1rem;
	}

  .quotes-container h1 {
    font-size: 2rem;
  }

  .quotes-container p {
    font-size: 1rem;
  }

  .gallery-title {
    font-size: 2rem;
  }

  .gallery-desc {
    font-size: 1rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: 120px;
    gap: 10px;
  }

	.lightbox .caption {
		font-size: 14px;
	}

  .footer-top {
    flex-direction: column;
  }

  .footer-logo {
    max-height: 70px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 10px;
  }

  .floating-buttons {
    bottom: 10px;
    left: 10px;
    gap: 10px;
  }

  .music-btn {
    width: 50px;
    height: 50px;
		border-width: 6px;
  }

	.music-btn img {
		width: 25px;
		height: 25px;
	}

  .top-btn {
    width: 45px;
    height: 45px;
		font-size: 1rem;
		border-width: 6px;
  }

	.decor-leaf-1,
	.decor-leaf-2,
	.decor-leaf-3,
	.decor-leaf-4,
	.decor-leaf-5,
	.decor-leaf-6 {
		width: 200px;
	}

	.decor-leaf-1 {
		left: -80px;
		top: -60px;
	}

	.decor-leaf-2 {
		right: 5px;
		top: -110px;
	}

	.decor-leaf-4 {
		left: -55px;
		bottom: -85px;
	}

	.decor-leaf-5 {
		bottom: -80px;
		left: -110px;
	}

	.decor-leaf-6 {
		right: -90px;
		bottom: -70px;
	}

	.decor-bell {
		width: 95px;
	}

	.decor-paint-1 {
		top: -145px;
		left: -100px;
		width: 350px;
	}

	.decor-paint-2 {
		bottom: -120px;
		right: -130px;
		width: 350px;
	}

	.decor-leaf-7,
	.decor-leaf-8 {
		width: 185px;
	}

	.decor-leaf-7 {
		left: -50px;
		top: -20px;
	}

	.decor-leaf-8 {
		top: -50px;
		right: -90px;
	}

	.decor-gift {
		width: 250px;
		bottom: -60px;
		right: -90px;
	}

	.decor-star-1 {
		width: 90px;
		left: -20px;
		top: 10%;
	}

	.decor-star-2 {
		width: 100px;
		left: 65%;
		bottom: 38%;
	}

	.decor-star-3 {
		width: 50px;
		right: 2%;
		top: 11%;
	}

	.event-information .ribbon {
		width: 130px;
	}

	.event-information .ribbon-right-top {
		right: 10px;
		top: -60px;
	}

	.event-information .ribbon-left-bottom {
		left: -20px;
		bottom: -70px;
	}

	.decor-stick {
		width: 130px;
		right: -40px;
		top: 55%;
	}

	.decor-star-4 {
		width: 140px;
		left: -20px;
		top: 25%;
	}

	.decor-star-5 {
		width: 100px;
		left: 70%;
		top: 0;
	}

	.decor-light {
		width: 180px;
		top: -70px;
		right: -10px;
	}

	.decor-gift-2 {
		width: 150px;
		bottom: -30px;
		left: -20px;
	}

	.decor-paint-3 {
		display: none;
	}
}

/*--================================== Animation ==================================--*/
/* Default state sebelum muncul */
.fade-up, .fade-down, .fade-left, .fade-right {
  opacity: 0;
  transition: all 1s ease;
}

/* arah */
.fade-up    { transform: translateY(40px); }
.fade-down  { transform: translateY(-40px); }
.fade-left  { transform: translateX(-40px); }
.fade-right { transform: translateX(40px); }

/* default kecil */
.zoom-in {
  opacity: 0;
  transform: scale(0.8);
  transition: all 1s ease;
}

/* aktif normal */
.zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* aktif (muncul normal) */
.fade-up.active,
.fade-down.active,
.fade-left.active,
.fade-right.active {
  opacity: 1;
  transform: none; /* reset jadi normal */
}

/* Delay helpers */
.delay-50 { animation-delay: 0.05s; }
.delay-100 { animation-delay: 0.1s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.2s; }
.delay-250 { animation-delay: 0.25s; }
.delay-300 { animation-delay: 0.3s; }
.delay-350 { animation-delay: 0.35s; }
.delay-400 { animation-delay: 0.4s; }
.delay-450 { animation-delay: 0.45s; }
.delay-500 { animation-delay: 0.5s; }
.delay-550 { animation-delay: 0.55s; }
.delay-600 { animation-delay: 0.6s; }
.delay-650 { animation-delay: 0.65s; }
.delay-700 { animation-delay: 0.7s; }
.delay-750 { animation-delay: 0.75s; }
.delay-800 { animation-delay: 0.8s; }
.delay-850 { animation-delay: 0.85s; }
.delay-900 { animation-delay: 0.9s; }
.delay-950 { animation-delay: 0.95s; }
.delay-1000 { animation-delay: 1s; }

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

@keyframes float0 {
	0% {
		transform: rotate(0deg) translateY(0);
	}
	100% {
		transform: rotate(0deg) translateY(20px);
	}
}

@keyframes float15 {
	0% {
		transform: rotate(15deg) translateY(0);
	}
	100% {
		transform: rotate(15deg) translateY(20px);
	}
}

@keyframes float180 {
	0% {
		transform: rotate(180deg) translateY(0);
	}
	100% {
		transform: rotate(180deg) translateY(20px);
	}
}

@keyframes float90 {
	0% {
		transform: rotate(90deg) translateY(0);
	}
	100% {
		transform: rotate(90deg) translateY(20px);
	}
}

@keyframes swing {
	0% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.9;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

/* Fade Up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left */
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Right */
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shine {
	0% {
		left: -75%;
	}
	100% {
		left: 125%;
	}
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes glow {
  from { filter: drop-shadow(0 0 2px currentColor); }
  to   { filter: drop-shadow(0 0 15px currentColor); }
}

@keyframes glow-red {
  from { filter: drop-shadow(0 0 2px red); }
  to   { filter: drop-shadow(0 0 15px red); }
}

@keyframes glow-green {
  from { filter: drop-shadow(0 0 2px limegreen); }
  to   { filter: drop-shadow(0 0 15px limegreen); }
}

@keyframes glow-yellow {
  from { filter: drop-shadow(0 0 2px gold); }
  to   { filter: drop-shadow(0 0 15px gold); }
}

@keyframes glow-blue {
  from { filter: drop-shadow(0 0 2px dodgerblue); }
  to   { filter: drop-shadow(0 0 15px dodgerblue); }
}