/*!
Theme Name: wedding
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Wedding Invitation Theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wedding
Tags: custom-logo, featured-images
*/

/*--------------------------------------------------------------
# Generic - Normalize
--------------------------------------------------------------*/

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

main {
	display: block;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Box sizing
--------------------------------------------------------------*/

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

body {
	background: #fff;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Utilities - Accessibility
--------------------------------------------------------------*/

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

#primary[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Wedding Hero Section
--------------------------------------------------------------*/

.animate-fade-in-up,
.animate-fade-in {
	animation-fill-mode: forwards;
}

html {
	scroll-behavior: smooth;
}

.site-header h1 {
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

@supports (background-attachment: fixed) {
	.site-header .bg-fixed {
		background-attachment: fixed;
	}
}

@media (max-width: 768px) {
	.site-header .bg-fixed {
		background-attachment: scroll;
	}
}

.site-header .border-wedding-green\/50:hover {
	background-color: rgba(74, 157, 92, 0.1);
	border-color: rgba(74, 157, 92, 0.8);
	transition: all 0.3s ease;
}

@keyframes gentle-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

.site-header .animate-bounce {
	animation: gentle-bounce 1.5s ease-in-out infinite;
}

@keyframes shimmer {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}

.site-header .bg-gradient-to-r {
	animation: shimmer 3s ease-in-out infinite;
}

@keyframes corner-pulse {
	0%, 100% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.7;
	}
}

.site-header .border-wedding-green\/40 {
	animation: corner-pulse 4s ease-in-out infinite;
}

/*--------------------------------------------------------------
# Countdown Timer
--------------------------------------------------------------*/

.countdown-item {
	min-width: 60px;
	transition: all 0.3s ease;
}

@media (min-width: 768px) {
	.countdown-item {
		min-width: 90px;
	}
}

.countdown-item:hover {
	transform: translateY(-2px);
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(74, 157, 92, 0.6);
	box-shadow: 0 8px 32px rgba(74, 157, 92, 0.2);
}

@keyframes countdown-flip {
	0% {
		transform: perspective(400px) rotateX(0deg);
	}
	50% {
		transform: perspective(400px) rotateX(-5deg);
	}
	100% {
		transform: perspective(400px) rotateX(0deg);
	}
}

.countdown-item span:first-child {
	font-variant-numeric: tabular-nums;
}

.countdown-item + .animate-pulse {
	animation: colon-pulse 1s ease-in-out infinite;
}

@keyframes colon-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

/*--------------------------------------------------------------
# Invitation Section
--------------------------------------------------------------*/

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in-up {
	animation: fade-in-up 0.8s ease-out forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.animate-fade-in {
	animation: fade-in 0.8s ease-out forwards;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

.invitation-card {
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.invitation-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 25px 50px -12px rgba(74, 157, 92, 0.25);
}

.photo-frame {
	position: relative;
	overflow: hidden;
}

.photo-frame::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(74, 157, 92, 0.1),
		transparent
	);
	transform: rotate(45deg);
	animation: photo-shine 3s infinite;
}

@keyframes photo-shine {
	0% {
		transform: translateX(-100%) rotate(45deg);
	}
	100% {
		transform: translateX(100%) rotate(45deg);
	}
}

@keyframes border-glow {
	0%, 100% {
		border-color: rgba(74, 157, 92, 0.2);
	}
	50% {
		border-color: rgba(74, 157, 92, 0.4);
	}
}

.animate-border-glow {
	animation: border-glow 3s ease-in-out infinite;
}

/*--------------------------------------------------------------
# Wedding Timeline
--------------------------------------------------------------*/

.border-3 {
	border-width: 3px;
}

.timeline-item {
	transition: all 0.3s ease;
}

@keyframes timeline-slide-in {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.timeline-animate {
	animation: timeline-slide-in 0.6s ease-out forwards;
}

@keyframes dot-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(74, 157, 92, 0.4);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(74, 157, 92, 0);
	}
}

.timeline-dot-pulse {
	animation: dot-pulse 2s ease-in-out infinite;
}

/*--------------------------------------------------------------
# Scroll Reveal Animations
--------------------------------------------------------------*/

/* Base hidden state for all scroll animations */
.scroll-hidden {
	opacity: 0;
	visibility: visible;
}

/* Revealed state */
.scroll-revealed {
	opacity: 1;
	visibility: visible;
}

/* ========== Fade In Up ========== */
.scroll-fade-up {
	opacity: 0;
	transform: translateY(60px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-up.scroll-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ========== Fade In Down ========== */
.scroll-fade-down {
	opacity: 0;
	transform: translateY(-60px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-down.scroll-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ========== Fade In Left ========== */
.scroll-fade-left {
	opacity: 0;
	transform: translateX(-80px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-left.scroll-revealed {
	opacity: 1;
	transform: translateX(0);
}

/* ========== Fade In Right ========== */
.scroll-fade-right {
	opacity: 0;
	transform: translateX(80px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade-right.scroll-revealed {
	opacity: 1;
	transform: translateX(0);
}

/* ========== Scale Up ========== */
.scroll-scale-up {
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-scale-up.scroll-revealed {
	opacity: 1;
	transform: scale(1);
}

/* ========== Scale Down (zoom in effect) ========== */
.scroll-scale-down {
	opacity: 0;
	transform: scale(1.2);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-scale-down.scroll-revealed {
	opacity: 1;
	transform: scale(1);
}

/* ========== Blur In ========== */
.scroll-blur-in {
	opacity: 0;
	filter: blur(20px);
	transform: translateY(30px);
	transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-blur-in.scroll-revealed {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* ========== Flip In ========== */
.scroll-flip-up {
	opacity: 0;
	transform: perspective(1000px) rotateX(90deg);
	transform-origin: bottom;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-flip-up.scroll-revealed {
	opacity: 1;
	transform: perspective(1000px) rotateX(0);
}

/* ========== Rotate In ========== */
.scroll-rotate-in {
	opacity: 0;
	transform: rotate(-15deg) scale(0.9);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-rotate-in.scroll-revealed {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* ========== Slide Bounce ========== */
.scroll-bounce-up {
	opacity: 0;
	transform: translateY(80px);
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-bounce-up.scroll-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ========== Zoom Rotate ========== */
.scroll-zoom-rotate {
	opacity: 0;
	transform: scale(0.5) rotate(45deg);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-zoom-rotate.scroll-revealed {
	opacity: 1;
	transform: scale(1) rotate(0);
}

/* ========== Clip Path Reveal ========== */
.scroll-clip-reveal {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-clip-reveal.scroll-revealed {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* ========== Glow Effect ========== */
.scroll-glow {
	opacity: 0;
	transform: translateY(30px);
	filter: drop-shadow(0 0 0 rgba(74, 157, 92, 0));
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-glow.scroll-revealed {
	opacity: 1;
	transform: translateY(0);
	filter: drop-shadow(0 0 20px rgba(74, 157, 92, 0.3));
}

/* ========== Elastic Scale ========== */
.scroll-elastic {
	opacity: 0;
	transform: scale(0.5);
	transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.scroll-elastic.scroll-revealed {
	opacity: 1;
	transform: scale(1);
}

/* ========== Slide From Corner ========== */
.scroll-corner-tl {
	opacity: 0;
	transform: translate(-50px, -50px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-corner-tl.scroll-revealed {
	opacity: 1;
	transform: translate(0, 0);
}

.scroll-corner-br {
	opacity: 0;
	transform: translate(50px, 50px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-corner-br.scroll-revealed {
	opacity: 1;
	transform: translate(0, 0);
}

/* ========== Stagger Delay Utilities ========== */
.scroll-delay-100 { transition-delay: 0.1s; }
.scroll-delay-200 { transition-delay: 0.2s; }
.scroll-delay-300 { transition-delay: 0.3s; }
.scroll-delay-400 { transition-delay: 0.4s; }
.scroll-delay-500 { transition-delay: 0.5s; }
.scroll-delay-600 { transition-delay: 0.6s; }
.scroll-delay-700 { transition-delay: 0.7s; }
.scroll-delay-800 { transition-delay: 0.8s; }
.scroll-delay-900 { transition-delay: 0.9s; }
.scroll-delay-1000 { transition-delay: 1s; }

/* ========== Duration Utilities ========== */
.scroll-duration-fast { transition-duration: 0.4s; }
.scroll-duration-normal { transition-duration: 0.8s; }
.scroll-duration-slow { transition-duration: 1.2s; }
.scroll-duration-slower { transition-duration: 1.6s; }

/* ========== Special Text Animation ========== */
.scroll-text-reveal {
	display: inline-block;
	overflow: hidden;
}

.scroll-text-reveal span {
	display: inline-block;
	transform: translateY(100%);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-text-reveal.scroll-revealed span {
	transform: translateY(0);
}

/* ========== Image Reveal ========== */
.scroll-img-reveal {
	position: relative;
	overflow: hidden;
}

.scroll-img-reveal::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #4a9d5c, #6db57e);
	transform: scaleX(1);
	transform-origin: right;
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-img-reveal.scroll-revealed::after {
	transform: scaleX(0);
}

.scroll-img-reveal img {
	opacity: 0;
	transform: scale(1.2);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.scroll-img-reveal.scroll-revealed img {
	opacity: 1;
	transform: scale(1);
}

/* ========== Floating Animation (continuous) ========== */
.scroll-float-continuous {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-float-continuous.scroll-revealed {
	opacity: 1;
	transform: translateY(0);
	animation: gentle-float 4s ease-in-out infinite;
}

@keyframes gentle-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-15px); }
}

/* ========== Pulse Glow on Reveal ========== */
.scroll-pulse-glow {
	opacity: 0;
	transform: scale(0.9);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-pulse-glow.scroll-revealed {
	opacity: 1;
	transform: scale(1);
	animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(74, 157, 92, 0.4);
	}
	50% {
		box-shadow: 0 0 30px 10px rgba(74, 157, 92, 0.2);
	}
}

/* ========== Shimmer Effect ========== */
.scroll-shimmer {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-shimmer.scroll-revealed {
	opacity: 1;
	transform: translateY(0);
	position: relative;
	overflow: hidden;
}

.scroll-shimmer.scroll-revealed::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	animation: shimmer-effect 2s ease-in-out infinite;
}

@keyframes shimmer-effect {
	0% { left: -100%; }
	100% { left: 100%; }
}

/* ========== Card Lift Animation ========== */
.scroll-card-lift {
	opacity: 0;
	transform: translateY(50px) rotateX(10deg);
	transform-style: preserve-3d;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-card-lift.scroll-revealed {
	opacity: 1;
	transform: translateY(0) rotateX(0);
}

/* ========== Cascade Animation ========== */
.scroll-cascade > * {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-cascade.scroll-revealed > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.scroll-cascade.scroll-revealed > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* ========== Photo Frame Reveal ========== */
.scroll-photo-frame {
	opacity: 0;
	transform: scale(0.8) rotate(-5deg);
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-photo-frame.scroll-revealed {
	opacity: 1;
	transform: scale(1) rotate(0);
}