.tm-root { padding: 100px 0; position: relative; overflow: hidden; min-height: 650px; display: flex; align-items: center; }
.tm-container { max-width: 900px; margin: 0 auto; z-index: 10; width: 100%; position: relative; }

/* Background Transition Logic */
.tm-bg-layers { position: absolute; inset: 0; z-index: 0; }
.tm-bg-img { 
    position: absolute; inset: 0; 
    background-size: cover; background-position: center; 
    opacity: 0; transition: opacity 1.8s ease-in-out, transform 2s ease;
    transform: scale(1.1);
}
.tm-bg-img.active { opacity: 1; transform: scale(1); }
.tm-overlay { position: absolute; inset: 0; background: hsla(var(--background) / 0.75); backdrop-filter: blur(4px); z-index: 1; }

/* Card Styling */
.tm-card-frame { 
    padding: 60px 50px; text-align: center; border-radius: 30px; 
    min-height: 400px; display: flex; align-items: center; justify-content: center;
}

.tm-content-wrapper { transition: opacity 0.5s ease, transform 0.5s ease; opacity: 1; transform: translateY(0); }
.tm-content-wrapper.switching { opacity: 0; transform: translateY(15px); }

.tm-quote-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: hsl(var(--muted-foreground)); }
.tm-quote-text { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 4vw, 32px); font-style: italic; line-height: 1.5; margin-bottom: 30px; }

.tm-author-name { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: 0.02em; }
.tm-author-role { font-size: 14px; color: hsl(var(--accent)); text-transform: uppercase; letter-spacing: 0.1em; margin: 5px 0 25px; font-weight: 500; }

.tm-stars { display: flex; justify-content: center; gap: 8px; }
.tm-star-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: hsla(var(--glass-bg) / 0.8); }
.tm-star-dot {
    box-shadow:0 3px 6px rgba(var(--shadow-dark),.6),
    inset 0 3px 0 rgba(255,255,255,1) !important;
}
.tm-header{
    text-align:center;
}

/* Dots */
.tm-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.tm-dot { width: 10px; height: 10px; border-radius: 50%; background: hsla(var(--foreground) / 0.2); cursor: pointer; transition: 0.4s; }
.tm-dot.active { width: 35px; border-radius: 10px; background: hsl(var(--accent)); }

@media (max-width: 768px) { .tm-card-frame { padding: 40px 20px; min-height: 450px; } }