/* ==========================================================================
   Wedding App – Custom Styles & Animations
   ========================================================================== */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.parisienne-regular {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
}
.alex-brush-regular {
  font-family: "Alex Brush", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ---- Base Resets ---- */
a, .btn-link { color: #006bb7; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content { padding-top: 1.1rem; }
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ---- Wedding Color Utilities ---- */
.bg-wedding-cream { background-color: #fdfbf7; }
.text-wedding-gold { color: #c4bb51; }
.bg-wedding-gold { background-color: #c4bb51; }
.border-wedding-gold { border-color: #c4bb51; }

/* ---- 3D Utilities ---- */
.perspective-1500 { perspective: 1500px; }
.transform-style-3d { transform-style: preserve-3d; }

/* ==========================================================================
   ENVELOPE ANIMATION
   ========================================================================== */

@keyframes flap-open {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(-180deg); }
}
.envelope-flap-anim {
    animation: flap-open 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top center;
}

@keyframes seal-break {
    0%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    40%  { transform: translate(-50%, -10px) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, 20px) scale(0.5) rotate(30deg); opacity: 0; }
}
.seal-break {
    animation: seal-break 0.6s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Envelope hover micro-interaction */
.envelope-container {
    transition: transform 0.3s ease;
}
.envelope-container:hover {
    transform: scale(1.03) translateY(-4px);
}

/* ==========================================================================
   HERO – Character-by-character reveal
   ========================================================================== */

@keyframes char-reveal {
    from {
        opacity: 0;
        transform: translateY(30px) rotateX(90deg);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        filter: blur(0);
    }
}
.hero-char {
    opacity: 0;
}
.hero-char.char-revealed {
    animation: char-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Gold shimmer line effect */
@keyframes shimmer-gold {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.shimmer-gold {
    background: linear-gradient(90deg, #d4af37, #f5e6a3, #d4af37, #b8942e, #d4af37);
    background-size: 200% auto;
    animation: shimmer-gold 3s linear infinite;
}

/* ==========================================================================
   COUNTDOWN – Digit flip animation
   ========================================================================== */

@keyframes digit-flip-in {
    0%   { transform: translateY(-100%); opacity: 0; }
    60%  { transform: translateY(5%); }
    100% { transform: translateY(0); opacity: 1; }
}
.countdown-digit-flip {
    animation: digit-flip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Seconds continuous subtle pulse */
@keyframes seconds-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.countdown-seconds-pulse {
    animation: seconds-pulse 1s ease-in-out infinite;
}

/* ==========================================================================
   PROGRAMMA – Timeline dot glow
   ========================================================================== */

@keyframes timeline-dot-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
}
.timeline-dot {
    animation: timeline-dot-glow 2s ease-in-out infinite;
}

/* ==========================================================================
   SCROLL-DOWN indicator bounce
   ========================================================================== */

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
.scroll-indicator {
    animation: bounce-gentle 2s ease-in-out infinite;
}

/* ==========================================================================
   AUDIO BUTTON – Equalizer bars animation
   ========================================================================== */

@keyframes eq-bar {
    0%, 100% { height: 4px; }
    50%      { height: 14px; }
}
.eq-bar {
    display: inline-block;
    width: 3px;
    background: currentColor;
    border-radius: 2px;
    animation: eq-bar 0.8s ease-in-out infinite;
}
.eq-bar:nth-child(2) { animation-delay: 0.15s; }
.eq-bar:nth-child(3) { animation-delay: 0.3s; }
.eq-bar:nth-child(4) { animation-delay: 0.45s; }