/* THEME: Rustic Countryside — kraft paper, wood-brown, burlap & twine, barn-wedding warmth */
:root{
  --color-bg: #f3e6cb;
  --color-surface: #fbf3e2;
  --color-text: #3e2c1b;
  --color-text-soft: #7a5c3e;
  --color-primary: #a97142;
  --color-secondary: #7c9070;
  --color-accent: #6b3f28;
  --color-line: rgba(107,63,40,.32);
  --font-heading: 'Bevan', 'Georgia', serif;
  --font-script: 'Yellowtail', cursive;
  --font-body: 'Vollkorn', serif;
}

body{ background: #241a10; }

/* ---------- Burlap-weave + wood-grain texture (CSS gradients only) ---------- */
.frame{
  background-color: var(--color-bg);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(107,63,40,.06) 0px, rgba(107,63,40,.06) 1px, transparent 1px, transparent 5px),
    radial-gradient(circle at 10% 6%, rgba(124,144,112,.10), transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(169,113,66,.13), transparent 36%),
    radial-gradient(circle at 6% 32%, rgba(169,113,66,.11), transparent 34%),
    radial-gradient(circle at 94% 46%, rgba(124,144,112,.13), transparent 36%),
    radial-gradient(circle at 8% 60%, rgba(124,144,112,.11), transparent 34%),
    radial-gradient(circle at 92% 74%, rgba(169,113,66,.13), transparent 36%),
    radial-gradient(circle at 10% 88%, rgba(124,144,112,.11), transparent 34%),
    radial-gradient(circle at 92% 96%, rgba(169,113,66,.14), transparent 45%);
}
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .65;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%237c9070' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M22 138 L22 96'/%3E%3Cpath d='M22 106 L15 98'/%3E%3Cpath d='M22 106 L29 98'/%3E%3Cpath d='M22 116 L15 108'/%3E%3Cpath d='M22 116 L29 108'/%3E%3Cpath d='M22 126 L15 118'/%3E%3Cpath d='M22 126 L29 118'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a97142' stroke-width='1.3'%3E%3Cpath d='M118 34 q9 -11 18 0 q-9 11 -18 0'/%3E%3C/g%3E%3Cg fill='%23a97142'%3E%3Ccircle cx='118' cy='34' r='2.2'/%3E%3Ccircle cx='136' cy='34' r='2.2'/%3E%3C/g%3E%3Ccircle cx='80' cy='78' r='2' fill='%236b3f28' opacity='.5'/%3E%3Ccircle cx='45' cy='60' r='1.6' fill='%237c9070' opacity='.6'/%3E%3Ccircle cx='140' cy='110' r='1.6' fill='%237c9070' opacity='.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg stroke='%23a97142' stroke-width='1' opacity='.3'%3E%3Cpath d='M0 9 H36 M0 27 H36'/%3E%3Cpath d='M9 0 V36 M27 0 V36'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 160px 160px, 36px 36px;
  background-position: 0 0, 0 0;
}

.cover{
  background-color: var(--color-bg);
  background-image:
    repeating-linear-gradient(90deg, rgba(107,63,40,.05) 0px, rgba(107,63,40,.05) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse at 30% 100px, rgba(139,90,60,.10), transparent 55%),
    radial-gradient(ellipse at 70% calc(100% - 100px), rgba(124,144,112,.12), transparent 55%);
}
.cover::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%237c9070' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M22 138 L22 96'/%3E%3Cpath d='M22 106 L15 98'/%3E%3Cpath d='M22 106 L29 98'/%3E%3Cpath d='M22 116 L15 108'/%3E%3Cpath d='M22 116 L29 108'/%3E%3Cpath d='M22 126 L15 118'/%3E%3Cpath d='M22 126 L29 118'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a97142' stroke-width='1.3'%3E%3Cpath d='M118 34 q9 -11 18 0 q-9 11 -18 0'/%3E%3C/g%3E%3Cg fill='%23a97142'%3E%3Ccircle cx='118' cy='34' r='2.2'/%3E%3Ccircle cx='136' cy='34' r='2.2'/%3E%3C/g%3E%3Ccircle cx='80' cy='78' r='2' fill='%236b3f28' opacity='.5'/%3E%3Ccircle cx='45' cy='60' r='1.6' fill='%237c9070' opacity='.6'/%3E%3Ccircle cx='140' cy='110' r='1.6' fill='%237c9070' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* ---------- Wax-seal / wood-button monogram near the couple names ---------- */
.cover__seal{
  width: clamp(44px, 11vh, 64px);
  height: clamp(44px, 11vh, 64px);
  flex: none;
  margin: 0 auto clamp(8px, 1.8vh, 14px);
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-script);
  font-size: clamp(17px, 4.4vw, 24px);
  color: #f3e6cb;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.25), transparent 45%),
    radial-gradient(circle, #8a5a3a 0%, var(--color-accent) 70%, #4d2c1a 100%);
  box-shadow:
    0 6px 14px -4px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(243,230,203,.35),
    inset 0 0 0 5px rgba(107,63,40,.3);
  position: relative;
}
.cover__seal::before{
  content:'';
  position:absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(107,63,40,.4);
}

.section{ border-bottom: none; }

/* Small leaf-sprig corner accents so every section carries a bit of decoration while scrolling */
.section::before, .section::after{
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  background-repeat: no-repeat;
  background-size: contain;
}
.section::before{
  top: 14px;
  left: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M6 54 Q6 30 26 12' stroke='%237c9070' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 40 Q20 34 16 24 Q26 30 20 40Z' fill='%237c9070'/%3E%3Cpath d='M8 24 Q16 20 14 12 Q22 18 16 26Z' fill='%237c9070'/%3E%3C/svg%3E");
}
.section::after{
  bottom: 14px;
  right: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='3' fill='%23a97142'/%3E%3Cpath d='M30 30 q10 -12 20 -6' stroke='%23a97142' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='24' r='2.4' fill='%23a97142'/%3E%3Cpath d='M30 30 q4 14 -6 20' stroke='%236b3f28' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='50' r='2' fill='%236b3f28'/%3E%3C/svg%3E");
}
.section:nth-of-type(even)::before{ transform: scaleX(-1); }
.section:nth-of-type(even)::after{ transform: scaleY(-1); }

/* Branch / leaf line-art accent under section titles (inline SVG, no external assets) */
.section__title::after{
  content:'';
  display:block;
  width: 56px;
  height: 18px;
  margin: 12px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M2 10 H58' stroke='%237c9070' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 10 Q22 2 31 4 Q25 9 18 10Z' fill='%237c9070'/%3E%3Cpath d='M40 10 Q44 18 35 16 Q39 12 40 10Z' fill='%237c9070'/%3E%3Ccircle cx='6' cy='10' r='2.2' fill='%23a97142'/%3E%3Ccircle cx='54' cy='10' r='2.2' fill='%23a97142'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Stitched twine borders on cards ---------- */
.event-card, .gift-card, .wish-card, .countdown__item{
  background: var(--color-surface);
  border: 2px dashed var(--color-primary);
  box-shadow: 0 12px 26px -18px rgba(62,44,27,.55);
  position: relative;
}
.event-card::before, .event-card::after,
.gift-card::before, .gift-card::after,
.wish-card::before, .wish-card::after{
  content:'';
  position:absolute;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(45deg, transparent 44%, var(--color-accent) 44%, var(--color-accent) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--color-accent) 44%, var(--color-accent) 56%, transparent 56%);
  opacity:.55;
}
.event-card::before, .gift-card::before, .wish-card::before{ top: 7px; left: 7px; }
.event-card::after, .gift-card::after, .wish-card::after{ bottom: 7px; right: 7px; }

.countdown__item{ border-radius: 10px; }

.section__eyebrow{
  position: relative;
}

/* ---------- Couple photos: wood-frame + hanging twine button ---------- */
.couple__photo{
  border-color: var(--color-surface);
  border-width: 6px;
  box-shadow:
    0 14px 30px -14px rgba(62,44,27,.55),
    0 0 0 2px var(--color-line);
}
.couple__person{ position: relative; }
.couple__person::before{
  content:'';
  display:block;
  width: 18px;
  height: 18px;
  margin: 0 auto -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c79a6a, var(--color-primary) 70%);
  box-shadow: inset 0 0 0 2px rgba(107,63,40,.5), 0 3px 6px rgba(0,0,0,.35);
  position: relative;
  z-index: 2;
}

.couple__divider{ color: var(--color-secondary); }

.btn-open{
  border: 2px dashed var(--color-accent);
  background: rgba(251,243,226,.5);
}
.btn-open:hover{ background: var(--color-accent); }

.gallery__item{
  box-shadow: 0 8px 18px -12px rgba(62,44,27,.55);
  filter: sepia(.12) saturate(1.05);
}

.video-box{
  border: 2px dashed var(--color-primary);
}

.footer{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 5px),
    linear-gradient(180deg, transparent, rgba(107,63,40,.12));
  position: relative;
}
.footer::before, .footer::after{
  content: '';
  position: absolute;
  width: 74px;
  height: 74px;
  pointer-events: none;
  z-index: -1;
  opacity: .45;
  background-repeat: no-repeat;
  background-size: contain;
}
.footer::before{
  top: 6px;
  left: 2%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M6 54 Q6 30 26 12' stroke='%237c9070' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 40 Q20 34 16 24 Q26 30 20 40Z' fill='%237c9070'/%3E%3Cpath d='M8 24 Q16 20 14 12 Q22 18 16 26Z' fill='%237c9070'/%3E%3C/svg%3E");
}
.footer::after{
  top: 6px;
  right: 2%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='3' fill='%23a97142'/%3E%3Cpath d='M30 30 q10 -12 20 -6' stroke='%23a97142' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='24' r='2.4' fill='%23a97142'/%3E%3Cpath d='M30 30 q4 14 -6 20' stroke='%236b3f28' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='50' r='2' fill='%236b3f28'/%3E%3C/svg%3E");
  transform: scaleX(-1);
}

.rsvp-form input, .rsvp-form select, .rsvp-form textarea{
  border: 2px dashed var(--color-line);
  background: var(--color-surface);
}

.music-toggle{
  border: 2px dashed var(--color-primary);
}

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so the wash
   of color flows continuously kraft-brown -> sage -> wood down the whole page.
   ========================================================================== */
/* Note: nth-of-type(7) is the video section — it's hidden (display:none) in
   dynamically-rendered invitations when no video is set, so it stays a flat
   continuation of C5 rather than introducing a new stop. That way the wash
   stays seamless whether or not the video section actually renders. */
.section:nth-of-type(1){ background: linear-gradient(180deg, transparent, rgba(169,113,66,.10)); }           /* hero -> C1 kraft */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(169,113,66,.10), rgba(124,144,112,.12)); } /* C1 -> C2 sage */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(124,144,112,.12), rgba(107,63,40,.09)); }  /* C2 -> C3 wood */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(107,63,40,.09), rgba(169,113,66,.13)); }   /* C3 -> C4 kraft */
.section:nth-of-type(5){ background: rgba(169,113,66,.13); }                                                  /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(169,113,66,.13), rgba(124,144,112,.10)); } /* C4 -> C5 sage */
.section:nth-of-type(7){ background: rgba(124,144,112,.10); }                                                 /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(124,144,112,.10), rgba(107,63,40,.12)); }  /* C5 -> C6 wood */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(107,63,40,.12), transparent); }             /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — a grounded, "settling into place" reveal (like a wood
   ornament or hung twine coming to rest) instead of a delicate floral bounce,
   plus slow, organic ambient sway/glow on the rustic decorative accents.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(30px) scale(.95) rotate(-2deg);
  transform-origin: top center;
  transition: opacity 1.5s cubic-bezier(.22,.9,.32,1), transform 1.5s cubic-bezier(.22,.9,.32,1);
}
.reveal.in{ opacity: 1; transform: translateY(0) scale(1) rotate(0); }

.countdown__item.reveal{ transition-delay: calc(var(--i, 0) * 110ms); }

.gallery__item.reveal{ transition-delay: calc(var(--i, 0) * 70ms); }
.gallery__item:nth-child(1){ --i: 0; } .gallery__item:nth-child(2){ --i: 1; } .gallery__item:nth-child(3){ --i: 2; }
.gallery__item:nth-child(4){ --i: 3; } .gallery__item:nth-child(5){ --i: 4; } .gallery__item:nth-child(6){ --i: 5; }
.gallery__item:nth-child(7){ --i: 6; } .gallery__item:nth-child(8){ --i: 7; } .gallery__item:nth-child(9){ --i: 8; }

.story__item.reveal{ transition-delay: calc(var(--i, 0) * 120ms); }
.story__item:nth-child(1){ --i: 0; } .story__item:nth-child(2){ --i: 1; }
.story__item:nth-child(3){ --i: 2; } .story__item:nth-child(4){ --i: 3; }

/* Corner leaf-sprig accents drift gently, like foliage stirred by a breeze.
   Flip variants preserve the existing static mirroring on even sections and
   on footer::after, since an animation's transform fully replaces the
   cascaded (static) transform value while it runs. */
@keyframes leafDrift{
  0%, 100%{ transform: translate(0,0) rotate(-3deg); }
  50%{ transform: translate(4px, -6px) rotate(3deg); }
}
@keyframes leafDriftFlipX{
  0%, 100%{ transform: scaleX(-1) translate(0,0) rotate(-3deg); }
  50%{ transform: scaleX(-1) translate(4px, -6px) rotate(3deg); }
}
@keyframes leafDriftFlipY{
  0%, 100%{ transform: scaleY(-1) translate(0,0) rotate(-3deg); }
  50%{ transform: scaleY(-1) translate(4px, -6px) rotate(3deg); }
}
.section::before, .section::after, .footer::before, .footer::after{ animation: leafDrift 8s ease-in-out infinite; }
.section::after, .footer::after{ animation-delay: -4s; }
.section:nth-of-type(even)::before{ animation-name: leafDriftFlipX; }
.section:nth-of-type(even)::after{ animation-name: leafDriftFlipY; }
.footer::after{ animation-name: leafDriftFlipX; }

/* Branch/leaf accent under section titles sways like a hanging twine sprig */
@keyframes twineSway{
  0%, 100%{ transform: rotate(-5deg); }
  50%{ transform: rotate(5deg); }
}
.section__title::after{ transform-origin: top center; animation: twineSway 6s ease-in-out infinite; }

/* Countdown items breathe with a warm, firelit glow */
@keyframes woodGlow{
  0%, 100%{ transform: scale(1); box-shadow: 0 12px 26px -18px rgba(62,44,27,.55); }
  50%{ transform: scale(1.035); box-shadow: 0 16px 32px -14px rgba(169,113,66,.6); }
}
.countdown__item{ animation: woodGlow 3.6s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: .15s; }
.countdown__item:nth-child(3){ animation-delay: .3s; }
.countdown__item:nth-child(4){ animation-delay: .45s; }

.couple__photo{ transition: transform .5s ease, box-shadow .5s ease; }
.couple__person:hover .couple__photo{
  transform: scale(1.04) rotate(-1deg);
  box-shadow: 0 18px 36px -14px rgba(62,44,27,.65), 0 0 0 2px var(--color-line);
}

.gallery__item{ transition: transform .4s ease, box-shadow .4s ease, filter .4s ease; }
.gallery__item:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 30px -14px rgba(62,44,27,.6);
  filter: sepia(.05) saturate(1.1);
}

/* ==========================================================================
   FLOATING GRAPHICS — small leaf-sprig & twine-berry ornaments gently
   swaying in each section, like foliage and hanging twine stirred by a
   breeze on a barn/countryside table. Purely visual, non-interactive.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(62,44,27,.28));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

@keyframes floatSwayA{
  0%, 100%{ transform: translateY(0) rotate(-5deg); }
  50%{ transform: translateY(-14px) rotate(7deg); }
}
@keyframes floatSwayB{
  0%, 100%{ transform: translateY(0) rotate(4deg); }
  50%{ transform: translateY(-9px) rotate(-7deg); }
}
@keyframes floatSwayC{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  33%{ transform: translate(4px,-8px) rotate(4deg); }
  66%{ transform: translate(-4px,-3px) rotate(-4deg); }
}
.deco-float.anim-a{ animation: floatSwayA 9.4s ease-in-out infinite; }
.deco-float.anim-b{ animation: floatSwayB 11s ease-in-out infinite; }
.deco-float.anim-c{ animation: floatSwayC 12.5s ease-in-out infinite; }

@keyframes floatDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-3deg) scale(1); }
  50%{ transform: translate(-6px,-14px) rotate(6deg) scale(1.06); }
}
@keyframes swingE{
  0%, 100%{ transform: rotate(-6deg); }
  50%{ transform: rotate(6deg); }
}
@keyframes twinkleF{
  0%, 100%{ transform: scale(.75) rotate(0deg); opacity:.4; }
  50%{ transform: scale(1.2) rotate(12deg); opacity:1; }
}
.deco-float.anim-d{ animation: floatDriftD 13s ease-in-out infinite; }
.deco-float.anim-e{ transform-origin: top center; animation: swingE 10.5s ease-in-out infinite; }
.deco-float.anim-f{ animation: twinkleF 4.2s ease-in-out infinite; }

/* ==========================================================================
   FALLING CHAFF — wheat husks, oat chaff and tiny wood-grain leaves drifting
   slowly down the whole viewport, like grain dust in a barn loft. Purely
   decorative, sits above the background but never blocks interaction.
   ========================================================================== */
.petals-overlay{
  position: fixed;
  inset: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  z-index: 350;
}
.petal{
  position: absolute;
  top: -8%;
  will-change: transform;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.petal svg{ width:100%; height:100%; display:block; }
@keyframes petalFall{
  0%{ transform: translate(0,0) rotate(0deg); }
  100%{ transform: translate(var(--drift, 20px), 118vh) rotate(var(--spin, 320deg)); }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-accent));
  z-index: 600;
  transition: width .1s linear;
}

/* ---------- Countdown tick pulse ---------- */
@keyframes countTick{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.28) rotate(-3deg); color: var(--color-accent); }
  60%{ transform: scale(.94) rotate(2deg); }
  100%{ transform: scale(1) rotate(0); }
}
.countdown__num.is-ticking{ animation: countTick .5s ease-out; transform-origin: center; }

/* ---------- Hero names shimmer (targets the name spans directly, not the
   wrapping div, since background-clip:text needs the text on the same
   element and -webkit-text-fill-color would otherwise inherit into the
   "&" divider and make it invisible too). Warm kraft highlight passing
   through, like sunlight catching wood grain. ---------- */
.hero__names span{
  background: linear-gradient(100deg, var(--color-accent) 30%, var(--color-primary) 42%, var(--color-bg) 50%, var(--color-primary) 58%, var(--color-accent) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 7.5s linear infinite;
}
@keyframes shimmerText{
  0%{ background-position: 200% 0; }
  100%{ background-position: -50% 0; }
}

/* ==========================================================================
   VARIATIVE REVEAL DIRECTIONS — sections no longer all reveal the same way.
   ========================================================================== */
.reveal--left{ transform: scale(.94) translateX(-38px) rotate(-3deg); }
.reveal--left.in{ transform: scale(1) translateX(0) rotate(0); }
.reveal--right{ transform: scale(.94) translateX(38px) rotate(3deg); }
.reveal--right.in{ transform: scale(1) translateX(0) rotate(0); }
.reveal--zoom{ transform: scale(.6) rotate(-4deg); }
.reveal--zoom.in{ transform: scale(1) rotate(0); }
.reveal--flip{ transform: perspective(600px) rotateX(35deg) translateY(20px); }
.reveal--flip.in{ transform: perspective(600px) rotateX(0) translateY(0); }

.hero__names span.reveal{ display: inline-block; }

/* ==========================================================================
   SECTION TITLE — its own signature motion: text rises up through a mask
   like a curtain lifting, independent of the generic .reveal fade used
   everywhere else, so every section announces itself a little differently.
   ========================================================================== */
.section__title__mask{ display: block; overflow: hidden; }
.section__title__inner{
  display: block;
  transform: translateY(112%);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.section__title.reveal{ transform: none; transition: opacity .7s ease; }
.section__title.reveal.in{ transform: none; }
.section__title.reveal.in .section__title__inner{ transform: translateY(0); }

/* ==========================================================================
   PHOTO GRID — every photo is on screen at once; the mosaic layout itself
   lives in base.css. This only adds the template's own depth and hover so
   the tiles still belong to this design. Prev/next moved into the lightbox,
   which opens when a tile is tapped.
   ========================================================================== */
.gallery__item{ transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.gallery__item:hover{ transform: translateY(-3px); }

.event-card.reveal{ transition-delay: calc(var(--i,0) * 90ms); }
.event-card:nth-of-type(odd).reveal{ transform: scale(.95) translateX(-30px) rotate(-2deg); }
.event-card:nth-of-type(odd).reveal.in{ transform: scale(1) translateX(0) rotate(0); }
.event-card:nth-of-type(even).reveal{ transform: scale(.95) translateX(30px) rotate(2deg); }
.event-card:nth-of-type(even).reveal.in{ transform: scale(1) translateX(0) rotate(0); }

.story__item:nth-child(odd).reveal{ transform: scale(.94) translateX(-24px) rotate(-2deg); }
.story__item:nth-child(odd).reveal.in{ transform: scale(1) translateX(0) rotate(0); }
.story__item:nth-child(even).reveal{ transform: scale(.94) translateX(24px) rotate(2deg); }
.story__item:nth-child(even).reveal.in{ transform: scale(1) translateX(0) rotate(0); }

@media (max-width: 420px){
  .deco-float{ transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce){
  .section::before, .section::after, .footer::before, .footer::after,
  .section__title::after, .countdown__item, .deco-float,
  .petal, .hero__names span, .countdown__num.is-ticking{ animation: none !important; }
  .reveal, .reveal--left, .reveal--right, .reveal--zoom, .reveal--flip,
  .section__title__inner, .gallery__item{ transition-duration: .01ms !important; }
  .petals-overlay{ display: none; }
}

/* === THEMED MOTION (generated) === */
.cover{
  --open-wash: radial-gradient(circle at 50% 55%, rgba(251,243,226,.95), rgba(169,113,66,.45) 46%, transparent 72%);
  --cover-exit: translateY(-100%) rotate(.8deg) scale(1.04);
}

/* The wax seal presses into the cover on arrival. */
@keyframes sealPress{
  0%{ opacity: 0; transform: scale(1.5) rotate(-12deg); }
  70%{ opacity: 1; transform: scale(.94) rotate(2deg); }
  100%{ opacity: 1; transform: scale(1) rotate(0); }
}
.js-motion .cover__seal{ animation: sealPress 1.1s .2s both cubic-bezier(.3,1.4,.5,1); }

/* Hanging sprigs swing from their top edge rather than drifting. */
@keyframes twineSwing{
  0%, 100%{ transform: rotate(-5deg); }
  50%{ transform: rotate(5deg); }
}
.deco-float.anim-b{ transform-origin: 50% 0; animation-name: twineSwing; animation-duration: 6.5s; }

/* Cards settle like laid-down wood, with a slight tilt on hover. */
.event-card, .gift-card, .wish-card{
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.event-card:hover, .gift-card:hover{
  transform: translateY(-5px) rotate(-.6deg);
  box-shadow: 0 20px 32px -20px rgba(62,44,27,.6);
}

/* The countdown boxes breathe like they are hanging on a board. */
@keyframes boardSway{
  0%, 100%{ transform: rotate(-.8deg) translateY(0); }
  50%{ transform: rotate(.8deg) translateY(-3px); }
}
.countdown__item{ animation: boardSway 5.5s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: -1.2s; }
.countdown__item:nth-child(3){ animation-delay: -2.4s; }
.countdown__item:nth-child(4){ animation-delay: -3.6s; }

@media (prefers-reduced-motion: reduce){
  .js-motion .cover__seal, .countdown__item{ animation: none !important; }
}
/* === /THEMED MOTION === */

/* ==========================================================================
   READABILITY — palette corrections so no line of copy blends into the art.

   The worst offender of the whole set lived here: the shimmer filling the
   couple's names used var(--color-bg) as its highlight stop, so the band
   was literally the page colour and the first word of each name ("Eko",
   "Intan") vanished completely as it swept past. The sage "&" between the
   portraits was --color-secondary at 2.8:1, and the tan --color-primary
   carried the eyebrows and dates at 3.1:1.

   Everything below is tuned against the page as it actually *renders*, not
   against --color-bg. The frame's tint pools, the section wash and the
   repeating pattern stack up, so the real paper behind the copy measures
   about rgb(214,197,166) — appreciably darker than the nominal background
   this palette was originally picked against.

   The palette variables themselves keep their values everywhere they fill,
   border or back something — only the text roles move, onto the --ink-*
   companions declared below.
   ========================================================================== */
:root{
  --color-text-soft: #5f4830;   /* the body tone, deepened to 4.5:1 on the rendered paper */
  --ink-primary: #664428;       /* text-only companion to --color-primary */
}

.section__eyebrow,
.hero__quote-src,
.hero__amp,
.couple__ig,
.story__date,
.rundown__time,
.gift-card__bank,
.wish-card__status,
.footer__hashtag{ color: var(--ink-primary); }

/* The "&" between the two portraits was set in --color-secondary, a sage
   green sitting at 2.8:1 on this paper. */
.couple__divider{ color: var(--ink-primary); }

.hero__names span{
  background-image: linear-gradient(100deg,
    #472a1a 30%,
    #583421 42%,
    var(--color-accent) 50%,
    #583421 58%,
    #472a1a 70%);
  background-size: 250% 100%;
}

.frame::before{ opacity: .32; }

/* === PERFORMANCE (iOS Safari) ===
   Safari on iPhone blanks the page (black screen) or tears while scrolling
   once too many large composited layers are animating at the same time. The
   Musim/Keagamaan templates never hit that limit, so these rules bring this
   template onto the same budget: the big storybook scenes stay still, and
   nothing that spans the whole page is animated. */
.deco-float.is-scene{ animation: none; }
.frame::before{ animation: none !important; }
/* === /PERFORMANCE === */