@font-face {
   font-family: 'Lindsey';
   src: url('/public/fonts/lindsey-pro-regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: 'Butterfly';
   src: url('/public/fonts/my-butterfly.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: 'Tekton';
   src: url('/public/fonts/tekton-regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: 'Tekton Bold';
   src: url('/public/fonts/tekton-bold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

 .hero {
   z-index: -2;
   min-height: 100vh;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px 20px;
   background: url('/public/images/bg.png');
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: 100%;
   background-attachment: local;
   cursor: pointer;
 }

 /* ── Paper grid ── */
 .paper {
   z-index: 3;
   width: min(1120px, 100%);
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   position: relative;
   overflow: visible;
   cursor: pointer;
 }

 .mb-2 {
   margin-bottom: 20px;
 }

 .column.center::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.55);
   pointer-events: none;
   z-index: -1;
 }

 /* ── Middle column ── */
 .column.center {
   padding: 48px 34px;
   position: relative;
   text-align: center;
   z-index: -1;
   border: 1px solid grey;
   background: white;
 }

 .watercolor {
   position: absolute;
   z-index: -1;
   left: 0;
   right: 0;
   bottom: 0;
   height: 60%;
   background: linear-gradient(to top, rgba(248, 247, 245, 0.95), rgba(248, 247, 245, 0.3));
   opacity: 0.88;
   filter: saturate(0.7) brightness(1.04);
   pointer-events: none;
 }

 .blue {
   color: #5a84a0;
 }

 .center {
   text-align: center;
 }

 .bold {
   font-family: 'Tekton Bold';
   font-size: 1.45rem;
 }

 .names {
   font-family: 'Lindsey', cursive;
   font-size: clamp(2.8rem, 5vw, 4.8rem);
   color: #1f2c36;
   line-height: 1.3;
   margin-bottom: 10px;
 }

 .date {
   font-family: 'Lindsey', cursive;
   font-size: 1.5rem;
   letter-spacing: 0.06em;
   margin-bottom: 38px;
   color: #445f77;
 }

 .invite-text {
   font-size: 1.45rem;
   line-height: 1.2;
   max-width: 620px;
   margin: 0 auto;
 }

 /* ── Floating heart ── */
 .floating-heart {
   position: absolute;
   top: 7px;
   left: 0;
   right: 0;
   width: 100%;
   height: 50px;
   z-index: -1;
   background-color: #5a84a0;
   -webkit-mask-image: url('/public/images/heart.svg');
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   -webkit-mask-size: 100% 100%;
   mask-image: url('/public/images/heart.svg');
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: 100% 100%;
   pointer-events: none;
 }

 /* ════════════════════════════════════════
       FOLD ANIMATION
    ════════════════════════════════════════ */

 .fold-wrap {
   position: relative;
   overflow: visible;
 }

 .fold-wrap.left {
   perspective: 1600px;
   perspective-origin: right center;
 }

 .fold-wrap.right {
   perspective: 1600px;
   perspective-origin: left center;
 }

 .flap {
   width: 100%;
   height: 100%;
   min-height: 100%;
   position: relative;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transition: transform 1.3s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform;
 }

 .fold-wrap.left .flap {
   transform-origin: right center;
   transform: rotateY(170deg);
   border-left: 1px solid grey;
   border-top: 1px solid lightgrey;
   border-bottom: 1px solid grey;
 }

 .fold-wrap.right .flap {
   transform-origin: left center;
   transform: rotateY(-145deg);
   border-right: 1px solid grey;
   border-top: 1px solid lightgrey;
   border-bottom: 1px solid grey;
 }

 /* open states */
 .fold-wrap.left.open .flap {
   transform: rotateY(1deg);
 }

 .fold-wrap.right.open .flap {
   transform: rotateY(1deg);
 }

 /* Front face — shown while open */
 .flap-front,
 .flap-back {
   position: absolute;
   inset: 0;
   backface-visibility: hidden;
   transform: rotateY(1deg);
   -webkit-backface-visibility: hidden;
   pointer-events: auto;
 }

 .flap-front {
   background: rgba(248, 247, 245, 0.97);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   z-index: 2;
 }

 .fold-wrap.left .flap-front {
   border-right: 1px solid var(--line);
 }

 .fold-wrap.right .flap-front {
   border-left: 1px solid var(--line);
 }

 .front-heart {
   font-size: 1.6rem;
   color: #5a84a0;
   opacity: 0.65;
   line-height: 3;
   padding-left: 10px;
   padding-right: 10px;
 }

 .front-names {
   font-family: 'Lindsey', cursive;
   font-size: clamp(1.1rem, 2.5vw, 1.9rem);
   color: #5a84a0;
   text-align: center;
   line-height: 1.3;
 }

 .front-date {
   font-family: 'Lindsey', cursive;
   font-size: 0.95rem;
   color: #7a9bb5;
   letter-spacing: 0.05em;
   text-align: center;
 }

 /* Back face — the actual column content */
 .flap-back {
   transform: rotateY(180deg);
   z-index: 2;
   background: white;
   border: 1px solid grey;
   /* background: rgba(255, 255, 255, 0.55); */
   overflow: hidden;
 }

 .fold-wrap.right .flap-back {
   transform: rotateY(-180deg);
 }

 /* Inner content padding inside back faces */
 .column-inner {
   padding: 48px 34px;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
 }

 .mimi-hero {
   justify-content: space-around !important;
 }


 /* ── Quote (left column inner) ── */
 .quote {
   position: relative;
   z-index: 2;
   font-size: 1rem;
   line-height: 1.3;
   color: #5a84a0;
   font-style: italic;
   font-family: 'Lindsey', cursive;
   text-align: center;
 }

 /* ── Timeline (right column inner) ── */
 .timeline {
   position: relative;
   z-index: 2;
   display: block;
   padding: 10px 0 30px;
 }

 .timeline::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--line);
   transform: translateX(-50%);
 }

 .timeline-item {
   position: relative;
   width: 100%;
 }

 .timeline-item .event {
   width: 48%;
   padding: 15px 10px;
 }

 .timeline-item .time {
   position: absolute;
   top: 16px;
   font-size: 1.05rem;
   color: #466782;
   font-weight: 700;
   background: transparent;
   padding: 0 6px;
   white-space: nowrap;
 }

 .timeline-item:nth-child(odd) .event {
   margin-left: 52%;
   text-align: left;
 }

 .timeline-item:nth-child(odd) .time {
   right: calc(52% + 10px);
   text-align: right;
 }

 .timeline-item:nth-child(even) .event {
   margin-left: 52%;
   text-align: left;
 }

 .timeline-item:nth-child(even) .time {
   right: calc(52% + 10px);
   text-align: right;
 }

 .timeline-item::after {
   content: '';
   position: absolute;
   top: 22px;
   left: 50%;
   transform: translateX(-50%);
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #5a84a0;
   box-shadow: 0 0 0 4px rgba(90, 132, 160, 0.08);
 }

 .timeline-item h4 {
   font-family: 'Tekton Bold', serif;
   font-size: 1rem;
   font-weight: normal;
 }

 .timeline-item p {
   font-size: 0.88rem;
   color: #666;
   margin-top: 2px;
 }