@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    :root {
        --theme-primary: #ffdd53;
        --theme-secondary: #f7c808;
        --theme-neutral: #ffffff;
        --theme-secondary-neutral: #dadada;
        --theme-primary-text: #7b621b;
        --theme-secondary-text: #777777;
        --theme-primary-text-inverted: #ffffff;
        --theme-secondary-text-inverted: #ffffff;
        --theme-gold-primary: #d4af37;
        --theme-gold-secondary: #e8c660;
        --theme-gold-tertiary: #fce281;
        --theme-gold-text: #5c4b14;
        --theme-gold-text-light: #735e1d;
        --theme-gold-text-dark: #4a3a10;
        --theme-surface-light: #fffdf5;
        --theme-surface-medium: #f4ecd8;
        --theme-primary-rgb: 255, 221, 83;
        --theme-secondary-rgb: 247, 200, 8;
        --theme-gold-primary-rgb: 212, 175, 55;
    }

    .bg-contain-center {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@keyframes pendulum-anim {
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}
.pendulum {
    animation: pendulum-anim 1.5s ease-in-out infinite alternate;
    transform-origin: top center;
}

@keyframes breath-animation {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4)); }
    50% { transform: scale(1.03); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4)); }
}
.breath-animation {
    animation: breath-animation 3s ease-in-out infinite;
}

.decoration-hover {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
.decoration-hover:hover {
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) !important;
}

/* Aspect ratio fix for main container to be exactly 9:16 max */
.base-layout {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 56.25vh; /* fallback */
    max-width: calc(100dvh * 9 / 16);
    max-height: 177.78vw;
    margin: auto;
}

/* Fade Out transition */
.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s;
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn-estella {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    padding: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-estella:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Modal Custom Classes */
.wrapper-modal { width: 100%; display: flex; justify-content: center; }
.decoration-size-modal { width: 150px; height: auto; margin: 0 auto; }
.title-paragraph-modal { font-size: 1.1rem; font-weight: bold; color: var(--theme-gold-text-light); }
.paragraph-text { color: #cccccc; }
.countdown-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border: 1px solid rgba(var(--theme-gold-primary-rgb), 0.3); border-radius: 8px; padding: 10px 5px; }
.countdown-number { font-size: 1.5rem; font-weight: bold; color: var(--theme-gold-text-light); }
.countdown-label { font-size: 0.75rem; color: var(--theme-gold-text); }
.event-badge { border: 1px solid rgba(var(--theme-gold-primary-rgb), 0.4); border-radius: 8px; overflow: hidden; }
.event-badge__header { background: rgba(var(--theme-gold-primary-rgb), 0.2); padding: 5px; }
.event-badge__body { background: rgba(0,0,0,0.3); padding: 10px; }

/* Hint Active Mode for Interactive Hotspots */
.hint-active img {
    /* solid white stroke using multiple drop shadows to follow irregular image boundaries */
    filter: drop-shadow(0 -2px 0 #ffffff) drop-shadow(0 2px 0 #ffffff) drop-shadow(2px 0 0 #ffffff) drop-shadow(-2px 0 0 #ffffff);
}

/* MOBA-style Live Chat */
.mask-chat {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.comment-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(var(--theme-gold-primary-rgb), 0.1);
    border: 1px solid rgba(var(--theme-gold-primary-rgb), 0.3);
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition: background 0.3s ease;
}
.comment-card:hover {
    background: rgba(var(--theme-gold-primary-rgb), 0.2);
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.comment-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--theme-gold-text-dark);
    font-size: 0.875rem;
}
.comment-name {
    color: var(--theme-gold-text);
}
.comment-attendance {
    font-size: 0.75rem;
    background: rgba(var(--theme-gold-primary-rgb), 0.2);
    color: var(--theme-gold-text-dark);
    padding: 2px 6px;
    border-radius: 0.5rem;
}
.comment-text {
    font-size: 0.813rem;
    color: var(--theme-gold-text);
    line-height: 1.3;
    word-break: break-word;
}
/* RSVP Confirmation Modal */
.modal-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}
.modal-confirmation .ph {
    font-size: 2rem;
    color: var(--theme-gold-primary);
}